@getflip/swirl-components-react 0.436.1 → 0.437.0

package/dist/swirl-symbol-xing.entry.650ebc5a.js

@@ -0,0 +1,17 @@
+import { r as i, h as e, F as C } from "./index.3db44e7f.js";
+import { c as t } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:inline-flex}", l = class {
+  constructor(s) {
+    i(this, s), this.size = 24;
+  }
+  render() {
+    const s = t("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return e("svg", { key: "199325580f0f0730b65f9409c3b13cb1c206aa7d", class: s, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(C, { key: "3d66c90b648e3ed406f3e153638fc992f50dd8ab" }, e("path", { key: "c22f2dea28223c227762ab5d2c4a031a02f40dae", d: "M17.158 2.128C16.9889 2.13178 16.8248 2.18623 16.687 2.28428C16.5492 2.38234 16.444 2.51949 16.385 2.678C16.385 2.678 10.173 13.698 9.967 14.059C9.98 14.079 14.067 21.578 14.067 21.578C14.1342 21.7375 14.246 21.8742 14.389 21.9717C14.5319 22.0693 14.7 22.1235 14.873 22.128H17.751C17.8257 22.1338 17.9006 22.1199 17.9683 22.0878C18.036 22.0557 18.0942 22.0065 18.137 21.945C18.1743 21.8762 18.1933 21.7989 18.192 21.7206C18.1908 21.6423 18.1694 21.5656 18.13 21.498L14.063 14.068C14.0614 14.0653 14.0606 14.0622 14.0606 14.059C14.0606 14.0558 14.0614 14.0527 14.063 14.05L20.45 2.758C20.4882 2.68988 20.5082 2.61309 20.5082 2.535C20.5082 2.4569 20.4882 2.38012 20.45 2.312C20.4084 2.25141 20.3518 2.20262 20.2857 2.17038C20.2197 2.13813 20.1464 2.12353 20.073 2.128H17.158ZM5.041 6.078C4.96541 6.07176 4.88949 6.08504 4.8205 6.11656C4.75151 6.14808 4.69177 6.19678 4.647 6.258C4.61116 6.32697 4.59388 6.40408 4.59686 6.48175C4.59984 6.55942 4.62298 6.63498 4.664 6.701L6.613 10.076V10.093L3.551 15.504C3.5116 15.5708 3.49081 15.6469 3.49081 15.7245C3.49081 15.8021 3.5116 15.8782 3.551 15.945C3.59031 16.0081 3.64585 16.0595 3.71182 16.0938C3.77779 16.1281 3.85176 16.1441 3.926 16.14H6.81C6.98108 16.1336 7.14662 16.0776 7.2865 15.9789C7.42639 15.8802 7.5346 15.743 7.598 15.584L10.709 10.076L8.728 6.614C8.66239 6.45468 8.55179 6.31791 8.40972 6.22042C8.26765 6.12292 8.10026 6.06892 7.928 6.065H5.041V6.078Z", fill: "currentColor" })));
+  }
+};
+l.style = r;
+export {
+  l as swirl_symbol_xing
+};

package/dist/swirl-symbol-youtube.entry.f74d47bd.js

@@ -0,0 +1,17 @@
+import { r as t, h as e, F as i } from "./index.3db44e7f.js";
+import { c as r } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const o = ":host{display:inline-flex}", l = class {
+  constructor(s) {
+    t(this, s), this.size = 24;
+  }
+  render() {
+    const s = r("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return e("svg", { key: "02458f58789b3c7abd0587e0ef12d04e0b888254", class: s, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(i, { key: "0c914b861fdd0250a31d21d23c6fde75c61268bc" }, e("path", { key: "bf126b1c4502d33b29f5914080ac22bece888546", d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" })));
+  }
+};
+l.style = o;
+export {
+  l as swirl_symbol_youtube
+};

package/dist/swirl-symbol.entry.ff8b0a61.js

@@ -0,0 +1,16 @@
+import { r as i, h as e, H as t } from "./index.3db44e7f.js";
+import "react";
+import "react-dom";
+const r = ":host{display:inline-flex}", o = class {
+  constructor(s) {
+    i(this, s), this.size = 24;
+  }
+  render() {
+    const s = `swirl-symbol-${this.glyph}`;
+    return e(t, { key: "e1871992c823c9d17d704de4088a63d06566e4d1" }, e(s, { key: "12dc09ffd98065bb98f399d0895125f3527f1e4b", size: this.size }));
+  }
+};
+o.style = r;
+export {
+  o as swirl_symbol
+};

package/dist/swirl-tab-bar.entry.997a00a9.js

@@ -0,0 +1,66 @@
+import { r as l, c as s, h as b, H as o, g as c } from "./index.3db44e7f.js";
+import { c as n } from "./index-orsBiyT_.fc4357c3.js";
+import { m as d } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+const _ = `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid
+      var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}`, v = class {
+  constructor(r) {
+    l(this, r), this.activateNextTab = s(this, "activateNextTab", 7), this.activatePreviousTab = s(this, "activatePreviousTab", 7), this.activateTab = s(this, "activateTab", 7), this.justify = "start", this.tabs = [], this.variant = "default", this.onKeyDown = (t) => {
+      t.code === "ArrowLeft" ? (t.preventDefault(), this.focusAdjacentTab(!0), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.focusAdjacentTab(!1), this.activateNextTab.emit());
+    };
+  }
+  onTabFocus(r) {
+    r.target.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    });
+  }
+  focusAdjacentTab(r) {
+    const t = this.getTabs(), a = t.findIndex((e) => e.ariaSelected === "true"), i = d(r ? a - 1 : a + 1, t.length);
+    t[i].focus();
+  }
+  getTabs() {
+    return Array.from(this.el.querySelectorAll('[role="tab"]'));
+  }
+  render() {
+    const r = n("tab-bar", `tab-bar--justify-${this.justify}`, {
+      "tab-bar--variant-pill": this.variant === "pill",
+      "tab-bar--variant-default": this.variant === "default"
+    }), t = {
+      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0
+    };
+    return b(o, { key: "93e7c947b43c0ffad2fb722528f626e69d58fb1e" }, b("div", { key: "c58ac4350603133c09efa406cd761b8db3372a84", "aria-label": this.label, class: r, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist", style: t }, this.tabs.map((a) => {
+      const i = n("tab-bar__tab", {
+        "tab-bar__tab--active": a.active,
+        "tab-bar__tab--variant-pill": this.variant === "pill",
+        "tab-bar__tab--variant-default": this.variant === "default"
+      }), e = n("tab-bar__tab-label", {
+        "tab-bar__tab-label--variant-pill": this.variant === "pill"
+      });
+      return b("button", {
+        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
+        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
+        class: i,
+        id: `tab-${a.id}`,
+        key: a.id,
+        onClick: () => this.activateTab.emit(a.id),
+        onFocus: this.onTabFocus,
+        role: this.disableTabSemantics ? void 0 : "tab",
+        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
+        type: "button"
+      }, a.icon && b("span", { class: "tab-bar__tab-icon", innerHTML: a.icon }), b("span", { class: e }, a.label, a.suffix && b("span", { class: "tab-bar__tab-suffix" }, a.suffix)));
+    })));
+  }
+  get el() {
+    return c(this);
+  }
+};
+v.style = _;
+export {
+  v as swirl_tab_bar
+};

package/dist/swirl-tab.entry.99f27aaa.js

@@ -0,0 +1,17 @@
+import { r as t, h as s, H as e } from "./index.3db44e7f.js";
+import { c as i } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}", o = class {
+  constructor(a) {
+    t(this, a), this.padding = "8";
+  }
+  render() {
+    const a = i("tab", { "tab--active": this.active });
+    return s(e, { key: "ff5c03f613e0e7a7878497adf8275903c7ed76a9", "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: a, style: { padding: `var(--s-space-${this.padding})` } }, s("slot", { key: "c88c6ba920ed44dddae965b89708ca8f331aa34a" }));
+  }
+};
+o.style = r;
+export {
+  o as swirl_tab
+};

package/dist/swirl-table-cell.entry.0db2b85b.js

@@ -0,0 +1,15 @@
+import { r as a, h as s, H as t } from "./index.3db44e7f.js";
+import "react";
+import "react-dom";
+const o = ":host{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);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}", l = class {
+  constructor(e) {
+    a(this, e);
+  }
+  render() {
+    return s(t, { key: "a5b0f16d55d5e69b88a2088c12fab515a2631cb1", class: "table-cell", role: "cell" }, s("slot", { key: "ccb95068c674fb58f75a34f3458efb5ccd458b9a" }));
+  }
+};
+l.style = o;
+export {
+  l as swirl_table_cell
+};

package/dist/swirl-table-column.entry.750f7eda.js

@@ -0,0 +1,34 @@
+import { r as o, h as s, H as r, g as l } from "./index.3db44e7f.js";
+import { c as n } from "./index-orsBiyT_.fc4357c3.js";
+import { l as d } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+const c = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host(.table-column--default){background-color:var(--s-surface-default)}:host(.table-column--sunken){background-color:var(--s-surface-sunken-default)}:host(.table-column--raised){background-color:var(--s-surface-raised-default)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}", h = class {
+  constructor(e) {
+    o(this, e), this.variant = "default", this.minWidth = "fit-content";
+  }
+  componentDidRender() {
+    const e = d(this.el, "swirl-table");
+    e == null || e.rerender();
+  }
+  render() {
+    var a;
+    const e = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || ""
+    }, t = (a = this.variant) != null ? a : "default", i = n("table-column", {
+      "table-column--default": t === "default",
+      "table-column--sunken": t === "sunken",
+      "table-column--raised": t === "raised"
+    });
+    return s(r, { key: "f5b4da798e7bbfba25ced85f664b75b142eaf933", "aria-sort": this.sort, class: i, role: "columnheader", style: e }, s("span", { key: "1f285704928a9ef381d5ada84d7a7dc4fdfa3466" }, s("slot", { key: "556a644e8b87a8f189a89593937478802d3030de" })), this.sortable && s("span", { key: "8246ccee64403a39c670ba29cbf9e157856163ee", class: "table-column__sort-indicator" }, this.sort === "ascending" && s("swirl-icon-arrow-upward", { key: "f5cb2f4d0d42c54fe36ec4aa33ccc2833bdceb41", "aria-hidden": "true", size: 20 }), this.sort === "descending" && s("swirl-icon-arrow-downward", { key: "dce603761c91699f2790b255b61347ac6e6c4519", "aria-hidden": "true", size: 20 }), !Boolean(this.sort) && " "));
+  }
+  get el() {
+    return l(this);
+  }
+};
+h.style = c;
+export {
+  h as swirl_table_column
+};

package/dist/swirl-table-row-group.entry.7a7a1df9.js

@@ -0,0 +1,35 @@
+import { r as o, h as e, H as l, g as a } from "./index.3db44e7f.js";
+import "react";
+import "react-dom";
+const r = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{overflow:visible clip;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}", n = class {
+  constructor(i) {
+    o(this, i), this.collapsible = !1, this.collapseButtonLabel = "Previous slide", this.isVisible = !0, this.toggleShowItems = () => {
+      if (this.headerRowElement.focus(), !this.tableRowElements)
+        return;
+      const t = this.tableRowElements.scrollHeight + "px";
+      this.isVisible ? requestAnimationFrame(() => {
+        this.tableRowElements.style.height = t, this.tableRowElements.setAttribute("aria-hidden", "true"), requestAnimationFrame(() => {
+          this.tableRowElements.style.height = "0";
+        });
+      }) : requestAnimationFrame(() => {
+        this.tableRowElements.style.height = t, this.tableRowElements.removeAttribute("aria-hidden"), setTimeout(() => {
+          this.tableRowElements.style.height = "auto";
+        }, 300);
+      }), this.isVisible = !this.isVisible;
+    };
+  }
+  render() {
+    const i = this.el.querySelectorAll("swirl-table-row").length, t = this.isVisible ? "<swirl-icon-expand-less></swirl-icon-expand-less" : "<swirl-icon-expand-more></swirl-icon-expand-more";
+    return e(l, { key: "5875f8fa2a75dfe9b1fe8ff4a01dee64c8701207", class: "table-row-group", role: "rowgroup" }, e("div", { key: "9f61950d549f28432f9d8967900fbb165c806b13", class: "table-row-group__header-row", role: "row", ref: (s) => this.headerRowElement = s }, this.collapsible && e("swirl-button", { key: "fb336bd5cf3b295c613d90d8d33ad5065df3db6a", class: "table-row-group__collapse-icon", icon: t, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: !0 }), e("span", { key: "463398babb6d5291c58d0ef1b8dc7806e65a80b0", "aria-rowspan": i, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && e("span", { key: "75af5458d7b3dd519dca36ecb7101de7fb17aabb", class: "table-row-group__tooltip" }, e("swirl-tooltip", { key: "0a3322e995ca619db0c1261ddc17bc36d264439d", content: this.tooltip, position: "top" }, e("swirl-icon-info", { key: "77716bae01663e4c7016aa7ec4d8f7c2d806455c", size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" }))))), e("div", { key: "98d86546636e82ec219a87b88c4f7b10c3229d61", class: {
+      "table-row-group__rows-container": !0,
+      "table-row-group__rows-container--is-hidden": this.isVisible
+    }, "aria-hidden": !this.isVisible, ref: (s) => this.tableRowElements = s }, e("slot", { key: "dafcf2dd12a62759753da95a237f453020fbedcb" })));
+  }
+  get el() {
+    return a(this);
+  }
+};
+n.style = r;
+export {
+  n as swirl_table_row_group
+};

package/dist/swirl-table-row.entry.442bd7c7.js

@@ -0,0 +1,27 @@
+import { r as o, h as t, H as r, g as s } from "./index.3db44e7f.js";
+import { c as a } from "./index-orsBiyT_.fc4357c3.js";
+import { l } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+const i = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", d = class {
+  constructor(e) {
+    o(this, e);
+  }
+  componentDidLoad() {
+    const e = l(this.el, "swirl-table");
+    e == null || e.rerender();
+  }
+  render() {
+    const e = a("table-row", {
+      "table-row--highlighted": this.highlighted
+    });
+    return t(r, { key: "6c684ecdea74e9084a9869a7a562ee5549442011", "aria-rowindex": this.index, class: e, role: "row" }, t("slot", { key: "b14d01c96bd37d4ecafcc5750678dc9eb4af73ff" }));
+  }
+  get el() {
+    return s(this);
+  }
+};
+d.style = i;
+export {
+  d as swirl_table_row
+};

package/dist/swirl-table.entry.6b30791c.js

@@ -0,0 +1,337 @@
+import { r as x, c as R, h as a, H as _, g as k } from "./index.3db44e7f.js";
+import { c as O, g as L } from "./index-orsBiyT_.fc4357c3.js";
+import { S as M } from "./sortable.esm-CMrz6687.dac971cd.js";
+import { d as A, i as f, q as T } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+var g, v;
+function E() {
+  if (v)
+    return g;
+  v = 1, g = function(s) {
+    var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, l = void 0, n = void 0, b = void 0, d = [];
+    return function() {
+      var y = e(o), w = new Date().getTime(), D = !l || w - l > y;
+      l = w;
+      for (var m = arguments.length, c = Array(m), h = 0; h < m; h++)
+        c[h] = arguments[h];
+      if (D && i.leading)
+        return i.accumulate ? Promise.resolve(s.call(this, [c])).then(function(p) {
+          return p[0];
+        }) : Promise.resolve(s.call.apply(s, [this].concat(c)));
+      if (n ? clearTimeout(b) : n = t(), d.push(c), b = setTimeout(C.bind(this), y), i.accumulate) {
+        var S = d.length - 1;
+        return n.promise.then(function(p) {
+          return p[S];
+        });
+      }
+      return n.promise;
+    };
+    function C() {
+      var u = n;
+      clearTimeout(b), Promise.resolve(i.accumulate ? s.call(this, d) : s.apply(this, d[d.length - 1])).then(u.resolve, u.reject), d = [], n = null;
+    }
+  };
+  function e(r) {
+    return typeof r == "function" ? r() : r;
+  }
+  function t() {
+    var r = {};
+    return r.promise = new Promise(function(s, o) {
+      r.resolve = s, r.reject = o;
+    }), r;
+  }
+  return g;
+}
+var q = E(), I = /* @__PURE__ */ L(q);
+const K = `.sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid
+      var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.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 var(--swirl-table-shadow-rgba),
+    2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px
+      var(--swirl-table-shadow-rgba),
+    0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.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:none}.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."
+}, W = class {
+  constructor(e) {
+    x(this, e), this.dropRow = R(this, "dropRow", 7), this.dragDropInstructions = B, this.emptyStateLabel = "No results found.", this.liveRegionText = "", this.triggerRerender = A(async () => {
+      await this.updateLayout(), this.updateEmptyState();
+    }, 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.onFocus = (t) => {
+      var s;
+      if (this.movingViaKeyboard) {
+        const o = this.el.querySelector(".table-row--moving");
+        o && this.focusDragHandleOfRow(o);
+      }
+      const r = !!((s = t.target) != null && s.closest(this.dragDropHandle));
+      this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
+    }, this.onBlur = (t) => {
+      const r = t.relatedTarget, s = !!(r != null && r.closest(this.dragDropHandle));
+      this.el.contains(r) && s || this.liveRegionText !== "" && this.updateLiveRegionText();
+    }, this.onKeyDown = (t) => {
+      var o, i;
+      if (!this.enableDragDrop)
+        return;
+      const r = (o = t.target) == null ? void 0 : o.closest("swirl-table-row");
+      !((i = t.target) != null && i.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(), this.setupMutationObservers(), queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, r, s;
+    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.columnMutationObserver) == null || t.disconnect(), (r = this.rowMutationObserver) == null || r.disconnect(), (s = this.sortable) == null || s.destroy();
+  }
+  handleEnableDragDropChange() {
+    queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  setupIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      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.startRowMutationObserver();
+  }
+  startRowMutationObserver() {
+    var e;
+    (e = this.rowMutationObserver) == null || e.observe(this.bodyEl, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  stopRowMutationObserver() {
+    var e;
+    (e = this.rowMutationObserver) == null || e.disconnect();
+  }
+  setupDragDrop() {
+    if (this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop) {
+      if (!!this.el.querySelector("swirl-table-row-group")) {
+        console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
+        return;
+      }
+      if (!this.dragDropHandle) {
+        console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
+        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 M(this.dragDropContainer, {
+        animation: 100,
+        direction: "vertical",
+        handle: this.dragDropHandle,
+        fallbackOnBody: !0,
+        group: `swirl-table-${Math.random().toString().substring(2)}`,
+        onStart: () => {
+          this.stopRowMutationObserver();
+        },
+        onEnd: (r) => {
+          var n;
+          r.stopPropagation();
+          const { to: s, newIndex: o, oldIndex: i, item: l } = r;
+          this.dropRow.emit({
+            newIndex: o,
+            oldIndex: i,
+            item: l,
+            itemId: (n = l.id) != null ? n : l.querySelector(":scope > swirl-table-row").id,
+            newNextSiblingItemId: o < s.children.length - 1 ? s.children[o + 1].id : void 0,
+            newPrevSiblingItemId: o > 0 ? s.children[o - 1].id : void 0
+          }), this.startRowMutationObserver();
+        }
+      });
+    }
+  }
+  async onVisibilityChange(e) {
+    e.some((r) => r.isIntersecting) && setTimeout(async () => {
+      await this.updateLayout();
+    }, 100);
+  }
+  async componentDidRender() {
+    await this.updateLayout(), this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout();
+  }
+  async rerender() {
+    this.triggerRerender();
+  }
+  resetEmptyRowStyles() {
+    const e = this.el.querySelector(".table__empty-row");
+    !Boolean(e) || (e.style.width = "");
+  }
+  resetRowGroupStyles() {
+    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t) => {
+      const r = t.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(r) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
+    });
+  }
+  resetColumnStyles() {
+    this.getColumns().forEach((t) => {
+      t.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    this.getCells().forEach((t) => {
+      t.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  updateScrolledState() {
+    const e = f();
+    if (this.container === void 0)
+      return;
+    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, s = 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")), s !== this.scrolledToEnd && (s && !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"));
+  }
+  getCells() {
+    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
+  }
+  layoutEmptyRow() {
+    const e = this.el.querySelector(".table__empty-row");
+    if (!Boolean(e))
+      return;
+    const t = `${this.el.querySelector(".table__container").scrollWidth}px`;
+    e.style.width = t;
+  }
+  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((s) => {
+      const o = s.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(o) || (s.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
+    });
+  }
+  layOutCellsAndColumns() {
+    const e = this.getColumns(), t = this.getCells();
+    e.forEach((r, s) => {
+      const o = this.getCellsForColumn(t, e, s), i = this.calculateColumnProperties(r, e, s);
+      o.forEach((l) => this.applyCellStyles(l, r, i)), this.applyColumnStyles(r, i);
+    });
+  }
+  getCellsForColumn(e, t, r) {
+    return e.filter((s, o) => (r - o) % t.length === 0);
+  }
+  calculateColumnProperties(e, t, r) {
+    const s = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, o = `${e.getBoundingClientRect().width}px`, i = e.sticky && t.length === r + 1, l = e.sticky && !this.hasStickyColumnsToRight(t, r);
+    return {
+      leftOffsetForStickyColumn: s,
+      columnWidth: o,
+      isLastColumnSticky: i,
+      hasShadowRight: l
+    };
+  }
+  applyCellStyles(e, t, r) {
+    const { leftOffsetForStickyColumn: s, columnWidth: o, isLastColumnSticky: i, hasShadowRight: l } = r;
+    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !f() && (t.sticky && !i && (e.classList.add("table-cell--is-sticky"), e.style.left = s + "px", l && e.classList.add("table-cell--has-shadow-right")), i && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
+  }
+  applyColumnStyles(e, t) {
+    if (f())
+      return;
+    const { leftOffsetForStickyColumn: r, isLastColumnSticky: s, hasShadowRight: o } = t;
+    e.sticky && !s && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", o && e.classList.add("table-column--has-shadow-right")), s && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
+  }
+  getLeftOffsetForStickyColumn(e, t) {
+    return e.slice(0, t).reduce((r, s) => {
+      if (s.sticky)
+        return r += s.getBoundingClientRect().width, r;
+    }, 0);
+  }
+  hasStickyColumnsToRight(e, t) {
+    return e.slice(t + 1, e.length - 1).some((r) => r.sticky);
+  }
+  updateEmptyState() {
+    const e = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(e) || e.children.length === 0;
+  }
+  updateLiveRegionText(e, t = {}) {
+    let r = e ? this.dragDropInstructions[e] : "";
+    for (const [s, o] of Object.entries(t != null ? t : {}))
+      r = r.replaceAll(`{${s}}`, String(o));
+    r !== this.liveRegionText && (this.liveRegionText = r);
+  }
+  toggleKeyboardMove(e) {
+    this.movingViaKeyboard ? this.endKeyboardMove(e) : this.startKeyboardMove(e);
+  }
+  startKeyboardMove(e) {
+    this.movingViaKeyboard = !0, this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(e), e.classList.add("table-row--moving"), this.updateLiveRegionText("start", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    });
+  }
+  endKeyboardMove(e) {
+    this.movingViaKeyboard = !1, e.classList.remove("table-row--moving"), this.updateLiveRegionText("end", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.dropRow.emit({
+      item: e,
+      newIndex: Array.from(this.dragDropContainer.children).indexOf(e),
+      oldIndex: this.positionBeforeKeyboardMove,
+      itemId: e.id,
+      newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) < this.dragDropContainer.children.length - 1 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) + 1].id : void 0,
+      newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) > 0 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) - 1].id : void 0
+    }), this.positionBeforeKeyboardMove = void 0;
+  }
+  cancelKeyboardMove() {
+    if (!this.movingViaKeyboard)
+      return;
+    const e = this.el.querySelector(".table-row--moving");
+    !e || (e.classList.remove("table-row--moving"), this.movingViaKeyboard = !1, this.positionBeforeKeyboardMove !== void 0 && this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[this.positionBeforeKeyboardMove]));
+  }
+  moveRow(e, t) {
+    if (!this.movingViaKeyboard)
+      return;
+    let r;
+    if (t === "up") {
+      const s = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.max(0, s - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
+    } else {
+      const s = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.min(this.dragDropContainer.children.length - 1, s + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
+    }
+    this.updateLiveRegionText("moved", {
+      position: r + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.focusDragHandleOfRow(e);
+  }
+  focusDragHandleOfRow(e) {
+    var r, s;
+    const t = (r = T(e, this.dragDropHandle)) == null ? void 0 : r[0];
+    t.tagName === "BUTTON" ? t.focus() : (s = t.querySelector("button")) == null || s.focus();
+  }
+  render() {
+    const e = Boolean(this.el.querySelector('[slot="empty"]')), t = O("table", {
+      "table--show-empty-state": this.empty && !this.loading,
+      "table--keyboard-move": this.movingViaKeyboard
+    });
+    return a(_, { key: "e41b28f7ffc2fc41c85dd0487a6c1d5f20d98b7d" }, a("div", { key: "5cae015add6220fad31457dca41d4a15c99127a3", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "227c462b2be6f6559206655b0e7e8cf0e65d5958" }, a("span", { key: "2d57cbeb5ef4b87c7592b0caff4a2aeecd3722a0", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "fcb2fe91411b3eb75f3c20731091187bd7a38bde", 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: "a06344b12dfbd8f7d0901bcd64cf31bcb416748f", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "3fd124dd8683c56dabc369bcac0a27788a790684" }, a("div", { key: "95c6b609cf6ab38a634d87a1dc5e127311c6ca25", id: "caption" }, this.caption)), a("div", { key: "1f0a99b1419928db2bd98ac23825820245b6bac0", role: "rowgroup" }, a("div", { key: "51ea482283617aaa43d929295b5b8fa9bb9d4dda", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "413bbc654dcb67ef0c5660cf1f94f586f91ffe3e", name: "columns" }))), a("div", { key: "cf8ca259e41d2bbef3b45c7f31e1833f4d5cc0a0", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "d4dec8c5679bf52155385f69fdce7bbf3f2fa0e5", name: "rows" }), a("div", { key: "51c9df848f1815a6fe41878fd9b163e8b911ec22", class: "table__empty-row", role: "row" }, a("div", { key: "e3db6aebfe75a357e70042153b24b593aa1a8366", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "a2941a9566591c25669c5993fd9449696339ab90", name: "empty" }), !e && a("swirl-text", { key: "33440c50bcdf0a8bb4f6bc5c5fbd79e3cafafc8e", align: "center", size: "sm" }, this.emptyStateLabel))))))));
+  }
+  get el() {
+    return k(this);
+  }
+  static get watchers() {
+    return {
+      enableDragDrop: ["handleEnableDragDropChange"]
+    };
+  }
+};
+W.style = K;
+export {
+  W as swirl_table
+};