@getflip/swirl-components 0.197.0 → 0.198.0

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

@@ -2,668 +2,674 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1de6abbd.js');
-const index$1 = require('./index-2ddd0598.js');
-const utils = require('./utils-459fb5e9.js');
+const index = require('./index-2ab5d772.js');
+const index$1 = require('./index-9f94303c.js');
+const utils = require('./utils-fc5855ec.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 (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 (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 (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 (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 (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.5rem, auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.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__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;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.5rem, 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 var(--s-border-default);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;border-top:var(--s-border-width-default) solid var(--s-border-default);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 (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 var(--s-border-default);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 var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@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 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.sidebarToggle = index.createEvent(this, "sidebarToggle", 7);
-    this.onBackToNavigationViewButtonClick = () => {
-      this.changeMobileView("navigation");
-    };
-    this.onCtaClick = (event) => {
-      this.ctaClick.emit(event);
-    };
-    this.onNavigationBackButtonClick = (event) => {
-      this.navigationBackButtonClick.emit(event);
-    };
-    this.onSidebarCloseButtonClick = () => {
-      this.hideSidebar();
-    };
-    this.appName = undefined;
-    this.backToNavigationViewButtonLabel = "Back to navigation";
-    this.ctaIcon = undefined;
-    this.ctaLabel = undefined;
-    this.hasNavigation = undefined;
-    this.hideAppBar = undefined;
-    this.navigationBackButtonLabel = "Go back";
-    this.navigationLabel = undefined;
-    this.showNavigationBackButton = undefined;
-    this.sidebarCloseButtonLabel = "Close sidebar";
-    this.sidebarHeading = undefined;
-    this.transitionStyle = "slides";
-    this.hasCustomAppBarBackButton = undefined;
-    this.hasSidebar = undefined;
-    this.mobileView = "navigation";
-    this.sidebarActive = undefined;
-    this.sidebarClosing = undefined;
-    this.transitioningFrom = undefined;
-    this.transitioningTo = undefined;
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.updateCustomAppBarBackButtonStatus();
-      this.updateNavigationStatus();
-      this.updateSidebarStatus();
-    });
-    this.mutationObserver.observe(this.el, { childList: true });
-    queueMicrotask(() => {
-      this.updateCustomAppBarBackButtonStatus();
-      this.updateSidebarStatus();
-      this.updateNavigationStatus();
-      this.checkMobileView();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver?.disconnect();
-  }
-  watchMobileView() {
-    this.checkMobileView();
-  }
-  /**
-   * Show the sidebar
-   */
-  async showSidebar() {
-    if (this.sidebarActive || !this.hasSidebar) {
-      return;
-    }
-    this.sidebarActive = true;
-    this.changeMobileView("sidebar");
-    this.sidebarToggle.emit(true);
-  }
-  /**
-   * Hide the sidebar
-   */
-  async hideSidebar() {
-    if (!this.sidebarActive || !this.hasSidebar) {
-      return;
-    }
-    if (Boolean(this.sidebarClosingTimeout)) {
-      clearTimeout(this.sidebarClosingTimeout);
-    }
-    this.sidebarClosing = true;
-    const delay = utils.isMobileViewport() ? 0 : 300;
-    this.sidebarClosingTimeout = setTimeout(() => {
-      this.sidebarActive = false;
-      this.sidebarClosing = false;
-      this.changeMobileView("body");
-      this.sidebarToggle.emit(false);
-    }, delay);
-  }
-  /**
-   * Toggle the sidebar
-   */
-  async toggleSidebar() {
-    if (!this.hasSidebar) {
-      return;
-    }
-    if (this.sidebarActive) {
-      this.hideSidebar();
-    }
-    else {
-      this.showSidebar();
-    }
-  }
-  /**
-   * Change the currently displayed view on mobile viewports
-   * @param mobileView
-   */
-  async changeMobileView(mobileView, transition = true) {
-    if (this.mobileView === mobileView ||
-      (mobileView === "navigation" && !this.hasNavigation) ||
-      (mobileView === "sidebar" && !this.hasSidebar)) {
-      return;
-    }
-    const mobile = 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;
-    let delay = 0;
-    if (this.transitionStyle === "slides") {
-      delay = 400;
-    }
-    else if (this.transitionStyle === "dialog") {
-      delay = 300;
-    }
-    this.transitionTimeout = setTimeout(() => {
-      this.mobileView = mobileView;
-      this.transitioningFrom = undefined;
-      this.transitioningTo = undefined;
-      this.mobileViewChange.emit(this.mobileView);
-    }, delay);
-  }
-  checkMobileView() {
-    if ((this.mobileView === "navigation" && !this.hasNavigation) ||
-      (this.mobileView === "sidebar" && !this.hasSidebar)) {
-      this.mobileView = "body";
-      return;
-    }
-    const sidebarActive = this.mobileView === "sidebar" || this.sidebarActive;
-    if (sidebarActive === this.sidebarActive) {
-      return;
-    }
-    if (sidebarActive) {
-      this.showSidebar();
-    }
-    else {
-      this.hideSidebar();
-    }
-  }
-  updateNavigationStatus() {
-    this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
-  }
-  updateCustomAppBarBackButtonStatus() {
-    this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
-  }
-  updateSidebarStatus() {
-    this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
-  }
-  render() {
-    const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
-      this.hasNavigation &&
-      !this.hasCustomAppBarBackButton;
-    const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
-    const 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 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}`, {
-      "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--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
-      "app-layout--sidebar-closing": this.sidebarClosing,
-    });
-    return (index.h(index.Host, null, index.h("section", { "aria-labelledby": "app-name", class: className }, index.h("div", { class: "app-layout__grid" }, index.h("header", { class: "app-layout__header" }, index.h("span", { class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (index.h("span", { class: "app-layout__navigation-back-button" }, index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (index.h("span", { class: "app-layout__navigation-controls" }, index.h("slot", { name: "navigation-controls" })))), index.h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, index.h("slot", { name: "navigation" })), index.h("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { class: "app-layout__app-bar" }, index.h("span", { class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
-        ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), index.h("span", { class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { name: "custom-app-bar-back-button" })), index.h("div", { class: "app-layout__app-bar-content" }, index.h("slot", { name: "app-bar" })), index.h("div", { class: "app-layout__app-bar-controls" }, index.h("slot", { name: "app-bar-controls" })))), index.h("div", { class: "app-layout__banner" }, index.h("slot", { name: "banner" })), index.h("div", { class: "app-layout__content" }, index.h("slot", { name: "content" })), index.h("div", { class: "app-layout__bottom-bar" }, index.h("slot", { name: "bottom-bar" }))), index.h("aside", { class: "app-layout__sidebar" }, index.h("header", { class: "app-layout__custom-sidebar-header" }, index.h("slot", { name: "custom-sidebar-header" })), index.h("header", { class: "app-layout__sidebar-header" }, index.h("swirl-button", { 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", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { class: "app-layout__sidebar-content" }, index.h("slot", { name: "sidebar" }))), index.h("span", { class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { name: "floating-action-button" }))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "mobileView": ["watchMobileView"]
-  }; }
+    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.sidebarToggle = index.createEvent(this, "sidebarToggle", 7);
+        this.onBackToNavigationViewButtonClick = () => {
+            this.changeMobileView("navigation");
+        };
+        this.onCtaClick = (event) => {
+            this.ctaClick.emit(event);
+        };
+        this.onNavigationBackButtonClick = (event) => {
+            this.navigationBackButtonClick.emit(event);
+        };
+        this.onSidebarCloseButtonClick = () => {
+            this.hideSidebar();
+        };
+        this.appName = undefined;
+        this.backToNavigationViewButtonLabel = "Back to navigation";
+        this.ctaIcon = undefined;
+        this.ctaLabel = undefined;
+        this.hasNavigation = undefined;
+        this.hideAppBar = undefined;
+        this.navigationBackButtonLabel = "Go back";
+        this.navigationLabel = undefined;
+        this.showNavigationBackButton = undefined;
+        this.sidebarCloseButtonLabel = "Close sidebar";
+        this.sidebarHeading = undefined;
+        this.transitionStyle = "slides";
+        this.hasCustomAppBarBackButton = undefined;
+        this.hasSidebar = undefined;
+        this.mobileView = "navigation";
+        this.sidebarActive = undefined;
+        this.sidebarClosing = undefined;
+        this.transitioningFrom = undefined;
+        this.transitioningTo = undefined;
+    }
+    componentWillLoad() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateNavigationStatus();
+            this.updateSidebarStatus();
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+        queueMicrotask(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateSidebarStatus();
+            this.updateNavigationStatus();
+            this.checkMobileView();
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    watchMobileView() {
+        this.checkMobileView();
+    }
+    /**
+     * Show the sidebar
+     */
+    async showSidebar() {
+        if (this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        this.sidebarActive = true;
+        this.changeMobileView("sidebar");
+        this.sidebarToggle.emit(true);
+    }
+    /**
+     * Hide the sidebar
+     */
+    async hideSidebar() {
+        if (!this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        if (Boolean(this.sidebarClosingTimeout)) {
+            clearTimeout(this.sidebarClosingTimeout);
+        }
+        this.sidebarClosing = true;
+        const delay = utils.isMobileViewport() ? 0 : 300;
+        this.sidebarClosingTimeout = setTimeout(() => {
+            this.sidebarActive = false;
+            this.sidebarClosing = false;
+            this.changeMobileView("body");
+            this.sidebarToggle.emit(false);
+        }, delay);
+    }
+    /**
+     * Toggle the sidebar
+     */
+    async toggleSidebar() {
+        if (!this.hasSidebar) {
+            return;
+        }
+        if (this.sidebarActive) {
+            this.hideSidebar();
+        }
+        else {
+            this.showSidebar();
+        }
+    }
+    /**
+     * Change the currently displayed view on mobile viewports
+     * @param mobileView
+     */
+    async changeMobileView(mobileView, transition = true) {
+        if (this.mobileView === mobileView ||
+            (mobileView === "navigation" && !this.hasNavigation) ||
+            (mobileView === "sidebar" && !this.hasSidebar)) {
+            return;
+        }
+        const mobile = 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;
+        let delay = 0;
+        if (this.transitionStyle === "slides") {
+            delay = 400;
+        }
+        else if (this.transitionStyle === "dialog") {
+            delay = 300;
+        }
+        this.transitionTimeout = setTimeout(() => {
+            this.mobileView = mobileView;
+            this.transitioningFrom = undefined;
+            this.transitioningTo = undefined;
+            this.mobileViewChange.emit(this.mobileView);
+        }, delay);
+    }
+    checkMobileView() {
+        if ((this.mobileView === "navigation" && !this.hasNavigation) ||
+            (this.mobileView === "sidebar" && !this.hasSidebar)) {
+            this.mobileView = "body";
+            return;
+        }
+        const sidebarActive = this.mobileView === "sidebar" || this.sidebarActive;
+        if (sidebarActive === this.sidebarActive) {
+            return;
+        }
+        if (sidebarActive) {
+            this.showSidebar();
+        }
+        else {
+            this.hideSidebar();
+        }
+    }
+    updateNavigationStatus() {
+        this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
+    }
+    updateCustomAppBarBackButtonStatus() {
+        this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
+    }
+    updateSidebarStatus() {
+        this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+    }
+    render() {
+        const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+            this.hasNavigation &&
+            !this.hasCustomAppBarBackButton;
+        const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+        const 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 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}`, {
+            "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--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+            "app-layout--sidebar-closing": this.sidebarClosing,
+        });
+        return (index.h(index.Host, { key: '6669b2c98406333feee455553fe0d5d03d3244b8' }, index.h("section", { key: '1ee92631037025987491babda4e78ea63d35377b', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '63ae4a87fbe7e728c81183def7afdf108588f83e', class: "app-layout__grid" }, index.h("header", { key: '6182b13fd6f4031aa0581c286cc4b517d3c5f66d', class: "app-layout__header" }, index.h("span", { key: 'f4932b66237cbdcab317641027ef62428b98dfff', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '684aa1471fd24535b36e75408a45f41bc03345e1', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (index.h("span", { key: '8f0d872fb075ef91f0f62a514dfe25a0124f252c', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: '7f6025c9f07eecb118fc6939ee0b0b78c4aee6d7', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: 'd635de3c9562eac9b4bce1c70baa8b90ae277b69', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (index.h("span", { key: '87fc56959a7f02183166ad6b356c4ac06316ccbb', class: "app-layout__navigation-controls" }, index.h("slot", { key: '8b091346c443dfe4383ac1a2e1500fbd2379b9b3', name: "navigation-controls" })))), index.h("nav", { key: 'f204ad5f648228d9a47e1fb47eab5e5b69631f02', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, index.h("slot", { key: '02c4eef4f8b62ab328a370045174c245402f662a', name: "navigation" })), index.h("section", { key: '37bc6fa312a75e60f0a6702e41de1f5036efb008', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: 'c43967cff5d5cb3283707b063b0cb8fb14dcfec4', class: "app-layout__app-bar" }, index.h("span", { key: '410c2ebe8d9e737706cc307af7447c3b8ea0d75d', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: 'd9a962e75a42b2d4f333d5f12a42e1ea1a12951b', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '4ed9a8d4868bc5ceaf311b132f8f325144fa707c', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: '442aa8979bc5c95ce973d41bbe7c28f2a991d11d', 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: 'e98e6c634278149c73b9b064e7364aaa25eb97fd', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: 'f06666455e54a7dfcfa9b94aa47fc24db9281675', name: "custom-app-bar-back-button" })), index.h("div", { key: 'c7f9906b22f61219203162cd3dceb21afb807ecf', class: "app-layout__app-bar-content" }, index.h("slot", { key: '1ec7cb2569a93ad414b57f2da951aa4036592d57', name: "app-bar" })), index.h("div", { key: 'f951fa2be8b2a92175a0bd5b007e2fe131b79c35', class: "app-layout__app-bar-controls" }, index.h("slot", { key: '95bc12dd1a1695d05d972de033979231752fa0eb', name: "app-bar-controls" })))), index.h("div", { key: '73f3e5b01666ad0b8744d557d8ac620296de069e', class: "app-layout__banner" }, index.h("slot", { key: '4b3041a0fd7f6e4e4457b0868832e33cc76852a4', name: "banner" })), index.h("div", { key: '7143b730f21f69330a2d35081ed9fe8553757879', class: "app-layout__content" }, index.h("slot", { key: '88922dd8cb925df0e8905954c7740969c09c74d2', name: "content" })), index.h("div", { key: 'd28078f915fd03d80031749d7c46f45a43405b7f', class: "app-layout__bottom-bar" }, index.h("slot", { key: '5290d8ed20d1528c11c7389c64b8c89e3d9220e3', name: "bottom-bar" }))), index.h("aside", { key: '4fa7b0476c3ce9f0644de3a3bb91de47e13e2333', class: "app-layout__sidebar" }, index.h("header", { key: '5cc37ad993a66e0c5b452656877b026daedf2a22', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: '85e16e72ca427e58b477b999b33f6eb8309b050d', name: "custom-sidebar-header" })), index.h("header", { key: '99bd578231f336f0e518556fa431c87570b06db8', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: '17b6c0dfc018646775b7f21647a4fc5d71e32991', 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: '6c94f955b7792ea20dbaea185697c976532b0880', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: 'd582f3a4988013796c0130e7e9de2ae376bdd88e', class: "app-layout__sidebar-content" }, index.h("slot", { key: '8a22cc1a9d2fc54d860407685b7f1f00d72fcc40', name: "sidebar" }))), index.h("span", { key: '41d05516195ef0b8a39d0307bdd63b3686fb18d9', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '020fed78f1d6741cdf85113a370851596f826f80', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '7e4f9fb98d67d7befddec8a62b66659ddd22d232', name: "floating-action-button" }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mobileView": ["watchMobileView"]
+    }; }
 };
-SwirlAppLayout.style = swirlAppLayoutCss;
+SwirlAppLayout.style = SwirlAppLayoutStyle0;
 
 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 SwirlEmptyStateStyle0 = swirlEmptyStateCss;
 
 const SwirlEmptyState = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.illustration = undefined;
-  }
-  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, null, index.h("div", { class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__slotted-illustration" }, index.h("slot", { name: "illustration" })), index.h("div", { class: "empty-state__body" }, index.h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("swirl-text", { align: "center", color: "subdued" }, index.h("slot", null)))), index.h("div", { class: "empty-state__controls" }, index.h("slot", { name: "controls" }))))));
-  }
-  get el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.illustration = undefined;
+    }
+    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: 'fe1c90661fd1b8b5c642b36a872cbcd6ea8d821e' }, index.h("div", { key: '19174f2dcee9e0916d3706f09a0e588fd63361fa', class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { key: '9b0b0138b85b70e0aa580308354df899a1289c10', alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { key: 'ddf5bc32b4c8f6934ef43c426d2231253cf1d4e1', class: "empty-state__slotted-illustration" }, index.h("slot", { key: 'b690cb71b84c0a6011c2686ed772439d07b0a47b', name: "illustration" })), index.h("div", { key: '499f33947a36531adc068885a8f2c0c887a11443', class: "empty-state__body" }, index.h("swirl-stack", { key: 'cb0ef3e31d96361ea5778be2788b0c16c916b7e6', align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { key: 'ef6f3651651b0585dc6960b9372ec47e4e191fc3', align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { key: '6a776a29cac1643070a6b4ac2689e60988ca5857', class: "empty-state__content" }, index.h("swirl-text", { key: 'd5f6d329054f74a2d6a946a5cb0a70a4ce6d014b', align: "center", color: "subdued" }, index.h("slot", { key: '424f20d460a33d1ca53a5d0e4fb52d405be87680' })))), index.h("div", { key: '1481c2c12add6ffeed3c2a26ec8a05852b342892', class: "empty-state__controls" }, index.h("slot", { key: '4c9fa99a8013287dac7c52e197d6b2fb1ef7e79e', name: "controls" }))))));
+    }
+    get el() { return index.getElement(this); }
 };
-SwirlEmptyState.style = swirlEmptyStateCss;
+SwirlEmptyState.style = SwirlEmptyStateStyle0;
 
 const swirlIconCss$1 = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
+const SwirlIconFileStyle0 = swirlIconCss$1;
 
 const SwirlIconFile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.color = undefined;
-    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", { "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, null, index.h("path", { d: "M4.00002 14.6666C3.63335 14.6666 3.31958 14.5362 3.05869 14.2753C2.79735 14.014 2.66669 13.7 2.66669 13.3333V2.66665C2.66669 2.29998 2.79735 1.98598 3.05869 1.72465C3.31958 1.46376 3.63335 1.33331 4.00002 1.33331H8.78335C8.96113 1.33331 9.13069 1.36665 9.29202 1.43331C9.45291 1.49998 9.59446 1.59442 9.71669 1.71665L12.95 4.94998C13.0722 5.0722 13.1667 5.21376 13.2334 5.37465C13.3 5.53598 13.3334 5.70553 13.3334 5.88331V13.3333C13.3334 13.7 13.2029 14.014 12.942 14.2753C12.6807 14.5362 12.3667 14.6666 12 14.6666H4.00002ZM8.66669 5.33331V2.66665H4.00002V13.3333H12V5.99998H9.33335C9.14446 5.99998 8.98624 5.93598 8.85869 5.80798C8.73069 5.68042 8.66669 5.5222 8.66669 5.33331Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, null, index.h("path", { d: "M6 22C5.45 22 4.97933 21.8043 4.588 21.413C4.196 21.021 4 20.55 4 20V4C4 3.45 4.196 2.979 4.588 2.587C4.97933 2.19567 5.45 2 6 2H13.175C13.4417 2 13.696 2.05 13.938 2.15C14.1793 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82067 19.85 8.062C19.95 8.304 20 8.55833 20 8.825V20C20 20.55 19.8043 21.021 19.413 21.413C19.021 21.8043 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4793 8.904 13.288 8.712C13.096 8.52067 13 8.28333 13 8Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, null, index.h("path", { d: "M7.00002 25.6666C6.35835 25.6666 5.80924 25.4384 5.35269 24.9818C4.89535 24.5245 4.66669 23.975 4.66669 23.3333V4.66665C4.66669 4.02498 4.89535 3.47548 5.35269 3.01815C5.80924 2.56159 6.35835 2.33331 7.00002 2.33331H15.3709C15.682 2.33331 15.9787 2.39165 16.261 2.50831C16.5426 2.62498 16.7903 2.79026 17.0042 3.00415L22.6625 8.66248C22.8764 8.87637 23.0417 9.12409 23.1584 9.40565C23.275 9.68798 23.3334 9.9847 23.3334 10.2958V23.3333C23.3334 23.975 23.1051 24.5245 22.6485 24.9818C22.1912 25.4384 21.6417 25.6666 21 25.6666H7.00002ZM15.1667 9.33331V4.66665H7.00002V23.3333H21V10.5H16.3334C16.0028 10.5 15.7259 10.388 15.5027 10.164C15.2787 9.94076 15.1667 9.66387 15.1667 9.33331Z", fill: "currentColor" })))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.color = undefined;
+        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: '97f642df51d225b1c725a1a17ce298954219b651', "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: 'dc5f39be5b25b6df813e96d196da58f5c85e8ea9' }, index.h("path", { key: '5e5a952eea3506e04aef16fc0cdd14e66c0723d7', d: "M4.00002 14.6666C3.63335 14.6666 3.31958 14.5362 3.05869 14.2753C2.79735 14.014 2.66669 13.7 2.66669 13.3333V2.66665C2.66669 2.29998 2.79735 1.98598 3.05869 1.72465C3.31958 1.46376 3.63335 1.33331 4.00002 1.33331H8.78335C8.96113 1.33331 9.13069 1.36665 9.29202 1.43331C9.45291 1.49998 9.59446 1.59442 9.71669 1.71665L12.95 4.94998C13.0722 5.0722 13.1667 5.21376 13.2334 5.37465C13.3 5.53598 13.3334 5.70553 13.3334 5.88331V13.3333C13.3334 13.7 13.2029 14.014 12.942 14.2753C12.6807 14.5362 12.3667 14.6666 12 14.6666H4.00002ZM8.66669 5.33331V2.66665H4.00002V13.3333H12V5.99998H9.33335C9.14446 5.99998 8.98624 5.93598 8.85869 5.80798C8.73069 5.68042 8.66669 5.5222 8.66669 5.33331Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: 'e4f0a5f00276b3d1cc08244e58086088af8f81e1' }, index.h("path", { key: 'c4f716896f8469ddd37279bde523da658c313ef7', d: "M6 22C5.45 22 4.97933 21.8043 4.588 21.413C4.196 21.021 4 20.55 4 20V4C4 3.45 4.196 2.979 4.588 2.587C4.97933 2.19567 5.45 2 6 2H13.175C13.4417 2 13.696 2.05 13.938 2.15C14.1793 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82067 19.85 8.062C19.95 8.304 20 8.55833 20 8.825V20C20 20.55 19.8043 21.021 19.413 21.413C19.021 21.8043 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4793 8.904 13.288 8.712C13.096 8.52067 13 8.28333 13 8Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '0c9d828b46ca90cd4616ce1fa702a2aac04b8c8c' }, index.h("path", { key: 'cdfc84aec90e2c1f6aaa6590bb779e98b68acc38', d: "M7.00002 25.6666C6.35835 25.6666 5.80924 25.4384 5.35269 24.9818C4.89535 24.5245 4.66669 23.975 4.66669 23.3333V4.66665C4.66669 4.02498 4.89535 3.47548 5.35269 3.01815C5.80924 2.56159 6.35835 2.33331 7.00002 2.33331H15.3709C15.682 2.33331 15.9787 2.39165 16.261 2.50831C16.5426 2.62498 16.7903 2.79026 17.0042 3.00415L22.6625 8.66248C22.8764 8.87637 23.0417 9.12409 23.1584 9.40565C23.275 9.68798 23.3334 9.9847 23.3334 10.2958V23.3333C23.3334 23.975 23.1051 24.5245 22.6485 24.9818C22.1912 25.4384 21.6417 25.6666 21 25.6666H7.00002ZM15.1667 9.33331V4.66665H7.00002V23.3333H21V10.5H16.3334C16.0028 10.5 15.7259 10.388 15.5027 10.164C15.2787 9.94076 15.1667 9.66387 15.1667 9.33331Z", fill: "currentColor" })))));
+    }
 };
-SwirlIconFile.style = swirlIconCss$1;
+SwirlIconFile.style = SwirlIconFileStyle0;
 
 const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
+const SwirlIconFolderSharedStyle0 = swirlIconCss;
 
 const SwirlIconFolderShared = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.color = undefined;
-    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", { "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, null, index.h("path", { 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, null, index.h("path", { 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, null, index.h("path", { 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" })))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.color = undefined;
+        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: 'af9f943efa25f68c0f2854862d5d79e98817d593', "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: '5f98e3639b6c2210127ee851d69dcaaf868820d3' }, index.h("path", { key: 'ca31a6a30011ec8161e5e4abbfebc7ba18738b85', 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: '57fd19e3d3bc24b0266b6a20f7997d6e82937e55' }, index.h("path", { key: '1aabcb3e41dcef7c9c30939a9ae3129548a240a5', 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: '79dc127413d34b5a597c7857710168bcc76da71b' }, index.h("path", { key: 'a45b4b00abff200b43e2f5e5e8db569cd0f6d4aa', 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;
+SwirlIconFolderShared.style = SwirlIconFolderSharedStyle0;
 
 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 SwirlResourceListStyle0 = swirlResourceListCss;
 
 const SwirlResourceList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemDrop = index.createEvent(this, "itemDrop", 7);
-    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 (event.code === "ArrowDown") {
-        event.preventDefault();
-        if (!Boolean(this.dragging)) {
-          this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemDrop = index.createEvent(this, "itemDrop", 7);
+        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 (event.code === "ArrowDown") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+                }
+                else {
+                    this.moveDraggedItemDown();
+                }
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    const prevIndex = this.focusedIndex === 0
+                        ? this.items.length - 1
+                        : this.focusedIndex - 1;
+                    this.focusItemAtIndex(prevIndex);
+                }
+                else {
+                    this.moveDraggedItemUp();
+                }
+            }
+            else if (event.code === "Space" || event.code === "Enter") {
+                const target = event.composedPath()[0];
+                if (Boolean(this.dragging) &&
+                    !target?.classList.contains("resource-list-item__drag-handle")) {
+                    event.preventDefault();
+                    this.stopDrag(this.dragging);
+                }
+                else if (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);
+            }
+        };
+        this.allowDrag = undefined;
+        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.controllingElement = undefined;
+        this.label = undefined;
+        this.assistiveText = undefined;
+        this.listId = v4.v4();
+    }
+    componentDidLoad() {
+        this.observeSlotChanges();
+        this.collectItems();
+        this.setupControllingElement();
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+    }
+    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.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.removeItemsFromTabOrder();
+        this.enableItemFocus(this.items[this.focusedIndex]);
+        if (Boolean(this.controllingElement)) {
+            this.items[0]?.setAttribute("aria-selected", "true");
         }
-        else {
-          this.moveDraggedItemDown();
+    }
+    setupControllingElement() {
+        if (!Boolean(this.controllingElement)) {
+            return;
         }
-      }
-      else if (event.code === "ArrowUp") {
-        event.preventDefault();
-        if (!Boolean(this.dragging)) {
-          const prevIndex = this.focusedIndex === 0
-            ? this.items.length - 1
-            : this.focusedIndex - 1;
-          this.focusItemAtIndex(prevIndex);
+        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() {
+        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) {
+            this.items.forEach((item) => {
+                item.setAttribute("allow-drag", "true");
+                item.addEventListener("toggleDrag", this.toggleDrag);
+            });
         }
         else {
-          this.moveDraggedItemUp();
-        }
-      }
-      else if (event.code === "Space" || event.code === "Enter") {
-        const target = event.composedPath()[0];
-        if (Boolean(this.dragging) &&
-          !target?.classList.contains("resource-list-item__drag-handle")) {
-          event.preventDefault();
-          this.stopDrag(this.dragging);
-        }
-        else if (Boolean(this.controllingElement)) {
-          const item = this.items[this.focusedIndex];
-          if (!Boolean(item) || !item.isConnected) {
+            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;
-          }
-          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);
-      }
-    };
-    this.allowDrag = undefined;
-    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.controllingElement = undefined;
-    this.label = undefined;
-    this.assistiveText = undefined;
-    this.listId = v4.v4();
-  }
-  componentDidLoad() {
-    this.observeSlotChanges();
-    this.collectItems();
-    this.setupControllingElement();
-    this.setItemAllowDragState();
-    this.setupDragDrop();
-  }
-  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.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.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() {
-    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) {
-      this.items.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,
+        }
+        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}`;
-  }
-  render() {
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), index.h("swirl-box", { paddingInlineEnd: "8", paddingInlineStart: "8" }, index.h("swirl-stack", { "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "allowDrag": ["watchAllowDrag"]
-  }; }
+    }
+    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}`;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fc3163c000bd9f410ef52cbbb8ab06566ea5c05b', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: 'b77a19c3a5a43a82462c200af4a9fba573e0ffe7', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '7021a26de34bab70cb08c98055cc3edf97e231b2', paddingInlineEnd: "8", paddingInlineStart: "8" }, index.h("swirl-stack", { key: 'dc2f5801f5a3f19a83bf1c9bb4bc908f62e193d4', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, index.h("slot", { key: '47552efe0ae252d5aabc5d3e2247807a1feda6ac' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "allowDrag": ["watchAllowDrag"]
+    }; }
 };
-SwirlResourceList.style = swirlResourceListCss;
+SwirlResourceList.style = SwirlResourceListStyle0;
 
 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__content.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__content.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__content.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%}.resource-list-item--interactive.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.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.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled),.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(: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 .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(: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 .resource-list-item__content.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 .resource-list-item__content.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 .resource-list-item__content.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:2.5rem}@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--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}.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{pointer-events:none;opacity:0}.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}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 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-16) * 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);position:relative;display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:flex-start;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);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{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item: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__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12) var(--s-space-8);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;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;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{position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%)}.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__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: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 SwirlResourceListItemStyle0 = swirlResourceListItemCss;
 
 const SwirlResourceListItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
-    this.valueChange = index.createEvent(this, "valueChange", 7);
-    this.desktopMediaQuery = utils.getDesktopMediaQuery();
-    this.id = v4.v4();
-    this.desktopMediaQueryHandler = (event) => {
-      this.forceIconProps(event.matches);
-      this.updateIconSize(event.matches);
-    };
-    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.stopPropagation();
-    };
-    this.active = undefined;
-    this.allowDrag = undefined;
-    this.allowHtml = true;
-    this.checked = false;
-    this.compact = undefined;
-    this.description = undefined;
-    this.descriptionWrap = undefined;
-    this.disabled = undefined;
-    this.dragging = undefined;
-    this.dragHandleDescription = "Press spacebar to toggle grab";
-    this.dragHandleLabel = "Move item";
-    this.hideDivider = undefined;
-    this.href = undefined;
-    this.interactive = true;
-    this.label = undefined;
-    this.labelWeight = "medium";
-    this.labelWrap = undefined;
-    this.menuTriggerId = undefined;
-    this.menuTriggerLabel = "Options";
-    this.meta = undefined;
-    this.selectable = undefined;
-    this.value = undefined;
-    this.hasMedia = false;
-    this.iconSize = 24;
-  }
-  async componentWillLoad() {
-    this.updateMediaState();
-  }
-  componentDidLoad() {
-    this.forceIconProps(this.desktopMediaQuery.matches);
-    this.updateIconSize(this.desktopMediaQuery.matches);
-    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
-    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.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
-  }
-  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() {
-    const control = this.getControl();
-    if (!Boolean(control)) {
-      return;
-    }
-    control.tabIndex = 0;
-  }
-  makeControlUnfocusable() {
-    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 = Boolean(this.el.querySelector("[slot='badges']"));
-    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 = (Boolean(this.meta) || hasBadges) && !this.selectable;
-    const ariaChecked = this.selectable ? String(this.checked) : undefined;
-    const role = this.interactive && this.selectable ? "checkbox" : undefined;
-    const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
-      ? {
-        paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
-      }
-      : undefined;
-    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, { role: "row" }, index.h("div", { class: className, role: "gridcell" }, index.h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, 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", { class: "resource-list-item__media" }, index.h("slot", { name: "media" }))), index.h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { class: "resource-list-item__meta" }, index.h("span", { class: "resource-list-item__meta-text" }, this.meta), index.h("span", { class: "resource-list-item__badges" }, index.h("slot", { name: "badges" }))))), this.selectable && (index.h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", null))))), index.h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { name: "control" })), showMenu && (index.h("swirl-popover-trigger", { swirlPopover: this.menuTriggerId }, index.h("swirl-button", { "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", { "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", { size: this.iconSize })))));
-  }
-  get el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.desktopMediaQuery = utils.getDesktopMediaQuery();
+        this.elementId = v4.v4();
+        this.desktopMediaQueryHandler = (event) => {
+            this.forceIconProps(event.matches);
+            this.updateIconSize(event.matches);
+        };
+        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.stopPropagation();
+        };
+        this.active = undefined;
+        this.allowDrag = undefined;
+        this.allowHtml = true;
+        this.checked = false;
+        this.compact = undefined;
+        this.description = undefined;
+        this.descriptionWrap = undefined;
+        this.disabled = undefined;
+        this.dragging = undefined;
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move item";
+        this.hideDivider = undefined;
+        this.href = undefined;
+        this.interactive = true;
+        this.label = undefined;
+        this.labelWeight = "medium";
+        this.labelWrap = undefined;
+        this.menuTriggerId = undefined;
+        this.menuTriggerLabel = "Options";
+        this.meta = undefined;
+        this.selectable = undefined;
+        this.value = undefined;
+        this.hasMedia = false;
+        this.iconSize = 24;
+    }
+    componentWillLoad() {
+        this.updateMediaState();
+    }
+    componentDidLoad() {
+        this.forceIconProps(this.desktopMediaQuery.matches);
+        this.updateIconSize(this.desktopMediaQuery.matches);
+        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        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.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+    }
+    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() {
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = 0;
+    }
+    makeControlUnfocusable() {
+        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 = Boolean(this.el.querySelector("[slot='badges']"));
+        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 = (Boolean(this.meta) || hasBadges) && !this.selectable;
+        const ariaChecked = this.selectable ? String(this.checked) : undefined;
+        const role = this.interactive && this.selectable ? "checkbox" : undefined;
+        const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
+            ? {
+                paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
+            }
+            : undefined;
+        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: '65de45c6f1b2e814c181d14c7718ce9facdba2b4', role: "row" }, index.h("div", { key: '27b7975b8c9d3f829f9b876a258e01a728010de7', class: className, role: "gridcell" }, index.h(Tag, { key: '4d0dd035d55fd777b89592ccc4313e6a39b2811b', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": 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: '623184a8bf39d95d55daf1c0c73f5b84e9d507c9', class: "resource-list-item__media" }, index.h("slot", { key: 'cfc8ed03ae602566822d2c93b7ea2029b3ffb440', name: "media" }))), index.h("span", { key: 'd5d0d1e29135742ce8a6b48570b3d3ea628083fb', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '59280c630d28f56312b317389d8421ac83a3e97a', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '7cd4a798340b46c1c5e428b3f6b61346a8a59700', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '545a8080d2266ae7ccf37aafdc01dd227a364bc9', class: "resource-list-item__meta" }, index.h("span", { key: 'eb0059c448afbfe23f4da04eccf9667b70a4123d', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '52c77f4fa84d8b464cac63298d1cbd205d8389d0', class: "resource-list-item__badges" }, index.h("slot", { key: '943ca2932df39769826c385824416cfc6221cbea', name: "badges" }))))), this.selectable && (index.h("span", { key: 'd6ba61f5818ad98e378b04adde3e0ec823ae75dd', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '631d841cefde94f598a5ea0d088282ae805e216a', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '9889d6b6ba4c4439c33001700a62586ce9f0b083' }))))), index.h("span", { key: '36e0b65120eb325e0a6691fb2120a8237d5ce868', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: '82a1b86901c6eac56b6e57c37b7972541480e426', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '68063b35294b8ffa12ea673c434d38113121d35f', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'cb00660ea3fb9fdebc4f28c2623e4c9f2afc4877', "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: '9cca689ba73576abfebcb163b2b6af0306b98d2d', "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: '6dd9f13b0fb45dff00b689564f2360eb573923d7', size: this.iconSize })))));
+    }
+    get el() { return index.getElement(this); }
 };
-SwirlResourceListItem.style = swirlResourceListItemCss;
+SwirlResourceListItem.style = SwirlResourceListItemStyle0;
 
 exports.swirl_app_layout = SwirlAppLayout;
 exports.swirl_empty_state = SwirlEmptyState;