@getflip/swirl-components-react 0.506.0 → 0.507.0-beta-20260622113310

package/dist/swirl-table.entry.24397b47.js

@@ -0,0 +1,335 @@
+import { r as x, c as R, h as a, H as _, g as k } from "./index.9d75d0b7.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-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+var g, v;
+function E() {
+  if (v)
+    return g;
+  v = 1, g = function(s) {
+    var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, l = void 0, n = void 0, b = void 0, d = [];
+    return function() {
+      var y = e(o), w = new Date().getTime(), D = !l || w - l > y;
+      l = w;
+      for (var m = arguments.length, c = Array(m), h = 0; h < m; h++)
+        c[h] = arguments[h];
+      if (D && i.leading)
+        return i.accumulate ? Promise.resolve(s.call(this, [c])).then(function(p) {
+          return p[0];
+        }) : Promise.resolve(s.call.apply(s, [this].concat(c)));
+      if (n ? clearTimeout(b) : n = t(), d.push(c), b = setTimeout(C.bind(this), y), i.accumulate) {
+        var S = d.length - 1;
+        return n.promise.then(function(p) {
+          return p[S];
+        });
+      }
+      return n.promise;
+    };
+    function C() {
+      var u = n;
+      clearTimeout(b), Promise.resolve(i.accumulate ? s.call(this, d) : s.apply(this, d[d.length - 1])).then(u.resolve, u.reject), d = [], n = null;
+    }
+  };
+  function e(r) {
+    return typeof r == "function" ? r() : r;
+  }
+  function t() {
+    var r = {};
+    return r.promise = new Promise(function(s, o) {
+      r.resolve = s, r.reject = o;
+    }), r;
+  }
+  return g;
+}
+var q = E(), I = /* @__PURE__ */ L(q);
+const K = () => ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid       var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),     2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px       var(--swirl-table-shadow-rgba),     0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}", B = {
+  end: "Dropped. Final position in table: {position} of {rowCount}.",
+  initial: "Press space to move the row.",
+  moved: "Current position in table: {position} of {rowCount}.",
+  start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."
+}, W = class {
+  constructor(e) {
+    x(this, e), this.dropRow = R(this, "dropRow", 7), this.dragDropInstructions = B, this.emptyStateLabel = "No results found.", this.liveRegionText = "", this.triggerRerender = A(async () => {
+      await this.updateLayout(), this.updateEmptyState();
+    }, 0, !0), this.updateLayout = I(async () => {
+      this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCellsAndColumns(), this.updateScrolledState();
+    }, 16, { leading: !0 }), this.onScroll = () => {
+      this.updateScrolledState();
+    }, this.onFocus = (t) => {
+      var s;
+      if (this.movingViaKeyboard) {
+        const o = this.el.querySelector(".table-row--moving");
+        o && this.focusDragHandleOfRow(o);
+      }
+      const r = !!((s = t.target) != null && s.closest(this.dragDropHandle));
+      this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
+    }, this.onBlur = (t) => {
+      const r = t.relatedTarget, s = !!(r != null && r.closest(this.dragDropHandle));
+      this.el.contains(r) && s || this.liveRegionText !== "" && this.updateLiveRegionText();
+    }, this.onKeyDown = (t) => {
+      var o, i;
+      if (!this.enableDragDrop)
+        return;
+      const r = (o = t.target) == null ? void 0 : o.closest("swirl-table-row");
+      !((i = t.target) != null && i.closest(this.dragDropHandle)) || (t.code === "Space" ? (t.preventDefault(), t.stopPropagation(), this.toggleKeyboardMove(r)) : t.code === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "up")) : t.code === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "down")) : t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.cancelKeyboardMove()));
+    };
+  }
+  async componentDidLoad() {
+    this.setupIntersectionObserver(), this.setupMutationObservers(), queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, r, s;
+    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.columnMutationObserver) == null || t.disconnect(), (r = this.rowMutationObserver) == null || r.disconnect(), (s = this.sortable) == null || s.destroy();
+  }
+  handleEnableDragDropChange() {
+    queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  setupIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0
+    }), this.intersectionObserver.observe(this.container);
+  }
+  setupMutationObservers() {
+    this.columnMutationObserver = new MutationObserver((e) => {
+      e.some((r) => r.addedNodes.length || r.removedNodes.length) && this.updateLayout();
+    }), this.columnMutationObserver.observe(this.headerEl, {
+      childList: !0,
+      subtree: !0
+    }), this.rowMutationObserver = new MutationObserver((e) => {
+      e.some((r) => r.addedNodes.length || r.removedNodes.length) && (this.updateEmptyState(), this.setupDragDrop());
+    }), this.startRowMutationObserver();
+  }
+  startRowMutationObserver() {
+    var e;
+    (e = this.rowMutationObserver) == null || e.observe(this.bodyEl, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  stopRowMutationObserver() {
+    var e;
+    (e = this.rowMutationObserver) == null || e.disconnect();
+  }
+  setupDragDrop() {
+    if (this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop) {
+      if (!!this.el.querySelector("swirl-table-row-group")) {
+        console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
+        return;
+      }
+      if (!this.dragDropHandle) {
+        console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
+        return;
+      }
+      const t = this.el.querySelector('[slot="rows"]');
+      this.dragDropContainer = (t == null ? void 0 : t.tagName) !== "SWIRL-TABLE-ROW" ? t != null ? t : this.bodyEl : this.bodyEl, this.sortable = new M(this.dragDropContainer, {
+        animation: 100,
+        direction: "vertical",
+        handle: this.dragDropHandle,
+        fallbackOnBody: !0,
+        group: `swirl-table-${Math.random().toString().substring(2)}`,
+        onStart: () => {
+          this.stopRowMutationObserver();
+        },
+        onEnd: (r) => {
+          var n;
+          r.stopPropagation();
+          const { to: s, newIndex: o, oldIndex: i, item: l } = r;
+          this.dropRow.emit({
+            newIndex: o,
+            oldIndex: i,
+            item: l,
+            itemId: (n = l.id) != null ? n : l.querySelector(":scope > swirl-table-row").id,
+            newNextSiblingItemId: o < s.children.length - 1 ? s.children[o + 1].id : void 0,
+            newPrevSiblingItemId: o > 0 ? s.children[o - 1].id : void 0
+          }), this.startRowMutationObserver();
+        }
+      });
+    }
+  }
+  async onVisibilityChange(e) {
+    e.some((r) => r.isIntersecting) && setTimeout(async () => {
+      await this.updateLayout();
+    }, 100);
+  }
+  async componentDidRender() {
+    await this.updateLayout(), this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout();
+  }
+  async rerender() {
+    this.triggerRerender();
+  }
+  resetEmptyRowStyles() {
+    const e = this.el.querySelector(".table__empty-row");
+    !Boolean(e) || (e.style.width = "");
+  }
+  resetRowGroupStyles() {
+    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t) => {
+      const r = t.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(r) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
+    });
+  }
+  resetColumnStyles() {
+    this.getColumns().forEach((t) => {
+      t.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    this.getCells().forEach((t) => {
+      t.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  updateScrolledState() {
+    const e = f();
+    if (this.container === void 0)
+      return;
+    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, s = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
+    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), r !== this.scrolled && (r && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), s !== this.scrolledToEnd && (s && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
+  }
+  getColumns() {
+    return Array.from(this.el.querySelectorAll("swirl-table-column"));
+  }
+  getCells() {
+    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
+  }
+  layoutEmptyRow() {
+    const e = this.el.querySelector(".table__empty-row");
+    if (!Boolean(e))
+      return;
+    const t = `${this.el.querySelector(".table__container").scrollWidth}px`;
+    e.style.width = t;
+  }
+  layoutRowGroups() {
+    var r;
+    const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(r = this.el.querySelector(".table__container")) == null ? void 0 : r.scrollWidth}px`;
+    e.forEach((s) => {
+      const o = s.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(o) || (s.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
+    });
+  }
+  layOutCellsAndColumns() {
+    const e = this.getColumns(), t = this.getCells();
+    e.forEach((r, s) => {
+      const o = this.getCellsForColumn(t, e, s), i = this.calculateColumnProperties(r, e, s);
+      o.forEach((l) => this.applyCellStyles(l, r, i)), this.applyColumnStyles(r, i);
+    });
+  }
+  getCellsForColumn(e, t, r) {
+    return e.filter((s, o) => (r - o) % t.length === 0);
+  }
+  calculateColumnProperties(e, t, r) {
+    const s = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, o = `${e.getBoundingClientRect().width}px`, i = e.sticky && t.length === r + 1, l = e.sticky && !this.hasStickyColumnsToRight(t, r);
+    return {
+      leftOffsetForStickyColumn: s,
+      columnWidth: o,
+      isLastColumnSticky: i,
+      hasShadowRight: l
+    };
+  }
+  applyCellStyles(e, t, r) {
+    const { leftOffsetForStickyColumn: s, columnWidth: o, isLastColumnSticky: i, hasShadowRight: l } = r;
+    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !f() && (t.sticky && !i && (e.classList.add("table-cell--is-sticky"), e.style.left = s + "px", l && e.classList.add("table-cell--has-shadow-right")), i && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
+  }
+  applyColumnStyles(e, t) {
+    if (f())
+      return;
+    const { leftOffsetForStickyColumn: r, isLastColumnSticky: s, hasShadowRight: o } = t;
+    e.sticky && !s && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", o && e.classList.add("table-column--has-shadow-right")), s && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
+  }
+  getLeftOffsetForStickyColumn(e, t) {
+    return e.slice(0, t).reduce((r, s) => {
+      if (s.sticky)
+        return r += s.getBoundingClientRect().width, r;
+    }, 0);
+  }
+  hasStickyColumnsToRight(e, t) {
+    return e.slice(t + 1, e.length - 1).some((r) => r.sticky);
+  }
+  updateEmptyState() {
+    const e = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(e) || e.children.length === 0;
+  }
+  updateLiveRegionText(e, t = {}) {
+    let r = e ? this.dragDropInstructions[e] : "";
+    for (const [s, o] of Object.entries(t != null ? t : {}))
+      r = r.replaceAll(`{${s}}`, String(o));
+    r !== this.liveRegionText && (this.liveRegionText = r);
+  }
+  toggleKeyboardMove(e) {
+    this.movingViaKeyboard ? this.endKeyboardMove(e) : this.startKeyboardMove(e);
+  }
+  startKeyboardMove(e) {
+    this.movingViaKeyboard = !0, this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(e), e.classList.add("table-row--moving"), this.updateLiveRegionText("start", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    });
+  }
+  endKeyboardMove(e) {
+    this.movingViaKeyboard = !1, e.classList.remove("table-row--moving"), this.updateLiveRegionText("end", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.dropRow.emit({
+      item: e,
+      newIndex: Array.from(this.dragDropContainer.children).indexOf(e),
+      oldIndex: this.positionBeforeKeyboardMove,
+      itemId: e.id,
+      newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) < this.dragDropContainer.children.length - 1 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) + 1].id : void 0,
+      newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) > 0 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) - 1].id : void 0
+    }), this.positionBeforeKeyboardMove = void 0;
+  }
+  cancelKeyboardMove() {
+    if (!this.movingViaKeyboard)
+      return;
+    const e = this.el.querySelector(".table-row--moving");
+    !e || (e.classList.remove("table-row--moving"), this.movingViaKeyboard = !1, this.positionBeforeKeyboardMove !== void 0 && this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[this.positionBeforeKeyboardMove]));
+  }
+  moveRow(e, t) {
+    if (!this.movingViaKeyboard)
+      return;
+    let r;
+    if (t === "up") {
+      const s = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.max(0, s - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
+    } else {
+      const s = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.min(this.dragDropContainer.children.length - 1, s + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
+    }
+    this.updateLiveRegionText("moved", {
+      position: r + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.focusDragHandleOfRow(e);
+  }
+  focusDragHandleOfRow(e) {
+    var r, s;
+    const t = (r = T(e, this.dragDropHandle)) == null ? void 0 : r[0];
+    t.tagName === "BUTTON" ? t.focus() : (s = t.querySelector("button")) == null || s.focus();
+  }
+  render() {
+    const e = Boolean(this.el.querySelector('[slot="empty"]')), t = O("table", {
+      "table--show-empty-state": this.empty && !this.loading,
+      "table--keyboard-move": this.movingViaKeyboard
+    });
+    return a(_, { key: "31cc2b99cd42ce8de24fcdca3bd25d677b2065e9" }, a("div", { key: "2b10bbe4a18214e22f2ecedb07f2806d830abb55", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "aac0580b6da061bcf6a4e57f9e3308bcd83cd9ab" }, a("span", { key: "3c2c47c530275c59c13af5ae0bf95fe865546848", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "063f4ec7388d8a9b9cc986e24e98dab85deb81b7", 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: "44ae0cb1ac3dbedba432e5154bb890311544a361", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "4e98279e3a5e8dd340b05f1851559cbf35b25d95" }, a("div", { key: "ec620a55154a96b65760fdfe5857d36cabc20e03", id: "caption" }, this.caption)), a("div", { key: "de46c8483c070f631b529ff0e53db8b6a27ec8d8", role: "rowgroup" }, a("div", { key: "18a6f22082c3fe08134f6843ac9b9722501716fa", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "167710dee7162c62f40c218f6f2fb98e3f7534c0", name: "columns" }))), a("div", { key: "58cd2a6ee100461b4a9e8b5da35884f4271092a2", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "d258590441b67c639ba479bcbf7ae85dc840fa88", name: "rows" }), a("div", { key: "9ddfc91f1a3055363798312fb0fd1aeb2671c2db", class: "table__empty-row", role: "row" }, a("div", { key: "78c4b0fa18d31277de03507b564ec42eba10c0a3", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "f56688d7ff20f7ae1a3fc4f9f8241bc235b8ff5e", name: "empty" }), !e && a("swirl-text", { key: "b7cb802b3420a554459372d8813f1b7ba6571929", align: "center", size: "sm" }, this.emptyStateLabel))))))));
+  }
+  get el() {
+    return k(this);
+  }
+  static get watchers() {
+    return {
+      enableDragDrop: [{
+        handleEnableDragDropChange: 0
+      }]
+    };
+  }
+};
+W.style = K();
+export {
+  W as swirl_table
+};

package/dist/swirl-tabs.entry.cffc20c5.js

@@ -0,0 +1,64 @@
+import { r as b, c as r, h as s, H as n, g as c } from "./index.9d75d0b7.js";
+import { n as e } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const o = () => ".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%}", h = class {
+  constructor(t) {
+    b(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabBarVariant = "default", this.tabBarTabs = [], this.tabs = [], this.onActivateNextTab = () => {
+      this.activateNextTab();
+    }, this.onActivatePreviousTab = () => {
+      this.activatePreviousTab();
+    }, this.onActivateTab = (i) => {
+      this.activateTab(i.detail);
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs(), this.updateTabBarTabs();
+  }
+  async activateTab(t) {
+    if (this.activeTab === t)
+      return;
+    this.activeTab = t, this.tabs.forEach((a) => a.active = !1);
+    const i = this.tabs.find((a) => a.tabId === t);
+    !Boolean(i) || (i.active = !0, this.tabActivated.emit(i), this.updateTabBarTabs());
+  }
+  activateNextTab() {
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t + 1, this.tabs.length);
+    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
+      var a;
+      (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t - 1, this.tabs.length);
+    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
+      var a;
+      (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
+    });
+  }
+  collectTabs() {
+    if (this.tabs = Array.from(this.el.querySelectorAll("swirl-tab")), this.tabs.length === 0)
+      return;
+    const t = this.tabs.find((i) => i.tabId === this.initialTab);
+    this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
+  }
+  updateTabBarTabs() {
+    this.tabBarTabs = this.tabs.map((t) => ({
+      active: this.activeTab === t.tabId,
+      icon: t.icon,
+      id: t.tabId,
+      label: t.label,
+      tooltip: t.tooltip
+    }));
+  }
+  render() {
+    return s(n, { key: "cd4220917f5b37bd4a8721019f89a62f759005c8" }, s("div", { key: "f63798196469b8b4feb3430856a9d0cfa4821c72", class: "tabs" }, s("swirl-tab-bar", { key: "be51fd2047c21eafdf254d325e56b23895ebeca7", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "287e1e8266f12f96000ea15c92e4fbe4d2900c73" }));
+  }
+  get el() {
+    return c(this);
+  }
+};
+h.style = o();
+export {
+  h as swirl_tabs
+};

package/dist/swirl-tag.entry.8ba45bd8.js

@@ -0,0 +1,40 @@
+import { r as o, c as n, h as a, H as i, g as s } from "./index.9d75d0b7.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const l = () => ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-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;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}", g = class {
+  constructor(t) {
+    o(this, t), this.removeTag = n(this, "remove", 7), this.iconPosition = "start", this.intent = "default", this.size = "m", this.removalButtonLabel = "Remove", this.variant = "default", this.onRemove = (r) => {
+      var e;
+      (e = this.removeTag) == null || e.emit(r);
+    };
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  componentWillLoad() {
+    this.forceVariant();
+  }
+  componentDidRender() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    var r;
+    const t = (r = this.iconEl) == null ? void 0 : r.children[0];
+    t == null || t.setAttribute("size", "16");
+  }
+  forceVariant() {
+    Boolean(this.bordered) && (console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'), this.variant = "outline");
+  }
+  render() {
+    const t = c("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
+    return a(i, { key: "d5fbc756df9d37244838e5686f3058cea6a20244" }, a("span", { key: "bc44813d89c8882ea2a34e9f9e90f0e6335b5959", class: t, part: "tag" }, this.icon && a("span", { key: "0c4d3eb3b007556ee463ef02c41782f98987835d", class: "tag__icon", innerHTML: this.icon, ref: (r) => this.iconEl = r }), this.hideLabel ? a("swirl-visually-hidden", null, this.label) : a("span", { class: "tag__label" }, this.label), this.removable && a("button", { key: "3ad90d1cdab7daf64689d8c135b7a42632c096b6", "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, a("swirl-icon-close", { key: "93234397e1136aca9664fd31bb4be18275180e88", size: 16 }))));
+  }
+  get el() {
+    return s(this);
+  }
+};
+g.style = l();
+export {
+  g as swirl_tag
+};

package/dist/swirl-text-input.entry.e98ca9ee.js

@@ -0,0 +1,93 @@
+import { r as x, c as n, h as i, H as w } from "./index.9d75d0b7.js";
+import { c as b } from "./index-orsBiyT_.fc4357c3.js";
+import { D as f } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const m = () => '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', _ = class {
+  constructor(e) {
+    x(this, e), this.clear = n(this, "clear", 7), this.inputBlur = n(this, "inputBlur", 7), this.inputFocus = n(this, "inputFocus", 7), this.valueChange = n(this, "valueChange", 7), this.autoComplete = "on", this.characterCounterLabel = "Used characters", this.clearButtonLabel = "Clear input", this.fontSize = "default", this.passwordToggleLabel = "Toggle password display", this.rows = 1, this.type = "text", this.iconSize = 24, this.showPassword = !1, this.mediaQueryUnsubscribe = () => {
+    }, this.handleClearClick = () => {
+      this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus(), this.clear.emit();
+    }, this.onChange = (t) => {
+      const s = t.target;
+      this.value = s.value;
+    }, this.onBlur = (t) => {
+      this.inputBlur.emit(t);
+    }, this.onFocus = (t) => {
+      this.inputFocus.emit(t), this.handleAutoSelect(t);
+    }, this.onInput = (t) => {
+      this.onChange(t);
+    }, this.onKeyPress = (t) => {
+      this.type === "number" && ["+", "-", "e"].includes(t.key) && t.preventDefault();
+    }, this.decreaseValue = () => {
+      if (this.type !== "number")
+        return;
+      const t = this.step || 1;
+      let s = this.inputEl.valueAsNumber;
+      isNaN(this.inputEl.valueAsNumber) && (s = this.min !== void 0 ? this.min + 1 : 1), this.value = String(Math.max(this.min || -1 / 0, s - t)), this.valueChange.emit(this.value);
+    }, this.increaseValue = () => {
+      if (this.type !== "number")
+        return;
+      const t = this.step || 1;
+      let s = this.inputEl.valueAsNumber;
+      isNaN(this.inputEl.valueAsNumber) && (s = this.min !== void 0 ? this.min - 1 : -1), this.value = String(Math.min(this.max || 1 / 0, s + t)), this.valueChange.emit(this.value);
+    }, this.togglePassword = () => {
+      this.type === "password" && (this.showPassword = !this.showPassword);
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = f.subscribe((e) => {
+      this.updateIconSize(e);
+    }), this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    });
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  async blurInput() {
+    this.inputEl.blur();
+  }
+  async focusInput() {
+    this.inputEl.focus();
+  }
+  watchValue(e, t) {
+    e !== t && this.valueChange.emit(e);
+  }
+  updateIconSize(e) {
+    this.iconSize = e ? 20 : 24;
+  }
+  adjustInputSize() {
+    (this.rows > 1 || this.autoGrow) && (this.inputEl.style.width = "", this.inputEl.style.height = "auto", this.inputEl.style.height = Boolean(this.inputEl.scrollHeight) ? this.inputEl.scrollHeight / 16 + "rem" : ""), this.rows === 1 && !this.autoGrow && (this.inputEl.style.height = "", this.inputEl.style.width = "", this.suffixLabel && this.type !== "password" && !this.disableDynamicWidth && !Boolean(this.placeholder) && (this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem"));
+  }
+  handleAutoSelect(e) {
+    !(this.autoSelect || this.readonly) || e.target.select();
+  }
+  render() {
+    var l, o;
+    const e = this.rows === 1 && !this.autoGrow ? "input" : "textarea", t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, s = this.type === "number" && !this.disabled && !this.readonly, a = this.type === "password" && !this.disabled, r = this.clearable && !this.disabled && !this.readonly && Boolean(this.value) && !a && !s, u = (o = (l = this.value) == null ? void 0 : l.length) != null ? o : 0, p = this.showCharacterCounter && (!this.showCharacterCounterNearLimit || u >= this.maxLength * 0.8), h = this.type === "password" && this.showPassword ? "text" : this.type, c = b("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
+      "text-input--auto-grow": this.autoGrow,
+      "text-input--clearable": r,
+      "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
+      "text-input--has-suffix": Boolean(this.suffixLabel),
+      "text-input--inline": this.inline,
+      "text-input--show-password": this.type === "password" && this.showPassword
+    });
+    return i(w, { key: "a30834f0740bfffea7f5ce4eb767e3d778ca5e8e" }, i("div", { key: "e8a7a6a2d3760349330e6877aeafdd5e653198c5", class: c }, this.prefixLabel && i("span", { key: "1a2de509fa993bdcb753889bda3bc4c8a09bce47", class: "text-input__prefix" }, this.prefixLabel), i(e, { key: "714b42e0489a82e11874b7c09bcdfe6bf116e21a", "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": t, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : void 0, min: this.type === "number" ? this.min : void 0, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: Boolean(this.suffixLabel) ? void 0 : this.placeholder, ref: (d) => this.inputEl = d, required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: h, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && i("span", { key: "7dd58d866f09a455d727faf419609bd0d498e201", class: "text-input__suffix" }, this.suffixLabel), r && i("button", { key: "d6c57fe98e0786e7e4ee8d393a8e64861a833de9", "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, i("swirl-icon-cancel", { key: "cc3f5d3e04c37844aaf7a7506e2a1cd605d28cd2", size: this.iconSize })), a && i("button", { key: "04bfb17fa4bd317e24a8f2c3120d087883a68303", "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? i("swirl-icon-visibility-off", { size: this.iconSize }) : i("swirl-icon-visibility", { size: this.iconSize })), s && i("span", { key: "30296317acd84c589e56186eea0c9c7bf65784ee", class: "text-input__stepper" }, i("button", { key: "fe4830f4b0ade997c837e7311ea634cec3c4c3e0", "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-less", { key: "981fcc970fa7e855e0c287658e7a7553d8790895", size: this.iconSize })), i("button", { key: "907edb43a4c9d043f77bf8c2877a9613919a370b", "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-more", { key: "d057082c9e503ad43d4b12cc3de982182c55862d", size: this.iconSize }))), p && i("span", { key: "994e5065ea7faa5e12a127ca3428788619c87f0d", class: "text-input__character-counter", "aria-live": "polite" }, i("swirl-visually-hidden", { key: "a2e5552d173a9855f05bf610d94d3aef748c4a01" }, this.characterCounterLabel), u, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
+  }
+  static get watchers() {
+    return {
+      value: [{
+        watchValue: 0
+      }]
+    };
+  }
+};
+_.style = m();
+export {
+  _ as swirl_text_input
+};