@getflip/swirl-components 0.11.0 → 0.12.0

package/dist/components/swirl-table-column.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTableColumn extends Components.SwirlTableColumn, HTMLElement {}
+export const SwirlTableColumn: {
+  prototype: SwirlTableColumn;
+  new (): SwirlTableColumn;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-table-column.js

@@ -0,0 +1,60 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './swirl-icon-arrow-downward2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-arrow-upward2.js';
+
+const swirlTableColumnCss = ":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}";
+
+const SwirlTableColumn$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.minWidth = "fit-content";
+  }
+  render() {
+    const styles = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || "",
+    };
+    return (h(Host, { "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", null, h("slot", null)), this.sortable && (h("span", { class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+  }
+  get el() { return this; }
+  static get style() { return swirlTableColumnCss; }
+}, [1, "swirl-table-column", {
+    "sort": [1],
+    "sortable": [4],
+    "maxWidth": [1, "max-width"],
+    "minWidth": [1, "min-width"],
+    "sticky": [4],
+    "width": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-table-column", "swirl-icon-arrow-downward", "swirl-icon-arrow-upward"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-table-column":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTableColumn$1);
+      }
+      break;
+    case "swirl-icon-arrow-downward":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-icon-arrow-upward":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTableColumn = SwirlTableColumn$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTableColumn, defineCustomElement };

package/dist/components/swirl-table-row-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTableRowGroup extends Components.SwirlTableRowGroup, HTMLElement {}
+export const SwirlTableRowGroup: {
+  prototype: SwirlTableRowGroup;
+  new (): SwirlTableRowGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-table-row-group.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlTableRowGroupCss = ":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)}}";
+
+const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const rowspan = this.el.querySelectorAll("swirl-table-row").length;
+    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row" }, h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label)), h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return swirlTableRowGroupCss; }
+}, [1, "swirl-table-row-group", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-table-row-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-table-row-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTableRowGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTableRowGroup = SwirlTableRowGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTableRowGroup, defineCustomElement };

package/dist/components/swirl-table-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTableRow extends Components.SwirlTableRow, HTMLElement {}
+export const SwirlTableRow: {
+  prototype: SwirlTableRow;
+  new (): SwirlTableRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-table-row.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlTableRowCss = ":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}";
+
+const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const className = classnames("table-row", {
+      "table-row--highlighted": this.highlighted,
+    });
+    return (h(Host, { "aria-rowindex": this.index, class: className, role: "row" }, h("slot", null)));
+  }
+  static get style() { return swirlTableRowCss; }
+}, [1, "swirl-table-row", {
+    "highlighted": [4],
+    "index": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-table-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-table-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTableRow$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTableRow = SwirlTableRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTableRow, defineCustomElement };

package/dist/components/swirl-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTable extends Components.SwirlTable, HTMLElement {}
+export const SwirlTable: {
+  prototype: SwirlTable;
+  new (): SwirlTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-table.js

@@ -0,0 +1,331 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$3 } from './swirl-text2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+/* global setTimeout, clearTimeout */
+
+var dist = function debounce(fn) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var lastCallAt = void 0;
+  var deferred = void 0;
+  var timer = void 0;
+  var pendingArgs = [];
+  return function debounced() {
+    var currentWait = getWait(wait);
+    var currentTime = new Date().getTime();
+
+    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
+
+    lastCallAt = currentTime;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (isCold && options.leading) {
+      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
+        return result[0];
+      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
+    }
+
+    if (deferred) {
+      clearTimeout(timer);
+    } else {
+      deferred = defer();
+    }
+
+    pendingArgs.push(args);
+    timer = setTimeout(flush.bind(this), currentWait);
+
+    if (options.accumulate) {
+      var argsIndex = pendingArgs.length - 1;
+      return deferred.promise.then(function (results) {
+        return results[argsIndex];
+      });
+    }
+
+    return deferred.promise;
+  };
+
+  function flush() {
+    var thisDeferred = deferred;
+    clearTimeout(timer);
+
+    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
+
+    pendingArgs = [];
+    deferred = null;
+  }
+};
+
+function getWait(wait) {
+  return typeof wait === 'function' ? wait() : wait;
+}
+
+function defer() {
+  var deferred = {};
+  deferred.promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  return deferred;
+}
+
+const swirlTableCss = ":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),\n    -0.0625rem 0 0 0 var(--s-border-default),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n    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),\n    -0.0625rem 0 0 0 var(--s-border-default),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n    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}";
+
+const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.emptyStateLabel = "No results found.";
+    this.updateLayout = dist(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 isMobile = isMobileViewport();
+    const scrollable = this.container.scrollWidth > this.container.clientWidth;
+    const scrolled = this.container.scrollLeft > 0;
+    const scrolledToEnd = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >=
+      Math.floor(this.container.scrollWidth);
+    if (scrollable !== this.scrollable) {
+      if (scrollable && !isMobile) {
+        this.container.classList.add("table__container--scrollable");
+      }
+      else {
+        this.container.classList.remove("table__container--scrollable");
+      }
+    }
+    if (scrolled !== this.scrolled) {
+      if (scrolled && !isMobile) {
+        this.container.classList.add("table__container--scrolled");
+      }
+      else {
+        this.container.classList.remove("table__container--scrolled");
+      }
+    }
+    if (scrolledToEnd !== this.scrolledToEnd) {
+      if (scrolledToEnd && !isMobile) {
+        this.container.classList.add("table__container--scrolled-to-end");
+      }
+      else {
+        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 emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    emptyRow.style.width = "";
+    await new Promise((resolve) => setTimeout(resolve));
+  }
+  async resetRowGroupStyles() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    tableRowGroups.forEach((tableRowGroup) => {
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
+    });
+    await new Promise((resolve) => setTimeout(resolve));
+  }
+  async resetColumnStyles() {
+    const columns = this.getColumns();
+    columns.forEach((column) => {
+      column.classList.remove("table-column--has-shadow");
+      column.style.right = "";
+      column.style.left = "";
+      column.style.position = "";
+      column.style.zIndex = "";
+    });
+    await new Promise((resolve) => setTimeout(resolve));
+  }
+  async resetCellStyles() {
+    const cells = this.getCells();
+    cells.forEach((cell) => {
+      cell.classList.remove("table-cell--has-shadow");
+      cell.style.flex = "";
+      cell.style.left = "";
+      cell.style.right = "";
+      cell.style.position = "";
+      cell.style.zIndex = "";
+    });
+    await new Promise((resolve) => setTimeout(resolve));
+  }
+  async layoutEmptyRow() {
+    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    emptyRow.style.width = scrollWidth;
+  }
+  async layoutRowGroups() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    tableRowGroups.forEach((tableRowGroup) => {
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
+    });
+  }
+  async layOutColumns() {
+    const columns = this.getColumns();
+    const tableContainer = this.container;
+    const tableContainerWidth = tableContainer.clientWidth;
+    columns.forEach((column, index) => {
+      var _a, _b;
+      if (!column.sticky || isMobileViewport()) {
+        return;
+      }
+      const isInFirstHalfOfTable = index <= Math.floor(columns.length / 2);
+      const nextColumnIsSticky = (_a = columns[index + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
+      const prevColumnIsSticky = (_b = columns[index - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
+      const columnIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
+      column.style.zIndex = columnIsOnTopOfShadow ? "1" : "";
+      const columnHasShadow = (isInFirstHalfOfTable && !nextColumnIsSticky) ||
+        (!isInFirstHalfOfTable && !prevColumnIsSticky);
+      if (columnHasShadow) {
+        column.classList.add(isInFirstHalfOfTable
+          ? "table-column--has-shadow-right"
+          : "table-column--has-shadow-left");
+      }
+      else {
+        column.classList.remove("table-column--has-shadow-right");
+        column.classList.remove("table-column--has-shadow-left");
+      }
+      const offset = isInFirstHalfOfTable
+        ? column.offsetLeft
+        : Math.max(0, tableContainerWidth -
+          (column.offsetLeft + column.getBoundingClientRect().width));
+      column.style.position = "sticky";
+      if (isInFirstHalfOfTable) {
+        column.style.left = `${offset}px`;
+      }
+      else {
+        column.style.right = `${offset}px`;
+      }
+    });
+    await new Promise((resolve) => setTimeout(resolve));
+  }
+  layOutCells() {
+    const columns = this.getColumns();
+    const cells = this.getCells();
+    columns.forEach((column, colIndex) => {
+      var _a, _b;
+      const cellsOfColumn = cells.filter((_, cellIndex) => {
+        return (colIndex - cellIndex) % columns.length === 0;
+      });
+      const isInFirstHalfOfTable = colIndex <= Math.floor(columns.length / 2);
+      const offset = isInFirstHalfOfTable
+        ? window.getComputedStyle(column).left
+        : window.getComputedStyle(column).right;
+      const nextColumnIsSticky = (_a = columns[colIndex + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
+      const prevColumnIsSticky = (_b = columns[colIndex - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
+      const columnIsSticky = column.sticky;
+      const columnWidth = column.width || `${column.getBoundingClientRect().width}px`;
+      cellsOfColumn.forEach((cell) => {
+        const cellSticksToLeft = columnIsSticky && isInFirstHalfOfTable;
+        const cellSticksToRight = columnIsSticky && !isInFirstHalfOfTable;
+        const cellIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
+        cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
+        if (isMobileViewport()) {
+          cell.classList.remove("table-cell--has-shadow");
+          cell.style.left = "";
+          cell.style.right = "";
+          cell.style.position = "";
+          cell.style.zIndex = "";
+          return;
+        }
+        cell.style.left = cellSticksToLeft ? offset : "";
+        cell.style.right = cellSticksToRight ? offset : "";
+        cell.style.position = columnIsSticky ? "sticky" : "";
+        cell.style.zIndex = cellIsOnTopOfShadow ? "1" : "";
+        const cellHasShadow = columnIsSticky &&
+          ((isInFirstHalfOfTable && !nextColumnIsSticky) ||
+            (!isInFirstHalfOfTable && !prevColumnIsSticky));
+        if (cellHasShadow) {
+          cell.classList.add(isInFirstHalfOfTable
+            ? "table-cell--has-shadow-right"
+            : "table-cell--has-shadow-left");
+        }
+        else {
+          cell.classList.remove("table-cell--has-shadow-right");
+          cell.classList.remove("table-cell--has-shadow-left");
+        }
+      });
+    });
+  }
+  updateEmptyState() {
+    const rowsContainer = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "table" }, h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", null, h("div", { id: "caption" }, this.caption))), h("div", { role: "rowgroup" }, h("div", { class: "table__header", role: "row" }, h("slot", { name: "columns" }))), h("div", { class: "table__body" }, h("slot", { name: "rows" }), this.empty && (h("div", { class: "table__empty-row", role: "row" }, h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlTableCss; }
+}, [1, "swirl-table", {
+    "caption": [1],
+    "emptyStateLabel": [1, "empty-state-label"],
+    "label": [1],
+    "empty": [32],
+    "scrollable": [32],
+    "scrolled": [32],
+    "scrolledToEnd": [32]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-table", "swirl-text", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTable$1);
+      }
+      break;
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTable = SwirlTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTable, defineCustomElement };

package/dist/components/swirl-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTabs extends Components.SwirlTabs, HTMLElement {}
+export const SwirlTabs: {
+  prototype: SwirlTabs;
+  new (): SwirlTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-tabs.js

@@ -0,0 +1,106 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlTabsCss = ".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}";
+
+const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabActivated = createEvent(this, "tabActivated", 7);
+    this.tabs = [];
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.activatePreviousTab();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        this.activateNextTab();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  /**
+   * Activate a tab.
+   * @param tabId
+   */
+  async activateTab(tabId) {
+    if (this.activeTab === tabId) {
+      return;
+    }
+    this.activeTab = tabId;
+    this.tabs.forEach((tab) => (tab.active = false));
+    const tab = this.tabs.find((tab) => tab.tabId === tabId);
+    if (!Boolean(tab)) {
+      return;
+    }
+    tab.active = true;
+    this.tabActivated.emit(tab);
+  }
+  activateNextTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+    this.activateTab(this.tabs[nextIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const previousIndex = Math.max(0, currentIndex - 1);
+    this.activateTab(this.tabs[previousIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  collectTabs() {
+    this.tabs = Array.from(this.el.querySelectorAll("swirl-tab"));
+    if (this.tabs.length === 0) {
+      return;
+    }
+    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
+    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+      const isActive = tab.tabId === this.activeTab;
+      const className = classnames("tabs__tab", {
+        "tabs__tab--active": isActive,
+      });
+      return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    })), h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return swirlTabsCss; }
+}, [6, "swirl-tabs", {
+    "initialTab": [1, "initial-tab"],
+    "label": [1],
+    "activeTab": [32],
+    "activateTab": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTabs$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTabs = SwirlTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTabs, defineCustomElement };

package/dist/components/swirl-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlTag extends Components.SwirlTag, HTMLElement {}
+export const SwirlTag: {
+  prototype: SwirlTag;
+  new (): SwirlTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;