@getflip/swirl-components 0.1.0 → 0.2.0

package/dist/collection/components/flip-tabs/flip-tabs.css

@@ -0,0 +1,94 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tabs {
+  width: 100%;
+}
+
+.tabs__tab-bar {
+  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 {
+    padding-right: 0;
+    padding-left: 0
+}
+  }
+
+.tabs__tab {
+  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:focus-visible {
+    outline: none;
+  }
+
+.tabs__tab:focus-visible .tabs__tab-label {
+      border-radius: var(--s-border-radius-s);
+      box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+    }
+
+.tabs__tab:not(:first-of-type) {
+    padding-left: var(--s-space-8);
+  }
+
+.tabs__tab:not(:last-of-type) {
+    padding-right: var(--s-space-8);
+  }
+
+.tabs__tab-label {
+  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 {
+  color: var(--s-text-highlight);
+}
+
+.tabs__indicator {
+  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 {
+    transition: none
+}
+  }

package/dist/collection/components/flip-tabs/flip-tabs.js

@@ -0,0 +1,220 @@
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipTabs {
+  constructor() {
+    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))));
+  }
+  static get is() { return "flip-tabs"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tabs.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tabs.css"]
+  }; }
+  static get properties() { return {
+    "initialTab": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initial-tab",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "activeTab": {},
+    "highlightedTab": {}
+  }; }
+  static get events() { return [{
+      "method": "tabActivated",
+      "name": "tabActivated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLFlipTabElement",
+        "resolved": "HTMLFlipTabElement",
+        "references": {
+          "HTMLFlipTabElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "activateTab": {
+      "complexType": {
+        "signature": "(tabId: string) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "tabId"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Activate a tab.",
+        "tags": [{
+            "name": "param",
+            "text": "tabId"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/flip-tabs/flip-tabs.stories.js

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-tabs.mdx";
+export default {
+  component: "flip-tabs",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTabs",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-tabs", args);
+  element.innerHTML = `
+    <flip-tab label="Tab #1" tab-id="tab-1">Tab 1</flip-tab>
+    <flip-tab label="Tab #2" tab-id="tab-2">Tab 2</flip-tab>
+    <flip-tab label="Tab Number 3" tab-id="tab-3">Tab 3</flip-tab>
+  `;
+  return element;
+};
+export const FlipTabs = Template.bind({});
+FlipTabs.args = {
+  initialTab: "tab-2",
+  label: "Tabs",
+};

package/dist/collection/components/flip-tooltip/flip-tooltip.css

@@ -31,6 +31,8 @@
   color: var(--s-text-on-status);
   background-color: var(--s-surface-neutral-default);
   line-height: var(--s-line-height-base);
+  -webkit-animation: tooltip-fade-in 0.1s;
+          animation: tooltip-fade-in 0.1s;
   backgrund-color: red;
 }
 
@@ -40,3 +42,21 @@
   height: 0.5rem;
   background-color: var(--s-surface-neutral-default);
 }
+
+@-webkit-keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/collection/components/flip-tooltip/flip-tooltip.js

@@ -1,5 +1,5 @@
+import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { Component, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
-import { reposition } from "nanopop";
 export class FlipTooltip {
   constructor() {
     this.delay = 300;
@@ -10,11 +10,11 @@ export class FlipTooltip {
         this.hide();
       }
     };
-    this.reposition = () => {
+    this.reposition = async () => {
       if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {
         return;
       }
-      this.actualPosition = reposition(this.referenceEl, this.popperEl, this.options);
+      this.actualPosition = await computePosition(this.referenceEl, this.popperEl, this.options);
     };
     this.show = () => {
       this.visible = true;
@@ -43,33 +43,35 @@ export class FlipTooltip {
         .getPropertyValue("--s-space-12")
         .replace("rem", "") * 16;
       this.options = {
-        margin,
-        position: this.position,
+        middleware: [offset(margin), shift(), flip()],
+        placement: this.position,
+        strategy: "fixed",
       };
     };
     this.getArrowStyles = () => {
-      if (this.actualPosition === "tm") {
+      var _a, _b, _c, _d;
+      if (((_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.placement) === "top") {
         return {
           top: "100%",
           left: "50%",
           transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "bm") {
+      if (((_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.placement) === "bottom") {
         return {
           bottom: "100%",
           left: "50%",
           transform: "translate3d(-50%, 50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "rm") {
+      if (((_c = this.actualPosition) === null || _c === void 0 ? void 0 : _c.placement) === "right") {
         return {
           top: "50%",
           right: "100%",
           transform: "translate3d(50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "lm") {
+      if (((_d = this.actualPosition) === null || _d === void 0 ? void 0 : _d.placement) === "left") {
         return {
           top: "50%",
           left: "100%",
@@ -100,12 +102,20 @@ export class FlipTooltip {
     this.updateOptions();
   }
   render() {
+    var _a, _b;
     const arrowStyles = this.getArrowStyles();
     return (h(Host, { onKeydown: this.onKeydown },
       h("span", { class: "tooltip" },
         h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 },
           h("slot", null)),
-        h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el) }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" },
+        h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+            top: Boolean(this.actualPosition)
+              ? `${(_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.y}px`
+              : "",
+            left: Boolean(this.actualPosition)
+              ? `${(_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.x}px`
+              : "",
+          } }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" },
           h("span", { class: "tooltip__content", innerHTML: this.content }),
           h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
   }

package/dist/components/flip-avatar-group.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--s-background-default);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--s-background-default);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
+const flipAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
 
 const FlipAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-badge.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--s-background-default);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{background-color:var(--s-surface-critical-default)}.badge--intent-decorative-1{background-color:var(--s-decorative-1-default)}.badge--intent-decorative-2{background-color:var(--s-decorative-2-default)}.badge--intent-decorative-3{color:var(--s-text-default);background-color:var(--s-decorative-3-default)}.badge--intent-decorative-4{color:var(--s-text-default);background-color:var(--s-decorative-4-default)}.badge--intent-decorative-5{background-color:var(--s-decorative-5-default)}.badge--intent-decorative-6{background-color:var(--s-decorative-6-default)}.badge--intent-decorative-7{background-color:var(--s-decorative-7-default)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+const flipBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--flip-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{background-color:var(--s-surface-critical-default)}.badge--intent-decorative-1{background-color:var(--s-decorative-1-default)}.badge--intent-decorative-2{background-color:var(--s-decorative-2-default)}.badge--intent-decorative-3{color:var(--s-text-default);background-color:var(--s-decorative-3-default)}.badge--intent-decorative-4{color:var(--s-text-default);background-color:var(--s-decorative-4-default)}.badge--intent-decorative-5{background-color:var(--s-decorative-5-default)}.badge--intent-decorative-6{background-color:var(--s-decorative-6-default)}.badge--intent-decorative-7{background-color:var(--s-decorative-7-default)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
 
 const FlipBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-button2.js

@@ -30,12 +30,13 @@ const FlipButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       "button--icon-only": hideLabel,
     });
     const Tag = isLink ? "a" : "button";
-    return (h(Host, null, h(Tag, { "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+    return (h(Host, null, h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
   }
   static get style() { return flipButtonCss; }
 }, [2, "flip-button", {
     "disabled": [4],
     "download": [1],
+    "flipAriaDescribedby": [1, "flip-aria-describedby"],
     "form": [1],
     "hideLabel": [4, "hide-label"],
     "href": [1],

package/dist/components/flip-checkbox.js

@@ -22,6 +22,7 @@ const FlipCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     const unchecked = this.checked === false || this.checked === "false";
     const checked = this.checked === true || this.checked === "true";
     const indeterminate = this.checked === "indeterminate";
+    const showLabelContainer = Boolean(this.label) || Boolean(this.description);
     const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
     const ariaInvalid = this.invalid === true
       ? "true"
@@ -35,7 +36,7 @@ const FlipCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       "checkbox--invalid": this.invalid,
       "checkbox--unchecked": unchecked,
     });
-    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("flip-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("flip-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description))))));
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("flip-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("flip-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description)))))));
   }
   static get style() { return flipCheckboxCss; }
 }, [2, "flip-checkbox", {

package/dist/components/flip-file-uploader.d.ts

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

package/dist/components/flip-file-uploader.js

@@ -0,0 +1,88 @@
+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-cloud-upload2.js';
+
+const flipFileUploaderCss = ".sc-flip-file-uploader-h{display:block;width:100%}.sc-flip-file-uploader-h *.sc-flip-file-uploader{box-sizing:border-box}.file-uploader.sc-flip-file-uploader{width:100%}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader{position:relative;display:flex;width:100%;height:10rem;margin-top:var(--s-space-16);justify-content:center;align-items:center;border:var(--s-border-width-default) dashed var(--s-border-strong);border-radius:var(--s-border-radius-s);flex-direction:column}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader:focus-within{border-color:var(--s-focus-default);border-width:0.125rem}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{position:absolute;display:block;cursor:pointer;opacity:0;inset:0}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{cursor:default}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-cta.sc-flip-file-uploader,.file-uploader--disabled.sc-flip-file-uploader .file-uploader__drag-drop-label.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader__label.sc-flip-file-uploader{display:block;font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.file-uploader__description.sc-flip-file-uploader{display:block;margin-top:var(--s-space-4);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-icon-highlight)}.file-uploader__dropzone-label.sc-flip-file-uploader{margin-top:var(--s-space-16);line-height:var(--s-line-height-base)}.file-uploader__dropzone-cta.sc-flip-file-uploader{color:var(--s-interactive-primary-default);font-weight:var(--s-font-weight-medium)}.file-uploader__upload-button.sc-flip-file-uploader{margin-top:var(--s-space-16)}.file-uploader__input.sc-flip-file-uploader{display:none}";
+
+const FlipFileUploader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.ctaLabel = "Click to upload";
+    this.dragDropLabel = "or drag and drop.";
+    this.showDropzone = true;
+    this.uploadButtonLabel = "Select file";
+    this.onChange = (event) => {
+      const fileList = event.target.files;
+      this.valueChange.emit(fileList);
+    };
+    this.onUploadButtonClick = () => {
+      this.inputEl.click();
+    };
+  }
+  /**
+   * Reset the file input.
+   */
+  async reset() {
+    this.inputEl.value = "";
+  }
+  render() {
+    const ariaDescribedby = Boolean(this.description)
+      ? `${this.inputId}-description ${this.inputId}-additional-label`
+      : `${this.inputId}-additional-label`;
+    const tabIndex = this.showDropzone ? 0 : -1;
+    const className = classnames("file-uploader", {
+      "file-uploader--disabled": this.disabled,
+      "file-uploader--show-dropzone": this.showDropzone,
+    });
+    return (h(Host, null, h("div", { class: className }, h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputEl}-label` }, this.label), this.description && (h("span", { class: "file-uploader__description", id: `${this.inputId}-description` }, this.description)), h("div", { class: "file-uploader__dropzone" }, this.showDropzone ? ([
+      h("flip-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
+      h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
+    ]) : (h("flip-button", { class: "file-uploader__upload-button", disabled: this.disabled, flipAriaDescribedby: ariaDescribedby, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, variant: "flat" })), h("input", { accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+  }
+  static get style() { return flipFileUploaderCss; }
+}, [2, "flip-file-uploader", {
+    "accept": [1],
+    "ctaLabel": [1, "cta-label"],
+    "description": [1],
+    "disabled": [4],
+    "dragDropLabel": [1, "drag-drop-label"],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "label": [1],
+    "multiple": [4],
+    "showDropzone": [4, "show-dropzone"],
+    "uploadButtonLabel": [1, "upload-button-label"],
+    "reset": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-file-uploader", "flip-button", "flip-icon-cloud-upload"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-file-uploader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipFileUploader$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-cloud-upload":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipFileUploader = FlipFileUploader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipFileUploader, defineCustomElement };

package/dist/components/flip-icon-cloud-upload.d.ts

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

package/dist/components/flip-icon-cloud-upload.js

@@ -0,0 +1,6 @@
+import { F as FlipIconCloudUpload$1, d as defineCustomElement$1 } from './flip-icon-cloud-upload2.js';
+
+const FlipIconCloudUpload = FlipIconCloudUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipIconCloudUpload, defineCustomElement };