@getflip/swirl-components-react 0.452.1 → 0.453.0

package/dist/swirl-app-layout.entry.133a6b01.js

@@ -0,0 +1,200 @@
+import { r as b, c as e, h as a, H as c, g } from "./index.0118a769.js";
+import { c as m } from "./index-orsBiyT_.fc4357c3.js";
+import { D as h } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import { d as p, i as l, p as s } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const v = () => ':host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"body"     "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"       "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(               to right,               rgba(0, 0, 0, 0.05) 0,               rgba(0, 0, 0, 0) 80%,               rgba(0, 0, 0, 0) 100%             );content:""}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"           "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"       "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{position:static;width:25rem;z-index:auto;box-shadow:none;animation:none}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"           "navigation body sidebar"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);z-index:3}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners){border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"         "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"         "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"         "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:"app-bar"       "banner"       "content"       "bottom-bar"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block;padding-bottom:env(safe-area-inset-bottom, 0)}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"       "content"       "bottom-bar"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom) .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)}.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"     "banner"     "content";background-color:var(--s-background-default)}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;grid-area:content}.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"     "sidebar-content";background-color:var(--s-background-default)}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;grid-area:sidebar-content}@media (min-width: 768px){.app-layout--rounded-corners .app-layout__grid{-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8)}.app-layout--rounded-corners .app-layout__header{border-right:none;border-radius:var(--s-border-radius-l) var(--s-border-radius-l) 0 0}.app-layout--rounded-corners .app-layout__navigation{border-right:none;border-radius:0 0 var(--s-border-radius-l) var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__body,.app-layout--rounded-corners .app-layout__sidebar{border-radius:var(--s-border-radius-l);overflow:hidden}.app-layout--rounded-corners .app-layout__sidebar{border-left:none;box-shadow:-12px 0 32px -10px rgba(23, 23, 23, 0.12), -8px 4px 12px -8px rgba(23, 23, 23, 0.08)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(50%, 25rem);z-index:3;border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"           "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}', _ = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE", f = class {
+  constructor(t) {
+    b(this, t), this.ctaClick = e(this, "ctaClick", 7), this.mobileViewChange = e(this, "mobileViewChange", 7), this.navigationBackButtonClick = e(this, "navigationBackButtonClick", 7), this.navigationExpansionStateChange = e(this, "navigationExpansionStateChange", 7), this.sidebarToggle = e(this, "sidebarToggle", 7), this.backToNavigationViewButtonLabel = "Back to navigation", this.navigationBackButtonLabel = "Go back", this.navigationExpansionStateStorageKey = _, this.navigationToggleLabel = "Toggle navigation", this.navigationOverlayLabel = "Show navigation", this.sidebarPositioning = "auto", this.sidebarCloseButtonLabel = "Close sidebar", this.transitionStyle = "slides", this.contentScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1,
+      scrolledToBottom: !1
+    }, this.mobileView = "navigation", this.navScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1
+    }, this.navExpansionState = "expanded", this.sidebarScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1
+    }, this.mediaQueryUnsubscribe = () => {
+    }, this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    }, this.onCtaClick = (o) => {
+      this.ctaClick.emit(o);
+    }, this.onNavigationBackButtonClick = (o) => {
+      this.navigationBackButtonClick.emit(o);
+    }, this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    }, this.onContentScroll = p(() => {
+      this.updateContentScrollState();
+    }, 16), this.onNavScroll = p(() => {
+      this.updateNavScrollState();
+    }, 16), this.onSidebarScroll = p(() => {
+      this.updateSidebarScrollState();
+    }, 16), this.toggleNavigation = () => {
+      if (!this.collapsibleNavigation)
+        return;
+      const o = this.navExpansionState === "expanded" ? "collapsed" : "expanded";
+      this.setCollapsibleNavigationState(o);
+    }, this.overlayNavigation = (o) => {
+      o.stopPropagation(), this.setCollapsibleNavigationState("overlayed");
+    };
+  }
+  componentWillLoad() {
+    this.initialMobileView && (this.mobileView = this.initialMobileView), this.mutationObserver = new MutationObserver(() => {
+      this.updateBottomBarStatus(), this.updateCustomAppBarBackButtonStatus(), this.updateNavigationStatus(), this.updateSidebarStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateBottomBarStatus(), this.updateCustomAppBarBackButtonStatus(), this.updateSidebarStatus(), this.updateNavigationStatus(), this.checkMobileView();
+    });
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = h.subscribe((t) => {
+      this.isDesktop = t;
+    }), queueMicrotask(() => {
+      this.restoreNavExpansionState(), this.updateContentScrollState(), this.updateSidebarScrollState(), this.updateNavScrollState();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    this.mediaQueryUnsubscribe(), (t = this.mutationObserver) == null || t.disconnect();
+  }
+  onDocumentClick(t) {
+    if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed")
+      return;
+    t.composedPath().includes(this.navEl) || t.composedPath().includes(this.headerEl) || this.setCollapsibleNavigationState("collapsed");
+  }
+  onKeyDown(t) {
+    t.key === "Escape" && this.navExpansionState === "overlayed" && this.setCollapsibleNavigationState("collapsed");
+  }
+  watchMobileView() {
+    this.checkMobileView();
+  }
+  async showSidebar() {
+    if (this.sidebarActive || !this.hasSidebar)
+      return;
+    Boolean(this.sidebarOpeningTimeout) && clearTimeout(this.sidebarOpeningTimeout), this.sidebarOpening = !0;
+    const t = l() || s() ? 0 : 300;
+    this.sidebarOpeningTimeout = setTimeout(() => {
+      this.sidebarActive = !0, this.sidebarOpening = !1, this.changeMobileView("sidebar"), this.sidebarToggle.emit(!0);
+    }, t);
+  }
+  async hideSidebar() {
+    if (!this.sidebarActive || !this.hasSidebar)
+      return;
+    Boolean(this.sidebarClosingTimeout) && clearTimeout(this.sidebarClosingTimeout), this.sidebarClosing = !0;
+    const t = l() || s() ? 0 : 300 - 10;
+    this.sidebarClosingTimeout = setTimeout(() => {
+      this.sidebarActive = !1, this.sidebarClosing = !1, this.changeMobileView("body"), this.sidebarToggle.emit(!1);
+    }, t);
+  }
+  async toggleSidebar() {
+    !this.hasSidebar || (this.sidebarActive ? this.hideSidebar() : this.showSidebar());
+  }
+  async getCollapsibleNavigationState() {
+    return this.navExpansionState;
+  }
+  async setCollapsibleNavigationState(t) {
+    !this.collapsibleNavigation || (this.navExpansionState = t, this.navigationExpansionStateChange.emit(this.navExpansionState), localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState));
+  }
+  async changeMobileView(t, o = !0) {
+    if (this.mobileView === t || t === "navigation" && !this.hasNavigation || t === "sidebar" && !this.hasSidebar)
+      return;
+    if (!l() || !o) {
+      this.mobileView = t, this.mobileViewChange.emit(this.mobileView);
+      return;
+    }
+    Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = t;
+    const n = s() ? 0 : this.transitionStyle === "slides" ? 400 : this.transitionStyle === "dialog" ? 300 : 0;
+    this.transitionTimeout = setTimeout(() => {
+      this.mobileView = t, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
+    }, n);
+  }
+  checkMobileView() {
+    if (this.mobileView === "navigation" && !this.hasNavigation || this.mobileView === "sidebar" && !this.hasSidebar) {
+      this.mobileView = "body";
+      return;
+    }
+    const t = this.mobileView === "sidebar" || this.sidebarActive;
+    t !== this.sidebarActive && (t ? this.showSidebar() : this.hideSidebar());
+  }
+  updateBottomBarStatus() {
+    this.hasBottomBar = Boolean(this.el.querySelector('[slot="bottom-bar"]'));
+  }
+  updateNavigationStatus() {
+    this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
+  }
+  updateCustomAppBarBackButtonStatus() {
+    this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
+  }
+  updateSidebarStatus() {
+    this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+  }
+  updateContentScrollState() {
+    const t = {
+      scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+      scrolledToTop: this.contentEl.scrollTop === 0,
+      scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >= this.contentEl.scrollHeight
+    };
+    Object.keys(t).some((o) => t[o] !== this.contentScrollState[o]) && (this.contentScrollState = t);
+  }
+  updateNavScrollState() {
+    const t = {
+      scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
+      scrolledToTop: this.navEl.scrollTop === 0
+    };
+    Object.keys(t).some((o) => t[o] !== this.navScrollState[o]) && (this.navScrollState = t);
+  }
+  updateSidebarScrollState() {
+    const t = {
+      scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
+      scrolledToTop: this.sidebarEl.scrollTop === 0
+    };
+    Object.keys(t).some((o) => t[o] !== this.sidebarScrollState[o]) && (this.sidebarScrollState = t);
+  }
+  restoreNavExpansionState() {
+    if (!this.collapsibleNavigation)
+      return;
+    const t = localStorage.getItem(this.navigationExpansionStateStorageKey);
+    Boolean(t) && this.setCollapsibleNavigationState(t);
+  }
+  render() {
+    const t = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation && !this.hasCustomAppBarBackButton, o = Boolean(this.el.querySelector('[slot="app-bar-controls"]')), r = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')), d = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')), n = Boolean(this.el.querySelector('[slot="floating-action-button"]')) || Boolean(this.ctaLabel), y = this.hasNavigation && (!this.collapsibleNavigation || this.navExpansionState !== "collapsed" || !this.isDesktop), u = m("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--nav-${this.isDesktop ? this.navExpansionState : "expanded"}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, `app-layout--sidebar-positioning-${this.sidebarPositioning}`, {
+      "app-layout--content-scrollable": this.contentScrollState.scrollable,
+      "app-layout--content-scrolled-to-top": this.contentScrollState.scrolledToTop,
+      "app-layout--content-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
+      "app-layout--has-app-bar-mobile-menu-button": r,
+      "app-layout--has-app-bar-controls": o,
+      "app-layout--has-bottom-bar": this.hasBottomBar,
+      "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-custom-sidebar-header": d,
+      "app-layout--has-floating-action-button": n,
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--hide-app-bar": this.hideAppBar,
+      "app-layout--nav-collapsible": this.collapsibleNavigation && this.isDesktop,
+      "app-layout--nav-scrollable": this.navScrollState.scrollable,
+      "app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
+      "app-layout--rounded-corners": this.roundedCorners,
+      "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+      "app-layout--sidebar-closing": this.sidebarClosing,
+      "app-layout--sidebar-opening": this.sidebarOpening,
+      "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
+      "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop
+    });
+    return a(c, { key: "808d09845b3c44c91b2bebb06b423b8e30f31f24" }, a("section", { key: "19afd6f9bb6759ef88be52a7ffa541fcb0f3042e", "aria-labelledby": "app-name", class: u }, a("div", { key: "d7b732bccc7fa1db84efdc99682a659d4f6d9db1", class: "app-layout__grid" }, a("header", { key: "e5e168ec7492fbfa1d86f9f53d7f8bf112ba01c3", class: "app-layout__header", ref: (i) => this.headerEl = i }, a("span", { key: "f1cfb95b8ab7198b16f4ae80f0e5c87cdf23e4db", class: "app-layout__navigation-mobile-menu-button" }, a("slot", { key: "e4424dbbda5dae4e0199419a2bb7126eac521ae3", name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && a("span", { key: "3a80b9b86b9f1d3b6e82dcac15042f767716d7b6", class: "app-layout__nav-overlay-toggle" }, a("swirl-button", { key: "d959eca663eb67bbd367d6fecbe81ebd33f7ec89", hideLabel: !0, icon: this.navExpansionState !== "expanded" ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>" : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation })), this.showNavigationBackButton && a("span", { key: "0077c515fa75ea162f9f6f08a815f7f10a55c4f0", class: "app-layout__navigation-back-button" }, a("swirl-button", { key: "26c55f61f7714f6c469ed0b571636b731a1c8342", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { key: "0183674f244809bf68b68f847da8a1bd24ce5e71", as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), y && a("span", { key: "9fb9fdd1a19239ccb7429a95678c1afb19646b1c", class: "app-layout__navigation-controls" }, a("slot", { key: "b48147f3805285e1ba52560983808c16f3460b7f", name: "navigation-controls" }))), a("nav", { key: "0b974457471f128fef9851d2d6a92c58d349ce0f", "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (i) => this.navEl = i, inert: this.isDesktop && this.collapsibleNavigation && this.navExpansionState === "collapsed" }, a("slot", { key: "9f874431aa6c283c13282928dfe2d04e4fb95fe0", name: "navigation" })), a("section", { key: "9a9ed49fe755f527876e03b799f341451dcb087c", "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && a("header", { key: "600f437a4eaebc4d1f5caa2b09a22fba0e21f67b", class: "app-layout__app-bar" }, a("span", { key: "e2194a2a054dd85e963d809230fadab1f8144a8e", class: "app-layout__app-bar-mobile-menu-button" }, a("slot", { key: "f175b780599094ed2917217ea3a3d6b78d092ea1", name: "app-bar-mobile-menu-button" })), t && a("span", { key: "fa12e03dfeb61432c43d4d2e14ebc5eca5ec9e44", class: "app-layout__back-to-navigation-button" }, a("swirl-button", { key: "82ddf16354ec01f1bcb91f911cee259bda955070", hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.collapsibleNavigation && this.navExpansionState !== "expanded" && a("span", { key: "372fef147bd244c3e0320e52af84912b59c5073c", class: "app-layout__nav-expansion-toggle" }, a("swirl-button", { key: "56a500351b687017249144c18331555be6cc937b", hideLabel: !0, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation })), a("span", { key: "ae652ddba7cc0f574ddcad3b1c4214c2cf6a5095", class: "app-layout__custom-app-bar-back-button" }, a("slot", { key: "9e17301a1384c6253ec8beee4400d8bcd1f9da7f", name: "custom-app-bar-back-button" })), a("div", { key: "9327e4113bf8eb330579466acccf6a2d7e6f66ba", class: "app-layout__app-bar-content" }, a("slot", { key: "62ad3d444303b7371046b9c5d52db7d875eb06c1", name: "app-bar" })), a("div", { key: "4127ab114335ecbba4d8f76be4c98a82aa066e05", class: "app-layout__app-bar-controls" }, a("slot", { key: "82d77a853dfa54213340b8a4e90f23de01153c43", name: "app-bar-controls" }))), a("div", { key: "c59559aef7438797830980392ce998e83f5c2541", class: "app-layout__banner" }, a("slot", { key: "94d57b7ebd365f555930a897676421bfbbca7287", name: "banner" })), a("div", { key: "ec87aa773bd192a472a479657456b10a83d1a617", class: "app-layout__content", onScroll: this.onContentScroll, ref: (i) => this.contentEl = i }, a("slot", { key: "72f56537058220c726d7ca90149154110d0eb9e4", name: "content" })), a("div", { key: "4ebb3c3a7438fb4dcc52e5be7ad9ce382e053af4", class: "app-layout__bottom-bar" }, a("slot", { key: "6fd8d76dee4e9ed6173a238b61eaaba099d256dd", name: "bottom-bar" }))), a("aside", { key: "1f67a682e0a2153f687528ceba93f4cfe76b5204", class: "app-layout__sidebar" }, a("header", { key: "57a7ec8c4305c764f4bc3a511a153097b9cc325e", class: "app-layout__custom-sidebar-header" }, a("slot", { key: "ab6051fe7fcca4bfb0282e70de31ec91546f5854", name: "custom-sidebar-header" })), a("header", { key: "3669b924fea46580d7c9f812b5fe4606595eb47a", class: "app-layout__sidebar-header" }, a("swirl-button", { key: "5ffd08f20950310ae8839911e2ba52d2e7437572", class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { key: "6aaf4cae1080fbd64c0ae30ea5236f968a49c47a", as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), a("div", { key: "6c7f53cb51266912abd97b2f2f6951eab618ceef", class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (i) => this.sidebarEl = i }, a("slot", { key: "900e1764202169042c096d740649724db80813a2", name: "sidebar" }))), a("span", { key: "0308414943fa5cd12f77656e16e32b5be832a5ff", class: "app-layout__floating-action-button" }, this.ctaLabel && a("swirl-button", { key: "d4a14733ccbd537c6cbd7c18ec8dbc4af599a1bf", hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" }), a("slot", { key: "6485bbd34a61cc9a0846554658bb5fbbdcd51ee9", name: "floating-action-button" })))));
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      mobileView: [{
+        watchMobileView: 0
+      }]
+    };
+  }
+};
+f.style = v();
+export {
+  f as swirl_app_layout
+};

package/dist/swirl-autocomplete.entry.dd67e1bd.js

@@ -0,0 +1,117 @@
+import { r as p, c as m, h as o, H as f, g as b } from "./index.0118a769.js";
+import { a as g, c as v, o as y } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
+import { c as w } from "./index-orsBiyT_.fc4357c3.js";
+import { d as S } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const x = () => ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-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}}", A = class {
+  constructor(i) {
+    p(this, i), this.valueChange = m(this, "valueChange", 7), this.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], this.onChange = (e) => {
+      e.stopPropagation(), this.updateTerm(e);
+    }, this.updateTerm = S(async (e) => {
+      this.updateSuggestions(e.detail), this.open(), !this.multiSelect && (!Boolean(e.detail) || e.detail === "") && (this.value = void 0, this.valueChange.emit(this.value));
+    }, 250, !1), this.onSelect = async (e) => {
+      if (e.stopPropagation(), this.multiSelect) {
+        const s = e.detail, n = this.suggestions.filter((l) => !s.includes(l.id)).map((l) => l.id);
+        this.value = [
+          ...this.value.filter((l) => !n.includes(l.id)),
+          ...this.suggestions.filter((l) => s.includes(l.id) && !this.value.some((r) => r.id === l.id))
+        ], this.valueChange.emit(this.value), this.inputEl.value = "";
+        const a = this.inputEl.querySelector("input");
+        Boolean(a) && (a.value = "", queueMicrotask(() => {
+          a.focus(), this.close();
+        }), this.updateSuggestions(a.value));
+      } else if (Boolean(e.detail[0])) {
+        const s = e.detail[0], n = this.suggestions.find((a) => a.id === s);
+        if (!Boolean(n))
+          return;
+        this.value = n, this.valueChange.emit(this.value), queueMicrotask(() => {
+          var a;
+          (a = this.inputEl.querySelector("input")) == null || a.focus(), this.close();
+        });
+      }
+    }, this.onRemoveValue = (e) => {
+      !Array.isArray(this.value) || (this.value = this.value.filter((s) => s.id !== e), this.valueChange.emit(this.value));
+    }, this.onFocusOut = (e) => {
+      const s = e.relatedTarget;
+      Boolean(s) && !this.el.contains(s) && this.close();
+    }, this.onFocus = () => {
+      this.updateSuggestions(), this.open();
+    }, this.onKeyDown = (e) => {
+      e.code === "Escape" && (e.preventDefault(), e.stopPropagation(), this.inputEl.querySelector("input").focus(), this.close());
+    }, this.onInputKeyDown = (e) => {
+      var s, n;
+      e.code === "ArrowDown" && (e.preventDefault(), (n = (s = this.listboxEl.querySelector('[role="listbox"]')) == null ? void 0 : s.querySelector('[tabIndex="0"]')) == null || n.focus());
+    };
+  }
+  componentWillLoad() {
+    const i = document.querySelectorAll("swirl-datepicker").length;
+    this.id = `autocomplete-${i}`, this.handleInitialValue();
+  }
+  onWindowClick(i) {
+    const e = i.target;
+    this.el.contains(e) || this.close();
+  }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
+  async close() {
+    var e;
+    if (!this.active)
+      return;
+    this.disableAutoUpdate && this.disableAutoUpdate();
+    const i = this.inputEl.querySelector("input");
+    Boolean(i) && (this.multiSelect ? i.value = "" : i.value = ((e = this.value) == null ? void 0 : e.label) || ""), this.active = !1;
+  }
+  async open() {
+    this.active || (this.active = !0, requestAnimationFrame(async () => {
+      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = g(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: !0 }), this.listboxContainerEl.scrollTop = 0, this.updateSuggestions(this.inputEl.querySelector("input").value);
+    }));
+  }
+  async reposition() {
+    !Boolean(this.listboxContainerEl) || (this.position = await v(this.inputEl, this.listboxContainerEl, {
+      middleware: [y({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed"
+    }));
+  }
+  async updateSuggestions(i) {
+    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(i), this.loading = !1;
+  }
+  handleInitialValue() {
+    this.multiSelect && !Array.isArray(this.value) && (this.value = []), !this.multiSelect && Array.isArray(this.value) && (this.value = void 0);
+  }
+  render() {
+    var l, r, u, c;
+    const i = `${this.id}-suggestions`, e = this.clearable && !this.multiSelect, s = this.multiSelect ? this.value.map((t) => t.id) : Boolean(this.value) ? [this.value.id] : [], n = this.multiSelect ? void 0 : ((l = this.value) == null ? void 0 : l.label) || "", a = w("autocomplete", {
+      "autocomplete--inactive": !this.active
+    });
+    return o(f, { key: "36f37cea5fdd7151673aa5c8ad30f652a1769609" }, o("div", { key: "f1457ce0ea13ea7a769cd1de3eb3bf4cf2b9549b", class: a, onKeyDown: this.onKeyDown }, this.multiSelect && Array.isArray(this.value) && this.value.length > 0 && o("div", { key: "7b5b831a06dd7270386f857d198178a92e118580", class: "autocomplete__multi-select-tags" }, o("swirl-stack", { key: "c5bf0b5bf1252f9bd8368917a27d9927e3b2c7c0", orientation: "horizontal", spacing: "8", wrap: !0 }, this.value.map((t) => o("swirl-tag", {
+      key: t.id,
+      label: t.label,
+      onRemove: () => this.onRemoveValue(t.id),
+      removable: !this.disabled
+    })))), o("swirl-text-input", { key: "f41ec2b57444ff45d75e039dad609d7b2ebf6d17", autoSelect: this.autoSelect, class: "autocomplete__input", clearable: e, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (t) => this.inputEl = t, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: i, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: n }), o("div", { key: "a940d9511351d965da89de983885eb0d8819f977", class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (t) => this.listboxContainerEl = t, style: {
+      top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
+      left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : "",
+      width: `${((c = this.inputEl) == null ? void 0 : c.getBoundingClientRect().width) + 32}px`
+    } }, this.loading && o("div", { key: "bdcc2ec3441fa97915ac8d1ed4348a0c59101708", class: "autocomplete__spinner" }, o("swirl-spinner", { key: "08a8eeb925fcc515f76ae0d7edae2c5fc01f409f" })), this.suggestions.length > 0 && o("swirl-option-list", { key: "79b71e2f6aaabef56558d95229dc24ee26cb4056", allowDeselect: this.multiSelect === !0, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: i, ref: (t) => this.listboxEl = t, value: s }, this.suggestions.map((t) => {
+      var h;
+      return o("swirl-option-list-item", { selected: Array.isArray(this.value) ? this.value.some((d) => d.id === t.id) : ((h = this.value) == null ? void 0 : h.id) === t.id, key: t.id, disabled: t.disabled, label: t.label, value: t.id });
+    })))));
+  }
+  get el() {
+    return b(this);
+  }
+  static get watchers() {
+    return {
+      multiSelect: [{
+        watchMultiSelect: 0
+      }]
+    };
+  }
+};
+A.style = x();
+export {
+  A as swirl_autocomplete
+};

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

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

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

@@ -0,0 +1,72 @@
+import { r as m, c as o, h as t, H as b, g } from "./index.0118a769.js";
+import { c as s } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const u = () => ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;border:var(--swirl-avatar-border-width, 0) solid     var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}", n = {
+  "3xs": 20,
+  "2xs": 24,
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144
+}, f = class {
+  constructor(e) {
+    m(this, e), this.imageError = o(this, "imageError", 7), this.imageLoad = o(this, "imageLoad", 7), this.badgePosition = "bottom", this.color = "kiwi", this.interactive = !1, this.showLabel = !1, this.size = "m", this.toolPosition = "bottom", this.variant = "round", this.loadingError = !1, this.loaded = !1, this.inViewport = !1, this.componentLoaded = !1, this.onImageElementUpdate = (a) => {
+      var i, r;
+      (i = this.imgEl) == null || i.removeEventListener("load", this.setImageAvailable), (r = this.imgEl) == null || r.removeEventListener("error", this.setImageUnavailable), this.imgEl = a, this.imgEl && (this.imgEl.addEventListener("load", this.setImageAvailable), this.imgEl.addEventListener("error", this.setImageUnavailable));
+    }, this.setImageAvailable = () => {
+      this.imageAvailable = !0, this.loadingError = !1, this.loaded = !0, this.imageLoad.emit();
+    }, this.setImageUnavailable = () => {
+      this.imageAvailable = !1, this.loaded = !0, this.loadingError = !0, this.imageError.emit();
+    }, this.onKeydown = (a) => {
+      a.code === "Space" ? a.preventDefault() : a.code === "Enter" && (a.preventDefault(), this.element.click());
+    }, this.onKeyup = (a) => {
+      a.code === "Space" && (a.preventDefault(), this.element.click());
+    };
+  }
+  componentDidLoad() {
+    this.setupIntersectionObserver(), this.componentLoaded = !0;
+  }
+  connectedCallback() {
+    this.componentLoaded && this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    var e, a, i;
+    (e = this.intersectionObserver) == null || e.disconnect(), (a = this.imgEl) == null || a.removeEventListener("load", this.setImageAvailable), (i = this.imgEl) == null || i.removeEventListener("error", this.setImageUnavailable);
+  }
+  watchSrcProp() {
+    this.imageAvailable = void 0;
+  }
+  setupIntersectionObserver() {
+    this.loading === "intersecting" && (this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0
+    }), this.intersectionObserver.observe(this.element));
+  }
+  onVisibilityChange(e) {
+    this.inViewport = e.some((a) => a.isIntersecting);
+  }
+  render() {
+    const e = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0) && (this.loading !== "intersecting" || this.inViewport), a = (!e || !this.loaded && !this.loadingError) && Boolean(this.initials), i = !e && !a && Boolean(this.icon), r = !e && !a && !i, l = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : void 0, d = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": i || r,
+      "avatar--has-initials": a,
+      "avatar--interactive": this.interactive
+    }), c = s("avatar__badge", `avatar__badge--position-${this.badgePosition}`), h = s("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
+    return t(b, { key: "42c11df526248247b9cb2bee6b2d58bc70aafa65", "aria-label": this.interactive ? this.label : void 0, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, t("span", { key: "96a01925f8c723fca2dbb17263152b1d56d26027", class: d, part: "avatar" }, e && t("span", { key: "896d136ab3094a2f583b938c2b91d04e78f0d10f", class: "avatar__image" }, t("img", { key: "fde4999892611a1634223519cbccf76130cdb51c", alt: "", height: n[this.size], loading: this.loading !== "intersecting" ? this.loading : void 0, ref: this.onImageElementUpdate, src: this.src, width: n[this.size] })), a && t("span", { key: "4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a", class: "avatar__initials" }, t("span", { key: "866a9aaaa0b2e2ef114cc992be91b503160aac69" }, this.initials)), i && t("span", { key: "1cb19789413ef94288b19c209f80b9ccab454baa", class: "avatar__icon", innerHTML: this.icon }), r && t("span", { key: "36dee103b6406e226e48183c4376a978a6ecedc9", class: "avatar__icon" }, t("swirl-icon-person", { key: "b992b47b9baa52c05193fff33e9b57211c23a51e" })), l && t("span", { key: "6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c", class: c, innerHTML: this.badge }), t("span", { key: "20e4112658cd486eb49d7e2543f13678b4d7a5fd", class: h }, t("slot", { key: "f03881df79fb42c911c2895cd787f706c9529a9f", name: "tool" }))), this.showLabel && t("span", { key: "beeb327bbc2a05443d756dea01be85e0a885e507", "aria-hidden": !0, class: "avatar__label" }, this.label));
+  }
+  get element() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      src: [{
+        watchSrcProp: 0
+      }]
+    };
+  }
+};
+f.style = u();
+export {
+  f as swirl_avatar
+};

package/dist/swirl-badge.entry.ce62f6ea.js

@@ -0,0 +1,19 @@
+import { r as t, h as e, F as i, H as r } from "./index.0118a769.js";
+import { c as s } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const n = () => ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);box-shadow:0 0 0 0.125rem var(--swirl-badge-border-color)}.badge--size-xs{min-width:1rem;height:1rem;font-size:0.6875rem}.badge--size-xs .badge__label{padding-right:0.25rem;padding-left:0.25rem}.badge--size-xs .badge__icon>swirl-icon,.badge--size-xs .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-s{min-width:1.25rem;height:1.25rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:1rem;height:1rem}.badge--size-m{min-width:1.5rem;height:1.5rem}.badge--size-m .badge__label{padding-right:0.4375rem;padding-left:0.4375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-info{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--intent-strong{color:var(--s-text-on-status);background-color:var(--s-interactive-neutral-default)}.badge--variant-dot{width:1.5rem;min-width:0;height:1.5rem}.badge--variant-dot.badge--size-xs{width:0.5rem;height:0.5rem}.badge--variant-dot.badge--size-s{width:0.75rem;height:0.75rem}.badge--variant-dot.badge--size-m{width:1rem;height:1rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", d = class {
+  constructor(a) {
+    t(this, a), this.intent = "critical", this.size = "m", this.variant = "default";
+  }
+  render() {
+    const a = s("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon
+    });
+    return e(r, { key: "3d64f76fe54264451a966d8bb9aa044efd744939", role: "status" }, e("span", { key: "918618864bcfd9cd017aecb390608a8d454218a4", class: a, part: "badge" }, this.icon && e("span", { key: "5488528c85b4851f98cfb6a6f61f0030f4dfab3c", class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && this.variant !== "dot" ? e("span", { class: "badge__label" }, this.label) : e(i, null, this.icon === void 0 && e("span", { class: "badge__label" }, "\xA0"), e("swirl-visually-hidden", null, this.label))));
+  }
+};
+d.style = n();
+export {
+  d as swirl_badge
+};

package/dist/swirl-banner.entry.054e1291.js

@@ -0,0 +1,51 @@
+import { r as o, c as r, h as i, H as c, g as b } from "./index.0118a769.js";
+import { c as d } from "./index-orsBiyT_.fc4357c3.js";
+import { D as l } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const h = () => ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);height:1.25rem}}", m = {
+  default: void 0,
+  critical: "<swirl-icon-error></swirl-icon-error>",
+  success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
+  warning: "<swirl-icon-warning></swirl-icon-warning>",
+  info: "<swirl-icon-info></swirl-icon-info>"
+}, _ = class {
+  constructor(n) {
+    o(this, n), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.dismissable = !1, this.dismissLabel = "Dismiss", this.importance = "status", this.intent = "default", this.showIcon = !1, this.size = "m", this.mediaQueryUnsubscribe = () => {
+    }, this.onAction = (e) => {
+      this.action.emit(e);
+    }, this.onDismiss = (e) => {
+      this.dismiss.emit(e);
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = l.subscribe((n) => {
+      this.forceIconProps(n);
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(n) {
+    var a, s;
+    const e = (a = this.iconEl) == null ? void 0 : a.children[0], t = (s = this.dismissButtonEl) == null ? void 0 : s.children[0];
+    e == null || e.setAttribute("size", n ? "20" : "24"), t == null || t.setAttribute("size", n ? "20" : "24");
+  }
+  determineIcon() {
+    return this.icon ? this.icon : m[this.intent];
+  }
+  render() {
+    const n = this.determineIcon(), e = Boolean(this.actionLabel) || this.dismissable, t = this.icon || this.showIcon && Boolean(n), a = d("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+      "banner--has-icon": t
+    });
+    return i(c, { key: "11ecf5b273bb2636d5d3e779fc91df1f7b10a8e0" }, i("div", { key: "bc5e53f04ad5e80defe407340d191d1951a10123", "aria-describedby": "content", class: a, role: this.importance, tabIndex: 0 }, i("div", { key: "86b3950336dca8b1d28994d1fb18113a4b4c421a", class: "banner__content", id: "content", part: "banner__content" }, t && i("span", { key: "5716e25d171cc28861459258e257c8a821ebc56d", "aria-hidden": "true", class: "banner__icon", innerHTML: n, ref: (s) => this.iconEl = s }), i("span", { key: "a5a5019667573c14dde87041e475481a7edf6d5e", class: "banner__text" }, this.content)), e && i("div", { key: "cf8632f83dc502caba7f10710a353d1a34f30493", class: "banner__controls" }, this.actionLabel && i("button", { key: "166c562828b381640c29783ac8b275f49b088cad", class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && i("button", { key: "b1247a38ea5f7592d7c12f0919360041ea9061b8", "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (s) => this.dismissButtonEl = s, type: "button" }, i("swirl-icon-close", { key: "12524ce0998e451f9260924e2a5226ddee4ade43" })))));
+  }
+  get element() {
+    return b(this);
+  }
+};
+_.style = h();
+export {
+  _ as swirl_banner
+};