@getflip/swirl-components-react 0.10.0 → 0.12.0

package/dist/swirl-resource-list-file-item.entry.66329d69.js

@@ -0,0 +1,37 @@
+import { r as a, c as n, h as s, H as c } from "./index.149af511.js";
+import { c as h } from "./index-47862d62.75c2fcf1.js";
+import { g as d } from "./utils-33d31b58.1488fcfe.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const m = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{outline:none}.resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}', p = class {
+  constructor(i) {
+    a(this, i), this.remove = n(this, "remove", 7), this.icon = "<swirl-icon-file></swirl-icon-file>", this.removeButtonLabel = "Remove file", this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (e) => {
+      this.forceIconProps(e.matches);
+    };
+  }
+  componentDidLoad() {
+    var i, e;
+    this.forceIconProps(this.desktopMediaQuery.matches), (e = (i = this.desktopMediaQuery).addEventListener) === null || e === void 0 || e.call(i, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var i, e;
+    (e = (i = this.desktopMediaQuery).removeEventListener) === null || e === void 0 || e.call(i, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(i) {
+    if (!Boolean(this.iconEl))
+      return;
+    const e = this.iconEl.children[0];
+    e == null || e.setAttribute("size", i ? "20" : "24");
+  }
+  render() {
+    const i = Boolean(this.errorMessage), e = !i && Boolean(this.description), t = !i && this.loading, r = this.removable && !t, o = h("resource-list-file-item", {
+      "resource-list-file-item--has-control": t || r
+    });
+    return s(c, { role: "row" }, s("div", { class: o, part: "resource-list-file-item", role: "gridcell" }, s("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (l) => this.iconEl = l }), s("span", { class: "resource-list-file-item__label-container" }, s("span", { class: "resource-list-file-item__label", id: "label" }, this.label), e && s("span", { class: "resource-list-file-item__description" }, this.description), i && s("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, s("swirl-inline-error", { message: this.errorMessage, size: "s" }))), t && s("span", { class: "resource-list-file-item__spinner" }, s("swirl-spinner", { size: "s" })), r && s("span", { class: "resource-list-file-item__remove-button" }, s("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))));
+  }
+};
+p.style = m;
+export {
+  p as swirl_resource_list_file_item
+};

package/dist/swirl-search.entry.364d373f.js

@@ -0,0 +1,48 @@
+import { r as i, c as r, h as a, H as t } from "./index.149af511.js";
+import { c } from "./index-47862d62.75c2fcf1.js";
+import { g as o } from "./utils-33d31b58.1488fcfe.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const l = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8))}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}", n = class {
+  constructor(e) {
+    i(this, e), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.desktopMediaQuery = o(), this.desktopMediaQueryHandler = (s) => {
+      this.forceIconProps(s.matches);
+    }, this.clear = () => {
+      this.input.value = "", this.input.focus();
+    }, this.onBlur = (s) => {
+      this.inputBlur.emit(s);
+    }, this.onChange = (s) => {
+      this.valueChange.emit(s.target.value);
+    }, this.onFocus = (s) => {
+      this.inputFocus.emit(s);
+    };
+  }
+  componentDidLoad() {
+    var e, s;
+    this.forceIconProps(this.desktopMediaQuery.matches), (s = (e = this.desktopMediaQuery).addEventListener) === null || s === void 0 || s.call(e, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var e, s;
+    (s = (e = this.desktopMediaQuery).removeEventListener) === null || s === void 0 || s.call(e, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(e) {
+    if (!Boolean(this.iconEl))
+      return;
+    const s = this.iconEl.children[0];
+    s == null || s.setAttribute("size", e ? "20" : "24");
+  }
+  onKeyDown(e) {
+    (e.code === "KeyK" || e.code === "Slash") && (e.ctrlKey || e.metaKey) && this.input.focus();
+  }
+  render() {
+    const e = c("search", {
+      "search--disabled": this.disabled
+    });
+    return a(t, null, a("span", { class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { class: "search__icon" }), a("input", { "aria-disabled": this.disabled ? "true" : void 0, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, placeholder: this.placeholder, ref: (s) => this.input = s, type: "search", value: this.value }), !this.disabled && a("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, a("swirl-icon-cancel", null))));
+  }
+};
+n.style = l;
+export {
+  n as swirl_search
+};

package/dist/swirl-select.entry.95b1f5bc.js

@@ -0,0 +1,49 @@
+import { r as n, c as r, h as e, H as c, g as d } from "./index.149af511.js";
+import { c as h } from "./index-47862d62.75c2fcf1.js";
+import { q as p } from "./utils-33d31b58.1488fcfe.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const u = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select--disabled.sc-swirl-select .select__label.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{top:0}.select__label.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__label.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__indicator.sc-swirl-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}", v = class {
+  constructor(i) {
+    n(this, i), this.valueChange = r(this, "valueChange", 7), this.options = [], this.select = (s) => {
+      this.value = s.detail, this.valueChange.emit(this.value), this.multiSelect || this.popover.close();
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = () => {
+      this.open = !0;
+    }, this.onClose = () => {
+      this.open = !1;
+    }, this.onKeyDown = (s) => {
+      (s.code === "Space" || s.code === "Enter") && (s.preventDefault(), this.popover.open());
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+    });
+  }
+  onWindowFocusIn(i) {
+    i.target === this.el.querySelector("input") && i.stopImmediatePropagation();
+  }
+  updateOptions() {
+    this.options = p(this.el, "swirl-option-list-item");
+  }
+  render() {
+    const i = Boolean(this.value) ? this.value.map((t) => {
+      var l;
+      return (l = this.options.find((a) => a.value === t)) === null || l === void 0 ? void 0 : l.label;
+    }).join(", ") : "", s = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, o = h("select", {
+      "select--disabled": this.disabled,
+      "select--inline": this.inline
+    });
+    return e(c, { onKeyDown: this.onKeyDown }, e("div", { class: o }, e("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": s, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: !0, type: "text", value: i }), e("span", { class: "select__indicator" }, this.open ? e("swirl-icon-expand-less", null) : e("swirl-icon-expand-more", null)), e("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: !1, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (t) => this.popover = t, trigger: "trigger", useContainerWidth: "swirl-form-control" }, e("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, e("slot", { onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+v.style = u;
+export {
+  v as swirl_select
+};

package/dist/swirl-separator.entry.7c230cd1.js

@@ -0,0 +1,15 @@
+import { r as a, h as r, H as t } from "./index.149af511.js";
+import "react";
+import "react-dom";
+const o = ":host{display:flex;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:center}:host *{box-sizing:border-box}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}", e = class {
+  constructor(s) {
+    a(this, s);
+  }
+  render() {
+    return r(t, { class: "separator", role: "separator" }, r("span", { class: "separator__line" }));
+  }
+};
+e.style = o;
+export {
+  e as swirl_separator
+};

package/dist/{flip-stack.entry.a5b14f3a.js → swirl-stack.entry.cb1d54ae.js}

@@ -1,8 +1,8 @@
-import { r as i, h as s, H as e } from "./index.6f8c9509.js";
-import { c as n } from "./index-6d2e18c6.289636d4.js";
+import { r as i, h as s, H as e } from "./index.149af511.js";
+import { c as n } from "./index-47862d62.75c2fcf1.js";
 import "react";
 import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
 const c = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}", r = class {
   constructor(t) {
     i(this, t), this.align = "start", this.as = "div", this.justify = "start", this.orientation = "vertical", this.spacing = "0", this.wrap = !1;
@@ -14,5 +14,5 @@ const c = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{d
 };
 r.style = c;
 export {
-  r as flip_stack
+  r as swirl_stack
 };

package/dist/swirl-switch.entry.895cfbbd.js

@@ -0,0 +1,56 @@
+import { r as h, c as n, h as e, H as a, g as o } from "./index.149af511.js";
+import { c as l } from "./index-47862d62.75c2fcf1.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const d = `.sc-swirl-switch-h{display:inline-flex}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),
+      0 0 0 0.1875rem var(--s-focus-default)}.switch--size-m.sc-swirl-switch .switch__control.sc-swirl-switch{width:2.75rem;height:1.5rem;border-radius:calc(1.5rem / 2)}.switch--size-m.sc-swirl-switch .switch__thumb.sc-swirl-switch{width:1.25rem;height:1.25rem}.switch--on.switch--size-m.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch__control.sc-swirl-switch{position:relative;width:1.875rem;height:1.125rem;flex-shrink:0;border-radius:calc(1.125rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:0.875rem;height:0.875rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}.switch__label.sc-swirl-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base)}`, w = class {
+  constructor(c) {
+    h(this, c), this.valueChange = n(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.size = "m", this.dragging = !1, this.recentlyDragged = !1, this.onChange = () => {
+      if (!this.dragging) {
+        if (this.recentlyDragged) {
+          this.recentlyDragged = !1;
+          return;
+        }
+        this.checked = !this.checked, this.valueChange.emit(this.checked);
+      }
+    }, this.onStartDrag = () => {
+      this.disabled || (this.dragging = !0, this.thumb.style.transition = "none");
+    }, this.onEndDrag = () => {
+      if (!this.disabled) {
+        if (this.recentlyDragged) {
+          const i = this.control.getBoundingClientRect(), r = this.thumb.getBoundingClientRect(), s = this.thumb.offsetLeft + r.width / 2 > i.width / 2;
+          this.checked !== s && (this.checked = s, this.valueChange.emit(s));
+        }
+        this.thumb.style.left = "", this.thumb.style.transition = "", this.dragging = !1, setTimeout(() => {
+          this.recentlyDragged = !1;
+        });
+      }
+    }, this.onDrag = (i) => {
+      if (!this.dragging)
+        return;
+      this.recentlyDragged = !0;
+      const r = this.control.getBoundingClientRect(), s = this.thumb.getBoundingClientRect();
+      let t = Math.round(i.offsetX - s.width / 2);
+      t < 0 && (t = 0), t > Math.round(r.width - s.width) && (t = Math.round(r.width - s.width)), this.thumb.style.left = `${t}px`;
+    };
+  }
+  onWindowPointerUp() {
+    this.onEndDrag();
+  }
+  render() {
+    const c = !this.checked, i = this.checked, r = i ? "true" : "false", s = l("switch", `switch--size-${this.size}`, {
+      "switch--off": c,
+      "switch--on": i,
+      "switch--disabled": this.disabled
+    });
+    return e(a, null, e("label", { class: s, htmlFor: this.inputId }, e("span", { class: "switch__control", onPointerDown: this.onStartDrag, onPointerMove: this.onDrag, onPointerUp: this.onEndDrag, ref: (t) => this.control = t }, e("swirl-visually-hidden", null, e("input", { "aria-checked": r, checked: i, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), e("span", { "aria-hidden": "true", class: "switch__thumb", ref: (t) => this.thumb = t })), this.label && e("span", { class: "switch__label" }, this.label)));
+  }
+  get el() {
+    return o(this);
+  }
+};
+w.style = d;
+export {
+  w as swirl_switch
+};

package/dist/swirl-tab.entry.b870a20f.js

@@ -0,0 +1,18 @@
+import { r as a, h as s, H as i } from "./index.149af511.js";
+import { c as r } from "./index-47862d62.75c2fcf1.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const o = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}", e = class {
+  constructor(t) {
+    a(this, t);
+  }
+  render() {
+    const t = r("tab", { "tab--active": this.active });
+    return s(i, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, s("div", { class: t }, s("slot", null)));
+  }
+};
+e.style = o;
+export {
+  e as swirl_tab
+};

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

@@ -0,0 +1,15 @@
+import { r as a, h as s, H as e } from "./index.149af511.js";
+import "react";
+import "react-dom";
+const t = ":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-background-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}: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(:first-child){border-left:var(--s-border-width-default) solid var(--s-border-default)}:host(:last-child){border-right:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", l = class {
+  constructor(r) {
+    a(this, r);
+  }
+  render() {
+    return s(e, { class: "table-cell", role: "cell" }, s("slot", null));
+  }
+};
+l.style = t;
+export {
+  l as swirl_table_cell
+};

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

@@ -0,0 +1,23 @@
+import { r, h as t, H as e, g as i } from "./index.149af511.js";
+import "react";
+import "react-dom";
+const o = ":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-top:var(--s-border-width-default) solid var(--s-border-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-background-default);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(:first-child){border-left:var(--s-border-width-default) solid var(--s-border-default)}:host(:last-child){border-right:var(--s-border-width-default) solid var(--s-border-default)}: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 *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}", a = class {
+  constructor(s) {
+    r(this, s), this.minWidth = "fit-content";
+  }
+  render() {
+    const s = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || ""
+    };
+    return t(e, { "aria-sort": this.sort, class: "table-column", role: "columnheader", style: s }, t("span", null, t("slot", null)), this.sortable && t("span", { class: "table-column__sort-indicator" }, this.sort === "ascending" && t("swirl-icon-arrow-upward", { "aria-hidden": "true", size: 20 }), this.sort === "descending" && t("swirl-icon-arrow-downward", { "aria-hidden": "true", size: 20 }), !Boolean(this.sort) && " "));
+  }
+  get el() {
+    return i(this);
+  }
+};
+a.style = o;
+export {
+  a as swirl_table_column
+};

package/dist/swirl-table-row-group.entry.85368b7a.js

@@ -0,0 +1,19 @@
+import { r as o, h as r, H as s, g as t } from "./index.149af511.js";
+import "react";
+import "react-dom";
+const a = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{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)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}", l = class {
+  constructor(e) {
+    o(this, e);
+  }
+  render() {
+    const e = this.el.querySelectorAll("swirl-table-row").length;
+    return r(s, { class: "table-row-group", role: "rowgroup" }, r("div", { class: "table-row-group__header-row", role: "row" }, r("span", { "aria-rowspan": e, class: "table-row-group__label", role: "rowheader" }, this.label)), r("slot", null));
+  }
+  get el() {
+    return t(this);
+  }
+};
+l.style = a;
+export {
+  l as swirl_table_row_group
+};

package/dist/swirl-table-row.entry.39f31a4b.js

@@ -0,0 +1,20 @@
+import { r, h as o, H as s } from "./index.149af511.js";
+import { c as e } from "./index-47862d62.75c2fcf1.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const l = ":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 ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", a = class {
+  constructor(t) {
+    r(this, t);
+  }
+  render() {
+    const t = e("table-row", {
+      "table-row--highlighted": this.highlighted
+    });
+    return o(s, { "aria-rowindex": this.index, class: t, role: "row" }, o("slot", null));
+  }
+};
+a.style = l;
+export {
+  a as swirl_table_row
+};

package/dist/swirl-table.entry.cd3a7dde.js

@@ -0,0 +1,141 @@
+import { r as g, h as i, H as _, g as S } from "./index.149af511.js";
+import { i as v } from "./utils-33d31b58.1488fcfe.js";
+import "react";
+import "react-dom";
+var C = function(e) {
+  var a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, n = void 0, r = void 0, c = void 0, o = [];
+  return function() {
+    var w = x(a), h = new Date().getTime(), y = !n || h - n > w;
+    n = h;
+    for (var l = arguments.length, u = Array(l), b = 0; b < l; b++)
+      u[b] = arguments[b];
+    if (y && s.leading)
+      return s.accumulate ? Promise.resolve(e.call(this, [u])).then(function(f) {
+        return f[0];
+      }) : Promise.resolve(e.call.apply(e, [this].concat(u)));
+    if (r ? clearTimeout(c) : r = L(), o.push(u), c = setTimeout(m.bind(this), w), s.accumulate) {
+      var p = o.length - 1;
+      return r.promise.then(function(f) {
+        return f[p];
+      });
+    }
+    return r.promise;
+  };
+  function m() {
+    var d = r;
+    clearTimeout(c), Promise.resolve(s.accumulate ? e.call(this, o) : e.apply(this, o[o.length - 1])).then(d.resolve, d.reject), o = [], r = null;
+  }
+};
+function x(t) {
+  return typeof t == "function" ? t() : t;
+}
+function L() {
+  var t = {};
+  return t.promise = new Promise(function(e, a) {
+    t.resolve = e, t.reject = a;
+  }), t;
+}
+const R = `:host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:0.0625rem 0 0 0 var(--s-border-default),
+    -0.0625rem 0 0 0 var(--s-border-default),
+    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
+    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0.0625rem 0 0 0 var(--s-border-default),
+    -0.0625rem 0 0 0 var(--s-border-default),
+    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
+    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{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;border-right:var(--s-border-width-default) solid var(--s-border-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default);border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.table__empty-row-cell>*{flex-grow:1}`, T = class {
+  constructor(t) {
+    g(this, t), this.emptyStateLabel = "No results found.", this.updateLayout = C(async () => {
+      await this.resetEmptyRowStyles(), await this.resetRowGroupStyles(), await this.resetCellStyles(), await this.resetColumnStyles(), await this.layoutEmptyRow(), await this.layoutRowGroups(), await this.layOutColumns(), this.layOutCells();
+    }, 100), this.onScroll = () => {
+      this.updateScrolledState();
+    };
+  }
+  async componentDidRender() {
+    await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout(), this.updateScrolledState();
+  }
+  updateScrolledState() {
+    const t = v(), e = this.container.scrollWidth > this.container.clientWidth, a = this.container.scrollLeft > 0, s = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
+    e !== this.scrollable && (e && !t ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), a !== this.scrolled && (a && !t ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), s !== this.scrolledToEnd && (s && !t ? 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"));
+  }
+  async resetEmptyRowStyles() {
+    const t = this.el.shadowRoot.querySelector(".table__empty-row");
+    !Boolean(t) || (t.style.width = "", await new Promise((e) => setTimeout(e)));
+  }
+  async resetRowGroupStyles() {
+    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((e) => {
+      e.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
+    }), await new Promise((e) => setTimeout(e));
+  }
+  async resetColumnStyles() {
+    this.getColumns().forEach((e) => {
+      e.classList.remove("table-column--has-shadow"), e.style.right = "", e.style.left = "", e.style.position = "", e.style.zIndex = "";
+    }), await new Promise((e) => setTimeout(e));
+  }
+  async resetCellStyles() {
+    this.getCells().forEach((e) => {
+      e.classList.remove("table-cell--has-shadow"), e.style.flex = "", e.style.left = "", e.style.right = "", e.style.position = "", e.style.zIndex = "";
+    }), await new Promise((e) => setTimeout(e));
+  }
+  async layoutEmptyRow() {
+    const t = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(t))
+      return;
+    const e = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    t.style.width = e;
+  }
+  async layoutRowGroups() {
+    const t = Array.from(this.el.querySelectorAll("swirl-table-row-group")), e = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    t.forEach((a) => {
+      a.shadowRoot.querySelector(".table-row-group__header-row").style.width = e;
+    });
+  }
+  async layOutColumns() {
+    const t = this.getColumns(), a = this.container.clientWidth;
+    t.forEach((s, n) => {
+      var r, c;
+      if (!s.sticky || v())
+        return;
+      const o = n <= Math.floor(t.length / 2), m = (r = t[n + 1]) === null || r === void 0 ? void 0 : r.sticky, d = (c = t[n - 1]) === null || c === void 0 ? void 0 : c.sticky, w = o && m;
+      s.style.zIndex = w ? "1" : "", o && !m || !o && !d ? s.classList.add(o ? "table-column--has-shadow-right" : "table-column--has-shadow-left") : (s.classList.remove("table-column--has-shadow-right"), s.classList.remove("table-column--has-shadow-left"));
+      const y = o ? s.offsetLeft : Math.max(0, a - (s.offsetLeft + s.getBoundingClientRect().width));
+      s.style.position = "sticky", o ? s.style.left = `${y}px` : s.style.right = `${y}px`;
+    }), await new Promise((s) => setTimeout(s));
+  }
+  layOutCells() {
+    const t = this.getColumns(), e = this.getCells();
+    t.forEach((a, s) => {
+      var n, r;
+      const c = e.filter((l, u) => (s - u) % t.length === 0), o = s <= Math.floor(t.length / 2), m = o ? window.getComputedStyle(a).left : window.getComputedStyle(a).right, d = (n = t[s + 1]) === null || n === void 0 ? void 0 : n.sticky, w = (r = t[s - 1]) === null || r === void 0 ? void 0 : r.sticky, h = a.sticky, y = a.width || `${a.getBoundingClientRect().width}px`;
+      c.forEach((l) => {
+        const u = h && o, b = h && !o, p = o && d;
+        if (l.style.flex = Boolean(y) ? `0 0 ${y}` : "", v()) {
+          l.classList.remove("table-cell--has-shadow"), l.style.left = "", l.style.right = "", l.style.position = "", l.style.zIndex = "";
+          return;
+        }
+        l.style.left = u ? m : "", l.style.right = b ? m : "", l.style.position = h ? "sticky" : "", l.style.zIndex = p ? "1" : "", h && (o && !d || !o && !w) ? l.classList.add(o ? "table-cell--has-shadow-right" : "table-cell--has-shadow-left") : (l.classList.remove("table-cell--has-shadow-right"), l.classList.remove("table-cell--has-shadow-left"));
+      });
+    });
+  }
+  updateEmptyState() {
+    const t = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(t) || t.children.length === 0;
+  }
+  render() {
+    return i(_, null, i("div", { class: "table" }, i("div", { class: "table__container", onScroll: this.onScroll, ref: (t) => this.container = t }, i("div", { "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && i("swirl-visually-hidden", null, i("div", { id: "caption" }, this.caption)), i("div", { role: "rowgroup" }, i("div", { class: "table__header", role: "row" }, i("slot", { name: "columns" }))), i("div", { class: "table__body" }, i("slot", { name: "rows" }), this.empty && i("div", { class: "table__empty-row", role: "row" }, i("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, i("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))));
+  }
+  get el() {
+    return S(this);
+  }
+};
+T.style = R;
+export {
+  T as swirl_table
+};

package/dist/{flip-tabs.entry.d3d9f791.js → swirl-tabs.entry.6dbf6d57.js}

@@ -1,9 +1,9 @@
-import { r as i, c as r, h as e, H as o, g as b } from "./index.6f8c9509.js";
-import { c as l } from "./index-6d2e18c6.289636d4.js";
+import { r as i, c as r, h as e, H as o, g as b } from "./index.149af511.js";
+import { c as n } from "./index-47862d62.75c2fcf1.js";
 import "react";
 import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const n = '.sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-flip-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(.tabs__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}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-flip-tabs: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}', c = class {
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const l = '.sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}.tabs__tab-bar.sc-swirl-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-swirl-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-swirl-tabs:focus{outline:none}.tabs__tab.sc-swirl-tabs:focus-visible .tabs__tab-label.sc-swirl-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-swirl-tabs:not(.tabs__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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tabs__tab.sc-swirl-tabs{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tabs__tab-label.sc-swirl-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-swirl-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-swirl-tabs: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}', c = class {
   constructor(t) {
     i(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabs = [], this.onKeyDown = (a) => {
       a.code === "ArrowLeft" ? (a.preventDefault(), this.activatePreviousTab()) : a.code === "ArrowRight" && (a.preventDefault(), this.activateNextTab());
@@ -34,14 +34,14 @@ const n = '.sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-ta
     });
   }
   collectTabs() {
-    if (this.tabs = Array.from(this.el.querySelectorAll("flip-tab")), this.tabs.length === 0)
+    if (this.tabs = Array.from(this.el.querySelectorAll("swirl-tab")), this.tabs.length === 0)
       return;
     const t = this.tabs.find((a) => a.tabId === this.initialTab);
     this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
   }
   render() {
     return e(o, null, e("div", { class: "tabs" }, e("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((t) => {
-      const a = t.tabId === this.activeTab, s = l("tabs__tab", {
+      const a = t.tabId === this.activeTab, s = n("tabs__tab", {
         "tabs__tab--active": a
       });
       return e("button", {
@@ -61,7 +61,7 @@ const n = '.sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-ta
     return b(this);
   }
 };
-c.style = n;
+c.style = l;
 export {
-  c as flip_tabs
+  c as swirl_tabs
 };

package/dist/swirl-tag.entry.b0d8059b.js

@@ -0,0 +1,21 @@
+import { r as s, c as e, h as t, H as n } from "./index.149af511.js";
+import { c as i } from "./index-47862d62.75c2fcf1.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-10467d11.b7d83301.js";
+const c = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-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;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}", l = class {
+  constructor(o) {
+    s(this, o), this.remove = e(this, "remove", 7), this.intent = "default", this.removalButtonLabel = "Remove", this.onRemove = (r) => {
+      var a;
+      (a = this.remove) === null || a === void 0 || a.emit(r);
+    };
+  }
+  render() {
+    const o = i("tag", `tag--intent-${this.intent}`);
+    return t(n, null, t("span", { class: o }, this.label, this.removable && t("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, type: "button" }, t("swirl-icon-close", { size: 16 }))));
+  }
+};
+l.style = c;
+export {
+  l as swirl_tag
+};