@getflip/swirl-components-react 0.339.0 → 0.340.0

package/dist/{media-query.service-9a0ff1cb.1b0964d0.js → media-query.service-Cx_VEA2f.c4de15e1.js}

@@ -1,4 +1,4 @@
-import { g as t } from "./utils-28df99ee.9fb223f6.js";
+import { g as t } from "./utils-D_MUFqkF.654ff3ce.js";
 class i {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.onChange = (e) => {

package/dist/{sortable.esm-0bfddf0c.953ca6a6.js → sortable.esm-CMrz6687.dac971cd.js}

@@ -187,7 +187,7 @@ function C(o, t, e, n, i) {
 function ce(o, t, e) {
   for (var n = tt(o, !0), i = C(o)[t]; n; ) {
     var r = C(n)[e], a = void 0;
-    if (e === "top" || e === "left" ? a = i >= r : a = i <= r, !a)
+    if (a = i >= r, !a)
       return n;
     if (n === L())
       break;

package/dist/{swirl-accordion-item.entry.126665b5.js → swirl-accordion-item.entry.66d1c3d3.js}

@@ -1,13 +1,13 @@
-import { r as t, c as d, h as e, H as n, g as s } from "./index.65ee776f.js";
-import { c as r } from "./index-267776a4.6beb4f4b.js";
-import { v as o } from "./v4-23648a96.77c7c20f.js";
+import { r as t, c as d, h as e, H as n, g as s } from "./index.89ae7741.js";
+import { c as r } from "./index-orsBiyT_.fc4357c3.js";
+import { v as a } from "./v4-DD3477fe.2624487e.js";
 import "react";
 import "react-dom";
-const c = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}", l = c, h = class {
+const c = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}", l = class {
   constructor(i) {
-    t(this, i), this.expansionChange = d(this, "expansionChange", 7), this.headingId = `${o()}-heading`, this.onHeadingClick = () => {
+    t(this, i), this.expansionChange = d(this, "expansionChange", 7), this.headingLevel = 2, this.itemId = a(), this.expanded = !1, this.headingId = `${a()}-heading`, this.onHeadingClick = () => {
       this.toggle();
-    }, this.description = void 0, this.disabled = void 0, this.heading = void 0, this.headingLevel = 2, this.initiallyOpen = void 0, this.itemId = o(), this.expanded = !1;
+    };
   }
   componentWillLoad() {
     if (this.accordion = this.el.closest("swirl-accordion"), this.expanded = this.initiallyOpen && !this.disabled || !1, !Boolean(this.accordion))
@@ -23,16 +23,16 @@ const c = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{dis
     this.expanded ? this.collapse() : this.expand();
   }
   render() {
-    const i = `h${this.headingLevel}`, a = r("accordion-item", {
+    const i = `h${this.headingLevel}`, o = r("accordion-item", {
       "accordion-item--expanded": this.expanded
     });
-    return e(n, { key: "ff99365f885d7f45aa5929618f20be8eaab88699" }, e("div", { key: "eaa608a73691ff808b38466e9385f4dc2db45f17", class: a }, e(i, { key: "0859f44b1a644b65de4f05b0e8a003c549c6c87c", class: "accordion-item__heading" }, e("button", { key: "4b37ddb0a99d7c7891e49febec534bf651df185b", "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, e("span", { key: "44cdbe5d8144e96c6c03bfd08affc05b313f68ab", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "14a5142b0af187721cee995b0d80bc6c59a00cf9", as: "span", color: "subdued", size: "sm" }, this.description)), e("span", { key: "d6662c18f5e78cb4acaf079aab3d98d2472c0cbd", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "5115019890131bf59d8a1d7e0013b747565ad675", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "9433218077aa690f5e5256144c75c5cd46afbdb5", glyph: "expand-more", size: 20 })))), e("div", { key: "12cd261b506a0f80821f4f5e0be1ebc4735206a8", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "2896b72a4b1ffcd2dc1267a20dbca1121660d8f4" }))));
+    return e(n, { key: "ff99365f885d7f45aa5929618f20be8eaab88699" }, e("div", { key: "eaa608a73691ff808b38466e9385f4dc2db45f17", class: o }, e(i, { key: "0859f44b1a644b65de4f05b0e8a003c549c6c87c", class: "accordion-item__heading" }, e("button", { key: "4b37ddb0a99d7c7891e49febec534bf651df185b", "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, e("span", { key: "44cdbe5d8144e96c6c03bfd08affc05b313f68ab", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "14a5142b0af187721cee995b0d80bc6c59a00cf9", as: "span", color: "subdued", size: "sm" }, this.description)), e("span", { key: "d6662c18f5e78cb4acaf079aab3d98d2472c0cbd", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "5115019890131bf59d8a1d7e0013b747565ad675", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "9433218077aa690f5e5256144c75c5cd46afbdb5", glyph: "expand-more", size: 20 })))), e("div", { key: "12cd261b506a0f80821f4f5e0be1ebc4735206a8", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "2896b72a4b1ffcd2dc1267a20dbca1121660d8f4" }))));
   }
   get el() {
     return s(this);
   }
 };
-h.style = l;
+l.style = c;
 export {
-  h as swirl_accordion_item
+  l as swirl_accordion_item
 };

package/dist/{swirl-accordion.entry.5ba53a00.js → swirl-accordion.entry.ec25e669.js}

@@ -1,7 +1,7 @@
-import { r as s, c as i, h as o, H as a, g as l } from "./index.65ee776f.js";
+import { r as s, c as i, h as o, H as a, g as l } from "./index.89ae7741.js";
 import "react";
 import "react-dom";
-const c = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}", n = c, d = class {
+const c = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}", n = class {
   constructor(e) {
     s(this, e), this.expandedItemChange = i(this, "expandedItemChange", 7);
   }
@@ -30,7 +30,7 @@ const c = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-ch
     return l(this);
   }
 };
-d.style = n;
+n.style = c;
 export {
-  d as swirl_accordion
+  n as swirl_accordion
 };

package/dist/{swirl-action-list-section.entry.5fc77a1e.js → swirl-action-list-section.entry.f9d3ac41.js}

@@ -1,15 +1,15 @@
-import { r as i, h as a, H as e } from "./index.65ee776f.js";
+import { r as e, h as a, H as i } from "./index.89ae7741.js";
 import "react";
 import "react-dom";
-const t = ":host{display:block;width:100%}: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);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)}}", c = t, o = class {
+const t = ":host{display:block;width:100%}: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);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)}}", c = class {
   constructor(s) {
-    i(this, s), this.label = void 0, this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
+    e(this, s), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
   }
   render() {
-    return a(e, { key: "d2cbcea47ca9b21308813a6a2285b22f6aa4f9c1" }, this.hasSeparator && a("swirl-separator", { key: "ebe1cc99d7728c3cb0ccf9dcc9bc3afad0f40c1e", spacing: this.separatorSpacing }), a("div", { key: "d310828c525252b441681764007b7c2296e22fc7", "aria-labelledby": "label", class: "action-list-section", role: "group" }, a("span", { key: "137d9527749b6f47a23fc48d01582f52784878c6", class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), a("swirl-stack", { key: "136ad427fafed3bdad8234d16875ed138ecd668c", spacing: this.spacing, align: "stretch" }, a("slot", { key: "6ff03eb4db0eae90bedc79fe1f887b3416733125" }))));
+    return a(i, { key: "d2cbcea47ca9b21308813a6a2285b22f6aa4f9c1" }, this.hasSeparator && a("swirl-separator", { key: "ebe1cc99d7728c3cb0ccf9dcc9bc3afad0f40c1e", spacing: this.separatorSpacing }), a("div", { key: "d310828c525252b441681764007b7c2296e22fc7", "aria-labelledby": "label", class: "action-list-section", role: "group" }, a("span", { key: "137d9527749b6f47a23fc48d01582f52784878c6", class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), a("swirl-stack", { key: "136ad427fafed3bdad8234d16875ed138ecd668c", spacing: this.spacing, align: "stretch" }, a("slot", { key: "6ff03eb4db0eae90bedc79fe1f887b3416733125" }))));
   }
 };
-o.style = c;
+c.style = t;
 export {
-  o as swirl_action_list_section
+  c as swirl_action_list_section
 };

package/dist/{swirl-action-list_2.entry.2d292d54.js → swirl-action-list_2.entry.7611c4da.js}

@@ -1,26 +1,26 @@
-import { r as c, h as o, H as l, g as d } from "./index.65ee776f.js";
-import { q as h, k as f } from "./utils-28df99ee.9fb223f6.js";
-import { c as u } from "./index-267776a4.6beb4f4b.js";
-import { D as m } from "./media-query.service-9a0ff1cb.1b0964d0.js";
+import { r as c, h as o, H as l, g as d } from "./index.89ae7741.js";
+import { q as h, k as m } from "./utils-D_MUFqkF.654ff3ce.js";
+import { c as f } from "./index-orsBiyT_.fc4357c3.js";
+import { D as u } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";
 import "react-dom";
-const b = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", p = b, v = class {
-  constructor(t) {
-    c(this, t), this.onKeyDown = (e) => {
-      e.code === "ArrowDown" || e.code === "ArrowRight" ? (e.preventDefault(), this.focusNextItem()) : (e.code === "ArrowUp" || e.code === "ArrowLeft") && (e.preventDefault(), this.focusPreviousItem());
-    }, this.onFocusOut = (e) => {
+const b = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", p = class {
+  constructor(i) {
+    c(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 i = e.relatedTarget, s = e.target, a = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", n = i === null || !this.el.contains(i);
+      const e = t.relatedTarget, s = t.target, a = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", n = e === null || !this.el.contains(e);
       !this.isInsidePopover && n && a && this.container.setAttribute("tabindex", "0");
     }, this.onFocus = () => {
       var s, a;
       if (this.isInsidePopover)
         return;
       this.container.removeAttribute("tabindex");
-      const e = this.getItems(), i = this.getActiveItemIndex();
-      i > -1 ? (s = e[i]) == null || s.focus() : (a = e[0]) == null || a.focus();
-    }, this.isInsidePopover = void 0;
+      const t = this.getItems(), e = this.getActiveItemIndex();
+      e > -1 ? (s = t[e]) == null || s.focus() : (a = t[0]) == null || a.focus();
+    };
   }
   componentDidLoad() {
     queueMicrotask(() => {
@@ -31,64 +31,64 @@ const b = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-
     return h(this.el, '[role="menuitem"]');
   }
   focusNextItem() {
-    const t = this.getItems(), i = (this.getActiveItemIndex() + 1) % t.length;
-    t[i].focus();
+    const i = this.getItems(), e = (this.getActiveItemIndex() + 1) % i.length;
+    i[e].focus();
   }
   focusPreviousItem() {
     var s;
-    const t = this.getItems(), e = this.getActiveItemIndex(), i = e === 0 ? t.length - 1 : e - 1;
-    (s = t[i]) == null || s.focus();
+    const i = this.getItems(), t = this.getActiveItemIndex(), e = t === 0 ? i.length - 1 : t - 1;
+    (s = i[e]) == null || s.focus();
   }
   getActiveItemIndex() {
-    const t = this.getItems(), e = f();
-    return t.findIndex((i) => i === e || i === (e == null ? void 0 : e.querySelector('[role="menuitem"]')));
+    const i = this.getItems(), t = m();
+    return i.findIndex((e) => e === t || e === (t == null ? void 0 : t.querySelector('[role="menuitem"]')));
   }
   setSectionSeparator() {
     if (!this.el)
       return;
-    Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((e) => e.isConnected).forEach((e, i) => {
+    Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((t) => t.isConnected).forEach((t, e) => {
       var s;
-      i === 0 && ((s = e.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-ACTION-LIST-ITEM" && (e.hasSeparator = !1);
+      e === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-ACTION-LIST-ITEM" && (t.hasSeparator = !1);
     });
   }
   render() {
-    return o(l, { key: "2795dbab510dbc1500d60485aa861452db9e5228" }, o("div", { key: "a97272dcb51640f5b3577c0fae90cb76db6fc5ee", "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? void 0 : this.onFocusOut, onFocus: this.isInsidePopover ? void 0 : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (t) => this.container = t, role: "menu" }, o("slot", { key: "e93480d034cc5db6f0e6915b5b6e9af655ef65be", onSlotchange: this.setSectionSeparator })));
+    return o(l, { key: "2795dbab510dbc1500d60485aa861452db9e5228" }, o("div", { key: "a97272dcb51640f5b3577c0fae90cb76db6fc5ee", "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? void 0 : this.onFocusOut, onFocus: this.isInsidePopover ? void 0 : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (i) => this.container = i, role: "menu" }, o("slot", { key: "e93480d034cc5db6f0e6915b5b6e9af655ef65be", onSlotchange: this.setSectionSeparator })));
   }
   get el() {
     return d(this);
   }
 };
-v.style = p;
-const g = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;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;border-radius:var(--s-border-radius-sm);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);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.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;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.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-default)}", x = g, w = class {
-  constructor(t) {
-    c(this, t), this.mediaQueryUnsubscribe = () => {
-    }, this.badge = void 0, this.disabled = void 0, this.description = void 0, this.icon = void 0, this.iconBadge = void 0, this.intent = "default", this.label = void 0, this.size = "m", this.swirlAriaExpanded = void 0, this.swirlAriaHaspopup = void 0, this.suffix = void 0;
+p.style = b;
+const v = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;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;border-radius:var(--s-border-radius-sm);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);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.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;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.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-default)}", g = class {
+  constructor(i) {
+    c(this, i), this.intent = "default", this.size = "m", this.mediaQueryUnsubscribe = () => {
+    };
   }
   componentDidLoad() {
-    this.mediaQueryUnsubscribe = m.subscribe((t) => {
-      this.forceIconProps(t);
+    this.mediaQueryUnsubscribe = u.subscribe((i) => {
+      this.forceIconProps(i);
     });
   }
   disconnectedCallback() {
     this.mediaQueryUnsubscribe();
   }
-  forceIconProps(t) {
+  forceIconProps(i) {
     var a, n, r;
-    const e = (a = this.iconEl) == null ? void 0 : a.children[0], i = (n = this.suffixEl) == null ? void 0 : n.children[0];
-    e == null || e.setAttribute("size", t ? "20" : "24");
+    const t = (a = this.iconEl) == null ? void 0 : a.children[0], e = (n = this.suffixEl) == null ? void 0 : n.children[0];
+    t == null || t.setAttribute("size", i ? "20" : "24");
     const s = (r = this.iconBadgeEl) == null ? void 0 : r.children[0];
-    s == null || s.setAttribute("size", "xs"), s == null || s.setAttribute("variant", "dot"), (i == null ? void 0 : i.tagName) !== "SWIRL-TAG" && (i == null || i.setAttribute("size", t ? "20" : "24"));
+    s == null || s.setAttribute("size", "xs"), s == null || s.setAttribute("variant", "dot"), (e == null ? void 0 : e.tagName) !== "SWIRL-TAG" && (e == null || e.setAttribute("size", i ? "20" : "24"));
   }
   render() {
-    const t = Boolean(this.badge), e = Boolean(this.iconBadge), i = Boolean(this.el.querySelector('[slot="suffix"]')), s = (Boolean(this.suffix) || i) && !this.disabled, a = u("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-    return o(l, { key: "6e0ba3475bbabc4b456d23070aada4ad73a7bef7" }, o("button", { key: "568753980452f56f6305573cfacc1540728f8a64", "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: a, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, o("slot", { key: "90c23d6a829bdb2903ff76eda7852101b174b198", name: "avatar" }), this.icon && o("span", { key: "1855b294b64760c5399cfb9b371715399ed2e985", class: "action-list-item__icon", innerHTML: this.icon, ref: (n) => this.iconEl = n }, e && o("span", { key: "1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106", class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (n) => this.iconBadgeEl = n })), o("span", { key: "a55df1b640cb5c5109dc632c39dca728fce290da", class: "action-list-item__label-container" }, o("span", { key: "ae479a05bbfd854b8472d3977d7489df73e611cb", class: "action-list-item__label" }, this.label), this.description && o("span", { key: "959761897cc5c8d4d2474795460b66bb5d22475b", class: "action-list-item__description" }, this.description)), t && o("span", { key: "cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe", class: "action-list-item__badge", innerHTML: this.badge }), s && o("span", { key: "88754ec73e17680ebdc939f42df996dace73fdce", class: "action-list-item__suffix", innerHTML: i ? void 0 : this.suffix, ref: (n) => this.suffixEl = n }, o("slot", { key: "37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac", name: "suffix" }))));
+    const i = Boolean(this.badge), t = Boolean(this.iconBadge), e = Boolean(this.el.querySelector('[slot="suffix"]')), s = (Boolean(this.suffix) || e) && !this.disabled, a = f("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return o(l, { key: "6e0ba3475bbabc4b456d23070aada4ad73a7bef7" }, o("button", { key: "568753980452f56f6305573cfacc1540728f8a64", "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: a, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, o("slot", { key: "90c23d6a829bdb2903ff76eda7852101b174b198", name: "avatar" }), this.icon && o("span", { key: "1855b294b64760c5399cfb9b371715399ed2e985", class: "action-list-item__icon", innerHTML: this.icon, ref: (n) => this.iconEl = n }, t && o("span", { key: "1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106", class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (n) => this.iconBadgeEl = n })), o("span", { key: "a55df1b640cb5c5109dc632c39dca728fce290da", class: "action-list-item__label-container" }, o("span", { key: "ae479a05bbfd854b8472d3977d7489df73e611cb", class: "action-list-item__label" }, this.label), this.description && o("span", { key: "959761897cc5c8d4d2474795460b66bb5d22475b", class: "action-list-item__description" }, this.description)), i && o("span", { key: "cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe", class: "action-list-item__badge", innerHTML: this.badge }), s && o("span", { key: "88754ec73e17680ebdc939f42df996dace73fdce", class: "action-list-item__suffix", innerHTML: e ? void 0 : this.suffix, ref: (n) => this.suffixEl = n }, o("slot", { key: "37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac", name: "suffix" }))));
   }
   get el() {
     return d(this);
   }
 };
-w.style = x;
+g.style = v;
 export {
-  v as swirl_action_list,
-  w as swirl_action_list_item
+  p as swirl_action_list,
+  g as swirl_action_list_item
 };

package/dist/{swirl-app-bar.entry.15c530d8.js → swirl-app-bar.entry.4b983b31.js}

@@ -1,10 +1,10 @@
-import { r as n, c as s, h as t, H as c, g as r } from "./index.65ee776f.js";
-import { c as l } from "./index-267776a4.6beb4f4b.js";
+import { r as n, c as s, h as t, H as c, g as r } from "./index.89ae7741.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
-const p = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', d = p, h = class {
+const p = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', d = class {
   constructor(a) {
-    n(this, a), this.backButtonClick = s(this, "backButtonClick", 7), this.closeButtonClick = s(this, "closeButtonClick", 7), this.stepUpButtonClick = s(this, "stepUpButtonClick", 7), this.stepDownButtonClick = s(this, "stepDownButtonClick", 7), this.onBackButtonClick = (e) => {
+    n(this, a), this.backButtonClick = s(this, "backButtonClick", 7), this.closeButtonClick = s(this, "closeButtonClick", 7), this.stepUpButtonClick = s(this, "stepUpButtonClick", 7), this.stepDownButtonClick = s(this, "stepDownButtonClick", 7), this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.paddingInlineEnd = "16", this.paddingInlineStart = "16", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.onBackButtonClick = (e) => {
       this.backButtonClick.emit(e);
     }, this.onCloseButtonClick = (e) => {
       this.closeButtonClick.emit(e);
@@ -12,7 +12,7 @@ const p = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:bor
       this.stepUpButtonClick.emit(e);
     }, this.onStepDownButtonClick = (e) => {
       this.stepDownButtonClick.emit(e);
-    }, this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.paddingInlineEnd = "16", this.paddingInlineStart = "16", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.showBackButton = void 0, this.showCloseButton = void 0, this.showStepperControls = void 0, this.hasCta = void 0;
+    };
   }
   componentWillLoad() {
     this.mutationObserver = new MutationObserver(() => {
@@ -42,7 +42,7 @@ const p = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:bor
     return r(this);
   }
 };
-h.style = d;
+d.style = p;
 export {
-  h as swirl_app_bar
+  d as swirl_app_bar
 };

package/dist/{swirl-app-icon.entry.162a2466.js → swirl-app-icon.entry.4d316713.js}

@@ -1,8 +1,8 @@
-import { r as n, h as s, H as o } from "./index.65ee776f.js";
-import { c as l } from "./index-267776a4.6beb4f4b.js";
+import { r as n, h as s, H as o } from "./index.89ae7741.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
-const r = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}", c = r, h = class {
+const r = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}", c = class {
   constructor(e) {
     n(this, e), this.setImageAvailable = () => {
       this.imageAvailable = !0;
@@ -11,7 +11,7 @@ const r = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{pos
     }, this.onImageElementUpdate = (i) => {
       var t, a;
       (t = this.imgEl) == null || t.removeEventListener("load", this.setImageAvailable), (a = this.imgEl) == null || a.removeEventListener("error", this.setImageUnavailable), this.imgEl = i, this.imgEl && (this.imgEl.addEventListener("load", this.setImageAvailable), this.imgEl.addEventListener("error", this.setImageUnavailable));
-    }, this.icon = void 0, this.src = void 0, this.imageAvailable = void 0;
+    };
   }
   disconnectedCallback() {
     var e, i;
@@ -24,7 +24,7 @@ const r = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{pos
     return s(o, { key: "848453ae9e48cab379fc70a9e1bb0d9566fee795" }, s("span", { key: "d2a526c13e4a86ec2edbcc5bb763052792627b55", class: a }, e && s("img", { key: "f321b68b25a3ab039f666099269383908a62d08c", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "2dc6f4d5afd471b8dfb39f414dc1416036480005", class: "app-icon__icon", innerHTML: this.icon })));
   }
 };
-h.style = c;
+c.style = r;
 export {
-  h as swirl_app_icon
+  c as swirl_app_icon
 };