@getflip/swirl-components 0.236.1 → 0.237.0

package/dist/cjs/swirl-app-layout_5.cjs.entry.js

@@ -2,22 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 const utils = require('./utils-3ff36fc3.js');
 const sortable_esm = require('./sortable.esm-73cf219b.js');
 const v4 = require('./v4-c23234d2.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%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);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}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(3.5625rem, auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"}.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;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{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}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5625rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);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}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
+const swirlAppLayoutCss = ":host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(\n              to right,\n              rgba(0, 0, 0, 0.05) 0,\n              rgba(0, 0, 0, 0) 80%,\n              rgba(0, 0, 0, 0) 100%\n            );content:\"\"}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);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}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{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}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
 const SwirlAppLayoutStyle0 = swirlAppLayoutCss;
 
+const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
 const SwirlAppLayout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ctaClick = index.createEvent(this, "ctaClick", 7);
         this.mobileViewChange = index.createEvent(this, "mobileViewChange", 7);
         this.navigationBackButtonClick = index.createEvent(this, "navigationBackButtonClick", 7);
+        this.navigationExpansionStateChange = index.createEvent(this, "navigationExpansionStateChange", 7);
         this.sidebarToggle = index.createEvent(this, "sidebarToggle", 7);
+        this.desktopMediaQuery = utils.getDesktopMediaQuery();
+        this.desktopMediaQueryHandler = (event) => {
+            this.isDesktop = event.matches;
+        };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
         };
@@ -39,13 +45,28 @@ const SwirlAppLayout = class {
         this.onSidebarScroll = utils.debounce(() => {
             this.updateSidebarScrollState();
         }, 16);
+        this.toggleNavigation = () => {
+            if (!this.collapsibleNavigation) {
+                return;
+            }
+            const newNavExpansionState = this.navExpansionState === "expanded" ? "collapsed" : "expanded";
+            this.setCollapsibleNavigationState(newNavExpansionState);
+        };
+        this.overlayNavigation = (event) => {
+            event.stopPropagation();
+            this.setCollapsibleNavigationState("overlayed");
+        };
         this.appName = undefined;
         this.backToNavigationViewButtonLabel = "Back to navigation";
+        this.collapsibleNavigation = undefined;
         this.ctaIcon = undefined;
         this.ctaLabel = undefined;
         this.hasNavigation = undefined;
         this.hideAppBar = undefined;
         this.navigationBackButtonLabel = "Go back";
+        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
+        this.navigationToggleLabel = "Toggle navigation";
+        this.navigationOverlayLabel = "Show navigation";
         this.navigationLabel = undefined;
         this.showNavigationBackButton = undefined;
         this.sidebarCloseButtonLabel = "Close sidebar";
@@ -58,13 +79,16 @@ const SwirlAppLayout = class {
         };
         this.hasCustomAppBarBackButton = undefined;
         this.hasSidebar = undefined;
+        this.isDesktop = undefined;
         this.mobileView = "navigation";
         this.navScrollState = {
             scrollable: false,
             scrolledToTop: false,
         };
+        this.navExpansionState = "expanded";
         this.sidebarActive = undefined;
         this.sidebarClosing = undefined;
+        this.sidebarOpening = undefined;
         this.sidebarScrollState = {
             scrollable: false,
             scrolledToTop: false,
@@ -87,15 +111,34 @@ const SwirlAppLayout = class {
         });
     }
     componentDidLoad() {
+        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
         queueMicrotask(() => {
+            this.isDesktop = this.desktopMediaQuery.matches;
+            this.restoreNavExpansionState();
             this.updateContentScrollState();
             this.updateSidebarScrollState();
             this.updateNavScrollState();
         });
     }
     disconnectedCallback() {
+        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
         this.mutationObserver?.disconnect();
     }
+    onDocumentClick(event) {
+        if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed") {
+            return;
+        }
+        const clickedInsideOfOverlayedNav = event.composedPath().includes(this.navEl) ||
+            event.composedPath().includes(this.headerEl);
+        if (!clickedInsideOfOverlayedNav) {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === "Escape" && this.navExpansionState === "overlayed") {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
     watchMobileView() {
         this.checkMobileView();
     }
@@ -106,9 +149,17 @@ const SwirlAppLayout = class {
         if (this.sidebarActive || !this.hasSidebar) {
             return;
         }
-        this.sidebarActive = true;
-        this.changeMobileView("sidebar");
-        this.sidebarToggle.emit(true);
+        if (Boolean(this.sidebarOpeningTimeout)) {
+            clearTimeout(this.sidebarOpeningTimeout);
+        }
+        this.sidebarOpening = true;
+        const delay = utils.isMobileViewport() || utils.prefersReducedMotion() ? 0 : 300;
+        this.sidebarOpeningTimeout = setTimeout(() => {
+            this.sidebarActive = true;
+            this.sidebarOpening = false;
+            this.changeMobileView("sidebar");
+            this.sidebarToggle.emit(true);
+        }, delay);
     }
     /**
      * Hide the sidebar
@@ -143,6 +194,23 @@ const SwirlAppLayout = class {
             this.showSidebar();
         }
     }
+    /**
+     * Get state of the collapsible navigation
+     */
+    async getCollapsibleNavigationState() {
+        return this.navExpansionState;
+    }
+    /**
+     * Set state of the collapsible navigation
+     */
+    async setCollapsibleNavigationState(state) {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        this.navExpansionState = state;
+        this.navigationExpansionStateChange.emit(this.navExpansionState);
+        localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState);
+    }
     /**
      * Change the currently displayed view on mobile viewports
      * @param mobileView
@@ -223,7 +291,6 @@ const SwirlAppLayout = class {
         };
         if (Object.keys(newNavScrollState).some((key) => newNavScrollState[key] !== this.navScrollState[key])) {
             this.navScrollState = newNavScrollState;
-            console.log(this.navScrollState);
         }
     }
     updateSidebarScrollState() {
@@ -235,6 +302,15 @@ const SwirlAppLayout = class {
             this.sidebarScrollState = newSidebarScrollState;
         }
     }
+    restoreNavExpansionState() {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        const restoredNavExpansionState = localStorage.getItem(this.navigationExpansionStateStorageKey);
+        if (Boolean(restoredNavExpansionState)) {
+            this.setCollapsibleNavigationState(restoredNavExpansionState);
+        }
+    }
     render() {
         const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
             this.hasNavigation &&
@@ -245,7 +321,11 @@ const SwirlAppLayout = class {
         const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
         const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
             Boolean(this.ctaLabel);
-        const className = index$1.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}`, {
+        const navigationActive = this.hasNavigation &&
+            (!this.collapsibleNavigation ||
+                this.navExpansionState !== "collapsed" ||
+                !this.isDesktop);
+        const className = index$1.classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--nav-${this.isDesktop ? this.navExpansionState : "expanded"}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
             "app-layout--content-scrollable": this.contentScrollState.scrollable,
             "app-layout--content-scrolled-to-top": this.contentScrollState.scrolledToTop,
             "app-layout--content-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
@@ -258,16 +338,23 @@ const SwirlAppLayout = class {
             "app-layout--has-navigation": this.hasNavigation,
             "app-layout--has-sidebar": this.hasSidebar,
             "app-layout--hide-app-bar": this.hideAppBar,
+            "app-layout--nav-collapsible": this.collapsibleNavigation && this.isDesktop,
             "app-layout--nav-scrollable": this.navScrollState.scrollable,
             "app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
+            "app-layout--sidebar-opening": this.sidebarOpening,
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (index.h(index.Host, { key: 'e1c143341fd6969c1c041c8667c1b5e12fce7aa7' }, index.h("section", { key: 'd2f3d3a309e94232a6a52c04a179a72240f6bb21', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '82a77b84d23df1dda86d2627e6a9457f578a89d0', class: "app-layout__grid" }, index.h("header", { key: 'f837eb5675d9a95ec154a09c30bfc454114a35ac', class: "app-layout__header" }, index.h("span", { key: 'f76efa5dd39576397f5abe701bc4d40d7c6d9af5', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: 'eb27c59a6865695a44738a1d7211f650e82888ef', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (index.h("span", { key: 'c90faef21b76cc16486ebe7ffa821736ddef3b49', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: 'b16105381660b7b82b6d7953d7bf72747533439f', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '7c21b9cd00e4bec6a22cb70a3d8753fa93dac5ba', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (index.h("span", { key: '2e92cfc7aacdd18234dc7d6e8433beb8ecccd0b6', class: "app-layout__navigation-controls" }, index.h("slot", { key: '4c30f7f89096cd55f77537d91461a693005a164f', name: "navigation-controls" })))), index.h("nav", { key: '42cc3847d5f7c4625d76739e421813c2de1e9c13', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el) }, index.h("slot", { key: '429284c750ec28528eb79f3e2939454ac8773c99', name: "navigation" })), index.h("section", { key: '285f41876c6c8269ab32d5efcadab18e72d72b32', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '9c9fa128d13e801866b795b0f02ae21474c8fe34', class: "app-layout__app-bar" }, index.h("span", { key: '098969ee820c3f266c043e24c71b23d07203b322', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: 'dde9756b11f38853fd2e933e5ebeb3cc827f3fd4', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '9d6e8465877307289761645d9cdef16b5b0e7577', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: '1587d585995e7460b68f09df9ae09fa1c266ceab', hideLabel: true, icon: this.transitionStyle === "dialog"
+        return (index.h(index.Host, { key: '3b1c6dfbd70f1e73595152063eb0f19214061a0b' }, index.h("section", { key: '66b24882d23244130b99d018d154819924a238a8', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '4ba4430a6ff528e1f5c7739a49bb1718acfff76c', class: "app-layout__grid" }, index.h("header", { key: '2557b4f52f4d63b8e3bd0d79b97d12dff3e35ebf', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: 'db4942252a5b23067a186188a2de09e231b33fc2', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: 'd34fefe46a8116f28df00c3d2b00611d2e5c977f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: 'f199cb947888c1ae726108c398f1b0a0ccd459e1', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: '801cb2ec74f780fd9f5a2114e4ef9c5fa11bc844', hideLabel: true, icon: this.navExpansionState !== "expanded"
+                ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: '09cc96fc608719f6f03c124765362c9203ae624a', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: 'c48e18559fef928f25f0fee06b3d1e3202ef624a', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '5b0c2f2b4183636415d2c605f2921f4513f87d9e', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: '1c17004783909c533522e645bcde641efe20af38', class: "app-layout__navigation-controls" }, index.h("slot", { key: '6194344af515533f48c12719578d355d538fe132', name: "navigation-controls" })))), index.h("nav", { key: '49f8bed05da5f7ea4d8ca731e8ac6640f6efba1d', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                this.collapsibleNavigation &&
+                this.navExpansionState === "collapsed" }, index.h("slot", { key: '7bb84dd7374be5df9caaea8bd04545512ee68ec0', name: "navigation" })), index.h("section", { key: 'a19ab7ca766bf445427ccbd80ca20c8493435e83', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '8325293845b85f72b7f3df2662559e2ab4074bb9', class: "app-layout__app-bar" }, index.h("span", { key: '5237b62f03cd7c1373549a2a30ccf446ba0372f9', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: 'f18bde70731b9351e63b21ad7f1a9c647abf416f', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '215d23179fc51dd075864c265ea9b7f364319a95', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: 'ea3be8edd9002a61f20c0a12da9aa1b578947c6a', 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 }))), index.h("span", { key: 'c1c48d5e9f1216a544fbfe19d6e1541ad58c8022', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '141fc56495d55974f45698b574ccb6aa03cb36ab', name: "custom-app-bar-back-button" })), index.h("div", { key: '83876ab43ab755de43fa7f0d265fd4c060553ddd', class: "app-layout__app-bar-content" }, index.h("slot", { key: 'd56068856254dce82abf6eacc77b19afabac1bd1', name: "app-bar" })), index.h("div", { key: '95aca875b629e0bdfba5ca87ed2597c331d9bbaa', class: "app-layout__app-bar-controls" }, index.h("slot", { key: '46461160969d62537a6f04b20bb40ca44fa5ac3e', name: "app-bar-controls" })))), index.h("div", { key: '388b20d9d6b51687125477c38edd601c1a1bfe0d', class: "app-layout__banner" }, index.h("slot", { key: '8bf5886dc50092e8b4e1d9e8b8404b27ed3f09b9', name: "banner" })), index.h("div", { key: 'abec882ab4905d6a372dc10e4d18ce6bb66df3b3', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '46e9b03f9ec3a0d38635d9fe3f35435355edd4a9', name: "content" })), index.h("div", { key: '34a7df3ed10f150228bc01fee063bed4f746f5a3', class: "app-layout__bottom-bar" }, index.h("slot", { key: 'facff75f429f360dda267e1985f931d0e341d75e', name: "bottom-bar" }))), index.h("aside", { key: 'cac7a6b6c2096bc60a2e5c36fd22ba46c3a19eaa', class: "app-layout__sidebar" }, index.h("header", { key: '351c7eba83509cec13b15f0aa8e15896d0b07503', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: '1434eb1cf6d0bf07117b120c57a5f51a397fedba', name: "custom-sidebar-header" })), index.h("header", { key: 'ff40be3b889ad61df3fa960383c6dc7b34bb1a96', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: '57fe1abf43d7eb0becf55660672555079123d533', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), index.h("swirl-heading", { key: '1c6406d5fba477bcaabdc6a354a22a0f9a676f47', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: 'bc8a084ddf4a13ee9d08eef391a48ce4f2adb7de', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: '4b253e9ea5b8a764772fe6df923c9382bac8f8ff', name: "sidebar" }))), index.h("span", { key: 'bf7564a728b954ce0c7415308cfb4bbde8abb847', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: 'd1821cf6ebabb0c0aa35887aed1b3fd836956966', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: 'ee95d554c358f25cdebf4c9d348e1816d266e8be', name: "floating-action-button" }))))));
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
+            this.navExpansionState !== "expanded" && (index.h("span", { key: '60fa359b9bd61b0e1f6be352436999b2cf17f4fc', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '05e09fb3a58dc2ab2e88ee49c585eecc60c7954d', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: 'f47a36036537b26f772e3bda24b2aa6469e2cf3c', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '136b0f6cb5f49fd2748ff359ee12320adc70e564', name: "custom-app-bar-back-button" })), index.h("div", { key: 'b8a00b16415b1ec1e860c1d5d57e0490d48e4401', class: "app-layout__app-bar-content" }, index.h("slot", { key: '62cc509a362d5f194182499071b1756c146d26dc', name: "app-bar" })), index.h("div", { key: 'effb581b5c5e33f5ff2438b4b41376d88d232fe9', class: "app-layout__app-bar-controls" }, index.h("slot", { key: 'f87b7467b069faaa2efa0cbc68e7ec22c041ff8b', name: "app-bar-controls" })))), index.h("div", { key: '818823f7c90a8f1fb905a225b5d10b4828805769', class: "app-layout__banner" }, index.h("slot", { key: 'fd1f5c35df19fffe35abdd5096f85c32fc1bba22', name: "banner" })), index.h("div", { key: '572494fb3c5f3b59bdb55d87feb44b59842eb1a6', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: 'b83fb9b173afa0b60976565aded1449afd680955', name: "content" })), index.h("div", { key: '3150822e788bf1af515f1e55c42b25851feaef27', class: "app-layout__bottom-bar" }, index.h("slot", { key: '35a21d973b8f54a8aac80f3744c500f501fa5aa1', name: "bottom-bar" }))), index.h("aside", { key: 'd32a56c28adc6a57c15b750a02575093b80a58f6', class: "app-layout__sidebar" }, index.h("header", { key: '7b60c1d2b4dc8ddd384dde58d4e822e34732f37d', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: 'a10e07f95f94b4fd3863c60e0689997fcc7af569', name: "custom-sidebar-header" })), index.h("header", { key: '18bfcf429fcbfb1ef138a7723a8b9e0752ced246', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: 'ea311add99e5adb33b8bbed78f7d88fc7d6bf28f', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), index.h("swirl-heading", { key: '54a13c7f1f0b362cb196a59c5622d2e246cadec0', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: '6920f3562d625be0f9e16c090eeed8d17eea49b7', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: '9807fec2801d84a5ae517765ff7b0f08e4c3f3c5', name: "sidebar" }))), index.h("span", { key: '9a5b7f6098d8f24f6df6ba7d84bf0276c043effa', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '77e960a30d95129160f0ebec29d419a8572f67ab', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '8f8942d7df62a364c2e9216d08aa0cbe765a9093', name: "floating-action-button" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -292,7 +379,7 @@ const SwirlEmptyState = class {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (index.h(index.Host, { key: '910eac8b85ee42dcdcc3e35a417dab64e873f25e' }, index.h("div", { key: 'd2b76b353e4f59eaff40cf304bf511ff903eed31', class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { key: '26c7ad34d7845a7fe3f72e9d8edd680ec727067b', alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { key: 'be93399b1b00f790331e04afa4adaf8c7e8ea6c1', class: "empty-state__slotted-illustration" }, index.h("slot", { key: '3505a06822a7f2e5316f079a029c25e2449b6d2c', name: "illustration" })), index.h("div", { key: '39f7790097fab3f0ca2008c0cd0638fbabd69c95', class: "empty-state__body" }, index.h("swirl-stack", { key: '666590ff0460748fe199daaacb8d01242990b573', align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { key: '7c1d2d059efb373e0fce2f2ccc7d3ba0987819a2', align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { key: 'aa98b76c0669f5e1b899bce4969b2d65f152e6d3', class: "empty-state__content" }, index.h("swirl-text", { key: '7b81e1e942ee767cd1b93d757b44b2958119f2ac', align: "center", color: "subdued" }, index.h("slot", { key: 'ca182287a03f1db96e4eb9d1e46ab268817d5570' })))), index.h("div", { key: '0e47796c0063949ba56e7f9efff7a0a3622c216c', class: "empty-state__controls" }, index.h("slot", { key: '7f75b89a83f4475d629a4dc6699de27187330215', name: "controls" }))))));
+        return (index.h(index.Host, { key: 'a69b7620012d83f74a37fb281795d3372a98aa59' }, index.h("div", { key: '0d4b05a0470275d6f8bb05557b76aa631ed5bfbf', class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { key: 'a14e963317f1444179fac8e662101c4e801fe7ea', alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { key: '7e95b8147620d992445c71a6e3e7b3e0e5b7f8ba', class: "empty-state__slotted-illustration" }, index.h("slot", { key: '8b3ecf12623210c586b0ee2a85a727023ebaa9be', name: "illustration" })), index.h("div", { key: '6a704c827cce431f91fedb45c4fe7d975fa2938a', class: "empty-state__body" }, index.h("swirl-stack", { key: '3a5b1b80e8a8873ae9e194cbeec6f3d58c61da39', align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { key: '5d0331dc10a582ed584a189d3f3aafd10f308ad7', align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { key: 'd054646b5036134b39ea760f88d6eca3882fa291', class: "empty-state__content" }, index.h("swirl-text", { key: '3a65aefab1be1e3320412da968cc4e27886cc512', align: "center", color: "subdued" }, index.h("slot", { key: '533530974b07ea8924dfd9e55911c6b298958e73' })))), index.h("div", { key: 'c9fc53e76202b2d1e257c0ef258a7d7d2714a8f0', class: "empty-state__controls" }, index.h("slot", { key: 'c0335467618f043bbc9906395237b105f8232401', name: "controls" }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -313,7 +400,7 @@ const SwirlIconFolderShared = class {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (index.h("svg", { key: '2358cd477444935f28756e0eb2b7d0bb419d7e01', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: 'ceccc5037eb89ec0a5bcb9012f04094475a7e9b0' }, index.h("path", { key: 'e2e40323d700e1365fbd05a8ec0e0e59083bd22c', d: "M9.99998 8.66669C10.3666 8.66669 10.6806 8.53602 10.942 8.27469C11.2029 8.0138 11.3333 7.70002 11.3333 7.33335C11.3333 6.96669 11.2029 6.65269 10.942 6.39135C10.6806 6.13046 10.3666 6.00002 9.99998 6.00002C9.63331 6.00002 9.31953 6.13046 9.05865 6.39135C8.79731 6.65269 8.66665 6.96669 8.66665 7.33335C8.66665 7.70002 8.79731 8.0138 9.05865 8.27469C9.31953 8.53602 9.63331 8.66669 9.99998 8.66669ZM7.33331 11.3334H12.6666V10.9667C12.6666 10.4667 12.4222 10.0694 11.9333 9.77469C11.4444 9.48046 10.8 9.33335 9.99998 9.33335C9.19998 9.33335 8.55553 9.48046 8.06665 9.77469C7.57776 10.0694 7.33331 10.4667 7.33331 10.9667V11.3334ZM2.66665 13.3334C2.29998 13.3334 1.9862 13.2029 1.72531 12.942C1.46398 12.6807 1.33331 12.3667 1.33331 12V4.00002C1.33331 3.63335 1.46398 3.31958 1.72531 3.05869C1.9862 2.79735 2.29998 2.66669 2.66665 2.66669H6.11665C6.29442 2.66669 6.46398 2.70002 6.62531 2.76669C6.7862 2.83335 6.92776 2.9278 7.04998 3.05002L7.99998 4.00002H13.3333C13.7 4.00002 14.014 4.13069 14.2753 4.39202C14.5362 4.65291 14.6666 4.96669 14.6666 5.33335V12C14.6666 12.3667 14.5362 12.6807 14.2753 12.942C14.014 13.2029 13.7 13.3334 13.3333 13.3334H2.66665ZM2.66665 4.00002V12H13.3333V5.33335H7.44998L6.11665 4.00002H2.66665Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: '471f86e592f0d44b4c41998b6d09c6a04f62187c' }, index.h("path", { key: '05e915656c724af2b157d27706e81047c09b5250', d: "M15 13C15.55 13 16.021 12.804 16.413 12.412C16.8043 12.0207 17 11.55 17 11C17 10.45 16.8043 9.979 16.413 9.587C16.021 9.19567 15.55 9 15 9C14.45 9 13.9793 9.19567 13.588 9.587C13.196 9.979 13 10.45 13 11C13 11.55 13.196 12.0207 13.588 12.412C13.9793 12.804 14.45 13 15 13ZM11 17H19V16.45C19 15.7 18.6333 15.104 17.9 14.662C17.1667 14.2207 16.2 14 15 14C13.8 14 12.8333 14.2207 12.1 14.662C11.3667 15.104 11 15.7 11 16.45V17ZM4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '4bf41cf45a62e303e401dbbd97ca28e37b49b04b' }, index.h("path", { key: '8ffee09b9a70d55da280fd9b3285174e926b5b98', d: "M17.5 15.1667C18.1416 15.1667 18.6911 14.938 19.1485 14.4807C19.605 14.0241 19.8333 13.475 19.8333 12.8334C19.8333 12.1917 19.605 11.6422 19.1485 11.1849C18.6911 10.7283 18.1416 10.5 17.5 10.5C16.8583 10.5 16.3092 10.7283 15.8526 11.1849C15.3953 11.6422 15.1666 12.1917 15.1666 12.8334C15.1666 13.475 15.3953 14.0241 15.8526 14.4807C16.3092 14.938 16.8583 15.1667 17.5 15.1667ZM12.8333 19.8334H22.1666V19.1917C22.1666 18.3167 21.7389 17.6214 20.8833 17.1057C20.0278 16.5908 18.9 16.3334 17.5 16.3334C16.1 16.3334 14.9722 16.5908 14.1166 17.1057C13.2611 17.6214 12.8333 18.3167 12.8333 19.1917V19.8334ZM4.66665 23.3334C4.02498 23.3334 3.47587 23.1051 3.01931 22.6485C2.56198 22.1912 2.33331 21.6417 2.33331 21V7.00002C2.33331 6.35835 2.56198 5.80924 3.01931 5.35269C3.47587 4.89535 4.02498 4.66669 4.66665 4.66669H10.7041C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6666 8.69169 25.6666 9.33335V21C25.6666 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66665ZM4.66665 7.00002V21H23.3333V9.33335H13.0375L10.7041 7.00002H4.66665Z", fill: "currentColor" })))));
+        return (index.h("svg", { key: 'c8031de035626022e2998b30e46674d21c009618', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: '7411876d03b3449acfbbdcb120f8782f2b265c19' }, index.h("path", { key: 'ef7b0ffe45da6e567c027d1c500c77a4ef977309', d: "M9.99998 8.66669C10.3666 8.66669 10.6806 8.53602 10.942 8.27469C11.2029 8.0138 11.3333 7.70002 11.3333 7.33335C11.3333 6.96669 11.2029 6.65269 10.942 6.39135C10.6806 6.13046 10.3666 6.00002 9.99998 6.00002C9.63331 6.00002 9.31953 6.13046 9.05865 6.39135C8.79731 6.65269 8.66665 6.96669 8.66665 7.33335C8.66665 7.70002 8.79731 8.0138 9.05865 8.27469C9.31953 8.53602 9.63331 8.66669 9.99998 8.66669ZM7.33331 11.3334H12.6666V10.9667C12.6666 10.4667 12.4222 10.0694 11.9333 9.77469C11.4444 9.48046 10.8 9.33335 9.99998 9.33335C9.19998 9.33335 8.55553 9.48046 8.06665 9.77469C7.57776 10.0694 7.33331 10.4667 7.33331 10.9667V11.3334ZM2.66665 13.3334C2.29998 13.3334 1.9862 13.2029 1.72531 12.942C1.46398 12.6807 1.33331 12.3667 1.33331 12V4.00002C1.33331 3.63335 1.46398 3.31958 1.72531 3.05869C1.9862 2.79735 2.29998 2.66669 2.66665 2.66669H6.11665C6.29442 2.66669 6.46398 2.70002 6.62531 2.76669C6.7862 2.83335 6.92776 2.9278 7.04998 3.05002L7.99998 4.00002H13.3333C13.7 4.00002 14.014 4.13069 14.2753 4.39202C14.5362 4.65291 14.6666 4.96669 14.6666 5.33335V12C14.6666 12.3667 14.5362 12.6807 14.2753 12.942C14.014 13.2029 13.7 13.3334 13.3333 13.3334H2.66665ZM2.66665 4.00002V12H13.3333V5.33335H7.44998L6.11665 4.00002H2.66665Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: 'd237daceaaa9921fe9bbd023bb160fc2ffdd08da' }, index.h("path", { key: '440348d527b34268f12f23e9545f825f3c9e8d03', d: "M15 13C15.55 13 16.021 12.804 16.413 12.412C16.8043 12.0207 17 11.55 17 11C17 10.45 16.8043 9.979 16.413 9.587C16.021 9.19567 15.55 9 15 9C14.45 9 13.9793 9.19567 13.588 9.587C13.196 9.979 13 10.45 13 11C13 11.55 13.196 12.0207 13.588 12.412C13.9793 12.804 14.45 13 15 13ZM11 17H19V16.45C19 15.7 18.6333 15.104 17.9 14.662C17.1667 14.2207 16.2 14 15 14C13.8 14 12.8333 14.2207 12.1 14.662C11.3667 15.104 11 15.7 11 16.45V17ZM4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '358b24f65015f4c56cec38feb1bd41995820b3c1' }, index.h("path", { key: 'c790bb83088b4775451652678f2459cabafebb10', d: "M17.5 15.1667C18.1416 15.1667 18.6911 14.938 19.1485 14.4807C19.605 14.0241 19.8333 13.475 19.8333 12.8334C19.8333 12.1917 19.605 11.6422 19.1485 11.1849C18.6911 10.7283 18.1416 10.5 17.5 10.5C16.8583 10.5 16.3092 10.7283 15.8526 11.1849C15.3953 11.6422 15.1666 12.1917 15.1666 12.8334C15.1666 13.475 15.3953 14.0241 15.8526 14.4807C16.3092 14.938 16.8583 15.1667 17.5 15.1667ZM12.8333 19.8334H22.1666V19.1917C22.1666 18.3167 21.7389 17.6214 20.8833 17.1057C20.0278 16.5908 18.9 16.3334 17.5 16.3334C16.1 16.3334 14.9722 16.5908 14.1166 17.1057C13.2611 17.6214 12.8333 18.3167 12.8333 19.1917V19.8334ZM4.66665 23.3334C4.02498 23.3334 3.47587 23.1051 3.01931 22.6485C2.56198 22.1912 2.33331 21.6417 2.33331 21V7.00002C2.33331 6.35835 2.56198 5.80924 3.01931 5.35269C3.47587 4.89535 4.02498 4.66669 4.66665 4.66669H10.7041C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6666 8.69169 25.6666 9.33335V21C25.6666 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66665ZM4.66665 7.00002V21H23.3333V9.33335H13.0375L10.7041 7.00002H4.66665Z", fill: "currentColor" })))));
     }
 };
 SwirlIconFolderShared.style = SwirlIconFolderSharedStyle0;
@@ -555,7 +642,7 @@ const SwirlResourceList = class {
         this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
     }
     render() {
-        return (index.h(index.Host, { key: '6cc50db2b8c6ab1bd6ea46b6ba1cefbecb853304', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '5e98d1598c4898781285fd8c4d7bb9ee0ff3dbbd', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: 'a3b358edcbc71612f3fa5cea7f459f886340204b', paddingInlineEnd: "8", paddingInlineStart: "8" }, index.h("swirl-stack", { key: '0957f9378f9f06a8fdf7c0a64fd4fc8000ec60a2', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, index.h("slot", { key: '76901b8006fb85ac204b262f79ddcf2ca2df8bab' })))));
+        return (index.h(index.Host, { key: '96af06f9572dd5721918e14843e9b4a4b9a58593', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '4d6a06d8e4f9170339e31e9c4ebd7ed5ba7371ed', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '45f9f1707f1ab4d69dbe82db02e047465f4a51ef', paddingInlineEnd: "8", paddingInlineStart: "8" }, index.h("swirl-stack", { key: '46dfcfade06e1256d345001cf9c65f8dff1169bd', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, index.h("slot", { key: 'eeadd957c176313005fcfeb29e9b97507328d508' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -717,7 +804,7 @@ const SwirlResourceListItem = class {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (index.h(index.Host, { key: 'a10409a38264aedcb984dbb18a3b117ee3a6fbf7', role: "row" }, index.h("div", { key: 'bbb1141f8b853d4a28bfdf40ba4503b45c88947b', class: className, role: "gridcell" }, index.h(Tag, { key: 'de393bac42fe13a6272aa6f6bfe9b058cd31f0b6', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '03713ae4710c72010a24a5df6e9e8401d3561fe4', class: "resource-list-item__media" }, index.h("slot", { key: '8521bc2441764bfe61afab1a9ad84cbf4cbbdf08', name: "media" }))), index.h("span", { key: '55d6c99daf2e57b566c9c07662247ba1937c07bd', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '64a7f44766a57ad491aa878422fdb08f82dba894', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: 'fd6d3c4540cd0d085092b992434efd234b68ee84', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: 'a5e92893c72ac723333257aa4f6e49c7d9316852', class: "resource-list-item__meta" }, index.h("span", { key: '4407cc4da70749c2e9abe19cf7058edc98d94e31', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '384d5a72dcd83555047d2c7ef27f9914ee6e33c7', class: "resource-list-item__badges" }, index.h("slot", { key: 'fa000766ce367c8f9545aa8f7457335fd02b7d73', name: "badges" }))))), this.selectable && (index.h("span", { key: '0923c527c6044932af7a3c0293134e5bfd1c2eb9', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'd1b1250b6f7471fc0f893966eed15eeef3592af4', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '530934d130a9fba3dd99719cb647f53fa697ab42' }))))), index.h("span", { key: 'df5f1782f2126f554b4100420c5b9d45c5b8f793', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: '3b0fa99132b3fba416547fb839b00a6ec0d75ed2', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: 'bfbc36084ae6871f821c437b52517e7f04e868f9', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '4b8f9bd6c5d6c14deccc80200af58378c2cf64e5', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: 'a9e8e50c27af4c053d814c29701cd8c61bd7f2c2', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: 'ff8879f00857f4efe09903c5ecc119d5474c1666', size: this.iconSize })))));
+        return (index.h(index.Host, { key: 'ac74fb7463d8d0d9f2b83356353e9c4a90b5a1aa', role: "row" }, index.h("div", { key: '733859dfd9c0980e8659399d2344e6a013420b86', class: className, role: "gridcell" }, index.h(Tag, { key: '8fbccd573e7135479fe1b27179b66737cb08d602', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '22db389db7d6f0d62dcbfb03efcd69d7904db977', class: "resource-list-item__media" }, index.h("slot", { key: 'fb241f299008cb0a622df9958316d826c01d4c7e', name: "media" }))), index.h("span", { key: 'ee3eca86bcef05e666e17b359686d44cfe873715', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '39d163e3741c8b6f7cff6511beb16dcf6277e1ec', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '039ebc6f9d22031d26ed207c19251000bf28e58d', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: 'e9b96c32db78de5392ab803ad75906b932f5b94f', class: "resource-list-item__meta" }, index.h("span", { key: 'b60fc5920cc7a2a4a375ba3a20d836f5596708a9', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '8f42c56de7e649bd0112bbbe67a9c45508292632', class: "resource-list-item__badges" }, index.h("slot", { key: '8e03652fd0084c4444e158e140095c64160309c2', name: "badges" }))))), this.selectable && (index.h("span", { key: 'ab378006208232d293b37b920cb47e7350de76e4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '6b75aa2f40d80579f38364d3636a67d8d5f9e8e9', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '4ad6c7dd6e5c36269dec1f37a1c94b1fdc9cd56d' }))))), index.h("span", { key: '7df52eb0305c2a7a6bad2299940fa718caa3ab25', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: 'b3a1841057ba2f9aec1ca4fd1827aa27bd1c2d70', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: 'b109f91d7c21e88853ab0a8b56f894fbca8b2d1c', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '2e946c4671ff07f7e6d08b55a3f6acf17f81214a', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: 'a7e6850dbe1be6cff77d6eb3dae8fb44b3c03955', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: 'ad3da0fee6bbac0a17db50b0cfc3a2484e991c07', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-3e7933b7.js');
 const index$1 = require('./index-9f94303c.js');
 const utils = require('./utils-3ff36fc3.js');
@@ -210,17 +210,17 @@ const SwirlAutocomplete = class {
         const className = index$1.classnames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (index.h(index.Host, { key: 'e523e43c9a3f188b280212d75eb7cda439efa16a' }, index.h("div", { key: 'bc223dea7f5ee6dcfcb7ff1fec7548f3e70ba02f', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (index.h(index.Host, { key: '35803245ee554c6f4d3ead9f87a1cdf73343007f' }, index.h("div", { key: '0237472750287689c060557515ffcf6d208c2a6e', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            this.value.length > 0 && (index.h("div", { key: '3cf9889c1c2398778346eb598232095472ac03ce', class: "autocomplete__multi-select-tags" }, index.h("swirl-stack", { key: '710997aa77b59d1d997de03b32a91e699a7403a4', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+            this.value.length > 0 && (index.h("div", { key: 'e06650357d144482792cb5a78ced14a49f77df6c', class: "autocomplete__multi-select-tags" }, index.h("swirl-stack", { key: '2b93f17cae1e7d2683d41eb4da28beb9fd9c378e', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
             return (index.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 }));
-        })))), index.h("swirl-text-input", { key: '67c627131a343cd5eab355baa0ce3d6113672a72', 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 }), index.h("div", { key: '1fa4b4c6e1c2116779b3e019f138ceae18143397', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        })))), index.h("swirl-text-input", { key: 'fe61f1a45792f11098c08c9a519c7286288c3ff2', 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 }), index.h("div", { key: '13c30246e60759e39e6f86b95286673d096e7724', 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 && (index.h("div", { key: '25bf6f40fc87b6273e8a627aab03c9de2d1a3130', class: "autocomplete__spinner" }, index.h("swirl-spinner", { key: 'e4e2d6ad0fca0adeea6770d339fcc310fd522083' }))), this.suggestions.length > 0 && (index.h("swirl-option-list", { key: '7c155395c8eca3d516610ee58c76b4da3465c7a8', 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) => (index.h("swirl-option-list-item", { selected: Array.isArray(this.value)
+            } }, this.loading && (index.h("div", { key: 'eb4fef11c6eedb9b5aa04ea9275f80d1249bad28', class: "autocomplete__spinner" }, index.h("swirl-spinner", { key: '8dd45fb707d886f01bcb8b7036a30fa6af4c0918' }))), this.suggestions.length > 0 && (index.h("swirl-option-list", { key: '95db25769911dcc9876eb94730adeb092844d97d', 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) => (index.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 })))))))));
     }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 
 const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(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__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));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)}";
@@ -31,7 +31,7 @@ const SwirlAvatarGroup = class {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = index$1.classnames("avatar-group__badge");
-        return (index.h(index.Host, { key: 'f16344ade441c4be4d7691d23d97fc5fc14dee0e' }, index.h("div", { key: 'b9436677d5c1bfe783500aa7db2d4e9dd4550cb7', class: className, role: "group" }, index.h("slot", { key: '9cfcfa7578ff29268f47547c6812a5ea0d492adc' }), this.badge && (index.h("span", { key: '534ee5051d37fefb0b7e097f2cbbb9017127cc25', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (index.h(index.Host, { key: '10d42609d39c903d246ef3f3854351ad69cd944f' }, index.h("div", { key: '019ae7ee3dc2f780724573ad9dc5aeafde9429b5', class: className, role: "group" }, index.h("slot", { key: 'a345898276d5fcfb41e01896c4b20809e8c8d1e7' }), this.badge && (index.h("span", { key: '58bcb0d10eb046f09c4009b6600a7f10b7b2c1e2', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
 };
 SwirlAvatarGroup.style = SwirlAvatarGroupStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 
 const swirlAvatarCss = ":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%}.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;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;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;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;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;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;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;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;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:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.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__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)}";
@@ -110,7 +110,7 @@ const SwirlAvatar = class {
         });
         const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (index.h(index.Host, { key: 'a846927adb4c374f3663f856b05d50603915502d', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: 'db1b5a6ae753350cb74562ebbcaffdcd1fe9b73a', class: className, part: "avatar" }, showImage && (index.h("span", { key: '92421d372f10ca75f3a4d40b5318ab88073f05ef', class: "avatar__image" }, index.h("img", { key: '7003338128d40de0ed8a97ed92c84d17d2b886f1', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: '1b9fbbcee47c46c1264dbdefe20b71fe6edc91d7', class: "avatar__initials" }, index.h("span", { key: 'a41ef5f739b738726027bb0ba6cf9f6aca9808c8' }, this.initials))), showIcon && index.h("span", { key: '8b1933c8be2d2072824aeda245a771f84d7a9707', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: 'afc1c2e68873784d757587881cc05cfbb98f848a', class: "avatar__icon" }, index.h("swirl-icon-person", { key: '40a6e6fdc13ae07cb18ab9d0ac1fecfb092217f4' }))), showBadge && (index.h("span", { key: '69dc8a86df183237882c7241b0b73d7babfcf9fe', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: '822c6123a6984406e709cfc6083070eaf35044e5', class: toolClassName }, index.h("slot", { key: 'd5e8246097832bf808fcb91dc5a822d1923db2a4', name: "tool" }))), this.showLabel && (index.h("span", { key: '10e6e09526bf6f3818ff5e54b270695adaf29e15', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (index.h(index.Host, { key: '58a018fec9dcb72f391e50040a6b4e6b4559751e', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: 'f44174ddb46d74bdeea62dd6f81846913c46b8ad', class: className, part: "avatar" }, showImage && (index.h("span", { key: '1ed67acba8ab9f7c154c7e6647c15dd991db55e1', class: "avatar__image" }, index.h("img", { key: '4efe8dcf0fa3c5a0aab5c0ec53ea09be8c49bccf', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: 'b8e05f3d8cefe38da0c24fb9fef0f215cff01f1d', class: "avatar__initials" }, index.h("span", { key: 'e57114e2cacf55923020e6fda9ad16bb6eecc887' }, this.initials))), showIcon && index.h("span", { key: 'd1d9ee462bf6574cf98f991b6b963d51963dfa3b', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: 'a7dfe378cb3f824094bfd59ce3c49bcbd3c3ded6', class: "avatar__icon" }, index.h("swirl-icon-person", { key: '162e29ddddd261833c31d679d4169fd056461ad1' }))), showBadge && (index.h("span", { key: '82a4f2a24fe237de8722e39a2a43030d24c7bf0f', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: 'aebe16ddb21e9ab756168a15d0e0478bc9c7fdd6', class: toolClassName }, index.h("slot", { key: '207a5c9b2b59e9e6dd4c424a5e8c968a5973b904', name: "tool" }))), this.showLabel && (index.h("span", { key: '5c76d712a42ef23ac0603e4c9268b57b621e4c1b', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 
 const swirlBadgeCss = ":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-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--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}";
@@ -21,7 +21,7 @@ const SwirlBadge = class {
         const className = index$1.classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
             "badge--has-icon": this.icon,
         });
-        return (index.h(index.Host, { key: '33f35cb8399a9a9af91d771dff6b640b577c3b69', role: "status" }, index.h("span", { key: '95465982eb5690342abae2235b57644afd8cdd4d', class: className, part: "badge" }, this.icon && index.h("span", { key: '8a775d6ceb801d34380e82450879108dab4fcb37', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (index.h("span", { class: "badge__label" }, this.label)) : (index.h(index.Fragment, null, this.icon === undefined && (index.h("span", { class: "badge__label" }, "\u00A0")), index.h("swirl-visually-hidden", null, this.label))))));
+        return (index.h(index.Host, { key: '06a07667ccb9474de7010dfc31c2119d651bb476', role: "status" }, index.h("span", { key: 'e677f471ca17db30f0fb63c53b4b175f1bb23082', class: className, part: "badge" }, this.icon && index.h("span", { key: '8773650b811868a363f29b63d35b890bbc97baf7', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (index.h("span", { class: "badge__label" }, this.label)) : (index.h(index.Fragment, null, this.icon === undefined && (index.h("span", { class: "badge__label" }, "\u00A0")), index.h("swirl-visually-hidden", null, this.label))))));
     }
 };
 SwirlBadge.style = SwirlBadgeStyle0;

package/dist/cjs/swirl-banner.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6aba64ed.js');
+const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 const utils = require('./utils-3ff36fc3.js');
 
@@ -64,7 +64,7 @@ const SwirlBanner = class {
         const className = index$1.classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (index.h(index.Host, { key: '7d1d0fe808a0d56888901519a1d2c7d7a5953703' }, index.h("div", { key: '6f0482657ddd0b91ba5ca740db378e3fa5cad176', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, index.h("div", { key: '82bc8952ea7cc638a13eb8997492515280793e70', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (index.h("span", { key: 'd2d6aa7d78d04fdb16a5d9d632fef49977400690', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '637f8d6f03aa8b9ed71798b60a2a8b6f68c96e6b', class: "banner__text" }, this.content)), showControls && (index.h("div", { key: '8c6ed8081c22c3f9121223ea2dc6bd3918f1babf', class: "banner__controls" }, this.actionLabel && (index.h("button", { key: 'afd0254e27d026a1f828ec203eed23a6934c8dbe', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (index.h("button", { key: '7842e8dc33cfc78226ade9d5b8d141809efbb9e7', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, index.h("swirl-icon-close", { key: '44118f5b5f92f476440b3adb6d33b3c88ef3b5a8' }))))))));
+        return (index.h(index.Host, { key: '59ad8b46103af68b01514dffb4a8ffc3f7366135' }, index.h("div", { key: 'e7a44b513cc0e362187b7972bbe30370b9789b1d', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, index.h("div", { key: '4465f6f6ab0afe3231e25a52192a9f56d5756efe', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (index.h("span", { key: '4aa59545611d08217a0edb767ee34f5d7fc2e18b', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '91ee916917e08fd7d19277740a63c6efa2493910', class: "banner__text" }, this.content)), showControls && (index.h("div", { key: '49b0b4c1f8b83e60e033fd3729c1591f3ba961bc', class: "banner__controls" }, this.actionLabel && (index.h("button", { key: '3642186b3c70e2a2a2fef4ec21ab3cda77d345c6', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (index.h("button", { key: 'a09f723ea799b686f0e06baeeb87590a1b60f1fa', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, index.h("swirl-icon-close", { key: 'caaba0ff27439dd72e1efd50178a253e496abd4d' }))))))));
     }
     get element() { return index.getElement(this); }
 };