@getflip/swirl-components-react 0.99.0 → 0.100.1

package/dist/{swirl-accordion-item.entry.a52e69ad.js → swirl-accordion-item.entry.f3238ba7.js}

@@ -1,4 +1,4 @@
-import { r as a, c as n, h as i, H as d, g as s } from "./index.fec1d5e0.js";
+import { r as a, c as n, h as i, H as d, g as s } from "./index.3d73a4e5.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import { v as o } from "./v4-fa4bb814.196482d9.js";
 import "react";

package/dist/swirl-accordion.entry.9c78e993.js

@@ -0,0 +1,36 @@
+import { r as i, c as s, h as o, H as n, g as a } from "./index.3d73a4e5.js";
+import "react";
+import "react-dom";
+const l = ":host{display:block}:host *{box-sizing:border-box}", c = class {
+  constructor(e) {
+    i(this, e), this.expandedItemChange = s(this, "expandedItemChange", 7);
+  }
+  componentDidLoad() {
+    this.el.addEventListener("expansionChange", (e) => {
+      e.detail && (this.expandedItemChange.emit(e.target.itemId), this.collapseInactiveItems(e.target));
+    });
+  }
+  async collapseItem(e) {
+    const t = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((r) => r.itemId === e);
+    !Boolean(t) || t.collapse();
+  }
+  async expandItem(e) {
+    const t = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((r) => r.itemId === e);
+    !Boolean(t) || t.expand();
+  }
+  collapseInactiveItems(e) {
+    Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((t) => {
+      t !== e && t.collapse();
+    });
+  }
+  render() {
+    return o(n, null, o("slot", null));
+  }
+  get el() {
+    return a(this);
+  }
+};
+c.style = l;
+export {
+  c as swirl_accordion
+};

package/dist/{swirl-action-list-section.entry.5167b8c6.js → swirl-action-list-section.entry.3c65cb85.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.fec1d5e0.js";
+import { r as s, h as t, H as e } from "./index.3d73a4e5.js";
 import "react";
 import "react-dom";
 const a = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}", l = class {

package/dist/{swirl-action-list_3.entry.cf874b87.js → swirl-action-list_3.entry.54086d7d.js}

@@ -1,4 +1,4 @@
-import { r as a, h as e, H as n, g as c } from "./index.fec1d5e0.js";
+import { r as a, h as e, H as n, g as c } from "./index.3d73a4e5.js";
 import { q as d, a as h, g as p } from "./utils-bc84f36e.1fee9865.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";

package/dist/{swirl-app-bar.entry.e3e35715.js → swirl-app-bar.entry.4fe908ff.js}

@@ -1,4 +1,4 @@
-import { r as e, c as o, h as t, H as n, g as a } from "./index.fec1d5e0.js";
+import { r as e, c as o, h as t, H as n, g as a } from "./index.3d73a4e5.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-icon.entry.3b4c6357.js → swirl-app-icon.entry.747aec40.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as t } from "./index.fec1d5e0.js";
+import { r as o, h as e, H as t } from "./index.3d73a4e5.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-layout_7.entry.598577ec.js → swirl-app-layout_6.entry.afe7b654.js}

@@ -1,4 +1,4 @@
-import { r, c as o, h as t, H as l, g as c, F as n } from "./index.fec1d5e0.js";
+import { r as n, c as o, h as t, H as l, g as p, F as r } from "./index.3d73a4e5.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { i as u, g as w } from "./utils-bc84f36e.1fee9865.js";
 import { S as _ } from "./sortable.esm-8c3d5856.57c4f048.js";
@@ -23,7 +23,7 @@ const x = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
           "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(i) {
-    r(this, i), 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 = () => {
+    n(this, i), 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);
@@ -100,7 +100,7 @@ const x = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
     return t(l, null, t("section", { "aria-labelledby": "app-name", class: a, role: "document", tabIndex: 0 }, t("div", { class: "app-layout__grid" }, t("header", { class: "app-layout__header" }, t("span", { class: "app-layout__navigation-mobile-menu-button" }, t("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && t("span", { class: "app-layout__navigation-back-button" }, t("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), t("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && t("span", { class: "app-layout__navigation-controls" }, t("slot", { name: "navigation-controls" }))), t("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, t("slot", { name: "navigation" })), t("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, t("header", { class: "app-layout__app-bar" }, t("span", { class: "app-layout__app-bar-mobile-menu-button" }, t("slot", { name: "app-bar-mobile-menu-button" })), i && t("span", { class: "app-layout__back-to-navigation-button" }, t("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 })), t("div", { class: "app-layout__app-bar-content" }, t("slot", { name: "app-bar" })), t("div", { class: "app-layout__app-bar-controls" }, t("slot", { name: "app-bar-controls" }))), t("div", { class: "app-layout__banner" }, t("slot", { name: "banner" })), t("div", { class: "app-layout__content" }, t("slot", { name: "content" }))), t("aside", { class: "app-layout__sidebar" }, t("header", { class: "app-layout__sidebar-header" }, t("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), t("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), t("div", { class: "app-layout__sidebar-content" }, t("slot", { name: "sidebar" }))), this.ctaLabel && t("span", { class: "app-layout__floating-cta" }, t("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
   }
   get el() {
-    return c(this);
+    return p(this);
   }
   static get watchers() {
     return {
@@ -109,65 +109,38 @@ const x = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
   }
 };
 k.style = x;
-const C = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}", I = class {
+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(i) {
-    r(this, i), this.bordered = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.maxWidth = void 0, this.overflow = "visible", this.padding = "0", this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0;
-  }
-  render() {
-    const i = {
-      alignItems: this.centerBlock ? "center" : void 0,
-      display: this.centerBlock || this.centerInline ? "flex" : void 0,
-      height: this.cover ? "100%" : void 0,
-      justifyContent: this.centerInline ? "center" : void 0,
-      overflow: this.overflow,
-      padding: `var(--s-space-${this.padding})`,
-      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
-      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
-      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
-      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
-      position: Boolean(this.overflow) ? "relative" : "",
-      maxWidth: this.maxWidth,
-      width: this.cover ? "100%" : void 0
-    }, e = d("box", {
-      "box--bordered": this.bordered,
-      "box--cover": this.cover
-    });
-    return t(l, { class: e, style: i }, t("slot", null));
-  }
-};
-I.style = C;
-const S = ":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)}", B = class {
-  constructor(i) {
-    r(this, i), this.heading = void 0, this.illustration = void 0;
+    n(this, i), this.heading = void 0, this.illustration = void 0;
   }
   render() {
     return t(l, null, t("div", { class: "empty-state" }, this.illustration && t("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), t("div", { class: "empty-state__body" }, this.heading && t("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading }), t("div", { class: "empty-state__content" }, t("swirl-text", { align: "center", color: "subdued" }, t("slot", null))))));
   }
 };
-B.style = S;
-const D = ":host{display:inline-flex}", M = class {
+I.style = C;
+const S = ":host{display:inline-flex}", D = class {
   constructor(i) {
-    r(this, i), this.size = 24;
+    n(this, i), this.size = 24;
   }
   render() {
     const i = this.size === 20 ? 24 : this.size, e = d("swirl-icon", `swirl-icon--size-${this.size}`);
-    return t("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && t(n, null, t("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) && t(n, null, t("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 && t(n, null, t("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" })));
+    return t("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && t(r, null, t("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) && t(r, null, t("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 && t(r, null, t("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" })));
   }
 };
-M.style = D;
-const z = ":host{display:inline-flex}", L = class {
+D.style = S;
+const B = ":host{display:inline-flex}", M = class {
   constructor(i) {
-    r(this, i), this.size = 24;
+    n(this, i), this.size = 24;
   }
   render() {
     const i = this.size === 20 ? 24 : this.size, e = d("swirl-icon", `swirl-icon--size-${this.size}`);
-    return t("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && t(n, null, t("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) && t(n, null, t("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 && t(n, null, t("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" })));
+    return t("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && t(r, null, t("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) && t(r, null, t("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 && t(r, null, t("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" })));
   }
 };
-L.style = z;
-const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", V = class {
+M.style = B;
+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(i) {
-    r(this, i), this.itemDrop = o(this, "itemDrop", 7), this.focusedIndex = 0, this.toggleDrag = (e) => {
+    n(this, i), 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) => {
@@ -197,13 +170,16 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
   componentDidLoad() {
     this.observeSlotChanges(), this.collectItems(), this.setItemAllowDragState(), this.setupDragDrop();
   }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
   disconnectedCallback() {
     var i, e;
     (i = this.sortable) == null || i.destroy(), (e = this.observer) == null || e.disconnect();
   }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
-      this.collectItems(), this.setItemAllowDragState(), this.setupDragDrop();
+      this.collectItems(), this.setItemAllowDragState();
     }), this.observer.observe(this.el, {
       childList: !0,
       characterData: !0,
@@ -269,7 +245,7 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     return t(l, { onKeyDown: this.onKeyDown }, t("swirl-visually-hidden", { role: "alert" }, this.assistiveText), t("swirl-stack", { "aria-label": this.label, class: "resource-list", ref: (i) => this.gridEl = i, role: "grid" }, t("slot", null)));
   }
   get el() {
-    return c(this);
+    return p(this);
   }
   static get watchers() {
     return {
@@ -277,13 +253,13 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     };
   }
 };
-V.style = T;
-const A = `.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(
+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)}`, H = class {
+    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)}`, V = class {
   constructor(i) {
-    r(this, i), this.toggleDrag = o(this, "toggleDrag", 7), this.valueChange = o(this, "valueChange", 7), this.desktopMediaQuery = w(), this.id = f(), this.desktopMediaQueryHandler = (e) => {
+    n(this, i), 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));
@@ -316,7 +292,7 @@ const A = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:
     e !== this.hasMedia && (this.hasMedia = e);
   }
   render() {
-    const i = !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, g = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable, p = (Boolean(this.meta) || a) && !this.selectable, b = 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}`, {
+    const i = !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,
@@ -327,21 +303,20 @@ const A = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:
       "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": p
+      "resource-list-item--show-meta": c
     });
-    return t(l, { role: "row" }, t("div", { class: v, role: "gridcell" }, t(i, { "aria-checked": b, "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 }, this.hasMedia && t("span", { class: "resource-list-item__media" }, t("slot", { name: "media" })), t("span", { class: "resource-list-item__label-container" }, t("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && t("span", { class: "resource-list-item__description" }, this.description)), p && t("span", { class: "resource-list-item__meta" }, t("span", { class: "resource-list-item__meta-text" }, this.meta), t("span", { class: "resource-list-item__badges" }, t("slot", { name: "badges" })))), this.selectable && t("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, t("span", { class: "resource-list-item__checkbox-icon" }, this.checked && t("swirl-icon-check-strong", null))), t("span", { class: "resource-list-item__control" }, t("slot", { name: "control" })), g && t("swirl-popover-trigger", { popover: this.menuTriggerId }, t("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 && t("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, t("swirl-icon-drag-handle", { size: this.iconSize })));
+    return t(l, { role: "row" }, t("div", { class: v, role: "gridcell" }, t(i, { "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 }, this.hasMedia && t("span", { class: "resource-list-item__media" }, t("slot", { name: "media" })), t("span", { class: "resource-list-item__label-container" }, t("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && t("span", { class: "resource-list-item__description" }, this.description)), c && t("span", { class: "resource-list-item__meta" }, t("span", { class: "resource-list-item__meta-text" }, this.meta), t("span", { class: "resource-list-item__badges" }, t("slot", { name: "badges" })))), this.selectable && t("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, t("span", { class: "resource-list-item__checkbox-icon" }, this.checked && t("swirl-icon-check-strong", null))), t("span", { class: "resource-list-item__control" }, t("slot", { name: "control" })), b && t("swirl-popover-trigger", { popover: this.menuTriggerId }, t("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 && t("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, t("swirl-icon-drag-handle", { size: this.iconSize })));
   }
   get el() {
-    return c(this);
+    return p(this);
   }
 };
-H.style = A;
+V.style = T;
 export {
   k as swirl_app_layout,
-  I as swirl_box,
-  B as swirl_empty_state,
-  M as swirl_icon_file,
-  L as swirl_icon_folder_shared,
-  V as swirl_resource_list,
-  H as swirl_resource_list_item
+  I as swirl_empty_state,
+  D as swirl_icon_file,
+  M as swirl_icon_folder_shared,
+  L as swirl_resource_list,
+  V as swirl_resource_list_item
 };

package/dist/{swirl-autocomplete.entry.c99156c8.js → swirl-autocomplete.entry.c001b389.js}

@@ -1,4 +1,4 @@
-import { r as p, c as m, h as o, H as g, g as f } from "./index.fec1d5e0.js";
+import { r as p, c as m, h as o, H as g, g as f } from "./index.3d73a4e5.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-bc84f36e.1fee9865.js";

package/dist/{swirl-avatar-group.entry.7f8aa920.js → swirl-avatar-group.entry.3d8f4c41.js}

@@ -1,4 +1,4 @@
-import { r as s, h as a, H as i } from "./index.fec1d5e0.js";
+import { r as s, h as a, H as i } from "./index.3d73a4e5.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-avatar.entry.3f7253de.js → swirl-avatar.entry.4c7a92b6.js}

@@ -1,4 +1,4 @@
-import { r as d, h as i, H as h, g as u } from "./index.fec1d5e0.js";
+import { r as d, h as i, H as h, g as u } from "./index.3d73a4e5.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-badge.entry.9e2a775c.js → swirl-badge.entry.ba2c77b2.js}

@@ -1,4 +1,4 @@
-import { r as i, h as e, H as t } from "./index.fec1d5e0.js";
+import { r as i, h as e, H as t } from "./index.3d73a4e5.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-banner.entry.4bd21455.js → swirl-banner.entry.0929a72e.js}

@@ -1,4 +1,4 @@
-import { r as o, c as r, h as t, H as c, g as l } from "./index.fec1d5e0.js";
+import { r as o, c as r, h as t, H as c, g as l } from "./index.3d73a4e5.js";
 import { c as b } from "./index-d280dafb.186cdb0e.js";
 import { g as d } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/swirl-box.entry.90a45a8d.js

@@ -0,0 +1,34 @@
+import { r as d, h as n, H as t } from "./index.3d73a4e5.js";
+import { c as s } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const o = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}", r = class {
+  constructor(e) {
+    d(this, e), this.bordered = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.maxWidth = void 0, this.overflow = "visible", this.padding = "0", this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0;
+  }
+  render() {
+    const e = {
+      alignItems: this.centerBlock ? "center" : void 0,
+      display: this.centerBlock || this.centerInline ? "flex" : void 0,
+      height: this.cover ? "100%" : void 0,
+      justifyContent: this.centerInline ? "center" : void 0,
+      overflow: this.overflow,
+      padding: `var(--s-space-${this.padding})`,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
+      position: Boolean(this.overflow) ? "relative" : "",
+      maxWidth: this.maxWidth,
+      width: this.cover ? "100%" : void 0
+    }, i = s("box", {
+      "box--bordered": this.bordered,
+      "box--cover": this.cover
+    });
+    return n(t, { class: i, style: e }, n("slot", null));
+  }
+};
+r.style = o;
+export {
+  r as swirl_box
+};

package/dist/{swirl-button-group.entry.37cec50b.js → swirl-button-group.entry.46a2db7e.js}

@@ -1,4 +1,4 @@
-import { r as s, h as r, H as i } from "./index.fec1d5e0.js";
+import { r as s, h as r, H as i } from "./index.3d73a4e5.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-button.entry.77bdecbb.js → swirl-button.entry.e2cfa81f.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, H as l, g as u } from "./index.fec1d5e0.js";
+import { r as e, h as i, H as l, g as u } from "./index.3d73a4e5.js";
 import { c as b } from "./index-d280dafb.186cdb0e.js";
 import { g as c } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-card.entry.35528300.js → swirl-card.entry.a54a17a8.js}

@@ -1,4 +1,4 @@
-import { r as i, h as e, H as n, g as o } from "./index.fec1d5e0.js";
+import { r as i, h as e, H as n, g as o } from "./index.3d73a4e5.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-carousel-slide.entry.4928e5e9.js → swirl-carousel-slide.entry.5ff7d5ad.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, H as t } from "./index.fec1d5e0.js";
+import { r as e, h as i, H as t } from "./index.3d73a4e5.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-carousel.entry.38f525ef.js → swirl-carousel.entry.9ab6c797.js}

@@ -1,4 +1,4 @@
-import { r as n, c as a, h as l, H as r, g as c } from "./index.fec1d5e0.js";
+import { r as n, c as a, h as l, H as r, g as c } from "./index.3d73a4e5.js";
 import { d } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-checkbox.entry.4b5ec28b.js → swirl-checkbox.entry.ab8f67b2.js}

@@ -1,4 +1,4 @@
-import { r as b, c as l, h as c, H as t } from "./index.fec1d5e0.js";
+import { r as b, c as l, h as c, H as t } from "./index.3d73a4e5.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-chip.entry.19b01aee.js → swirl-chip.entry.731c957f.js}

@@ -1,4 +1,4 @@
-import { r as t, c as o, h as r, H as h, g as n } from "./index.fec1d5e0.js";
+import { r as t, c as o, h as r, H as h, g as n } from "./index.3d73a4e5.js";
 import { c as p } from "./index-d280dafb.186cdb0e.js";
 import { g as l } from "./utils-bc84f36e.1fee9865.js";
 import "react";