@getflip/swirl-components 0.1.0 → 0.3.0

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

@@ -24,3 +24,4 @@ const Template = (args) => {
 };
 export const FlipStack = Template.bind({});
 FlipStack.args = {};
+//# sourceMappingURL=flip-stack.stories.js.map

package/dist/collection/components/flip-stack/flip-stack.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-stack.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-stack/flip-stack.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,eAAe;EACb,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEzD,OAAO,CAAC,SAAS,GAAG;;;;;;;;GAQnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-stack.mdx\";\n\nexport default {\n  component: \"flip-stack\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipStack\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-stack\", args);\n\n  element.innerHTML = `\n    <flip-badge label=\"Dennis\" intent=\"decorative-1\"></flip-badge>\n    <flip-badge label=\"Lennart\" intent=\"decorative-2\"></flip-badge>\n    <flip-badge label=\"Jan\" intent=\"decorative-3\"></flip-badge>\n    <flip-badge label=\"Konsti\" intent=\"decorative-4\"></flip-badge>\n    <flip-badge label=\"Adam\" intent=\"decorative-5\"></flip-badge>\n    <flip-badge label=\"Dario\" intent=\"decorative-6\"></flip-badge>\n    <flip-badge label=\"Fabi\" intent=\"decorative-7\"></flip-badge>\n  `;\n\n  return element;\n};\n\nexport const FlipStack = Template.bind({});\n\nFlipStack.args = {};\n"]}

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

@@ -243,3 +243,4 @@ export class FlipSwitch {
       "passive": true
     }]; }
 }
+//# sourceMappingURL=flip-switch.js.map

package/dist/collection/components/flip-switch/flip-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-switch.js","sourceRoot":"","sources":["../../../../src/components/flip-switch/flip-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSwitchSize = \"s\" | \"m\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-switch.css\",\n  tag: \"flip-switch\",\n})\nexport class FlipSwitch {\n  @Element() el: HTMLElement;\n\n  @Prop({ mutable: true }) checked?: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() label?: string;\n  @Prop() size?: FlipSwitchSize = \"m\";\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  private control: HTMLElement;\n  private dragging = false;\n  private recentlyDragged = false;\n  private thumb: HTMLElement;\n\n  @Listen(\"pointerup\", { target: \"window\" })\n  onWindowPointerUp() {\n    this.onEndDrag();\n  }\n\n  private onChange = () => {\n    if (this.dragging) {\n      return;\n    }\n\n    if (this.recentlyDragged) {\n      this.recentlyDragged = false;\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.valueChange.emit(this.checked);\n  };\n\n  private onStartDrag = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.dragging = true;\n    this.thumb.style.transition = \"none\";\n  };\n\n  private onEndDrag = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.recentlyDragged) {\n      const controlBonds = this.control.getBoundingClientRect();\n      const thumbBounds = this.thumb.getBoundingClientRect();\n\n      const on =\n        this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;\n\n      if (this.checked !== on) {\n        this.checked = on;\n        this.valueChange.emit(on);\n      }\n    }\n\n    this.thumb.style.left = \"\";\n    this.thumb.style.transition = \"\";\n\n    this.dragging = false;\n\n    setTimeout(() => {\n      this.recentlyDragged = false;\n    });\n  };\n\n  private onDrag = (event: PointerEvent) => {\n    if (!this.dragging) {\n      return;\n    }\n\n    this.recentlyDragged = true;\n\n    const controlBonds = this.control.getBoundingClientRect();\n    const thumbBounds = this.thumb.getBoundingClientRect();\n\n    let pos = Math.round(event.offsetX - thumbBounds.width / 2);\n\n    if (pos < 0) {\n      pos = 0;\n    }\n\n    if (pos > Math.round(controlBonds.width - thumbBounds.width)) {\n      pos = Math.round(controlBonds.width - thumbBounds.width);\n    }\n\n    this.thumb.style.left = `${pos}px`;\n  };\n\n  render() {\n    const off = !this.checked;\n    const on = this.checked;\n\n    const ariaCheckedLabel = on ? \"true\" : \"false\";\n\n    const className = classnames(\"switch\", `switch--size-${this.size}`, {\n      \"switch--off\": off,\n      \"switch--on\": on,\n      \"switch--disabled\": this.disabled,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span\n            class=\"switch__control\"\n            onPointerDown={this.onStartDrag}\n            onPointerMove={this.onDrag}\n            onPointerUp={this.onEndDrag}\n            ref={(el) => (this.control = el)}\n          >\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                checked={on}\n                class=\"switch__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                name={this.inputName}\n                onChange={this.onChange}\n                role=\"switch\"\n                type=\"checkbox\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span\n              aria-hidden=\"true\"\n              class=\"switch__thumb\"\n              ref={(el) => (this.thumb = el)}\n            ></span>\n          </span>\n          {this.label && <span class=\"switch__label\">{this.label}</span>}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,3 +20,4 @@ FlipSwitch.args = {
   inputName: "switch",
   label: "Switch",
 };
+//# sourceMappingURL=flip-switch.stories.js.map

package/dist/collection/components/flip-switch/flip-switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-switch/flip-switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,eAAe;EACb,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,QAAQ;EACnB,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-switch.mdx\";\n\nexport default {\n  component: \"flip-switch\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipSwitch\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-switch\", args);\n\n  return element;\n};\n\nexport const FlipSwitch = Template.bind({});\n\nFlipSwitch.args = {\n  checked: true,\n  inputId: \"switch\",\n  inputName: \"switch\",\n  label: \"Switch\",\n};\n"]}

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

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tab {
+  display: none;
+  width: 100%;
+  padding: var(--s-space-8);
+}
+
+.tab--active {
+  display: block;
+}

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

@@ -0,0 +1,72 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipTab {
+  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 is() { return "flip-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tab.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tab.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "tabId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tab-id",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-tab.js.map

package/dist/collection/components/flip-tab/flip-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tab.js","sourceRoot":"","sources":["../../../../src/components/flip-tab/flip-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;EAKlB,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,EAAC,IAAI,uBACc,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE9B,WAAK,KAAK,EAAE,SAAS;QACnB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tab.css\",\n  tag: \"flip-tab\",\n})\nexport class FlipTab {\n  @Prop() active?: boolean;\n  @Prop() label!: string;\n  @Prop() tabId!: string;\n\n  render() {\n    const className = classnames(\"tab\", { \"tab--active\": this.active });\n\n    return (\n      <Host\n        aria-labelledby={`tab-${this.tabId}`}\n        id={this.tabId}\n        role=\"tabpanel\"\n        tabIndex={this.active ? 0 : -1}\n      >\n        <div class={className}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-tab.mdx";
+export default {
+  component: "flip-tab",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTab",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-tab", args);
+  element.innerHTML = `Content`;
+  return element;
+};
+export const FlipTab = Template.bind({});
+FlipTab.args = {
+  active: true,
+  label: "Label",
+  tabId: "tab-id",
+};
+//# sourceMappingURL=flip-tab.stories.js.map

package/dist/collection/components/flip-tab/flip-tab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tab.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tab/flip-tab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAElC,eAAe;EACb,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;EAE9B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;EACb,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tab.mdx\";\n\nexport default {\n  component: \"flip-tab\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipTab\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-tab\", args);\n\n  element.innerHTML = `Content`;\n\n  return element;\n};\n\nexport const FlipTab = Template.bind({});\n\nFlipTab.args = {\n  active: true,\n  label: \"Label\",\n  tabId: \"tab-id\",\n};\n"]}

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,221 @@
+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
+    }]; }
+}
+//# sourceMappingURL=flip-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tabs.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-tabs.css\",\n  tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() initialTab?: string;\n  @Prop() label!: string;\n\n  @State() activeTab?: string;\n  @State() highlightedTab: HTMLElement | undefined;\n\n  @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n  private indicatorEl: HTMLElement;\n  private tabs: HTMLFlipTabElement[] = [];\n\n  componentWillLoad() {\n    this.collectTabs();\n  }\n\n  componentDidRender() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.updateIndicatorPosition();\n  }\n\n  /**\n   * Activate a tab.\n   * @param tabId\n   */\n  @Method()\n  public async activateTab(tabId: string) {\n    if (this.activeTab === tabId) {\n      return;\n    }\n\n    this.activeTab = tabId;\n    this.tabs.forEach((tab) => (tab.active = false));\n\n    const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n    if (!Boolean(tab)) {\n      return;\n    }\n\n    this.highlightedTab = undefined;\n\n    tab.active = true;\n    this.tabActivated.emit(tab);\n  }\n\n  private activateNextTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n    this.activateTab(this.tabs[nextIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private activatePreviousTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const previousIndex = Math.max(0, currentIndex - 1);\n\n    this.activateTab(this.tabs[previousIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private collectTabs() {\n    this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n    if (this.tabs.length === 0) {\n      return;\n    }\n\n    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n    this.activateTab(\n      Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n    );\n  }\n\n  private updateIndicatorPosition() {\n    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);\n\n    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {\n      this.indicatorEl.style.width = \"\";\n      this.indicatorEl.style.transform = \"\";\n      this.indicatorEl.style.backgroundColor = \"\";\n      return;\n    }\n\n    const activeTabEl =\n      this.highlightedTab ||\n      this.el.querySelector<HTMLButtonElement>(`#tab-${activeTab.tabId}`);\n\n    const activeTabLabelEl =\n      activeTabEl.querySelector<HTMLSpanElement>(\".tabs__tab-label\");\n\n    this.indicatorEl.style.width = `${\n      activeTabLabelEl.getBoundingClientRect().width / 16\n    }rem`;\n\n    this.indicatorEl.style.transform = `translate3d(${\n      activeTabLabelEl.offsetLeft / 16\n    }rem, 0, 0)`;\n\n    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)\n      ? \"var(--s-border-default)\"\n      : \"\";\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.activatePreviousTab();\n    } else if (event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.activateNextTab();\n    }\n  };\n\n  private onMouseEnter = (event: MouseEvent, tab: HTMLFlipTabElement) => {\n    if (tab.tabId === this.activeTab) {\n      this.highlightedTab = undefined;\n      return;\n    }\n\n    this.highlightedTab =\n      (event.target as HTMLElement).closest(\".tabs__tab\") || undefined;\n  };\n\n  private onMouseLeave = () => {\n    this.highlightedTab = undefined;\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tabs\">\n          <div\n            aria-label={this.label}\n            class=\"tabs__tab-bar\"\n            onKeyDown={this.onKeyDown}\n            role=\"tablist\"\n          >\n            {this.tabs.map((tab) => {\n              const isActive = tab.tabId === this.activeTab;\n              const className = classnames(\"tabs__tab\", {\n                \"tabs__tab--active\": isActive,\n              });\n\n              return (\n                <button\n                  aria-controls={tab.tabId}\n                  aria-selected={isActive ? \"true\" : \"false\"}\n                  class={className}\n                  id={`tab-${tab.tabId}`}\n                  key={tab.tabId}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onClick={() => this.activateTab(tab.tabId)}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onMouseEnter={(event) => this.onMouseEnter(event, tab)}\n                  onMouseLeave={this.onMouseLeave}\n                  role=\"tab\"\n                  tabIndex={isActive ? 0 : -1}\n                  type=\"button\"\n                >\n                  <span class=\"tabs__tab-label\">{tab.label}</span>\n                </button>\n              );\n            })}\n\n            <span\n              class=\"tabs__indicator\"\n              ref={(el) => (this.indicatorEl = el)}\n            ></span>\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+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",
+};
+//# sourceMappingURL=flip-tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tabs.mdx\";\n\nexport default {\n  component: \"flip-tabs\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipTabs\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-tabs\", args);\n\n  element.innerHTML = `\n    <flip-tab label=\"Tab #1\" tab-id=\"tab-1\">Tab 1</flip-tab>\n    <flip-tab label=\"Tab #2\" tab-id=\"tab-2\">Tab 2</flip-tab>\n    <flip-tab label=\"Tab Number 3\" tab-id=\"tab-3\">Tab 3</flip-tab>\n  `;\n\n  return element;\n};\n\nexport const FlipTabs = Template.bind({});\n\nFlipTabs.args = {\n  initialTab: \"tab-2\",\n  label: \"Tabs\",\n};\n"]}

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

@@ -122,3 +122,4 @@ export class FlipTag {
       }
     }]; }
 }
+//# sourceMappingURL=flip-tag.js.map

package/dist/collection/components/flip-tag/flip-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tag.js","sourceRoot":"","sources":["../../../../src/components/flip-tag/flip-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,MAAM,OAAO,OAAO;EALpB;IAMU,WAAM,GAAmB,SAAS,CAAC;IAGnC,uBAAkB,GAAY,QAAQ,CAAC;IAIvC,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;;MACvC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;GAuBH;EArBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAElE,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAE,SAAS;QACnB,IAAI,CAAC,KAAK;QACV,IAAI,CAAC,SAAS,IAAI,CACjB,4BACc,IAAI,CAAC,kBAAkB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ;UAEb,uBAAiB,IAAI,EAAE,EAAE,GAAoB,CACtC,CACV,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTagIntent =\n  | \"default\"\n  | \"critical\"\n  | \"warning\"\n  | \"success\"\n  | \"info\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tag.css\",\n  tag: \"flip-tag\",\n})\nexport class FlipTag {\n  @Prop() intent?: FlipTagIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() removable?: boolean;\n  @Prop() removalButtonLabel?: string = \"Remove\";\n\n  @Event() remove?: EventEmitter<MouseEvent>;\n\n  private onRemove = (event: MouseEvent) => {\n    this.remove?.emit(event);\n  };\n\n  render() {\n    const className = classnames(\"tag\", `tag--intent-${this.intent}`);\n\n    return (\n      <Host>\n        <span class={className}>\n          {this.label}\n          {this.removable && (\n            <button\n              aria-label={this.removalButtonLabel}\n              class=\"tag__removal-button\"\n              onClick={this.onRemove}\n              type=\"button\"\n            >\n              <flip-icon-close size={16}></flip-icon-close>\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,3 +18,4 @@ FlipTag.args = {
   label: "Label",
   removable: true,
 };
+//# sourceMappingURL=flip-tag.stories.js.map

package/dist/collection/components/flip-tag/flip-tag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tag.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tag/flip-tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAElC,eAAe;EACb,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tag.mdx\";\n\nexport default {\n  component: \"flip-tag\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipTag\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-tag\", args);\n\n  return element;\n};\n\nexport const FlipTag = Template.bind({});\n\nFlipTag.args = {\n  label: \"Label\",\n  removable: true,\n};\n"]}

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

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.text {
+  margin: 0;
+  padding: 0;
+}
+
+.text--align-start {
+  text-align: start;
+}
+
+.text--align-center {
+  text-align: center;
+}
+
+.text--align-end {
+  text-align: end;
+}
+
+.text--color-default {
+  color: var(--s-text-default);
+}
+
+.text--color-subdued {
+  color: var(--s-text-subdued);
+}
+
+.text--color-critical {
+  color: var(--s-text-critical);
+}
+
+.text--color-success {
+  color: var(--s-text-success);
+}
+
+.text--color-warning {
+  color: var(--s-text-warning);
+}
+
+.text--size-sm {
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+}
+
+.text--size-base {
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
+}
+
+.text--size-lg {
+  font-size: var(--s-font-size-lg);
+  line-height: var(--s-line-height-lg);
+}
+
+.text--weight-normal {
+  font-weight: var(--s-font-weight-normal);
+}
+
+.text--weight-medium {
+  font-weight: var(--s-font-weight-medium);
+}
+
+.text--weight-semibold {
+  font-weight: var(--s-font-weight-semibold);
+}
+
+.text--weight-bold {
+  font-weight: var(--s-font-weight-bold);
+}
+
+.text--font-style-normal {
+  font-style: normal;
+}
+
+.text--font-style-italic {
+  font-style: italic;
+}