@getflip/swirl-components-react 0.450.0 → 0.451.0

package/dist/swirl-symbol-xing.entry.e8443373.js

@@ -0,0 +1,17 @@
+import { r as C, h as i, F as e } from "./index.bce92426.js";
+import { c as t } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:inline-flex}", a = class {
+  constructor(s) {
+    C(this, s), this.size = 24;
+  }
+  render() {
+    const s = t("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return i("svg", { key: "a78d8f67433f578d928a890231e2d5c5aec564fe", class: s, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, i(e, { key: "aa90fdd7fbd7524dc797b846fd25aa01f1cabaf0" }, i("path", { key: "298634f4f409880d9adb4d396420253af1ccf7cc", 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" })));
+  }
+};
+a.style = r;
+export {
+  a as swirl_symbol_xing
+};

package/dist/swirl-symbol-youtube.entry.800d24ca.js

@@ -0,0 +1,17 @@
+import { r as t, h as e, F as i } from "./index.bce92426.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: "12c5fc621675f2b20b373aff965dcfe34e31e64d", 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: "015bc4f15d14a8d93a31a614b962abb4918c8da6" }, e("path", { key: "d6db0b672337e83182cdd123bb051753307dcfff", 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.889f5a40.js

@@ -0,0 +1,16 @@
+import { r as i, h as e, H as t } from "./index.bce92426.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: "3bd2a8f16b576638c886c7de1b8dfa3b0cd4e99b" }, e(s, { key: "ec643d88a65b3f86f348ba6e42847e240d55f83b", size: this.size }));
+  }
+};
+o.style = r;
+export {
+  o as swirl_symbol
+};

package/dist/swirl-tab-bar.entry.c003b69a.js

@@ -0,0 +1,66 @@
+import { r as l, c as s, h as b, H as o, g as c } from "./index.bce92426.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: "ccacafa2d53cd21fb467e5563034e6992f1d37ce" }, b("div", { key: "56f60e47107ace378f7531588be9352cb21fb449", "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.fb42f1a3.js

@@ -0,0 +1,17 @@
+import { r as t, h as s, H as i } from "./index.bce92426.js";
+import { c as e } 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 = e("tab", { "tab--active": this.active });
+    return s(i, { key: "01c237250ff056a0d58736f28731818d197ab1e2", "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: "45c1f4a8cafdd3f701c27971273ff36a3b36aca9" }));
+  }
+};
+o.style = r;
+export {
+  o as swirl_tab
+};

package/dist/swirl-table-cell.entry.fbbdc845.js

@@ -0,0 +1,15 @@
+import { r as a, h as s, H as t } from "./index.bce92426.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: "49a9f1b7b07b92c2edf621f1adca7984b1c9d12c", class: "table-cell", role: "cell" }, s("slot", { key: "15971264057317f4d4bceb5070a28a40b6e8ba3b" }));
+  }
+};
+l.style = o;
+export {
+  l as swirl_table_cell
+};

package/dist/swirl-table-column.entry.876a12d5.js

@@ -0,0 +1,34 @@
+import { r as o, h as t, H as r, g as l } from "./index.bce92426.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(s) {
+    o(this, s), this.variant = "default", this.minWidth = "fit-content";
+  }
+  componentDidRender() {
+    const s = d(this.el, "swirl-table");
+    s == null || s.rerender();
+  }
+  render() {
+    var a;
+    const s = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || ""
+    }, e = (a = this.variant) != null ? a : "default", i = n("table-column", {
+      "table-column--default": e === "default",
+      "table-column--sunken": e === "sunken",
+      "table-column--raised": e === "raised"
+    });
+    return t(r, { key: "d075df34cbc514382510e03e80f18431dac146e8", "aria-sort": this.sort, class: i, role: "columnheader", style: s }, t("span", { key: "650882ba63abcc428b0249e07695cbfb4d5c87d2" }, t("slot", { key: "3278596fac8efc45cdd39aa43dd8609871ba8d49" })), this.sortable && t("span", { key: "ac52d4ad58348fdf7734ef43608bd25279752ba9", class: "table-column__sort-indicator" }, this.sort === "ascending" && t("swirl-icon-arrow-upward", { key: "24b1122e26ac1723dba4707b097b60b5f80bd85b", "aria-hidden": "true", size: 20 }), this.sort === "descending" && t("swirl-icon-arrow-downward", { key: "c96f6139a4219565f7ac2774f58f9cbab501c931", "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.1b3e4eb1.js

@@ -0,0 +1,35 @@
+import { r as o, h as e, H as a, g as l } from "./index.bce92426.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(a, { key: "7cc55b1cf9d7fd1a0c069836266e80d17115d451", class: "table-row-group", role: "rowgroup" }, e("div", { key: "c3b38c0c62f4e3a17ea1e2e35f1ede89b4759b70", class: "table-row-group__header-row", role: "row", ref: (s) => this.headerRowElement = s }, this.collapsible && e("swirl-button", { key: "483c6365c5ecb35304f888e668bf0bca42dd3e25", 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: "00297ac1be663ff719bd0680c9df531600786cdd", "aria-rowspan": i, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && e("span", { key: "8927be63f4b95c365d4d7cf08e14d7ddc2c9f197", class: "table-row-group__tooltip" }, e("swirl-tooltip", { key: "7f75f00ada972cc5aa61492da53e01af3cf6a6c9", content: this.tooltip, position: "top" }, e("swirl-icon-info", { key: "a69ba83d4a7a716ab9698a58d3f6f3dc6ced95bd", size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" }))))), e("div", { key: "61c51c1aeac12fbb2e7d5b38a1448cf49cef5d7e", 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: "dcd21ea42cf8be621e62f928da4a743e14ce7d7e" })));
+  }
+  get el() {
+    return l(this);
+  }
+};
+n.style = r;
+export {
+  n as swirl_table_row_group
+};

package/dist/swirl-table-row.entry.9ed0a8a0.js

@@ -0,0 +1,27 @@
+import { r as o, h as t, H as r, g as s } from "./index.bce92426.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: "176abe247942e21dbbe04e6b237a0123c4797c6b", "aria-rowindex": this.index, class: e, role: "row" }, t("slot", { key: "d882d724f3c559aae91e29a9f4ff8ab176ec278d" }));
+  }
+  get el() {
+    return s(this);
+  }
+};
+d.style = i;
+export {
+  d as swirl_table_row
+};

package/dist/swirl-table.entry.03403a4c.js

@@ -0,0 +1,337 @@
+import { r as x, c as R, h as a, H as _, g as k } from "./index.bce92426.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, u = 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(u) : n = t(), d.push(c), u = 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 b = n;
+      clearTimeout(u), Promise.resolve(i.accumulate ? s.call(this, d) : s.apply(this, d[d.length - 1])).then(b.resolve, b.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: "46d675ece1a7b46876737062746db69a19295dfa" }, a("div", { key: "69d0a47f8a15d9231d8c13d0404c4c9e082f2a45", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "7df7e892ed56c8bf7eb73de7a71f5a2ddc8f0836" }, a("span", { key: "d8890c6311d6ce4f1e4de0a34c4a7b93fdddca3c", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "d6651c11c18b35b71ecb9c99cfdf178a5102d527", 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: "75172769ff332c17a2322e93e4e921da5ca1af3f", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "26dacce7d235f14a08eae8393170866a190d2480" }, a("div", { key: "a16e2f210eede760500f3bd1c0f7a390a38ca0cc", id: "caption" }, this.caption)), a("div", { key: "e8229c4050caf1d362794b84e5feebb88a0f0ed6", role: "rowgroup" }, a("div", { key: "c818749d291b4fc31d63364630f04bc4f1f7bafb", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "b4d31c6ecb1fa0184ac1a4cfe88ca0a8d8650f65", name: "columns" }))), a("div", { key: "568d03e1fe1882a0683850a1a218b0c3651a1484", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "8a1c0072e45f679cd77249a04cd726659bb334eb", name: "rows" }), a("div", { key: "27d42992a4ca6dda40fc394597aebaad41bc5eb3", class: "table__empty-row", role: "row" }, a("div", { key: "02626becf66fe815d129eb63b13abca747383a59", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "9000edd134d818b8cd0a22258d4b8cff8248e9af", name: "empty" }), !e && a("swirl-text", { key: "3ca0b2eab927439d2fda29b8d0e4942782165fb6", 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
+};