@getflip/swirl-components-react 0.353.1 → 0.355.0

package/dist/{swirl-table.entry.cd989171.js → swirl-table.entry.f9aedaa3.js}

@@ -1,35 +1,35 @@
-import { r as x, c as _, h as a, H as R, g as k } from "./index.93ca0535.js";
-import { c as L, g as O } from "./index-orsBiyT_.fc4357c3.js";
-import { S as T } from "./sortable.esm-CMrz6687.dac971cd.js";
-import { d as A, i as f, q } from "./utils-D_MUFqkF.654ff3ce.js";
+import { r as x, c as R, h as a, H as _, g as k } from "./index.dece22df.js";
+import { c as O, g as L } from "./index-orsBiyT_.fc4357c3.js";
+import { S as A } from "./sortable.esm-CMrz6687.dac971cd.js";
+import { d as M, i as f, q as T } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";
 var g, v;
-function I() {
+function E() {
   if (v)
     return g;
-  v = 1, g = function(i) {
-    var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, n = void 0, l = void 0, u = void 0, d = [];
+  v = 1, g = function(o) {
+    var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, n = void 0, l = void 0, u = void 0, d = [];
     return function() {
-      var y = e(o), m = new Date().getTime(), D = !n || m - n > y;
+      var y = e(i), m = new Date().getTime(), D = !n || m - n > y;
       n = m;
       for (var w = arguments.length, c = Array(w), h = 0; h < w; h++)
         c[h] = arguments[h];
       if (D && s.leading)
-        return s.accumulate ? Promise.resolve(i.call(this, [c])).then(function(b) {
-          return b[0];
-        }) : Promise.resolve(i.call.apply(i, [this].concat(c)));
+        return s.accumulate ? Promise.resolve(o.call(this, [c])).then(function(p) {
+          return p[0];
+        }) : Promise.resolve(o.call.apply(o, [this].concat(c)));
       if (l ? clearTimeout(u) : l = t(), d.push(c), u = setTimeout(C.bind(this), y), s.accumulate) {
         var S = d.length - 1;
-        return l.promise.then(function(b) {
-          return b[S];
+        return l.promise.then(function(p) {
+          return p[S];
         });
       }
       return l.promise;
     };
     function C() {
-      var p = l;
-      clearTimeout(u), Promise.resolve(s.accumulate ? i.call(this, d) : i.apply(this, d[d.length - 1])).then(p.resolve, p.reject), d = [], l = null;
+      var b = l;
+      clearTimeout(u), Promise.resolve(s.accumulate ? o.call(this, d) : o.apply(this, d[d.length - 1])).then(b.resolve, b.reject), d = [], l = null;
     }
   };
   function e(r) {
@@ -37,58 +37,56 @@ function I() {
   }
   function t() {
     var r = {};
-    return r.promise = new Promise(function(i, o) {
-      r.resolve = i, r.reject = o;
+    return r.promise = new Promise(function(o, i) {
+      r.resolve = o, r.reject = i;
     }), r;
   }
   return g;
 }
-var E = I(), K = /* @__PURE__ */ O(E);
-const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid
+var q = E(), I = /* @__PURE__ */ L(q);
+const K = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid
       var(--s-border-highlight)}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),
     2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),
-    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:flex}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}`, M = {
+    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:flex}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}`, B = {
   end: "Dropped. Final position in table: {position} of {rowCount}.",
   initial: "Press space to move the row.",
   moved: "Current position in table: {position} of {rowCount}.",
   start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."
-}, H = class {
+}, W = class {
   constructor(e) {
-    x(this, e), this.dropRow = _(this, "dropRow", 7), this.dragDropInstructions = M, this.emptyStateLabel = "No results found.", this.liveRegionText = "", this.triggerRerender = A(async () => {
+    x(this, e), this.dropRow = R(this, "dropRow", 7), this.dragDropInstructions = B, this.emptyStateLabel = "No results found.", this.liveRegionText = "", this.triggerRerender = M(async () => {
       await this.updateLayout(), this.updateEmptyState();
-    }, 0, !0), this.updateLayout = K(async () => {
+    }, 0, !0), this.updateLayout = I(async () => {
       this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCellsAndColumns(), this.updateScrolledState();
     }, 16, { leading: !0 }), this.onScroll = () => {
       this.updateScrolledState();
-    }, this.onSlotChange = async () => {
-      await this.updateLayout(), this.updateEmptyState(), this.setupDragDrop();
     }, this.onFocus = (t) => {
-      var i;
+      var o;
       if (this.movingViaKeyboard) {
-        const o = this.el.querySelector(".table-row--moving");
-        o && this.focusDragHandleOfRow(o);
+        const i = this.el.querySelector(".table-row--moving");
+        i && this.focusDragHandleOfRow(i);
       }
-      const r = !!((i = t.target) != null && i.closest(this.dragDropHandle));
+      const r = !!((o = t.target) != null && o.closest(this.dragDropHandle));
       this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
     }, this.onBlur = (t) => {
-      const r = t.relatedTarget, i = !!(r != null && r.closest(this.dragDropHandle));
-      this.el.contains(r) && i || this.liveRegionText !== "" && this.updateLiveRegionText();
+      const r = t.relatedTarget, o = !!(r != null && r.closest(this.dragDropHandle));
+      this.el.contains(r) && o || this.liveRegionText !== "" && this.updateLiveRegionText();
     }, this.onKeyDown = (t) => {
-      var o, s;
+      var i, s;
       if (!this.enableDragDrop)
         return;
-      const r = (o = t.target) == null ? void 0 : o.closest("swirl-table-row");
+      const r = (i = t.target) == null ? void 0 : i.closest("swirl-table-row");
       !((s = t.target) != null && s.closest(this.dragDropHandle)) || (t.code === "Space" ? (t.preventDefault(), t.stopPropagation(), this.toggleKeyboardMove(r)) : t.code === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "up")) : t.code === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "down")) : t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.cancelKeyboardMove()));
     };
   }
   async componentDidLoad() {
-    this.setupIntersectionObserver(), queueMicrotask(() => {
+    this.setupIntersectionObserver(), this.setupMutationObservers(), queueMicrotask(() => {
       this.setupDragDrop();
     });
   }
   disconnectedCallback() {
-    var e, t;
-    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.sortable) == null || t.destroy();
+    var e, t, r, o;
+    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.columnMutationObserver) == null || t.disconnect(), (r = this.rowMutationObserver) == null || r.disconnect(), (o = this.sortable) == null || o.destroy();
   }
   handleEnableDragDropChange() {
     queueMicrotask(() => {
@@ -100,6 +98,18 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
       threshold: 0
     }), this.intersectionObserver.observe(this.container);
   }
+  setupMutationObservers() {
+    this.columnMutationObserver = new MutationObserver((e) => {
+      e.some((r) => r.addedNodes.length || r.removedNodes.length) && this.updateLayout();
+    }), this.columnMutationObserver.observe(this.headerEl, {
+      childList: !0,
+      subtree: !0
+    }), this.rowMutationObserver = new MutationObserver((e) => {
+      e.some((r) => r.addedNodes.length || r.removedNodes.length) && (this.updateEmptyState(), this.setupDragDrop());
+    }), this.rowMutationObserver.observe(this.bodyEl, {
+      childList: !0
+    });
+  }
   setupDragDrop() {
     if (this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop) {
       if (!!this.el.querySelector("swirl-table-row-group")) {
@@ -111,7 +121,7 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
         return;
       }
       const t = this.el.querySelector('[slot="rows"]');
-      this.dragDropContainer = (t == null ? void 0 : t.tagName) !== "SWIRL-TABLE-ROW" ? t != null ? t : this.bodyEl : this.bodyEl, this.sortable = new T(this.dragDropContainer, {
+      this.dragDropContainer = (t == null ? void 0 : t.tagName) !== "SWIRL-TABLE-ROW" ? t != null ? t : this.bodyEl : this.bodyEl, this.sortable = new A(this.dragDropContainer, {
         animation: 100,
         direction: "vertical",
         handle: this.dragDropHandle,
@@ -120,14 +130,14 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
         onEnd: (r) => {
           var l;
           r.stopPropagation();
-          const { to: i, newIndex: o, oldIndex: s, item: n } = r;
+          const { to: o, newIndex: i, oldIndex: s, item: n } = r;
           this.dropRow.emit({
-            newIndex: o,
+            newIndex: i,
             oldIndex: s,
             item: n,
             itemId: (l = n.id) != null ? l : n.querySelector(":scope > swirl-table-row").id,
-            newNextSiblingItemId: o < i.children.length - 1 ? i.children[o + 1].id : void 0,
-            newPrevSiblingItemId: o > 0 ? i.children[o - 1].id : void 0
+            newNextSiblingItemId: i < o.children.length - 1 ? o.children[i + 1].id : void 0,
+            newPrevSiblingItemId: i > 0 ? o.children[i - 1].id : void 0
           });
         }
       });
@@ -171,8 +181,8 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
     const e = f();
     if (this.container === void 0)
       return;
-    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, i = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
-    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), r !== this.scrolled && (r && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), i !== this.scrolledToEnd && (i && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
+    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, o = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
+    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), r !== this.scrolled && (r && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), o !== this.scrolledToEnd && (o && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
   }
   getColumns() {
     return Array.from(this.el.querySelectorAll("swirl-table-column"));
@@ -190,44 +200,44 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
   layoutRowGroups() {
     var r;
     const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(r = this.el.querySelector(".table__container")) == null ? void 0 : r.scrollWidth}px`;
-    e.forEach((i) => {
-      const o = i.shadowRoot.querySelector(".table-row-group__header-row");
-      !Boolean(o) || (i.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
+    e.forEach((o) => {
+      const i = o.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(i) || (o.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
     });
   }
   layOutCellsAndColumns() {
     const e = this.getColumns(), t = this.getCells();
-    e.forEach((r, i) => {
-      const o = this.getCellsForColumn(t, e, i), s = this.calculateColumnProperties(r, e, i);
-      o.forEach((n) => this.applyCellStyles(n, r, s)), this.applyColumnStyles(r, s);
+    e.forEach((r, o) => {
+      const i = this.getCellsForColumn(t, e, o), s = this.calculateColumnProperties(r, e, o);
+      i.forEach((n) => this.applyCellStyles(n, r, s)), this.applyColumnStyles(r, s);
     });
   }
   getCellsForColumn(e, t, r) {
-    return e.filter((i, o) => (r - o) % t.length === 0);
+    return e.filter((o, i) => (r - i) % t.length === 0);
   }
   calculateColumnProperties(e, t, r) {
-    const i = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, o = `${e.getBoundingClientRect().width}px`, s = e.sticky && t.length === r + 1, n = e.sticky && !this.hasStickyColumnsToRight(t, r);
+    const o = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, i = `${e.getBoundingClientRect().width}px`, s = e.sticky && t.length === r + 1, n = e.sticky && !this.hasStickyColumnsToRight(t, r);
     return {
-      leftOffsetForStickyColumn: i,
-      columnWidth: o,
+      leftOffsetForStickyColumn: o,
+      columnWidth: i,
       isLastColumnSticky: s,
       hasShadowRight: n
     };
   }
   applyCellStyles(e, t, r) {
-    const { leftOffsetForStickyColumn: i, columnWidth: o, isLastColumnSticky: s, hasShadowRight: n } = r;
-    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !f() && (t.sticky && !s && (e.classList.add("table-cell--is-sticky"), e.style.left = i + "px", n && e.classList.add("table-cell--has-shadow-right")), s && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
+    const { leftOffsetForStickyColumn: o, columnWidth: i, isLastColumnSticky: s, hasShadowRight: n } = r;
+    e.style.flex = Boolean(i) ? `0 0 ${i}` : "", !f() && (t.sticky && !s && (e.classList.add("table-cell--is-sticky"), e.style.left = o + "px", n && e.classList.add("table-cell--has-shadow-right")), s && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
   }
   applyColumnStyles(e, t) {
     if (f())
       return;
-    const { leftOffsetForStickyColumn: r, isLastColumnSticky: i, hasShadowRight: o } = t;
-    e.sticky && !i && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", o && e.classList.add("table-column--has-shadow-right")), i && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
+    const { leftOffsetForStickyColumn: r, isLastColumnSticky: o, hasShadowRight: i } = t;
+    e.sticky && !o && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", i && e.classList.add("table-column--has-shadow-right")), o && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
   }
   getLeftOffsetForStickyColumn(e, t) {
-    return e.slice(0, t).reduce((r, i) => {
-      if (i.sticky)
-        return r += i.getBoundingClientRect().width, r;
+    return e.slice(0, t).reduce((r, o) => {
+      if (o.sticky)
+        return r += o.getBoundingClientRect().width, r;
     }, 0);
   }
   hasStickyColumnsToRight(e, t) {
@@ -239,8 +249,8 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
   }
   updateLiveRegionText(e, t = {}) {
     let r = e ? this.dragDropInstructions[e] : "";
-    for (const [i, o] of Object.entries(t != null ? t : {}))
-      r = r.replaceAll(`{${i}}`, String(o));
+    for (const [o, i] of Object.entries(t != null ? t : {}))
+      r = r.replaceAll(`{${o}}`, String(i));
     r !== this.liveRegionText && (this.liveRegionText = r);
   }
   toggleKeyboardMove(e) {
@@ -276,11 +286,11 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
       return;
     let r;
     if (t === "up") {
-      const i = Array.from(this.dragDropContainer.children).indexOf(e);
-      r = Math.max(0, i - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
+      const o = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.max(0, o - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
     } else {
-      const i = Array.from(this.dragDropContainer.children).indexOf(e);
-      r = Math.min(this.dragDropContainer.children.length - 1, i + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
+      const o = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.min(this.dragDropContainer.children.length - 1, o + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
     }
     this.updateLiveRegionText("moved", {
       position: r + 1,
@@ -288,15 +298,15 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
     }), this.focusDragHandleOfRow(e);
   }
   focusDragHandleOfRow(e) {
-    var r, i;
-    const t = (r = q(e, this.dragDropHandle)) == null ? void 0 : r[0];
-    t.tagName === "BUTTON" ? t.focus() : (i = t.querySelector("button")) == null || i.focus();
+    var r, o;
+    const t = (r = T(e, this.dragDropHandle)) == null ? void 0 : r[0];
+    t.tagName === "BUTTON" ? t.focus() : (o = t.querySelector("button")) == null || o.focus();
   }
   render() {
-    const e = L("table", {
+    const e = Boolean(this.el.querySelector('[slot="empty"]')), t = O("table", {
       "table--keyboard-move": this.movingViaKeyboard
     });
-    return a(R, { key: "21e04abde388d147ed56c1445b16047f955b03ea" }, a("div", { key: "42d6c1de4e2ea4526f0de3ca7273fffcbee69275", class: e }, this.enableDragDrop && a("swirl-visually-hidden", { key: "3ac89e7a8acf5b018eb04daa9ebf954650c35bfe" }, a("span", { key: "df86027ddeb2bff6ea14d3dc79d18b5b8e9a6141", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "0cc22d0353fde2904244ea9e68e936c756774a7a", class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (t) => this.container = t, tabIndex: -1 }, a("div", { key: "cbffaa62993ef94c81c4851ed0c9ffd0cbd07828", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "0badaa89abb5152555ac6a268141172bc4f0005f" }, a("div", { key: "63af3e64092ced0cb51f351ba21cd4989e29de2b", id: "caption" }, this.caption)), a("div", { key: "2aee2dcf8961f97efa0a5786c0a4c089c3baf316", role: "rowgroup" }, a("div", { key: "f09bda45e11e1cd5b012b464cc42a14e88494ca2", class: "table__header", role: "row" }, a("slot", { key: "ae7557ed4b154e13277d0e800a8768e7cf851596", name: "columns", onSlotchange: this.onSlotChange }))), a("div", { key: "40d9fc785daffde2da8fd4a32a91bbe05015b4a8", class: "table__body", ref: (t) => this.bodyEl = t }, a("slot", { key: "db7f66365097ef5d3fbe08154eb00a99783bc93f", name: "rows", onSlotchange: this.onSlotChange }), this.empty && a("div", { key: "bf421c60cbf33505c97cc012cbc3562834b553a0", class: "table__empty-row", role: "row" }, a("div", { key: "a011ebbb267c805808f0d0b7369bdb484d34212f", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("swirl-text", { key: "566369471b3b38bb687c7972e43b7b2f74b21a54", align: "center", size: "sm" }, this.emptyStateLabel))))))));
+    return a(_, { key: "71798732e8e937a5a808cef5f867eef1b2adaecb" }, a("div", { key: "95a8ad30cb5b0c0bdea6e13729d638020fbda51b", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "65419c2fb9a489b70f863a2c421f923a60768476" }, a("span", { key: "ca398aaaa789a7c719a12527aba651f3736cf4eb", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "8cd332bb331b31060fe839140b3704275739b70b", class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (r) => this.container = r, tabIndex: -1 }, a("div", { key: "68fa8e690620d48c2f14a4967857c67f94158a22", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "b93d4712fa44c52126c2609da1b1b60fa0d5fba6" }, a("div", { key: "d8d72ae82bed714eeb07e658dd3ac1aad9a549fd", id: "caption" }, this.caption)), a("div", { key: "e2f1f3d19401d1f44c8536a9efc0b8a909320b75", role: "rowgroup" }, a("div", { key: "1882aec17470e8dd8d12c90254aa1a9c1542d348", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "b570c8ff4b54ae8d69980c81cf375fe828b1d063", name: "columns" }))), a("div", { key: "64de0ca255ee47f77f62eb86fc72d0e8a26c0bd4", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "c452844b1903346f40720d45df7871b7d0dfa0ba", name: "rows" }), this.empty && a("div", { key: "0f4f29a0bbcb119d9e7593c94f4e4f14ff9ab6e7", class: "table__empty-row", role: "row" }, a("div", { key: "b5bdcaa4375e6f40bb0c1aae6e4c78bc7bc7cdc1", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "d7e9b0ffd6bef6146556b36e23bb37dbe5b9dde8", name: "empty" }), !e && a("swirl-text", { key: "a010b37117f401b565be6e5e3c0290cea5bfbe8f", align: "center", size: "sm" }, this.emptyStateLabel))))))));
   }
   get el() {
     return k(this);
@@ -307,7 +317,7 @@ const B = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *
     };
   }
 };
-H.style = B;
+W.style = K;
 export {
-  H as swirl_table
+  W as swirl_table
 };

package/dist/{swirl-tabs.entry.48b2c512.js → swirl-tabs.entry.4dba114f.js}

@@ -1,4 +1,4 @@
-import { r as b, c as r, h as s, H as n, g as c } from "./index.93ca0535.js";
+import { r as b, c as r, h as s, H as c, g as n } from "./index.dece22df.js";
 import { n as e } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";
@@ -51,10 +51,10 @@ const d = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     }));
   }
   render() {
-    return s(n, { key: "255ba4585d6ab871e4e01ebe6fe426ca6f981e6e" }, s("div", { key: "b3707188eb884c687821dbbe1a64e59c36e36192", class: "tabs" }, s("swirl-tab-bar", { key: "012bf6d714af20ebde2c7b8f55ca9d3c9406953f", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "5d1dc07e6f83d565f99e053310bdea8754b56389" }));
+    return s(c, { key: "1c0747c30868d370d0815d1c3c1f2bc5b153f403" }, s("div", { key: "1baee7ca4beb5ec7cf369ddb1d28f213ebb8f136", class: "tabs" }, s("swirl-tab-bar", { key: "c512daa17ef79321e5101c8183e71749bc4086e2", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "d70c67d563f614918000ad2a35ce880a9bb9b096" }));
   }
   get el() {
-    return c(this);
+    return n(this);
   }
 };
 h.style = d;

package/dist/{swirl-text-input.entry.248a3540.js → swirl-text-input.entry.a4281819.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as c } from "./index.93ca0535.js";
+import { r as h, c as n, h as i, H as c } from "./index.dece22df.js";
 import { c as d } from "./index-orsBiyT_.fc4357c3.js";
 import { D as x } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";

package/dist/{swirl-text.entry.ccf17fa5.js → swirl-text.entry.c5c5712b.js}

@@ -1,4 +1,4 @@
-import { r as lt, h as Z, H as ct, g as ht } from "./index.93ca0535.js";
+import { r as lt, h as Z, H as ct, g as ht } from "./index.dece22df.js";
 import { c as dt, g as ft } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
@@ -287,7 +287,7 @@ const vt = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-
     }), r = {
       whiteSpace: l ? "nowrap" : this.whiteSpace
     };
-    return Z(ct, { key: "276b21dc5eb8e517fd3d4afef881762df9f87347" }, Z(o, { key: "198d07976dbfe3a6f19eb80d733d7fc0dfad9073", class: a, ref: (c) => this.textEl = c, style: r }, Z("slot", { key: "cc2b27ae768a9ece64a4e3426b9b461b94dbdab8" })));
+    return Z(ct, { key: "6c6919a45a6c4b1e26bb5dd8dbe683ffe3e6d0f4" }, Z(o, { key: "e859c0d25b65141ca90cb22043e079cfd6870590", class: a, ref: (c) => this.textEl = c, style: r }, Z("slot", { key: "44ee5c0ccec836aa24d4a12efa1484b24b98a1ad" })));
   }
   get el() {
     return ht(this);

package/dist/{swirl-theme-provider.entry.9de1478c.js → swirl-theme-provider.entry.e11cc09d.js}

@@ -1,9 +1,9 @@
-import { r as m, c as n, h as o, H as d } from "./index.93ca0535.js";
+import { r as m, c as a, h as o, H as d } from "./index.dece22df.js";
 import "react";
 import "react-dom";
 const l = ".sc-swirl-theme-provider-h{display:unset}", i = "swirl-preferred-theme", c = class {
   constructor(e) {
-    m(this, e), this.appThemeUpdated = n(this, "appThemeUpdated", 7), this.themeChange = n(this, "themeChange", 7), this.darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"), this.setDesignTokens = [], this.osThemeChangeHandler = (t) => {
+    m(this, e), this.appThemeUpdated = a(this, "appThemeUpdated", 7), this.themeChange = a(this, "themeChange", 7), this.darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"), this.setDesignTokens = [], this.osThemeChangeHandler = (t) => {
       this.osTheme = t.matches ? "dark" : "light", this.updateAppTheme();
     };
   }
@@ -69,8 +69,8 @@ const l = ".sc-swirl-theme-provider-h{display:unset}", i = "swirl-preferred-them
     }
     const t = this.resolvedConfig.rootElement;
     this.setDesignTokens = [], e.design_tokens.forEach((r) => {
-      const a = `--s-${r.id}`;
-      t.style.setProperty(a, `rgba(${r.color.r}, ${r.color.g}, ${r.color.b}, ${r.color.a})`), this.setDesignTokens.push(a);
+      const n = `--s-${r.id}`;
+      t.style.setProperty(n, `rgba(${r.color.r}, ${r.color.g}, ${r.color.b}, ${r.color.a})`), this.setDesignTokens.push(n);
     });
   }
   resetTenantVariables() {
@@ -80,7 +80,7 @@ const l = ".sc-swirl-theme-provider-h{display:unset}", i = "swirl-preferred-them
     }), this.setDesignTokens = [];
   }
   render() {
-    return o(d, { key: "bc76df1e9caa6c53a9cb599e3a3334a7ff5a6fe0" }, o("slot", { key: "4ea2e9a313907dde72db77074c28d0d6758257f7" }));
+    return o(d, { key: "43dbba5e1a68a2da91b331ed75fb3fe6c365db0c" }, o("slot", { key: "734d4489e5f188684dc0d50c4ed7cff14e3459b9" }));
   }
   static get watchers() {
     return {

package/dist/{swirl-time-input.entry.16a10819.js → swirl-time-input.entry.7872c863.js}

@@ -1,4 +1,4 @@
-import { r as m, c as n, h as s, H as h, g as d } from "./index.93ca0535.js";
+import { r as m, c as n, h as s, H as h, g as d } from "./index.dece22df.js";
 import { c as p } from "./index-orsBiyT_.fc4357c3.js";
 import { I as a, i as o, f as r, p as l } from "./index-D3UoejeY.7db8c51e.js";
 import { D as f } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
@@ -100,7 +100,7 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
     const i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = p("time-input", {
       "time-input--inline": this.inline
     });
-    return s(h, { key: "e00f1ea9272d42fddb3e330306614c7c9e2ad35e" }, s("div", { key: "c303809cf350d0c9b2b476cde34927b1e287c7b4", class: t }, s("input", { key: "433c12a413b6cd3688249a8154b86dff0728a672", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, type: "text" }), s("span", { key: "48a0f974465430f70009d0465f983f780330a398", class: "time-input__icon" }, s("swirl-icon-time-outlined", { key: "74659f60da754d205378dd33beaa1f8962d5790d", size: this.iconSize }))));
+    return s(h, { key: "63fe32b4243c58bf9976db89a2946ada3930e27e" }, s("div", { key: "c67c974f9ea440be082eb481d6c4fbfd5a41af57", class: t }, s("input", { key: "e6f3ec79e7261dd56bb2a904f4940f887b500f46", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, type: "text" }), s("span", { key: "617eae052d3c7291fd3401ca7daa1886cfdb95cf", class: "time-input__icon" }, s("swirl-icon-time-outlined", { key: "27adc8c216ee8f78e0231eca73d1478fda2214c2", size: this.iconSize }))));
   }
   get el() {
     return d(this);

package/dist/{swirl-toast-provider.entry.4c70f246.js → swirl-toast-provider.entry.ee192bd8.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, H as r } from "./index.93ca0535.js";
+import { r as o, h as i, H as r } from "./index.dece22df.js";
 import "react";
 import "react-dom";
 const c = class {
@@ -25,7 +25,7 @@ const c = class {
     return this.toasts = [...this.toasts, s], s;
   }
   render() {
-    return i(r, { key: "48299c971f9564f232cdddd96eadb9e257fe7aa5", role: "status" }, i("swirl-stack", { key: "f77110faeafa1f2ad227ec7d61c159631c9db12c", spacing: "12" }, this.toasts.map((t) => {
+    return i(r, { key: "0de522d0575f6023484863d9b1cad338b3bf3bcd", role: "status" }, i("swirl-stack", { key: "6833c4a10998d5a9edec3cac5add223ecb296dda", spacing: "12" }, this.toasts.map((t) => {
       const s = { ...t, content: void 0 };
       return i("swirl-toast", { key: t.toastId, onDismiss: this.onDismiss, ...s }, t.content);
     })));

package/dist/{swirl-toast.entry.12c3f592.js → swirl-toast.entry.b7b74b34.js}

@@ -1,4 +1,4 @@
-import { r as o, c as r, h as i, H as n } from "./index.93ca0535.js";
+import { r as o, c as r, h as i, H as n } from "./index.dece22df.js";
 import { c } from "./index-orsBiyT_.fc4357c3.js";
 import { D as d } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";
@@ -37,7 +37,7 @@ const h = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;
   }
   render() {
     const t = c("toast", `toast--intent-${this.intent}`);
-    return i(n, { key: "4c5034f5eecff5a7193a3578b376c7be27ce53fc" }, i("div", { key: "0748f69fcdd6d1890e04e296ea7bfc7e8ce1e70e", class: t }, this.icon && i("span", { key: "74b9864ed23e7faa4f5aa874798bbc2ede631f88", class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (s) => this.iconEl = s }), i("span", { key: "f5f4cbc4a58cd7ec19412d284033ea24a6da419d", class: "toast__content", innerHTML: this.content, part: "toast__content" }, i("slot", { key: "c873fa45a42b1af610aa61c672b187ce4e3c1038" })), i("button", { key: "2c6608afc754da275ab5029feca800ec5acd51f3", "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && i("swirl-icon-close", { key: "e5a6fb1ae4380d977af18299869cd729b1c5e326", ref: (s) => this.dismissIconEl = s }))));
+    return i(n, { key: "e9cca93020ec6d094231fe3d460aad88daf79809" }, i("div", { key: "f4596be9c122d15af428ee15a625f366dbaf59b2", class: t }, this.icon && i("span", { key: "600246de21c1784f1baec655517defbc9ea5e2ff", class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (s) => this.iconEl = s }), i("span", { key: "4f6bc65e3292cb7f56a01a762d7ce015dc545772", class: "toast__content", innerHTML: this.content, part: "toast__content" }, i("slot", { key: "ae02f27a9f683d98e44a876df6b5b7700ef1c68f" })), i("button", { key: "1dce24dffb6e7ccf30cb9f92a67dca3df20ebf8b", "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && i("swirl-icon-close", { key: "1d4478a02a772ae225e487bfdc8039502a1dcf41", ref: (s) => this.dismissIconEl = s }))));
   }
   static get watchers() {
     return {

package/dist/{swirl-toggle-button.entry.4bd79d10.js → swirl-toggle-button.entry.a16dbc55.js}

@@ -1,18 +1,18 @@
-import { r as s, h as t } from "./index.93ca0535.js";
+import { r as s, h as e } from "./index.dece22df.js";
 import { c as o } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
 const i = ":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-surface-sunken-hovered)}.button:active{background-color:var(--s-surface-sunken-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}", n = class {
-  constructor(e) {
-    s(this, e), this.isPressed = !1, this.onClick = () => {
+  constructor(t) {
+    s(this, t), this.isPressed = !1, this.onClick = () => {
       this.isPressed = !0;
     };
   }
   render() {
-    const e = o("button", {
+    const t = o("button", {
       "button--pressed": this.isPressed
     });
-    return t("button", { key: "a876586cc9326945b8b4c9cfd14e5781311c23b3", class: e, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && t("swirl-icon", { key: "8b6549a8f6b61c1c3f481e3bed211c6c1e0baef5", class: "button__icon", glyph: this.icon }), t("span", { key: "17d635182a63c0600591c77e2e32ab888aa9d222", class: "button__label" }, this.label));
+    return e("button", { key: "ea79fcf895b9011cd51f9a6140d517171b7b951a", class: t, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && e("swirl-icon", { key: "a62236e31301b497d621c14760faac09b9eb605f", class: "button__icon", glyph: this.icon }), e("span", { key: "b8f9ae7f94850c1ab82fd83717cf915d01507b04", class: "button__label" }, this.label));
   }
 };
 n.style = i;

package/dist/{swirl-toggle-group.entry.8c1029f7.js → swirl-toggle-group.entry.a7e0b218.js}

@@ -1,27 +1,27 @@
-import { r as i, c as g, h as o, g as r } from "./index.93ca0535.js";
+import { r as i, c as g, h as o, g as r } from "./index.dece22df.js";
 import { c as l } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
 const a = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}", n = class {
-  constructor(e) {
-    i(this, e), this.selectedToggleChange = g(this, "selectedToggleChange", 7), this.variant = "flat", this.toggleButtons = [], this.onSlotChange = () => {
+  constructor(t) {
+    i(this, t), this.selectedToggleChange = g(this, "selectedToggleChange", 7), this.variant = "flat", this.toggleButtons = [], this.onSlotChange = () => {
       this.toggleButtons = Array.from(this.el.querySelectorAll("swirl-toggle-button")), this.setTogglePressedStates();
     };
   }
-  watchSelectedToggleId(e, t) {
-    e !== t && (this.selectedToggleChange.emit(e), this.setTogglePressedStates());
+  watchSelectedToggleId(t, e) {
+    t !== e && (this.selectedToggleChange.emit(t), this.setTogglePressedStates());
   }
-  onClick(e) {
-    const t = e.target;
-    if ((t == null ? void 0 : t.tagName) === "SWIRL-TOGGLE-BUTTON") {
-      e.stopPropagation();
-      const s = t;
+  onClick(t) {
+    const e = t.target;
+    if ((e == null ? void 0 : e.tagName) === "SWIRL-TOGGLE-BUTTON") {
+      t.stopPropagation();
+      const s = e;
       this.selectedToggleId = s.identifier;
     }
   }
   setTogglePressedStates() {
-    var t;
-    if (!((t = this.toggleButtons) != null && t.length))
+    var e;
+    if (!((e = this.toggleButtons) != null && e.length))
       return;
     if (!this.selectedToggleId) {
       this.toggleButtonWithId(this.toggleButtons[0].identifier);
@@ -33,17 +33,17 @@ const a = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-grou
     }
     this.toggleButtonWithId(this.selectedToggleId);
   }
-  toggleButtonWithId(e) {
-    var t;
-    !((t = this.toggleButtons) != null && t.length) || this.toggleButtons.forEach((s) => {
-      s.identifier === e ? s.isPressed = !0 : s.isPressed = !1;
+  toggleButtonWithId(t) {
+    var e;
+    !((e = this.toggleButtons) != null && e.length) || this.toggleButtons.forEach((s) => {
+      s.identifier === t ? s.isPressed = !0 : s.isPressed = !1;
     });
   }
   render() {
-    const e = l("toggle-group", `toggle-group--variant-${this.variant}`, {
+    const t = l("toggle-group", `toggle-group--variant-${this.variant}`, {
       "toggle-group--elevated": this.elevated
     });
-    return o("swirl-stack", { key: "1336e6afe326855117371796717b192b6feae03c", class: e, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, o("slot", { key: "06a8f3227d4ceaced08dce8833060f8884e8f3ed", onSlotchange: this.onSlotChange }));
+    return o("swirl-stack", { key: "8f9966117b896681d452c4a3fdd0bcd45484ef9b", class: t, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, o("slot", { key: "f386dbde3ee531e00515aac62771d50b2f8997c1", onSlotchange: this.onSlotChange }));
   }
   get el() {
     return r(this);

package/dist/{swirl-toolbar.entry.1164de2f.js → swirl-toolbar.entry.5a2269c0.js}

@@ -1,4 +1,4 @@
-import { r, h as s, H as n, g as i } from "./index.93ca0535.js";
+import { r, h as s, H as n, g as i } from "./index.dece22df.js";
 import { k as c } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";
@@ -44,7 +44,7 @@ const a = ":host{display:block}:host *{box-sizing:border-box}", l = class {
     });
   }
   render() {
-    return s(n, { key: "f32d5adcf9bdee0346d94c9750c83f337319cb5f" }, s("swirl-stack", { key: "c869e7574e4b7f52aed15a216e03683c734cc5b8", align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: !0 }, s("slot", { key: "45b024a3963d2d473b2a859c1cf035457d5800b2" })));
+    return s(n, { key: "719236ca8a1f3fef172578d0d7d6932cabc763bb" }, s("swirl-stack", { key: "8fee5af69f1961c130ca87bd55ef3fb3977d8a78", align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: !0 }, s("slot", { key: "05df1964caede7ca58827d90fdcfc60660c72eb3" })));
   }
   get el() {
     return i(this);