@getflip/swirl-components 0.1.0 → 0.2.0

package/dist/components/flip-resource-list-file-item.d.ts

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

package/dist/components/flip-resource-list-file-item.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$6 } from './flip-button2.js';
+import { d as defineCustomElement$5 } from './flip-icon-error2.js';
+import { d as defineCustomElement$4 } from './flip-inline-error2.js';
+import { d as defineCustomElement$3 } from './flip-spinner2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipResourceListFileItemCss = ":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{background-color:var(--s-background-hovered);outline:none}.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) + 0.0625rem);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%)}";
+
+const FlipResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.remove = createEvent(this, "remove", 7);
+    this.icon = "<flip-icon-file></flip-icon-file>";
+    this.removeButtonLabel = "Remove file";
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon }), h("span", { class: "resource-list-file-item__label-container" }, h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("flip-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { class: "resource-list-file-item__spinner" }, h("flip-spinner", { size: "s" }))), showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" }, h("flip-button", { hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+  static get style() { return flipResourceListFileItemCss; }
+}, [1, "flip-resource-list-file-item", {
+    "description": [1],
+    "errorMessage": [1, "error-message"],
+    "icon": [1],
+    "label": [1],
+    "loading": [4],
+    "removable": [4],
+    "removeButtonLabel": [1, "remove-button-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list-file-item", "flip-button", "flip-icon-error", "flip-inline-error", "flip-spinner", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list-file-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceListFileItem$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "flip-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipResourceListFileItem = FlipResourceListFileItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipResourceListFileItem, defineCustomElement };

package/dist/components/flip-resource-list-item.d.ts

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

package/dist/components/flip-resource-list-item.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './flip-button2.js';
+import { d as defineCustomElement$2 } from './flip-icon-check-strong2.js';
+
+const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12) + 0.0625rem);left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-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-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+
+const FlipResourceListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("flip-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("flip-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, role: role, tabIndex: 0 }, Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("flip-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListItemCss; }
+}, [1, "flip-resource-list-item", {
+    "checked": [1028],
+    "description": [1],
+    "disabled": [4],
+    "hideDivider": [4, "hide-divider"],
+    "href": [1],
+    "label": [1],
+    "media": [1],
+    "menuTriggerId": [1, "menu-trigger-id"],
+    "menuTriggerLabel": [1, "menu-trigger-label"],
+    "meta": [1],
+    "selectable": [4],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list-item", "flip-button", "flip-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceListItem$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipResourceListItem = FlipResourceListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipResourceListItem, defineCustomElement };

package/dist/components/flip-resource-list.d.ts

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

package/dist/components/flip-resource-list.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './flip-stack2.js';
+
+const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+
+const FlipResourceList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListCss; }
+}, [1, "flip-resource-list", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceList$1);
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipResourceList = FlipResourceList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipResourceList, defineCustomElement };

package/dist/components/flip-spinner.js

@@ -1,44 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
-
-const flipSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-s{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;-webkit-animation:spinner-rotate 2s linear infinite;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{-webkit-animation:spinner-dash 1.5s ease-in-out infinite;animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@-webkit-keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
-
-const FlipSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = "m";
-  }
-  render() {
-    const className = classnames("spinner", `spinner--size-${this.size}`);
-    return (h(Host, null, h("span", { class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("flip-visually-hidden", null, h("span", { class: "spinner__label" }, this.label))))));
-  }
-  static get style() { return flipSpinnerCss; }
-}, [1, "flip-spinner", {
-    "label": [1],
-    "size": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-spinner", "flip-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipSpinner$1);
-      }
-      break;
-    case "flip-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipSpinner$1, d as defineCustomElement$1 } from './flip-spinner2.js';
 
 const FlipSpinner = FlipSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/flip-spinner.entry.js → components/flip-spinner2.js}

@@ -1,18 +1,43 @@
-import { r as registerInstance, h, H as Host } from './index-36517fab.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './flip-visually-hidden2.js';
 
 const flipSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-s{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;-webkit-animation:spinner-rotate 2s linear infinite;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{-webkit-animation:spinner-dash 1.5s ease-in-out infinite;animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@-webkit-keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
 
-const FlipSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const FlipSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.size = "m";
   }
   render() {
     const className = classnames("spinner", `spinner--size-${this.size}`);
     return (h(Host, null, h("span", { class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("flip-visually-hidden", null, h("span", { class: "spinner__label" }, this.label))))));
   }
-};
-FlipSpinner.style = flipSpinnerCss;
+  static get style() { return flipSpinnerCss; }
+}, [1, "flip-spinner", {
+    "label": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-spinner", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSpinner);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
-export { FlipSpinner as flip_spinner };
+export { FlipSpinner as F, defineCustomElement as d };

package/dist/components/flip-tab.d.ts

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

package/dist/components/flip-tab.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipTabCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}";
+
+const FlipTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const className = classnames("tab", { "tab--active": this.active });
+    return (h(Host, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, h("div", { class: className }, h("slot", null))));
+  }
+  static get style() { return flipTabCss; }
+}, [1, "flip-tab", {
+    "active": [4],
+    "label": [1],
+    "tabId": [1, "tab-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipTab$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipTab = FlipTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipTab, defineCustomElement };

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

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

package/dist/components/flip-tabs.js

@@ -0,0 +1,144 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipTabsCss = ".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%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;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-visible{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(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.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__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}";
+
+const FlipTabs$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();
+      }
+    };
+    this.onMouseEnter = (event, tab) => {
+      if (tab.tabId === this.activeTab) {
+        this.highlightedTab = undefined;
+        return;
+      }
+      this.highlightedTab =
+        event.target.closest(".tabs__tab") || undefined;
+    };
+    this.onMouseLeave = () => {
+      this.highlightedTab = undefined;
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  componentDidRender() {
+    this.updateIndicatorPosition();
+  }
+  onWindowResize() {
+    this.updateIndicatorPosition();
+  }
+  /**
+   * 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;
+    }
+    this.highlightedTab = undefined;
+    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("flip-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);
+  }
+  updateIndicatorPosition() {
+    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
+    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
+      this.indicatorEl.style.width = "";
+      this.indicatorEl.style.transform = "";
+      this.indicatorEl.style.backgroundColor = "";
+      return;
+    }
+    const activeTabEl = this.highlightedTab ||
+      this.el.querySelector(`#tab-${activeTab.tabId}`);
+    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
+    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
+    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
+    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
+      ? "var(--s-border-default)"
+      : "";
+  }
+  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),
+        // eslint-disable-next-line react/jsx-no-bind
+        onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    }), h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })), h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipTabsCss; }
+}, [6, "flip-tabs", {
+    "initialTab": [1, "initial-tab"],
+    "label": [1],
+    "activeTab": [32],
+    "highlightedTab": [32],
+    "activateTab": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipTabs$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipTabs = FlipTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipTabs, defineCustomElement };