@getflip/swirl-components-react 0.424.0 → 0.425.0

package/dist/swirl-symbol-xing.entry.58dc5320.js

@@ -0,0 +1,17 @@
+import { r as i, h as e, F as C } from "./index.0da8f9f2.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: "f01045e7495841bd85f4ee865e63ca57ed377a8b", 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: "93ee4db4d89a98d121f0323c61c3fb1b1fdc8faa" }, e("path", { key: "6afde4a73b132fdd6f5383efa1e26524d212000d", 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.8d1bd945.js

@@ -0,0 +1,17 @@
+import { r as t, h as e, F as i } from "./index.0da8f9f2.js";
+import { c as a } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:inline-flex}", o = class {
+  constructor(s) {
+    t(this, s), this.size = 24;
+  }
+  render() {
+    const s = a("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return e("svg", { key: "3bb0dad677622e01bdea21fa32c4c69af79fccce", 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: "08c1b4d96138229ebdaa4df4eace6d2de016a525" }, e("path", { key: "824622a1a82def72bd488aa0d4517261c87835d8", 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" })));
+  }
+};
+o.style = r;
+export {
+  o as swirl_symbol_youtube
+};

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

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

package/dist/swirl-tab-bar.entry.854c5bd0.js

@@ -0,0 +1,66 @@
+import { r as l, c as s, h as b, H as o, g as c } from "./index.0da8f9f2.js";
+import { c as n } from "./index-orsBiyT_.fc4357c3.js";
+import { n as d } from "./utils-wi_3Z3FQ.29a3aebe.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: "281aeb39ec1dad585e2d528867b95eae025954d4" }, b("div", { key: "0563370c98c70a77e0fb2b763fa1314e71f629e9", "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.7e7410ed.js

@@ -0,0 +1,17 @@
+import { r as t, h as s, H as i } from "./index.0da8f9f2.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const e = ":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}", r = class {
+  constructor(a) {
+    t(this, a), this.padding = "8";
+  }
+  render() {
+    const a = c("tab", { "tab--active": this.active });
+    return s(i, { key: "4dcaa666ac2c76ef69a3db108fec8d9261f0c2c9", "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: "d4be897cca0b201d4b72b400f6a7433ccf86921c" }));
+  }
+};
+r.style = e;
+export {
+  r as swirl_tab
+};

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

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

package/dist/swirl-table-column.entry.f4bf409e.js

@@ -0,0 +1,34 @@
+import { r as o, h as e, H as r, g as l } from "./index.0da8f9f2.js";
+import { c as n } from "./index-orsBiyT_.fc4357c3.js";
+import { l as d } from "./utils-wi_3Z3FQ.29a3aebe.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 || ""
+    }, 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 e(r, { key: "56a69546db8dbd5233fff55c16a7f56c27c6322d", "aria-sort": this.sort, class: i, role: "columnheader", style: s }, e("span", { key: "53af8c45f85e1ab805f95c77022483850ca4dfeb" }, e("slot", { key: "8817e0f568482f3b5c8ce027149a082c25097a70" })), this.sortable && e("span", { key: "100e907905c4df26c1eec5300d8cbbe6ddf5e888", class: "table-column__sort-indicator" }, this.sort === "ascending" && e("swirl-icon-arrow-upward", { key: "3c0b6ef134b06d4add186e5c761759aa64c9ea8d", "aria-hidden": "true", size: 20 }), this.sort === "descending" && e("swirl-icon-arrow-downward", { key: "441cacfb5b3c1e9f58f2820f3aa2d17332a9c6e2", "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.6c074f02.js

@@ -0,0 +1,35 @@
+import { r as o, h as e, H as l, g as a } from "./index.0da8f9f2.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: "7cb602719c705834467d4e7cfe03e993972355dd", class: "table-row-group", role: "rowgroup" }, e("div", { key: "edf336a7f0bec16989c974abb970bde9beea87ce", class: "table-row-group__header-row", role: "row", ref: (s) => this.headerRowElement = s }, this.collapsible && e("swirl-button", { key: "4092807f1c430052ac741a3fada25761e296e9ce", 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: "70b2efea56e218166deca4e727dceb08f2579164", "aria-rowspan": i, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && e("span", { key: "2692141b97f44e5e6313628edf3b574dadfd1d84", class: "table-row-group__tooltip" }, e("swirl-tooltip", { key: "94ac90fb39c8b083969e8d3f49df48326f5070b3", content: this.tooltip, position: "top", positioning: "fixed" }, e("swirl-icon-info", { key: "3ea91ba574a9b37a6d11b0e289a4985d337defda", size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" }))))), e("div", { key: "b12f5a2d7e32e53758baeaafc0fb444c73269d73", 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: "92831890e3f8d6f1b24cc1d28886744f4d27eb6c" })));
+  }
+  get el() {
+    return a(this);
+  }
+};
+n.style = r;
+export {
+  n as swirl_table_row_group
+};

package/dist/swirl-table-row.entry.5b12076d.js

@@ -0,0 +1,27 @@
+import { r, h as o, H as e, g as s } from "./index.0da8f9f2.js";
+import { c as a } from "./index-orsBiyT_.fc4357c3.js";
+import { l } from "./utils-wi_3Z3FQ.29a3aebe.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(t) {
+    r(this, t);
+  }
+  componentDidLoad() {
+    const t = l(this.el, "swirl-table");
+    t == null || t.rerender();
+  }
+  render() {
+    const t = a("table-row", {
+      "table-row--highlighted": this.highlighted
+    });
+    return o(e, { key: "2ee26531571014d6d1570560b908c2ccc10df963", "aria-rowindex": this.index, class: t, role: "row" }, o("slot", { key: "6a828dd95f6229da74b8f6b0eacc9455a0af7aba" }));
+  }
+  get el() {
+    return s(this);
+  }
+};
+d.style = i;
+export {
+  d as swirl_table_row
+};

package/dist/swirl-table.entry.5bac2b25.js

@@ -0,0 +1,336 @@
+import { r as x, c as R, h as a, H as _, g as k } from "./index.0da8f9f2.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-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+var g, v;
+function E() {
+  if (v)
+    return g;
+  v = 1, g = function(o) {
+    var s = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, n = void 0, l = void 0, u = void 0, d = [];
+    return function() {
+      var y = e(s), 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 && i.leading)
+        return i.accumulate ? Promise.resolve(o.call(this, [c])).then(function(b) {
+          return b[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), i.accumulate) {
+        var S = d.length - 1;
+        return l.promise.then(function(b) {
+          return b[S];
+        });
+      }
+      return l.promise;
+    };
+    function C() {
+      var p = l;
+      clearTimeout(u), Promise.resolve(i.accumulate ? o.call(this, d) : o.apply(this, d[d.length - 1])).then(p.resolve, p.reject), d = [], l = null;
+    }
+  };
+  function e(r) {
+    return typeof r == "function" ? r() : r;
+  }
+  function t() {
+    var r = {};
+    return r.promise = new Promise(function(o, s) {
+      r.resolve = o, r.reject = s;
+    }), r;
+  }
+  return g;
+}
+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--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 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: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 o;
+      if (this.movingViaKeyboard) {
+        const s = this.el.querySelector(".table-row--moving");
+        s && this.focusDragHandleOfRow(s);
+      }
+      const r = !!((o = t.target) != null && o.closest(this.dragDropHandle));
+      this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
+    }, this.onBlur = (t) => {
+      const r = t.relatedTarget, o = !!(r != null && r.closest(this.dragDropHandle));
+      this.el.contains(r) && o || this.liveRegionText !== "" && this.updateLiveRegionText();
+    }, this.onKeyDown = (t) => {
+      var s, i;
+      if (!this.enableDragDrop)
+        return;
+      const r = (s = t.target) == null ? void 0 : s.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, 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(() => {
+      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 l;
+          r.stopPropagation();
+          const { to: o, newIndex: s, oldIndex: i, item: n } = r;
+          this.dropRow.emit({
+            newIndex: s,
+            oldIndex: i,
+            item: n,
+            itemId: (l = n.id) != null ? l : n.querySelector(":scope > swirl-table-row").id,
+            newNextSiblingItemId: s < o.children.length - 1 ? o.children[s + 1].id : void 0,
+            newPrevSiblingItemId: s > 0 ? o.children[s - 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, 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"));
+  }
+  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((o) => {
+      const s = o.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(s) || (o.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
+    });
+  }
+  layOutCellsAndColumns() {
+    const e = this.getColumns(), t = this.getCells();
+    e.forEach((r, o) => {
+      const s = this.getCellsForColumn(t, e, o), i = this.calculateColumnProperties(r, e, o);
+      s.forEach((n) => this.applyCellStyles(n, r, i)), this.applyColumnStyles(r, i);
+    });
+  }
+  getCellsForColumn(e, t, r) {
+    return e.filter((o, s) => (r - s) % t.length === 0);
+  }
+  calculateColumnProperties(e, t, r) {
+    const o = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, s = `${e.getBoundingClientRect().width}px`, i = e.sticky && t.length === r + 1, n = e.sticky && !this.hasStickyColumnsToRight(t, r);
+    return {
+      leftOffsetForStickyColumn: o,
+      columnWidth: s,
+      isLastColumnSticky: i,
+      hasShadowRight: n
+    };
+  }
+  applyCellStyles(e, t, r) {
+    const { leftOffsetForStickyColumn: o, columnWidth: s, isLastColumnSticky: i, hasShadowRight: n } = r;
+    e.style.flex = Boolean(s) ? `0 0 ${s}` : "", !f() && (t.sticky && !i && (e.classList.add("table-cell--is-sticky"), e.style.left = o + "px", n && 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: o, hasShadowRight: s } = t;
+    e.sticky && !o && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", s && 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, o) => {
+      if (o.sticky)
+        return r += o.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 [o, s] of Object.entries(t != null ? t : {}))
+      r = r.replaceAll(`{${o}}`, String(s));
+    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 o = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.max(0, o - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
+    } else {
+      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,
+      rowCount: this.dragDropContainer.children.length
+    }), this.focusDragHandleOfRow(e);
+  }
+  focusDragHandleOfRow(e) {
+    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 = 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: "58cb39e970718c947af8fb05e49327f69ce52406" }, a("div", { key: "ccc4d4c35f16a0250bca6473848ec928a20d69f1", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "984ee69c68a1f7ede7c68d11e08ab87677c75d8c" }, a("span", { key: "7a27389724c8c0d877c79af23589b637e44d5669", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "d17f542eac55c6da592fc2ab12d838e30ef318e6", 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: "dd983c262ce853828b3040c9f97c510c769662e3", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "031594755193d7ca2e0f8624afd79ec38ac0dec7" }, a("div", { key: "7b76523681ef767eb7a5805cc45da2259d6b9ce5", id: "caption" }, this.caption)), a("div", { key: "ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1", role: "rowgroup" }, a("div", { key: "5263be7e317340491ee5890a1a2e5d25fcba06d5", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e", name: "columns" }))), a("div", { key: "32c054e3e9f63439efb8f9cf9633f5b628a789e0", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "2f5b748c60f91dbe4df98d0f18b367f8292100d0", name: "rows" }), a("div", { key: "b51e7e34b4d4e1c4044f9480a0a115393064d221", class: "table__empty-row", role: "row" }, a("div", { key: "1cb8061bef8a30965ea023b31dd0fcfac0276f26", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "e512da95e312bb19dca9b36e0092a0001810eda7", name: "empty" }), !e && a("swirl-text", { key: "ab17ca80ff8a609d5eaa4addee7d3358791bc11d", 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
+};