@getflip/swirl-components-react 0.122.2 → 0.124.0

package/dist/{swirl-accordion-item.entry.af2146e5.js → swirl-accordion-item.entry.44c18bf2.js}

@@ -1,4 +1,4 @@
-import { r as a, c as n, h as i, H as d, g as s } from "./index.782451ad.js";
+import { r as a, c as n, h as i, H as d, g as s } from "./index.eff6ceb3.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.13540f91.js → swirl-accordion.entry.a857a209.js}

@@ -1,4 +1,4 @@
-import { r as s, c as i, h as o, H as l, g as a } from "./index.782451ad.js";
+import { r as s, c as i, h as o, H as l, g as a } from "./index.eff6ceb3.js";
 import "react";
 import "react-dom";
 const n = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}", c = class {

package/dist/{swirl-action-list-section.entry.b17f7142.js → swirl-action-list-section.entry.6a0f5858.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.782451ad.js";
+import { r as s, h as t, H as e } from "./index.eff6ceb3.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.dc44c7ff.js → swirl-action-list_3.entry.3a2e2193.js}

@@ -1,41 +1,58 @@
-import { r as a, h as e, H as n, g as c } from "./index.782451ad.js";
-import { q as d, a as h, g as p } from "./utils-9f141e25.a4ae3adc.js";
+import { r as a, h as o, H as r, g as d } from "./index.eff6ceb3.js";
+import { q as h, a as p, g as u } from "./utils-9f141e25.a4ae3adc.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const m = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", u = class {
+const m = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", f = class {
   constructor(i) {
     a(this, i), this.onKeyDown = (t) => {
       t.code === "ArrowDown" || t.code === "ArrowRight" ? (t.preventDefault(), this.focusNextItem()) : (t.code === "ArrowUp" || t.code === "ArrowLeft") && (t.preventDefault(), this.focusPreviousItem());
-    };
+    }, this.onFocusOut = (t) => {
+      if (this.isInsidePopover)
+        return;
+      const e = t.relatedTarget, s = t.target, n = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", c = e === null || !this.el.contains(e);
+      !this.isInsidePopover && c && n && this.container.setAttribute("tabindex", "0");
+    }, this.onFocus = () => {
+      var s, n;
+      if (this.isInsidePopover)
+        return;
+      this.container.removeAttribute("tabindex");
+      const t = this.getItems(), e = this.getActiveItemIndex();
+      e > -1 ? (s = t[e]) == null || s.focus() : (n = t[0]) == null || n.focus();
+    }, this.isInsidePopover = void 0;
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.isInsidePopover = this.el.closest("swirl-popover") !== null, this.isInsidePopover || this.container.setAttribute("tabindex", "0");
+    });
   }
   getItems() {
-    return d(this.el, '[role="menuitem"]');
+    return h(this.el, '[role="menuitem"]');
   }
   focusNextItem() {
-    const i = this.getItems(), s = (this.getActiveItemIndex() + 1) % i.length;
-    i[s].focus();
+    const i = this.getItems(), e = (this.getActiveItemIndex() + 1) % i.length;
+    i[e].focus();
   }
   focusPreviousItem() {
-    var o;
-    const i = this.getItems(), t = this.getActiveItemIndex(), s = t === 0 ? i.length - 1 : t - 1;
-    (o = i[s]) == null || o.focus();
+    var s;
+    const i = this.getItems(), t = this.getActiveItemIndex(), e = t === 0 ? i.length - 1 : t - 1;
+    (s = i[e]) == null || s.focus();
   }
   getActiveItemIndex() {
-    const i = this.getItems(), t = h();
-    return i.findIndex((s) => s === t || s === (t == null ? void 0 : t.querySelector('[role="menuitem"]')));
+    const i = this.getItems(), t = p();
+    return i.findIndex((e) => e === t || e === (t == null ? void 0 : t.querySelector('[role="menuitem"]')));
   }
   render() {
-    return e(n, null, e("div", { "aria-orientation": "vertical", class: "action-list", onKeyDown: this.onKeyDown, role: "menu" }, e("slot", null)));
+    return o(r, null, o("div", { "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? void 0 : this.onFocusOut, onFocus: this.isInsidePopover ? void 0 : this.onFocus, onKeyDown: this.onKeyDown, ref: (i) => this.container = i, role: "menu" }, o("slot", null)));
   }
   get el() {
-    return c(this);
+    return d(this);
   }
 };
-u.style = m;
-const f = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", g = class {
+f.style = m;
+const g = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", v = class {
   constructor(i) {
-    a(this, i), this.desktopMediaQuery = p(), this.desktopMediaQueryHandler = (t) => {
+    a(this, i), this.desktopMediaQuery = u(), this.desktopMediaQueryHandler = (t) => {
       this.forceIconProps(t.matches);
     }, this.badge = void 0, this.disabled = void 0, this.description = void 0, this.icon = void 0, this.intent = "default", this.label = void 0, this.size = "m", this.swirlAriaExpanded = void 0, this.swirlAriaHaspopup = void 0, this.suffix = void 0;
   }
@@ -50,17 +67,17 @@ const f = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{d
     (t = (i = this.desktopMediaQuery).removeEventListener) == null || t.call(i, "change", this.desktopMediaQueryHandler);
   }
   forceIconProps(i) {
-    var o, r;
-    const t = (o = this.iconEl) == null ? void 0 : o.children[0], s = (r = this.suffixEl) == null ? void 0 : r.children[0];
-    t == null || t.setAttribute("size", i ? "20" : "24"), s == null || s.setAttribute("size", i ? "20" : "24");
+    var s, n;
+    const t = (s = this.iconEl) == null ? void 0 : s.children[0], e = (n = this.suffixEl) == null ? void 0 : n.children[0];
+    t == null || t.setAttribute("size", i ? "20" : "24"), e == null || e.setAttribute("size", i ? "20" : "24");
   }
   render() {
-    const i = Boolean(this.badge), t = Boolean(this.suffix) && !this.disabled, s = l("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-    return e(n, null, e("button", { "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: s, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && e("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (o) => this.iconEl = o }), e("span", { class: "action-list-item__label-container" }, e("span", { class: "action-list-item__label" }, this.label), this.description && e("span", { class: "action-list-item__description" }, this.description)), i && e("span", { class: "action-list-item__badge", innerHTML: this.badge }), t && e("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (o) => this.suffixEl = o })));
+    const i = Boolean(this.badge), t = Boolean(this.suffix) && !this.disabled, e = l("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return o(r, null, o("button", { "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: e, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && o("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (s) => this.iconEl = s }), o("span", { class: "action-list-item__label-container" }, o("span", { class: "action-list-item__label" }, this.label), this.description && o("span", { class: "action-list-item__description" }, this.description)), i && o("span", { class: "action-list-item__badge", innerHTML: this.badge }), t && o("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (s) => this.suffixEl = s })));
   }
 };
-g.style = f;
-const v = ":host{display:flex;width:100%;align-items:center}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto}:host(.separator--orientation-vertical) .separator__line{display:block;width:var(--s-border-width-default);height:100%;min-height:1.125rem;background-color:var(--s-border-default)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}", b = class {
+v.style = g;
+const b = ":host{display:flex;width:100%;align-items:center}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto}:host(.separator--orientation-vertical) .separator__line{display:block;width:var(--s-border-width-default);height:100%;min-height:1.125rem;background-color:var(--s-border-default)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}", x = class {
   constructor(i) {
     a(this, i), this.orientation = "horizontal", this.spacing = "8";
   }
@@ -72,12 +89,12 @@ const v = ":host{display:flex;width:100%;align-items:center}:host *{box-sizing:b
       paddingRight: `var(--s-space-${this.spacing})`,
       paddingLeft: `var(--s-space-${this.spacing})`
     }, t = l("separator", `separator--orientation-${this.orientation}`);
-    return e(n, { "aria-orientation": this.orientation, class: t, role: "separator", style: i }, e("span", { class: "separator__line" }));
+    return o(r, { "aria-orientation": this.orientation, class: t, role: "separator", style: i }, o("span", { class: "separator__line" }));
   }
 };
-b.style = v;
+x.style = b;
 export {
-  u as swirl_action_list,
-  g as swirl_action_list_item,
-  b as swirl_separator
+  f as swirl_action_list,
+  v as swirl_action_list_item,
+  x as swirl_separator
 };

package/dist/{swirl-app-bar.entry.50f314cb.js → swirl-app-bar.entry.4725ef1e.js}

@@ -1,4 +1,4 @@
-import { r as n, c as i, h as t, H as a, g as r } from "./index.782451ad.js";
+import { r as n, c as i, h as t, H as a, g as r } from "./index.eff6ceb3.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-icon.entry.ffc59ffc.js → swirl-app-icon.entry.3c14e827.js}

@@ -1,4 +1,4 @@
-import { r as n, h as s, H as o } from "./index.782451ad.js";
+import { r as n, h as s, H as o } from "./index.eff6ceb3.js";
 import { c as t } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-layout_6.entry.caf8198c.js → swirl-app-layout_6.entry.7735090e.js}

@@ -1,8 +1,8 @@
-import { r as n, c as s, h as i, H as l, g as c, F as r } from "./index.782451ad.js";
+import { r as n, c as s, h as e, H as l, g as c, F as r } from "./index.eff6ceb3.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
-import { i as m, g as _ } from "./utils-9f141e25.a4ae3adc.js";
-import { S as f } from "./sortable.esm-8c3d5856.57c4f048.js";
-import { v as x } from "./v4-fa4bb814.196482d9.js";
+import { i as m, g as f } from "./utils-9f141e25.a4ae3adc.js";
+import { S as x } from "./sortable.esm-8c3d5856.57c4f048.js";
+import { v as h } from "./v4-fa4bb814.196482d9.js";
 import "react";
 import "react-dom";
 const k = `: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"
@@ -26,10 +26,10 @@ const k = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
   constructor(t) {
     n(this, t), this.ctaClick = s(this, "ctaClick", 7), this.mobileViewChange = s(this, "mobileViewChange", 7), this.navigationBackButtonClick = s(this, "navigationBackButtonClick", 7), this.sidebarToggle = s(this, "sidebarToggle", 7), this.onBackToNavigationViewButtonClick = () => {
       this.changeMobileView("navigation");
-    }, this.onCtaClick = (e) => {
-      this.ctaClick.emit(e);
-    }, this.onNavigationBackButtonClick = (e) => {
-      this.navigationBackButtonClick.emit(e);
+    }, this.onCtaClick = (i) => {
+      this.ctaClick.emit(i);
+    }, this.onNavigationBackButtonClick = (i) => {
+      this.navigationBackButtonClick.emit(i);
     }, 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;
@@ -63,10 +63,10 @@ const k = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
   async toggleSidebar() {
     !this.hasSidebar || (this.sidebarActive ? this.hideSidebar() : this.showSidebar());
   }
-  async changeMobileView(t, e = !0) {
+  async changeMobileView(t, i = !0) {
     if (this.mobileView === t || t === "navigation" && !this.hasNavigation || t === "sidebar" && !this.hasSidebar)
       return;
-    if (!m() || !e) {
+    if (!m() || !i) {
       this.mobileView = t, this.mobileViewChange.emit(this.mobileView);
       return;
     }
@@ -94,9 +94,9 @@ const k = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
     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"]')), o = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')), p = 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}`, {
+    const t = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation && !this.hasCustomAppBarBackButton, i = Boolean(this.el.querySelector('[slot="app-bar-controls"]')), a = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')), o = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')), p = 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-app-bar-controls": i,
       "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
       "app-layout--has-custom-sidebar-header": o,
       "app-layout--has-navigation": this.hasNavigation,
@@ -105,7 +105,7 @@ const k = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
       "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: p, 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__custom-sidebar-header" }, i("slot", { name: "custom-sidebar-header" })), 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" })))));
+    return e(l, null, e("section", { "aria-labelledby": "app-name", class: p, role: "document", tabIndex: 0 }, e("div", { class: "app-layout__grid" }, e("header", { class: "app-layout__header" }, e("span", { class: "app-layout__navigation-mobile-menu-button" }, e("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && e("span", { class: "app-layout__navigation-back-button" }, e("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), e("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && e("span", { class: "app-layout__navigation-controls" }, e("slot", { name: "navigation-controls" }))), e("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, e("slot", { name: "navigation" })), e("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && e("header", { class: "app-layout__app-bar" }, e("span", { class: "app-layout__app-bar-mobile-menu-button" }, e("slot", { name: "app-bar-mobile-menu-button" })), t && e("span", { class: "app-layout__back-to-navigation-button" }, e("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 })), e("span", { class: "app-layout__custom-app-bar-back-button" }, e("slot", { name: "custom-app-bar-back-button" })), e("div", { class: "app-layout__app-bar-content" }, e("slot", { name: "app-bar" })), e("div", { class: "app-layout__app-bar-controls" }, e("slot", { name: "app-bar-controls" }))), e("div", { class: "app-layout__banner" }, e("slot", { name: "banner" })), e("div", { class: "app-layout__content" }, e("slot", { name: "content" }))), e("aside", { class: "app-layout__sidebar" }, e("header", { class: "app-layout__custom-sidebar-header" }, e("slot", { name: "custom-sidebar-header" })), e("header", { class: "app-layout__sidebar-header" }, e("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), e("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), e("div", { class: "app-layout__sidebar-content" }, e("slot", { name: "sidebar" }))), this.ctaLabel && e("span", { class: "app-layout__floating-cta" }, e("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
   }
   get el() {
     return c(this);
@@ -122,7 +122,7 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.empty-state{displa
     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))))));
+    return e(l, null, e("div", { class: "empty-state" }, this.illustration && e("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), e("div", { class: "empty-state__body" }, this.heading && e("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading }), e("div", { class: "empty-state__content" }, e("swirl-text", { align: "center", color: "subdued" }, e("slot", null))))));
   }
 };
 B.style = I;
@@ -131,59 +131,66 @@ const S = ":host{display:inline-flex}", D = class {
     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" })));
+    const t = this.size === 20 ? 24 : this.size, i = d("swirl-icon", `swirl-icon--size-${this.size}`);
+    return e("svg", { class: i, 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 && e(r, null, e("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) && e(r, null, e("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 && e(r, null, e("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" })));
   }
 };
 D.style = S;
-const M = ":host{display:inline-flex}", L = class {
+const M = ":host{display:inline-flex}", A = 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" })));
+    const t = this.size === 20 ? 24 : this.size, i = d("swirl-icon", `swirl-icon--size-${this.size}`);
+    return e("svg", { class: i, 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 && e(r, null, e("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) && e(r, null, e("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 && e(r, null, e("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 = M;
-const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", z = class {
+A.style = M;
+const L = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", T = class {
   constructor(t) {
-    n(this, t), this.itemDrop = s(this, "itemDrop", 7), this.focusedIndex = 0, this.toggleDrag = (e) => {
-      const a = e.detail;
+    n(this, t), this.itemDrop = s(this, "itemDrop", 7), this.focusedIndex = 0, this.toggleDrag = (i) => {
+      const a = i.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");
+    }, this.startDrag = (i) => {
+      this.dragging = i, this.draggingStartIndex = this.getItemIndex(this.dragging), i.setAttribute("dragging", "true");
       const a = this.getItemIndex(this.dragging);
       this.focusItemAtIndex(a), this.assistiveText = this.assistiveTextItemGrabbed;
-    }, this.stopDrag = (e) => {
+    }, this.stopDrag = (i) => {
       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.dragging = void 0, i.removeAttribute("dragging"), this.assistiveText = `${this.assistiveTextItemMoved} ${a + 1}`, this.itemDrop.emit({ item: i, oldIndex: this.draggingStartIndex, newIndex: a }), this.draggingStartIndex = void 0;
+    }, this.onKeyDown = (i) => {
+      if (i.code === "ArrowDown")
+        i.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemDown() : this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      else if (i.code === "ArrowUp")
+        if (i.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 if (i.code === "Space" || i.code === "Enter") {
+        const a = i.composedPath()[0];
+        if (Boolean(this.dragging) && !(a != null && a.classList.contains("resource-list-item__drag-handle")))
+          i.preventDefault(), this.stopDrag(this.dragging);
+        else if (Boolean(this.controllingElement)) {
+          const o = this.items[this.focusedIndex];
+          if (!Boolean(o) || !o.isConnected)
+            return;
+          i.stopPropagation(), i.preventDefault(), o.click();
+        }
       } 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;
+        i.code === "Home" ? (i.preventDefault(), this.focusItemAtIndex(0)) : i.code === "End" && (i.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.controllingElement = void 0, this.label = void 0, this.assistiveText = void 0, this.listId = h();
   }
   componentDidLoad() {
-    this.observeSlotChanges(), this.collectItems(), this.setItemAllowDragState(), this.setupDragDrop();
+    this.observeSlotChanges(), this.collectItems(), this.setupControllingElement(), this.setItemAllowDragState(), this.setupDragDrop();
   }
   componentDidRender() {
     this.setupDragDrop();
   }
   disconnectedCallback() {
-    var t, e;
-    (t = this.sortable) == null || t.destroy(), (e = this.observer) == null || e.disconnect();
+    var t, i, a;
+    (t = this.sortable) == null || t.destroy(), (i = this.observer) == null || i.disconnect(), (a = this.controllingElement) == null || a.removeEventListener("keydown", this.onKeyDown);
   }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
@@ -198,15 +205,19 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     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]);
+    var t;
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((i) => i.isConnected), this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[this.focusedIndex]), Boolean(this.controllingElement) && ((t = this.items[0]) == null || t.setAttribute("aria-selected", "true"));
+  }
+  setupControllingElement() {
+    !Boolean(this.controllingElement) || (this.controllingElement.setAttribute("aria-controls", this.listId), this.controllingElement.setAttribute("role", "combobox"), this.controllingElement.setAttribute("aria-autocomplete", "list"), this.controllingElement.addEventListener("keydown", this.onKeyDown));
   }
   getItemIndex(t) {
-    return this.items.map((e) => e).findIndex((e) => e === t);
+    return this.items.map((i) => i).findIndex((i) => i === 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");
+      const i = 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");
+      Boolean(this.controllingElement) && t.setAttribute("aria-selected", "false"), i == null || i.setAttribute("tabIndex", "-1"), a == null || a.setAttribute("tabIndex", "-1");
     });
   }
   setItemAllowDragState() {
@@ -217,7 +228,7 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     });
   }
   setupDragDrop() {
-    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = f.create(this.gridEl, {
+    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = x.create(this.gridEl, {
       animation: 150,
       draggable: "swirl-resource-list-item",
       handle: ".resource-list-item__drag-handle",
@@ -230,16 +241,16 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
       }
     }));
   }
-  enableItemFocus(t, e) {
-    if (!Boolean(t))
+  enableItemFocus(t, i) {
+    if (!Boolean(t) || Boolean(this.controllingElement))
       return;
     const a = t.querySelector(".resource-list-item__content, .resource-list-file-item"), o = t.querySelector(".resource-list-item__drag-handle");
-    Boolean(o) && o.setAttribute("tabIndex", "0"), Boolean(a) && (a.setAttribute("tabIndex", "0"), e && a.focus());
+    Boolean(o) && o.setAttribute("tabIndex", "0"), Boolean(a) && (a.setAttribute("tabIndex", "0"), i && !Boolean(this.controllingElement) && a.focus());
   }
   focusItemAtIndex(t) {
     this.removeItemsFromTabOrder();
-    const e = this.items[t];
-    !Boolean(e) || !e.isConnected || (this.enableItemFocus(e, !0), this.focusedIndex = t);
+    const i = this.items[t];
+    !Boolean(i) || !i.isConnected || (this.enableItemFocus(i, !Boolean(this.controllingElement)), Boolean(this.controllingElement) && (i.setAttribute("aria-selected", "true"), i.scrollIntoView({ block: "nearest" })), this.focusedIndex = t);
   }
   moveDraggedItemDown() {
     const t = this.dragging.nextElementSibling;
@@ -250,7 +261,7 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     !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)));
+    return e(l, { onKeyDown: this.onKeyDown }, e("swirl-visually-hidden", { role: "alert" }, this.assistiveText), e("swirl-stack", { "aria-label": this.label, class: "resource-list", id: this.listId, ref: (t) => this.gridEl = t, role: "grid" }, e("slot", null)));
   }
   get el() {
     return c(this);
@@ -261,24 +272,24 @@ const T = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource
     };
   }
 };
-z.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(
+T.style = L;
+const z = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item.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__content.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);position:relative;display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-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)}.resource-list-item__content.sc-swirl-resource-list-item:after{position:absolute;right:0;bottom:0;left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}@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.sc-swirl-resource-list-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.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;gap:var(--s-space-2)}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex}.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(t) {
-    n(this, t), this.toggleDrag = s(this, "toggleDrag", 7), this.valueChange = s(this, "valueChange", 7), this.desktopMediaQuery = _(), this.id = x(), this.desktopMediaQueryHandler = (e) => {
-      this.forceIconProps(e.matches), this.updateIconSize(e.matches);
+    n(this, t), this.toggleDrag = s(this, "toggleDrag", 7), this.valueChange = s(this, "valueChange", 7), this.desktopMediaQuery = f(), this.id = h(), this.desktopMediaQueryHandler = (i) => {
+      this.forceIconProps(i.matches), this.updateIconSize(i.matches);
     }, this.onClick = () => {
       !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
     }, this.onBlur = () => {
       this.makeControlUnfocusable();
     }, this.onFocus = () => {
       this.makeControlFocusable();
-    }, 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.onMenuTriggerClick = (i) => {
+      this.disabled && !Boolean(this.href) && i.stopPropagation();
+    }, this.onDragHandleKeyDown = (i) => {
+      (i.code === "Space" || i.code === "Enter") && (i.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() {
@@ -288,20 +299,20 @@ const A = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:
     this.forceIconProps(this.desktopMediaQuery.matches), this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler, this.makeControlUnfocusable(), 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);
+    var t, i;
+    (i = (t = this.desktopMediaQuery).removeEventListener) == null || i.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");
+    const i = (a = this.iconEl) == null ? void 0 : a.children[0];
+    i == null || i.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);
+    const t = this.el.querySelector('[slot="media"]'), i = Boolean(t);
+    i !== this.hasMedia && (this.hasMedia = i);
   }
   getControl() {
     return this.el.querySelector('[slot="control"] button');
@@ -315,7 +326,7 @@ const A = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:
     !Boolean(t) || (t.tabIndex = -1);
   }
   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']")), o = this.el.querySelector("[slot='control']"), p = Boolean(this.menuTriggerId) || o, h = this.interactive && Boolean(this.href) ? this.href : void 0, b = o && (Boolean(this.meta) || a), g = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable, u = (Boolean(this.meta) || a) && !this.selectable, y = this.selectable ? String(this.checked) : void 0, v = this.interactive && this.selectable ? "checkbox" : void 0, w = d("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
+    const t = !this.interactive && !this.selectable ? "div" : Boolean(this.href) && !this.selectable ? "a" : "button", i = this.disabled && !Boolean(this.href), a = Boolean(this.el.querySelector("[slot='badges']")), o = this.el.querySelector("[slot='control']"), p = Boolean(this.menuTriggerId) || o, b = this.interactive && Boolean(this.href) ? this.href : void 0, g = o && (Boolean(this.meta) || a), y = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable, u = (Boolean(this.meta) || a) && !this.selectable, v = this.selectable ? String(this.checked) : void 0, w = this.interactive && this.selectable ? "checkbox" : void 0, _ = 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,
@@ -325,21 +336,21 @@ const A = `.sc-swirl-resource-list-item-h{position:relative;display:block;width:
       "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": b,
+      "resource-list-item--show-control-on-focus": g,
       "resource-list-item--show-meta": u
     });
-    return i(l, { role: "row" }, i("div", { class: w, role: "gridcell" }, i(t, { "aria-checked": y, "aria-disabled": e ? "true" : void 0, "aria-labelledby": this.id, class: "resource-list-item__content", href: h, disabled: e, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: v, 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", innerHTML: this.description })), u && 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" })), g && 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 })));
+    return e(l, { role: "row" }, e("div", { class: _, role: "gridcell" }, e(t, { "aria-checked": v, "aria-disabled": i ? "true" : void 0, "aria-labelledby": this.id, class: "resource-list-item__content", href: b, disabled: i, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: w, tabIndex: 0, type: t === "button" ? "button" : void 0 }, this.hasMedia && e("span", { class: "resource-list-item__media" }, e("slot", { name: "media" })), e("span", { class: "resource-list-item__label-container" }, e("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && e("span", { class: "resource-list-item__description", innerHTML: this.description })), u && e("span", { class: "resource-list-item__meta" }, e("span", { class: "resource-list-item__meta-text" }, this.meta), e("span", { class: "resource-list-item__badges" }, e("slot", { name: "badges" })))), this.selectable && e("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, e("span", { class: "resource-list-item__checkbox-icon" }, this.checked && e("swirl-icon-check-strong", null))), e("span", { class: "resource-list-item__control" }, e("slot", { name: "control" })), y && e("swirl-popover-trigger", { popover: this.menuTriggerId }, e("swirl-button", { "aria-disabled": i ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: i, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick }))), this.allowDrag && e("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, e("swirl-icon-drag-handle", { size: this.iconSize })));
   }
   get el() {
     return c(this);
   }
 };
-V.style = A;
+V.style = z;
 export {
   C as swirl_app_layout,
   B as swirl_empty_state,
   D as swirl_icon_file,
-  L as swirl_icon_folder_shared,
-  z as swirl_resource_list,
+  A as swirl_icon_folder_shared,
+  T as swirl_resource_list,
   V as swirl_resource_list_item
 };

package/dist/{swirl-autocomplete.entry.788b84b5.js → swirl-autocomplete.entry.81800270.js}

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

package/dist/{swirl-avatar-group.entry.8bea3e75.js → swirl-avatar-group.entry.4796d043.js}

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

package/dist/{swirl-avatar.entry.25c93a1f.js → swirl-avatar.entry.f9f67338.js}

@@ -1,4 +1,4 @@
-import { r as h, h as a, H as u, g as m } from "./index.782451ad.js";
+import { r as h, h as a, H as u, g as m } from "./index.eff6ceb3.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-badge.entry.e549cba6.js → swirl-badge.entry.5619ecd6.js}

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