@getflip/swirl-components-react 0.0.0-new-shell-20231128130728

package/dist/swirl-app-layout_6.entry.1521cc72.js

@@ -0,0 +1,327 @@
+import { r as n, c as o, h as i, H as l, g as p, F as r } from "./index.e5965a8a.js";
+import { c as d } from "./index-d280dafb.186cdb0e.js";
+import { i as u, g as w } from "./utils-9f141e25.a4ae3adc.js";
+import { S as _ } from "./sortable.esm-8c3d5856.57c4f048.js";
+import { v as f } from "./v4-fa4bb814.196482d9.js";
+import "react";
+import "react-dom";
+const x = `: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"
+    "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"
+      "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"
+        "navigation body"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"
+      "body"}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"
+        "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:"header body"
+        "navigation body"}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"
+        "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"
+        "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"
+        "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"
+      "content"}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5rem, auto) auto 1fr;grid-template-areas:"app-bar"
+    "banner"
+    "content";will-change:transform}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);will-change:transform;grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:"sidebar-header"
+    "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"
+          "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"
+          "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}.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}}`, k = class {
+  constructor(t) {
+    n(this, t), this.ctaClick = o(this, "ctaClick", 7), this.mobileViewChange = o(this, "mobileViewChange", 7), this.navigationBackButtonClick = o(this, "navigationBackButtonClick", 7), this.sidebarToggle = o(this, "sidebarToggle", 7), this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    }, this.onCtaClick = (e) => {
+      this.ctaClick.emit(e);
+    }, this.onNavigationBackButtonClick = (e) => {
+      this.navigationBackButtonClick.emit(e);
+    }, this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    }, this.appName = void 0, this.backToNavigationViewButtonLabel = "Back to navigation", this.ctaIcon = void 0, this.ctaLabel = void 0, this.hideAppBar = void 0, this.navigationBackButtonLabel = "Go back", this.navigationLabel = void 0, this.showNavigationBackButton = void 0, this.sidebarCloseButtonLabel = "Close sidebar", this.sidebarHeading = void 0, this.transitionStyle = "slides", this.hasCustomAppBarBackButton = void 0, this.hasNavigation = void 0, this.hasSidebar = void 0, this.mobileView = "navigation", this.sidebarActive = void 0, this.sidebarClosing = void 0, this.transitioningFrom = void 0, this.transitioningTo = void 0;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCustomAppBarBackButtonStatus(), this.updateNavigationStatus(), this.updateSidebarStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateCustomAppBarBackButtonStatus(), this.updateSidebarStatus(), this.updateNavigationStatus(), this.checkMobileView();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.mutationObserver) == null || t.disconnect();
+  }
+  watchMobileView() {
+    this.checkMobileView();
+  }
+  async showSidebar() {
+    this.sidebarActive || !this.hasSidebar || (this.sidebarActive = !0, this.changeMobileView("sidebar"), this.sidebarToggle.emit(!0));
+  }
+  async hideSidebar() {
+    if (!this.sidebarActive || !this.hasSidebar)
+      return;
+    Boolean(this.sidebarClosingTimeout) && clearTimeout(this.sidebarClosingTimeout), this.sidebarClosing = !0;
+    const t = u() ? 0 : 300;
+    this.sidebarClosingTimeout = setTimeout(() => {
+      this.sidebarActive = !1, this.sidebarClosing = !1, this.changeMobileView("body"), this.sidebarToggle.emit(!1);
+    }, t);
+  }
+  async toggleSidebar() {
+    !this.hasSidebar || (this.sidebarActive ? this.hideSidebar() : this.showSidebar());
+  }
+  async changeMobileView(t, e = !0) {
+    if (this.mobileView === t || t === "navigation" && !this.hasNavigation || t === "sidebar" && !this.hasSidebar)
+      return;
+    if (!u() || !e) {
+      this.mobileView = t, this.mobileViewChange.emit(this.mobileView);
+      return;
+    }
+    Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = t;
+    let s = 0;
+    this.transitionStyle === "slides" ? s = 400 : this.transitionStyle === "dialog" && (s = 300), this.transitionTimeout = setTimeout(() => {
+      this.mobileView = t, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
+    }, s);
+  }
+  checkMobileView() {
+    if (this.mobileView === "navigation" && !this.hasNavigation || this.mobileView === "sidebar" && !this.hasSidebar) {
+      this.mobileView = "body";
+      return;
+    }
+    const t = this.mobileView === "sidebar" || this.sidebarActive;
+    t !== this.sidebarActive && (t ? this.showSidebar() : this.hideSidebar());
+  }
+  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 t = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation && !this.hasCustomAppBarBackButton, e = Boolean(this.el.querySelector('[slot="app-bar-controls"]')), a = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')), s = d("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": a,
+      "app-layout--has-app-bar-controls": e,
+      "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--hide-app-bar": this.hideAppBar,
+      "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+      "app-layout--sidebar-closing": this.sidebarClosing
+    });
+    return i(l, null, i("section", { "aria-labelledby": "app-name", class: s, role: "document", tabIndex: 0 }, i("div", { class: "app-layout__grid" }, i("header", { class: "app-layout__header" }, i("span", { class: "app-layout__navigation-mobile-menu-button" }, i("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && i("span", { class: "app-layout__navigation-back-button" }, i("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), i("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && i("span", { class: "app-layout__navigation-controls" }, i("slot", { name: "navigation-controls" }))), i("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, i("slot", { name: "navigation" })), i("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && i("header", { class: "app-layout__app-bar" }, i("span", { class: "app-layout__app-bar-mobile-menu-button" }, i("slot", { name: "app-bar-mobile-menu-button" })), t && i("span", { class: "app-layout__back-to-navigation-button" }, i("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), i("span", { class: "app-layout__custom-app-bar-back-button" }, i("slot", { name: "custom-app-bar-back-button" })), i("div", { class: "app-layout__app-bar-content" }, i("slot", { name: "app-bar" })), i("div", { class: "app-layout__app-bar-controls" }, i("slot", { name: "app-bar-controls" }))), i("div", { class: "app-layout__banner" }, i("slot", { name: "banner" })), i("div", { class: "app-layout__content" }, i("slot", { name: "content" }))), i("aside", { class: "app-layout__sidebar" }, i("header", { class: "app-layout__sidebar-header" }, i("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), i("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), i("div", { class: "app-layout__sidebar-content" }, i("slot", { name: "sidebar" }))), this.ctaLabel && i("span", { class: "app-layout__floating-cta" }, i("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
+  }
+  get el() {
+    return p(this);
+  }
+  static get watchers() {
+    return {
+      mobileView: ["watchMobileView"]
+    };
+  }
+};
+k.style = x;
+const C = ":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__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", I = class {
+  constructor(t) {
+    n(this, t), this.heading = void 0, this.illustration = void 0;
+  }
+  render() {
+    return i(l, null, i("div", { class: "empty-state" }, this.illustration && i("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), i("div", { class: "empty-state__body" }, this.heading && i("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading }), i("div", { class: "empty-state__content" }, i("swirl-text", { align: "center", color: "subdued" }, i("slot", null))))));
+  }
+};
+I.style = C;
+const B = ":host{display:inline-flex}", S = class {
+  constructor(t) {
+    n(this, t), this.size = 24;
+  }
+  render() {
+    const t = this.size === 20 ? 24 : this.size, e = d("swirl-icon", `swirl-icon--size-${this.size}`);
+    return i("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${t} ${t}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && i(r, null, i("path", { d: "M3.99999 1.33334C3.26666 1.33334 2.67332 1.93334 2.67332 2.66668L2.66666 13.3333C2.66666 14.0667 3.25999 14.6667 3.99332 14.6667H12C12.7333 14.6667 13.3333 14.0667 13.3333 13.3333V5.88668C13.3333 5.53334 13.1933 5.19334 12.94 4.94668L9.71999 1.72668C9.47332 1.47334 9.13332 1.33334 8.77999 1.33334H3.99999ZM8.66666 5.33334V2.33334L12.3333 6.00001H9.33332C8.96666 6.00001 8.66666 5.70001 8.66666 5.33334Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && i(r, null, i("path", { d: "M6 2C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8.83C20 8.3 19.79 7.79 19.41 7.42L14.58 2.59C14.21 2.21 13.7 2 13.17 2H6ZM13 8V3.5L18.5 9H14C13.45 9 13 8.55 13 8Z", fill: "currentColor" })), this.size === 28 && i(r, null, i("path", { d: "M6.99999 2.33334C5.71666 2.33334 4.67832 3.38334 4.67832 4.66668L4.66666 23.3333C4.66666 24.6167 5.70499 25.6667 6.98832 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3333V10.3017C23.3333 9.68334 23.0883 9.08834 22.645 8.65668L17.01 3.02168C16.5783 2.57834 15.9833 2.33334 15.365 2.33334H6.99999ZM15.1667 9.33334V4.08334L21.5833 10.5H16.3333C15.6917 10.5 15.1667 9.97501 15.1667 9.33334Z", fill: "currentColor" })));
+  }
+};
+S.style = B;
+const D = ":host{display:inline-flex}", M = class {
+  constructor(t) {
+    n(this, t), this.size = 24;
+  }
+  render() {
+    const t = this.size === 20 ? 24 : this.size, e = d("swirl-icon", `swirl-icon--size-${this.size}`);
+    return i("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${t} ${t}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && i(r, null, i("path", { d: "M13.3333 3.99996H8.00001L7.06001 3.05996C6.80668 2.80663 6.46668 2.66663 6.11334 2.66663H2.66668C1.93334 2.66663 1.34001 3.26663 1.34001 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66668 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM10 5.99996C10.7333 5.99996 11.3333 6.59996 11.3333 7.33329C11.3333 8.06663 10.7333 8.66663 10 8.66663C9.26668 8.66663 8.66668 8.06663 8.66668 7.33329C8.66668 6.59996 9.26668 5.99996 10 5.99996ZM12.6667 11.3333H7.33334V10.6666C7.33334 9.77996 9.11334 9.33329 10 9.33329C10.8867 9.33329 12.6667 9.77996 12.6667 10.6666V11.3333Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && i(r, null, i("path", { d: "M20 6H12L10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM15 9C16.1 9 17 9.9 17 11C17 12.1 16.1 13 15 13C13.9 13 13 12.1 13 11C13 9.9 13.9 9 15 9ZM19 17H11V16C11 14.67 13.67 14 15 14C16.33 14 19 14.67 19 16V17Z", fill: "currentColor" })), this.size === 28 && i(r, null, i("path", { d: "M23.3333 6.99996H14L12.355 5.35496C11.9117 4.91163 11.3167 4.66663 10.6983 4.66663H4.66668C3.38334 4.66663 2.34501 5.71663 2.34501 6.99996L2.33334 21C2.33334 22.2833 3.38334 23.3333 4.66668 23.3333H23.3333C24.6167 23.3333 25.6667 22.2833 25.6667 21V9.33329C25.6667 8.04996 24.6167 6.99996 23.3333 6.99996ZM17.5 10.5C18.7833 10.5 19.8333 11.55 19.8333 12.8333C19.8333 14.1166 18.7833 15.1666 17.5 15.1666C16.2167 15.1666 15.1667 14.1166 15.1667 12.8333C15.1667 11.55 16.2167 10.5 17.5 10.5ZM22.1667 19.8333H12.8333V18.6666C12.8333 17.115 15.9483 16.3333 17.5 16.3333C19.0517 16.3333 22.1667 17.115 22.1667 18.6666V19.8333Z", fill: "currentColor" })));
+  }
+};
+M.style = D;
+const z = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", L = class {
+  constructor(t) {
+    n(this, t), this.itemDrop = o(this, "itemDrop", 7), this.focusedIndex = 0, this.toggleDrag = (e) => {
+      const a = e.detail;
+      Boolean(this.dragging) ? this.stopDrag(a) : this.startDrag(a);
+    }, this.startDrag = (e) => {
+      this.dragging = e, this.draggingStartIndex = this.getItemIndex(this.dragging), e.setAttribute("dragging", "true");
+      const a = this.getItemIndex(this.dragging);
+      this.focusItemAtIndex(a), this.assistiveText = this.assistiveTextItemGrabbed;
+    }, this.stopDrag = (e) => {
+      const a = this.getItemIndex(this.dragging);
+      this.dragging = void 0, e.removeAttribute("dragging"), this.assistiveText = `${this.assistiveTextItemMoved} ${a + 1}`, this.itemDrop.emit({ item: e, oldIndex: this.draggingStartIndex, newIndex: a }), this.draggingStartIndex = void 0;
+    }, this.onKeyDown = (e) => {
+      if (e.code === "ArrowDown")
+        e.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemDown() : this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      else if (e.code === "ArrowUp")
+        if (e.preventDefault(), Boolean(this.dragging))
+          this.moveDraggedItemUp();
+        else {
+          const a = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+          this.focusItemAtIndex(a);
+        }
+      else if (e.code === "Space" || e.code === "Enter") {
+        const a = e.composedPath()[0];
+        Boolean(this.dragging) && !(a != null && a.classList.contains("resource-list-item__drag-handle")) && (e.preventDefault(), this.stopDrag(this.dragging));
+      } else
+        e.code === "Home" ? (e.preventDefault(), this.focusItemAtIndex(0)) : e.code === "End" && (e.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
+    }, this.allowDrag = void 0, 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.label = void 0, this.assistiveText = void 0;
+  }
+  componentDidLoad() {
+    this.observeSlotChanges(), this.collectItems(), this.setItemAllowDragState(), this.setupDragDrop();
+  }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var t, e;
+    (t = this.sortable) == null || t.destroy(), (e = this.observer) == null || e.disconnect();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.collectItems(), this.setItemAllowDragState();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      characterData: !0,
+      subtree: !0
+    });
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState(), this.setupDragDrop();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((t) => t.isConnected), this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[this.focusedIndex]);
+  }
+  getItemIndex(t) {
+    return this.items.map((e) => e).findIndex((e) => e === t);
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((t) => {
+      const e = t == null ? void 0 : t.querySelector(".resource-list-item__content, .resource-list-file-item"), a = t == null ? void 0 : t.querySelector(".resource-list-item__drag-handle");
+      e == null || e.setAttribute("tabIndex", "-1"), a == null || a.setAttribute("tabIndex", "-1");
+    });
+  }
+  setItemAllowDragState() {
+    this.allowDrag ? this.items.forEach((t) => {
+      t.setAttribute("allow-drag", "true"), t.addEventListener("toggleDrag", this.toggleDrag);
+    }) : this.items.forEach((t) => {
+      t.removeAttribute("allow-drag"), t.removeEventListener("toggleDrag", this.toggleDrag);
+    });
+  }
+  setupDragDrop() {
+    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = _.create(this.gridEl, {
+      animation: 150,
+      draggable: "swirl-resource-list-item",
+      handle: ".resource-list-item__drag-handle",
+      onEnd: (t) => {
+        this.itemDrop.emit({
+          item: t.item,
+          oldIndex: t.oldDraggableIndex,
+          newIndex: t.newDraggableIndex
+        });
+      }
+    }));
+  }
+  enableItemFocus(t, e) {
+    if (!Boolean(t))
+      return;
+    const a = t.querySelector(".resource-list-item__content, .resource-list-file-item"), s = t.querySelector(".resource-list-item__drag-handle");
+    Boolean(s) && s.setAttribute("tabIndex", "0"), Boolean(a) && (a.setAttribute("tabIndex", "0"), e && a.focus());
+  }
+  focusItemAtIndex(t) {
+    this.removeItemsFromTabOrder();
+    const e = this.items[t];
+    !Boolean(e) || !e.isConnected || (this.enableItemFocus(e, !0), this.focusedIndex = t);
+  }
+  moveDraggedItemDown() {
+    const t = this.dragging.nextElementSibling;
+    !Boolean(t) || (t.after(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  moveDraggedItemUp() {
+    const t = this.dragging.previousElementSibling;
+    !Boolean(t) || (t.before(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  render() {
+    return i(l, { onKeyDown: this.onKeyDown }, i("swirl-visually-hidden", { role: "alert" }, this.assistiveText), i("swirl-stack", { "aria-label": this.label, class: "resource-list", ref: (t) => this.gridEl = t, role: "grid" }, i("slot", null)));
+  }
+  get el() {
+    return p(this);
+  }
+  static get watchers() {
+    return {
+      allowDrag: ["watchAllowDrag"]
+    };
+  }
+};
+L.style = z;
+const T = `.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}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta){display:flex;align-items:center}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta) .resource-list-item__control.sc-swirl-resource-list-item{position:relative;top:auto;right:auto;transform:none}.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(
+      --swirl-resource-list-item-background-hovered
+    );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)}@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--hide-divider.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item:after{display:none}.resource-list-item--label-weight-medium.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),
+    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__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-base);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);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container.sc-swirl-resource-list-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.resource-list-item__label.sc-swirl-resource-list-item b.sc-swirl-resource-list-item,.resource-list-item__label.sc-swirl-resource-list-item strong.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;margin-top:var(--s-space-2);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-16);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}.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)}`, A = class {
+  constructor(t) {
+    n(this, t), this.toggleDrag = o(this, "toggleDrag", 7), this.valueChange = o(this, "valueChange", 7), this.desktopMediaQuery = w(), this.id = f(), this.desktopMediaQueryHandler = (e) => {
+      this.forceIconProps(e.matches), this.updateIconSize(e.matches);
+    }, this.onClick = () => {
+      !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
+    }, this.onMenuTriggerClick = (e) => {
+      this.disabled && !Boolean(this.href) && e.stopPropagation();
+    }, this.onDragHandleKeyDown = (e) => {
+      (e.code === "Space" || e.code === "Enter") && (e.preventDefault(), this.toggleDrag.emit(this.el));
+    }, this.active = void 0, this.allowDrag = void 0, this.checked = !1, this.description = void 0, this.disabled = void 0, this.dragging = void 0, this.dragHandleDescription = "Press spacebar to toggle grab", this.dragHandleLabel = "Move item", this.hideDivider = void 0, this.href = void 0, this.interactive = !0, this.label = void 0, this.labelWeight = "medium", this.menuTriggerId = void 0, this.menuTriggerLabel = "Options", this.meta = void 0, this.selectable = void 0, this.value = void 0, this.hasMedia = !1, this.iconSize = 24;
+  }
+  async componentWillLoad() {
+    this.updateMediaState();
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches), this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler, 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() {
+    var t, e;
+    (e = (t = this.desktopMediaQuery).removeEventListener) == null || e.call(t, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(t) {
+    var a;
+    const e = (a = this.iconEl) == null ? void 0 : a.children[0];
+    e == null || e.setAttribute("size", t ? "20" : "24");
+  }
+  updateIconSize(t) {
+    this.iconSize = t ? 20 : 24;
+  }
+  updateMediaState() {
+    const t = this.el.querySelector('[slot="media"]'), e = Boolean(t);
+    e !== this.hasMedia && (this.hasMedia = e);
+  }
+  render() {
+    const t = !this.interactive && !this.selectable ? "div" : Boolean(this.href) && !this.selectable ? "a" : "button", e = this.disabled && !Boolean(this.href), a = Boolean(this.el.querySelector("[slot='badges']")), s = Boolean(this.menuTriggerId) || this.el.querySelector("[slot='control']"), m = this.interactive && Boolean(this.href) ? this.href : void 0, h = Boolean(this.meta) || a, b = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable, c = (Boolean(this.meta) || a) && !this.selectable, g = this.selectable ? String(this.checked) : void 0, y = this.interactive && this.selectable ? "checkbox" : void 0, v = d("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--disabled": this.disabled,
+      "resource-list-item--draggable": this.allowDrag,
+      "resource-list-item--dragging": this.dragging,
+      "resource-list-item--has-menu": s,
+      "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": h,
+      "resource-list-item--show-meta": c
+    });
+    return i(l, { role: "row" }, i("div", { class: v, role: "gridcell" }, i(t, { "aria-checked": g, "aria-disabled": e ? "true" : void 0, "aria-labelledby": this.id, class: "resource-list-item__content", href: m, disabled: e, onClick: this.onClick, part: "resource-list-item__content", role: y, tabIndex: 0, type: t === "button" ? "button" : void 0 }, this.hasMedia && i("span", { class: "resource-list-item__media" }, i("slot", { name: "media" })), i("span", { class: "resource-list-item__label-container" }, i("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && i("span", { class: "resource-list-item__description" }, this.description)), c && i("span", { class: "resource-list-item__meta" }, i("span", { class: "resource-list-item__meta-text" }, this.meta), i("span", { class: "resource-list-item__badges" }, i("slot", { name: "badges" })))), this.selectable && i("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, i("span", { class: "resource-list-item__checkbox-icon" }, this.checked && i("swirl-icon-check-strong", null))), i("span", { class: "resource-list-item__control" }, i("slot", { name: "control" })), b && i("swirl-popover-trigger", { popover: this.menuTriggerId }, i("swirl-button", { "aria-disabled": e ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: e, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick }))), this.allowDrag && i("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, i("swirl-icon-drag-handle", { size: this.iconSize })));
+  }
+  get el() {
+    return p(this);
+  }
+};
+A.style = T;
+export {
+  k as swirl_app_layout,
+  I as swirl_empty_state,
+  S as swirl_icon_file,
+  M as swirl_icon_folder_shared,
+  L as swirl_resource_list,
+  A as swirl_resource_list_item
+};

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

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

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

@@ -0,0 +1,28 @@
+import { r as s, h as a, H as i } from "./index.e5965a8a.js";
+import { c as e } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}", l = class {
+  constructor(r) {
+    s(this, r), this.badge = void 0;
+  }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge))
+      return;
+    const r = this.badgeEl.querySelector("swirl-badge");
+    r == null || r.setAttribute("size", "m");
+  }
+  render() {
+    const r = e("avatar-group", {
+      "avatar-group--has-badge": Boolean(this.badge)
+    }), o = e("avatar-group__badge");
+    return a(i, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
+  }
+};
+l.style = d;
+export {
+  l as swirl_avatar_group
+};

package/dist/swirl-avatar.entry.63c9bc2f.js

@@ -0,0 +1,48 @@
+import { r as h, h as a, H as u, g as m } from "./index.e5965a8a.js";
+import { c as e } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const g = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-2xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;bottom:0;right:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}", o = {
+  "2xs": 20,
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144
+}, p = class {
+  constructor(i) {
+    h(this, i), this.setImageAvailable = () => {
+      this.imageAvailable = !0;
+    }, this.setImageUnavailable = () => {
+      this.imageAvailable = !1;
+    }, this.onKeydown = (t) => {
+      t.code === "Space" ? t.preventDefault() : t.code === "Enter" && (t.preventDefault(), this.element.click());
+    }, this.onKeyup = (t) => {
+      t.code === "Space" && (t.preventDefault(), this.element.click());
+    }, this.badge = void 0, this.badgePosition = "bottom", this.color = "kiwi", this.icon = void 0, this.initials = void 0, this.interactive = !1, this.label = void 0, this.showLabel = !1, this.size = "m", this.src = void 0, this.toolPosition = "bottom", this.variant = "round", this.imageAvailable = void 0;
+  }
+  watchSrcProp() {
+    this.imageAvailable = void 0;
+  }
+  render() {
+    const i = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), t = !i && Boolean(this.initials), r = !i && !t && Boolean(this.icon), s = !i && !t && !r, n = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : "img", l = e("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": r || s,
+      "avatar--has-initials": t,
+      "avatar--interactive": this.interactive
+    }), c = e("avatar__badge", `avatar__badge--position-${this.badgePosition}`), d = e("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
+    return a(u, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, a("span", { class: l, part: "avatar" }, i && a("span", { class: "avatar__image" }, a("img", { alt: "", height: o[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: o[this.size] })), t && a("span", { class: "avatar__initials" }, a("span", null, this.initials)), r && a("span", { class: "avatar__icon", innerHTML: this.icon }), s && a("span", { class: "avatar__icon" }, a("swirl-icon-person", null)), n && a("span", { class: c, innerHTML: this.badge }), a("span", { class: d }, a("slot", { name: "tool" }))), this.showLabel && a("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
+  }
+  get element() {
+    return m(this);
+  }
+  static get watchers() {
+    return {
+      src: ["watchSrcProp"]
+    };
+  }
+};
+p.style = g;
+export {
+  p as swirl_avatar
+};

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

@@ -0,0 +1,19 @@
+import { r as i, h as e, H as t } from "./index.e5965a8a.js";
+import { c as r } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const s = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", n = class {
+  constructor(a) {
+    i(this, a), this.icon = void 0, this.intent = "critical", this.label = void 0, this.size = "m", this.variant = "default";
+  }
+  render() {
+    const a = r("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon
+    });
+    return e(t, { role: "status" }, e("span", { class: a }, this.icon && e("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && e("span", { class: "badge__label" }, this.label)));
+  }
+};
+n.style = s;
+export {
+  n as swirl_badge
+};