@getflip/swirl-components 0.0.0-beta-20260114160010

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

@@ -0,0 +1,806 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
+var utils = require('./utils-UfZG-xPD.js');
+var sortable_esm = require('./sortable.esm-B1ZNencO.js');
+var v4 = require('./v4-Bq3ldsQe.js');
+
+const swirlAppLayoutCss = ":host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(\n              to right,\n              rgba(0, 0, 0, 0.05) 0,\n              rgba(0, 0, 0, 0) 80%,\n              rgba(0, 0, 0, 0) 100%\n            );content:\"\"}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);z-index:3;border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
+
+const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
+const SwirlAppLayout = 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.backToNavigationViewButtonLabel = "Back to navigation";
+        this.navigationBackButtonLabel = "Go back";
+        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
+        this.navigationToggleLabel = "Toggle navigation";
+        this.navigationOverlayLabel = "Show navigation";
+        this.sidebarCloseButtonLabel = "Close sidebar";
+        this.transitionStyle = "slides";
+        this.contentScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+            scrolledToBottom: false,
+        };
+        this.mobileView = "navigation";
+        this.navScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.navExpansionState = "expanded";
+        this.sidebarScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.mediaQueryUnsubscribe = () => { };
+        this.onBackToNavigationViewButtonClick = () => {
+            this.changeMobileView("navigation");
+        };
+        this.onCtaClick = (event) => {
+            this.ctaClick.emit(event);
+        };
+        this.onNavigationBackButtonClick = (event) => {
+            this.navigationBackButtonClick.emit(event);
+        };
+        this.onSidebarCloseButtonClick = () => {
+            this.hideSidebar();
+        };
+        this.onContentScroll = utils.debounce(() => {
+            this.updateContentScrollState();
+        }, 16);
+        this.onNavScroll = utils.debounce(() => {
+            this.updateNavScrollState();
+        }, 16);
+        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");
+        };
+    }
+    componentWillLoad() {
+        if (this.initialMobileView) {
+            this.mobileView = this.initialMobileView;
+        }
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateNavigationStatus();
+            this.updateSidebarStatus();
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+        queueMicrotask(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateSidebarStatus();
+            this.updateNavigationStatus();
+            this.checkMobileView();
+        });
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.isDesktop = isDesktop;
+        });
+        queueMicrotask(() => {
+            this.restoreNavExpansionState();
+            this.updateContentScrollState();
+            this.updateSidebarScrollState();
+            this.updateNavScrollState();
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+        this.mutationObserver?.disconnect();
+    }
+    onDocumentClick(event) {
+        if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed") {
+            return;
+        }
+        const clickedInsideOfOverlayedNav = event.composedPath().includes(this.navEl) ||
+            event.composedPath().includes(this.headerEl);
+        if (!clickedInsideOfOverlayedNav) {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === "Escape" && this.navExpansionState === "overlayed") {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    watchMobileView() {
+        this.checkMobileView();
+    }
+    /**
+     * Show the sidebar
+     */
+    async showSidebar() {
+        if (this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        if (Boolean(this.sidebarOpeningTimeout)) {
+            clearTimeout(this.sidebarOpeningTimeout);
+        }
+        this.sidebarOpening = true;
+        const delay = 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
+     */
+    async hideSidebar() {
+        if (!this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        if (Boolean(this.sidebarClosingTimeout)) {
+            clearTimeout(this.sidebarClosingTimeout);
+        }
+        this.sidebarClosing = true;
+        const delay = utils.isMobileViewport() || utils.prefersReducedMotion() ? 0 : 300;
+        this.sidebarClosingTimeout = setTimeout(() => {
+            this.sidebarActive = false;
+            this.sidebarClosing = false;
+            this.changeMobileView("body");
+            this.sidebarToggle.emit(false);
+        }, delay);
+    }
+    /**
+     * Toggle the sidebar
+     */
+    async toggleSidebar() {
+        if (!this.hasSidebar) {
+            return;
+        }
+        if (this.sidebarActive) {
+            this.hideSidebar();
+        }
+        else {
+            this.showSidebar();
+        }
+    }
+    /**
+     * Get state of the collapsible navigation
+     */
+    async getCollapsibleNavigationState() {
+        return this.navExpansionState;
+    }
+    /**
+     * Set state of the collapsible navigation
+     */
+    async setCollapsibleNavigationState(state) {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        this.navExpansionState = state;
+        this.navigationExpansionStateChange.emit(this.navExpansionState);
+        localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState);
+    }
+    /**
+     * Change the currently displayed view on mobile viewports
+     * @param mobileView
+     */
+    async changeMobileView(mobileView, transition = true) {
+        if (this.mobileView === mobileView ||
+            (mobileView === "navigation" && !this.hasNavigation) ||
+            (mobileView === "sidebar" && !this.hasSidebar)) {
+            return;
+        }
+        const mobile = utils.isMobileViewport();
+        if (!mobile || !transition) {
+            this.mobileView = mobileView;
+            this.mobileViewChange.emit(this.mobileView);
+            return;
+        }
+        if (Boolean(this.transitionTimeout)) {
+            clearTimeout(this.transitionTimeout);
+        }
+        this.transitioningFrom = this.mobileView;
+        this.transitioningTo = mobileView;
+        const userPrefersReducedMotion = utils.prefersReducedMotion();
+        const delay = userPrefersReducedMotion
+            ? 0
+            : this.transitionStyle === "slides"
+                ? 400
+                : this.transitionStyle === "dialog"
+                    ? 300
+                    : 0;
+        this.transitionTimeout = setTimeout(() => {
+            this.mobileView = mobileView;
+            this.transitioningFrom = undefined;
+            this.transitioningTo = undefined;
+            this.mobileViewChange.emit(this.mobileView);
+        }, delay);
+    }
+    checkMobileView() {
+        if ((this.mobileView === "navigation" && !this.hasNavigation) ||
+            (this.mobileView === "sidebar" && !this.hasSidebar)) {
+            this.mobileView = "body";
+            return;
+        }
+        const sidebarActive = this.mobileView === "sidebar" || this.sidebarActive;
+        if (sidebarActive === this.sidebarActive) {
+            return;
+        }
+        if (sidebarActive) {
+            this.showSidebar();
+        }
+        else {
+            this.hideSidebar();
+        }
+    }
+    updateNavigationStatus() {
+        this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
+    }
+    updateCustomAppBarBackButtonStatus() {
+        this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
+    }
+    updateSidebarStatus() {
+        this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+    }
+    updateContentScrollState() {
+        const newContentScrollState = {
+            scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+            scrolledToTop: this.contentEl.scrollTop === 0,
+            scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
+                this.contentEl.scrollHeight,
+        };
+        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
+            this.contentScrollState = newContentScrollState;
+        }
+    }
+    updateNavScrollState() {
+        const newNavScrollState = {
+            scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
+            scrolledToTop: this.navEl.scrollTop === 0,
+        };
+        if (Object.keys(newNavScrollState).some((key) => newNavScrollState[key] !== this.navScrollState[key])) {
+            this.navScrollState = newNavScrollState;
+        }
+    }
+    updateSidebarScrollState() {
+        const newSidebarScrollState = {
+            scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
+            scrolledToTop: this.sidebarEl.scrollTop === 0,
+        };
+        if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
+            this.sidebarScrollState = newSidebarScrollState;
+        }
+    }
+    restoreNavExpansionState() {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        const restoredNavExpansionState = localStorage.getItem(this.navigationExpansionStateStorageKey);
+        if (Boolean(restoredNavExpansionState)) {
+            this.setCollapsibleNavigationState(restoredNavExpansionState);
+        }
+    }
+    render() {
+        const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+            this.hasNavigation &&
+            !this.hasCustomAppBarBackButton;
+        const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+        const hasBottomBar = Boolean(this.el.querySelector('[slot="bottom-bar"]'));
+        const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
+        const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
+        const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
+            Boolean(this.ctaLabel);
+        const navigationActive = this.hasNavigation &&
+            (!this.collapsibleNavigation ||
+                this.navExpansionState !== "collapsed" ||
+                !this.isDesktop);
+        const className = 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,
+            "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
+            "app-layout--has-app-bar-controls": hasAppBarControls,
+            "app-layout--has-bottom-bar": hasBottomBar,
+            "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+            "app-layout--has-custom-sidebar-header": hasCustomSidebarHeader,
+            "app-layout--has-floating-action-button": hasFloatingActionButton,
+            "app-layout--has-navigation": this.hasNavigation,
+            "app-layout--has-sidebar": this.hasSidebar,
+            "app-layout--hide-app-bar": this.hideAppBar,
+            "app-layout--nav-collapsible": this.collapsibleNavigation && this.isDesktop,
+            "app-layout--nav-scrollable": this.navScrollState.scrollable,
+            "app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
+            "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+            "app-layout--sidebar-closing": this.sidebarClosing,
+            "app-layout--sidebar-opening": this.sidebarOpening,
+            "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
+            "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
+        });
+        return (index.h(index.Host, { key: '0970730a8b11319c50969d6d6e7f217dcf56e2f0' }, index.h("section", { key: '06d420b7d6bfe12422b52e2cdcb8fa8a2ed0fbac', "aria-labelledby": "app-name", class: className }, index.h("div", { key: 'b50a9beffae3145861ed4b71705fe673f5d10043', class: "app-layout__grid" }, index.h("header", { key: '04c3f7e4b7cb227cca2e9a15e262ddc9874032e1', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: '67ba8ba5394d42ba1f96ccb3258aefb8acce87c9', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '8795a4b7ac5a63bdd1f838c6ba1d0314cfa33dc9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: '0a11ae6739ed9863837da26a60a5f524ca2215ea', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: 'e0670ebab68aaefd7342a31b0a2c139f181c4cf1', hideLabel: true, icon: this.navExpansionState !== "expanded"
+                ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: 'df74e59b27c2e15ffc532826ac69794df187ece9', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: 'ca4e1610d7566b66ebe6958f8ec6f89d4a84554c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '7ca7f6ca8a69fead26966a6b224966f4404351da', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: '3d1205492f28588558a5e1d1c1948c4da7870c46', class: "app-layout__navigation-controls" }, index.h("slot", { key: 'f97090b47f524589e4d86e293e92ce2e001503dd', name: "navigation-controls" })))), index.h("nav", { key: '9b2f944843bcee7c5322b728ea26fcc7d8ed990f', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                this.collapsibleNavigation &&
+                this.navExpansionState === "collapsed" }, index.h("slot", { key: 'a3fa785458acf70951cf209062e9f91bfec49db4', name: "navigation" })), index.h("section", { key: '3649f14cce3bdf275bc7325680b4c193085272f7', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '401b6adeda9ed569d8a6c37f381fed0623a34701', class: "app-layout__app-bar" }, index.h("span", { key: '7b60e9abca35a3c6ab900e8d882116e8b22ce730', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: '44c01881cb2c4799942609ca43f2ead4de855859', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '63a89ec584fa6a21a5cf4be3fdf15e84df01b03a', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: '5d05136bb74adcc5a404bdb74533636777f3b598', hideLabel: true, icon: this.transitionStyle === "dialog"
+                ? "<swirl-icon-close></swirl-icon-close>"
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
+            this.navExpansionState !== "expanded" && (index.h("span", { key: '0426043d85f25bd9581b2046215dba5cc50ee24c', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '5b64b49937d180b23de6435351a0b7498562b2f7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: 'eaa0172b442211086532a15fae6bb99b70dafab6', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '86177f0040e21c020b2d88a2e11cc1f2045d9bcf', name: "custom-app-bar-back-button" })), index.h("div", { key: 'ff317fc8d6a4f75b81db2f4c6867d1259a9e2cc6', class: "app-layout__app-bar-content" }, index.h("slot", { key: '59a8e892b40e1b56acc3f33cb956d1a588670a5e', name: "app-bar" })), index.h("div", { key: '2244b236929f9de30d18f886b2992187b1f9baf8', class: "app-layout__app-bar-controls" }, index.h("slot", { key: 'c5fae8b152e14275cb09b7db637ea8ca64932648', name: "app-bar-controls" })))), index.h("div", { key: '85a6875e28ec691f659cbee27e299bca2048ff67', class: "app-layout__banner" }, index.h("slot", { key: '9790312e956f47faca3c1c4b04a6b1422a889498', name: "banner" })), index.h("div", { key: 'd33ae32d0644d24027423eb9dc9ba94c54b0070b', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '9e615a708ac9ae2817a680e868c70d4a9ec3d075', name: "content" })), index.h("div", { key: 'd173a40d98a1d8cd6b93135d9a6984afc6487813', class: "app-layout__bottom-bar" }, index.h("slot", { key: '10a8422834710d9b15dea188d0f8b24dab14887e', name: "bottom-bar" }))), index.h("aside", { key: '0da3e8a8bf7be2c6ae12ebf89b6fc91f4d9a27a2', class: "app-layout__sidebar" }, index.h("header", { key: 'da7303d27a7c9d65a3d3dd7ec9799f7ea8b63dd8', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: 'fd8fc8403066c85dd26ed414afded579928da657', name: "custom-sidebar-header" })), index.h("header", { key: 'addfa87cef788f272e586e3a02b0f47be414cc58', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: '7daf54726d77b5a9656dd888d32d4c111746e59e', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), index.h("swirl-heading", { key: 'c743c2b1049f87a5c81b99ddc836f4a2b9b08561', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: '9443e3843d55af79d62c949b8df53a6a1f27a4e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: '0b5eff0be0d4e98ed2755b412d8783fe25d8d809', name: "sidebar" }))), index.h("span", { key: 'a1487ea686f593c4b117a9eb74fe61fe8b516336', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '02d61ee5b96263295218ed0b99cb8b93d1e06df0', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '7f1e9ae5a5cbf12e28b12d8e7227fee017f6f532', name: "floating-action-button" }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mobileView": ["watchMobileView"]
+    }; }
+};
+SwirlAppLayout.style = swirlAppLayoutCss;
+
+const swirlEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state--has-controls .empty-state__controls{display:block}.empty-state--has-slotted-illustration .empty-state__slotted-illustration{display:block}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-24)}.empty-state__controls{display:none}.empty-state__slotted-illustration{display:none;max-width:16rem}";
+
+const SwirlEmptyState = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.headingLevel = 4;
+    }
+    render() {
+        const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
+        const hasSlottedIllustration = Boolean(this.el.querySelector('[slot="illustration"]'));
+        const className = index$1.classnames("empty-state", {
+            "empty-state--has-controls": hasControls,
+            "empty-state--has-slotted-illustration": hasSlottedIllustration,
+        });
+        return (index.h(index.Host, { key: '34abe836a62db33f14264298d0c0d15568961d94' }, index.h("div", { key: 'bbd76afc365205dc1c6ed1653c1db21aa811027a', class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { key: '453bdd6059141b7ccfa8642ceaac53913588f166', alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { key: '8bfd55712d1c4e43b5cad4476da5fab197ff70bb', class: "empty-state__slotted-illustration" }, index.h("slot", { key: '3fc651d3c12f47111da74e3675ccfe4d249fd1a1', name: "illustration" })), index.h("div", { key: 'a00c49948225c39089e6853a5a4d330ff3e871fb', class: "empty-state__body" }, index.h("swirl-stack", { key: 'ef6509b571e8d28a8ed61cd7351d98de8a2ca87d', align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { key: '3f7032374ffd6ca1cba1fa9f442bc2ae9f164f32', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), index.h("div", { key: '4edbf7391b7de8fa7297ef34457e45b46992df33', class: "empty-state__content" }, index.h("swirl-text", { key: '03151b35f6f40732065e0bd836f7bb19ebcb0ebc', align: "center", color: "subdued" }, index.h("slot", { key: 'c1d61b383a7f69f3a5fcb6cfc067acb32b49b5a1' })))), index.h("div", { key: '024b7f133fc46d510cd872c084efc0c1c4090740', class: "empty-state__controls" }, index.h("slot", { key: 'b1668ee1428f9b4d1d30e86b1d103f38cdbed6ff', name: "controls" }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlEmptyState.style = swirlEmptyStateCss;
+
+const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
+
+const SwirlIconFolderShared = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            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: 'a9f2753ed7c02959cf77583c6cf47b465e5054c1', "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: '3a7cfd358cc42f3aef91a37cc503454d2d57400b' }, index.h("path", { key: '1eb678d1fb7a0f58e8408909fac5db2c3fc1dfa0', 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: 'f6edb2d6979acd08528e2a7fa24e557851e89955' }, index.h("path", { key: '8d55e5d65327d5083840cdeda5f789b0763d37ee', 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: '89e53b197675fdf7a0f3a6d6001346db07d372af' }, index.h("path", { key: '819d535beaae8f841bcdc0f60191e3083078e02e', 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 = swirlIconCss;
+
+const swirlResourceListCss = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";
+
+const SwirlResourceList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemDrop = index.createEvent(this, "itemDrop", 7);
+        this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+        this.assistiveTextItemMoving = "Current position:";
+        this.assistiveTextItemMoved = "Item moved. New position:";
+        this.semantics = "grid";
+        this.spacing = "0";
+        this.listId = v4.v4();
+        this.focusedIndex = 0;
+        this.toggleDrag = (event) => {
+            const item = event.detail;
+            if (Boolean(this.dragging)) {
+                this.stopDrag(item);
+            }
+            else {
+                this.startDrag(item);
+            }
+        };
+        this.startDrag = (item) => {
+            this.dragging = item;
+            this.draggingStartIndex = this.getItemIndex(this.dragging);
+            item.setAttribute("dragging", "true");
+            const index = this.getItemIndex(this.dragging);
+            this.focusItemAtIndex(index);
+            this.assistiveText = this.assistiveTextItemGrabbed;
+        };
+        this.stopDrag = (item) => {
+            const newIndex = this.getItemIndex(this.dragging);
+            this.dragging = undefined;
+            item.removeAttribute("dragging");
+            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+            this.draggingStartIndex = undefined;
+        };
+        this.onKeyDown = (event) => {
+            if (this.semantics === "grid" && !Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
+                    this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+                }
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
+                    const prevIndex = this.focusedIndex === 0
+                        ? this.items.length - 1
+                        : this.focusedIndex - 1;
+                    this.focusItemAtIndex(prevIndex);
+                }
+                else if (event.code === "Enter" && Boolean(this.controllingElement)) {
+                    const item = this.items[this.focusedIndex];
+                    if (!Boolean(item) || !item.isConnected) {
+                        return;
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
+                    item.click();
+                }
+                else if (event.code === "Home") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(0);
+                }
+                else if (event.code === "End") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(this.items.length - 1);
+                }
+            }
+            if (Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
+                    this.moveDraggedItemDown();
+                }
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
+                    this.moveDraggedItemUp();
+                }
+                else if (event.code === "Space" || event.code === "Enter") {
+                    const target = event.composedPath()[0];
+                    if (!target?.classList.contains("resource-list-item__drag-handle")) {
+                        event.preventDefault();
+                        this.stopDrag(this.dragging);
+                    }
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        this.observeSlotChanges();
+        this.collectItems();
+        this.setupControllingElement();
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+        this.setSectionSpacingAndSeparator();
+    }
+    componentDidRender() {
+        this.setupDragDrop();
+    }
+    disconnectedCallback() {
+        this.sortable?.destroy();
+        this.observer?.disconnect();
+        this.controllingElement?.removeEventListener("keydown", this.onKeyDown);
+    }
+    observeSlotChanges() {
+        this.observer = new MutationObserver(() => {
+            this.collectItems();
+            this.setItemAllowDragState();
+            this.setSectionSpacingAndSeparator();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    watchAllowDrag() {
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+    }
+    collectItems() {
+        this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((el) => el.isConnected);
+        this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((el) => el.isConnected);
+        this.removeItemsFromTabOrder();
+        this.enableItemFocus(this.items[this.focusedIndex]);
+        if (Boolean(this.controllingElement)) {
+            this.items[0]?.setAttribute("aria-selected", "true");
+        }
+    }
+    setupControllingElement() {
+        if (!Boolean(this.controllingElement)) {
+            return;
+        }
+        this.controllingElement.setAttribute("aria-controls", this.listId);
+        this.controllingElement.setAttribute("role", "combobox");
+        this.controllingElement.setAttribute("aria-autocomplete", "list");
+        this.controllingElement.addEventListener("keydown", this.onKeyDown);
+    }
+    getItemIndex(item) {
+        return this.items.map((i) => i).findIndex((i) => i === item);
+    }
+    removeItemsFromTabOrder() {
+        if (this.semantics !== "grid") {
+            return;
+        }
+        this.items.forEach((item) => {
+            const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
+            const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
+            if (Boolean(this.controllingElement)) {
+                item.setAttribute("aria-selected", "false");
+            }
+            focusableEl?.setAttribute("tabIndex", "-1");
+            dragHandle?.setAttribute("tabIndex", "-1");
+        });
+    }
+    setItemAllowDragState() {
+        if (this.allowDrag) {
+            // Dragging items inside a `swirl-resource-list-section` is not currently allowed
+            this.items
+                .filter((item) => this.sections.every((section) => !section.contains(item)))
+                .forEach((item) => {
+                item.setAttribute("allow-drag", "true");
+                item.addEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+        else {
+            this.items.forEach((item) => {
+                item.removeAttribute("allow-drag");
+                item.removeEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+    }
+    setupDragDrop() {
+        if (Boolean(this.sortable)) {
+            this.sortable.destroy();
+        }
+        if (!this.allowDrag) {
+            return;
+        }
+        this.sortable = sortable_esm.Sortable.create(this.gridEl, {
+            animation: 150,
+            draggable: "swirl-resource-list-item",
+            handle: ".resource-list-item__drag-handle",
+            onEnd: (event) => {
+                this.itemDrop.emit({
+                    item: event.item,
+                    oldIndex: event.oldDraggableIndex,
+                    newIndex: event.newDraggableIndex,
+                });
+            },
+        });
+    }
+    enableItemFocus(item, focus) {
+        if (!Boolean(item) || Boolean(this.controllingElement)) {
+            return;
+        }
+        const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
+        const dragHandle = item.querySelector(".resource-list-item__drag-handle");
+        if (Boolean(dragHandle)) {
+            dragHandle.setAttribute("tabIndex", "0");
+        }
+        if (!Boolean(interactiveElement)) {
+            return;
+        }
+        interactiveElement.setAttribute("tabIndex", "0");
+        if (focus && !Boolean(this.controllingElement)) {
+            interactiveElement.focus();
+        }
+    }
+    focusItemAtIndex(index) {
+        this.removeItemsFromTabOrder();
+        const item = this.items[index];
+        if (!Boolean(item) || !item.isConnected) {
+            return;
+        }
+        this.enableItemFocus(item, !Boolean(this.controllingElement));
+        if (Boolean(this.controllingElement)) {
+            item.setAttribute("aria-selected", "true");
+            item.scrollIntoView({ block: "nearest" });
+        }
+        this.focusedIndex = index;
+    }
+    moveDraggedItemDown() {
+        const nextSibling = this.dragging.nextElementSibling;
+        if (!Boolean(nextSibling)) {
+            return;
+        }
+        nextSibling.after(this.dragging);
+        this.collectItems();
+        this.focusItemAtIndex(this.getItemIndex(this.dragging));
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    moveDraggedItemUp() {
+        const prevSibling = this.dragging.previousElementSibling;
+        if (!Boolean(prevSibling)) {
+            return;
+        }
+        prevSibling.before(this.dragging);
+        this.collectItems();
+        this.focusItemAtIndex(this.getItemIndex(this.dragging));
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    setSectionSpacingAndSeparator() {
+        this.sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+            section.spacing = this.spacing;
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a0b3042effe4f77ca1a9b9ab88817bda47b93b7d', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '8998a40becb2bf96f28bd270cbbd66fafbc9cebc', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: 'f026ced20ca14db8b505ac8dab1c8c97c3b4ffbf', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'ff57afd9915587648d1a0e4cfb827f2455a884e7', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: 'dea319641ba5ec73d99640f322a1f6f6e2da557a' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "allowDrag": ["watchAllowDrag"]
+    }; }
+};
+SwirlResourceList.style = swirlResourceListCss;
+
+const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default)}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--s-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible) .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n    --swirl-resource-list-item-background-hovered\n  );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+
+const SwirlResourceListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.checked = false;
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move item";
+        this.interactive = true;
+        this.labelWeight = "medium";
+        this.labelTooltipPosition = "top";
+        this.menuTriggerLabel = "Options";
+        this.hasMedia = false;
+        this.iconSize = 24;
+        this.elementId = v4.v4();
+        this.mediaQueryUnsubscribe = () => { };
+        this.onClick = () => {
+            if (!this.selectable) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.valueChange.emit(this.checked);
+        };
+        this.onBlur = () => {
+            this.makeControlUnfocusable();
+        };
+        this.onFocus = () => {
+            this.makeControlFocusable();
+        };
+        this.onMenuTriggerClick = (event) => {
+            if (this.disabled && !Boolean(this.href)) {
+                event.stopPropagation();
+            }
+        };
+        this.onDragHandleKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                event.preventDefault();
+                this.toggleDrag.emit(this.el);
+            }
+        };
+        this.onControlClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+    }
+    componentWillLoad() {
+        this.updateMediaState();
+    }
+    componentDidLoad() {
+        this.parentSemantics = this.el.closest("swirl-resource-list")?.semantics;
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
+        this.makeControlUnfocusable();
+        if (Boolean(this.menuTriggerId)) {
+            console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
+        }
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    get hasBadges() {
+        return Boolean(this.el.querySelector("[slot='badges']"));
+    }
+    get showMeta() {
+        return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    updateMediaState() {
+        const mediaContainer = this.el.querySelector('[slot="media"]');
+        const hasMedia = Boolean(mediaContainer);
+        if (hasMedia !== this.hasMedia) {
+            this.hasMedia = hasMedia;
+        }
+    }
+    getControl() {
+        return this.el.querySelector('[slot="control"] button');
+    }
+    makeControlFocusable() {
+        if (this.parentSemantics !== "grid") {
+            return;
+        }
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = 0;
+    }
+    makeControlUnfocusable() {
+        if (this.parentSemantics !== "grid") {
+            return;
+        }
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = -1;
+    }
+    render() {
+        const Tag = !this.interactive && !this.selectable
+            ? "div"
+            : Boolean(this.href) && !this.selectable
+                ? "a"
+                : "button";
+        const disabled = this.disabled && !Boolean(this.href);
+        const hasBadges = this.hasBadges;
+        const hasControl = this.el.querySelector("[slot='control']");
+        const hasMenu = Boolean(this.menuTriggerId) || hasControl;
+        const href = this.interactive && Boolean(this.href) ? this.href : undefined;
+        const showControlOnFocus = hasControl && (Boolean(this.meta) || hasBadges);
+        const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
+        const showMeta = this.showMeta;
+        const ariaLabel = Boolean(this.swirlAriaLabel)
+            ? this.swirlAriaLabel
+            : this.label;
+        const ariaChecked = this.selectable ? String(this.checked) : undefined;
+        const role = this.interactive && this.selectable ? "checkbox" : undefined;
+        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
+        const containerRole = hostRole === "row" ? "gridcell" : undefined;
+        const labelContainerStyles = {
+            minHeight: this.labelMinHeight ?? undefined,
+        };
+        const renderLabel = () => (index.h("span", { key: '4ea7c31f515f297a49d3e4ae457f141d10207d32', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
+        const className = index$1.classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
+            "resource-list-item--active": this.active,
+            "resource-list-item--checked": this.checked,
+            "resource-list-item--compact": this.compact,
+            "resource-list-item--disabled": this.disabled,
+            "resource-list-item--draggable": this.allowDrag,
+            "resource-list-item--dragging": this.dragging,
+            "resource-list-item--has-menu": hasMenu,
+            "resource-list-item--hide-divider": this.hideDivider,
+            "resource-list-item--interactive": this.interactive || this.selectable,
+            "resource-list-item--selectable": this.selectable,
+            "resource-list-item--show-control-on-focus": showControlOnFocus,
+            "resource-list-item--show-meta": showMeta,
+            "resource-list-item--wrap-description": this.descriptionWrap,
+            "resource-list-item--wrap-label": this.labelWrap,
+        });
+        return (index.h(index.Host, { key: '088ed55cf56852341a0374b37f0b5f024fc72035', role: hostRole }, index.h("div", { key: '8ec9769f5c90136c3a86ea5a967f8e87a8a88973', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '134b9a1a9645d97447937ab7e3501f48aab9cb9f', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, 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: '269e9e19598891a53fe896840fec876aba5f096c', class: "resource-list-item__media" }, index.h("slot", { key: 'e676975dec132755e9492d4f14e271f0371d030c', name: "media" }))), index.h("span", { key: '0c597785a34fc0d6362f3e80b98802c3d732e0b7', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition, positioning: "fixed" }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '2dd25de843ee96dfe2c9352e3e4e4b8659de7e9d', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: 'a9da2a1442ea6adfaba6027dc11f6a5a84453ad4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'f76cef21e8fb5387f34e99fd3765a19c179faf7e', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'bebb799ffa8ee3fc6275f61451e80ae4c4fe1ce6' }))))), showMeta && (index.h("span", { key: '04dd2f96b4e64ae93f015ecb85cd384a2c0890a2', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: '57f895be000f5fd1c62ab6f2b0b6ddc89fbdce60', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '91efc58635fb8efcf2c652059b6cf63fcdae28f4', class: "resource-list-item__badges" }, index.h("slot", { key: '8c3c18cbc29e8bc931ad0c41b6d5e5ef5fd7554a', name: "badges" })))), index.h("span", { key: '66802320e490115b2e653a91ffa4b2da7e8415a0', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: 'acb0bf6a1c293a6f83021c069afc90c26efdb655', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '2b3d071301fff6629bead54ba951c5cb9ff6472b', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '05a78400347d5b4861b6a8865f733b0bb93361ff', "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: '39bfbf3b67ee035fb415f1c309db2471007c8f7d', "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: 'c474e283823ad5a849e343cdfdc0cdaa31deb277', size: this.iconSize })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlResourceListItem.style = swirlResourceListItemCss;
+
+exports.swirl_app_layout = SwirlAppLayout;
+exports.swirl_empty_state = SwirlEmptyState;
+exports.swirl_icon_folder_shared = SwirlIconFolderShared;
+exports.swirl_resource_list = SwirlResourceList;
+exports.swirl_resource_list_item = SwirlResourceListItem;