@getflip/swirl-components 0.2.0 → 0.3.0

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

@@ -1,53 +1,28 @@
 import { autoUpdate, computePosition, flip, shift, } from "@floating-ui/dom";
-import { Component, Element, h, Host, Listen, Prop, State, } from "@stencil/core";
-import classnames from "classnames";
-import { querySelectorAllDeep } from "../../utils";
+import { Component, Element, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import classnames from "classnames";
+import { isMobileViewport, querySelectorAllDeep } from "../../utils";
 /**
  * @slot slot - The popover content.
  */
 export class FlipPopover {
   constructor() {
+    this.placement = "bottom-start";
     this.active = false;
     this.closing = false;
-    this.close = () => {
-      var _a;
-      if (this.closing) {
+    this.onFocusOut = (event) => {
+      if (!this.active) {
         return;
       }
-      if (this.disableAutoUpdate) {
-        this.disableAutoUpdate();
+      const target = event.relatedTarget || event.target;
+      const popoverLostFocus = !this.el.contains(target);
+      if (popoverLostFocus) {
+        this.close();
       }
-      this.closing = true;
-      setTimeout(() => {
-        this.active = false;
-        this.closing = false;
-        this.updateTriggerAttributes();
-      }, 150);
-      this.unlockBodyScroll();
-      (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.open = () => {
-      this.active = true;
-      this.updateChildMenuItems();
-      this.updateTriggerAttributes();
-      requestAnimationFrame(async () => {
-        await this.reposition();
-        if (this.childMenuItems.length > 0) {
-          this.childMenuItems[0].focus();
-        }
-        else {
-          this.contentContainer.focus();
-        }
-        if (this.disableAutoUpdate) {
-          this.disableAutoUpdate();
-        }
-        this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
-        this.scrollContainer.scrollTop = 0;
-        this.lockBodyScroll();
-      });
     };
-    this.toggle = () => {
+    this.toggle = (event) => {
+      event.stopPropagation();
       if (this.active) {
         this.close();
       }
@@ -60,14 +35,8 @@ export class FlipPopover {
         this.close();
       }
     };
-    this.onContentClick = () => {
-      if (!this.active) {
-        return;
-      }
-      this.close();
-    };
     this.reposition = async () => {
-      const mobile = !window.matchMedia("(min-width: 768px)").matches;
+      const mobile = isMobileViewport();
       if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
         return;
       }
@@ -77,7 +46,7 @@ export class FlipPopover {
       }
       this.position = await computePosition(this.triggerEl, this.contentContainer, {
         middleware: [shift(), flip()],
-        placement: "bottom-start",
+        placement: this.placement,
         strategy: "fixed",
       });
     };
@@ -90,17 +59,56 @@ export class FlipPopover {
   disconnectedCallback() {
     enableBodyScroll(this.scrollContainer);
   }
-  onWindowFocusout(event) {
-    if (!this.active) {
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing) {
       return;
     }
-    const target = event.relatedTarget;
-    const popoverLostFocus = target === null ||
-      (!this.el.contains(target) &&
-        !this.childMenuItems.some((item) => { var _a; return (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(item); }));
-    if (popoverLostFocus) {
-      this.close();
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
     }
+    this.closing = true;
+    setTimeout(() => {
+      this.active = false;
+      this.closing = false;
+      this.updateTriggerAttributes();
+    }, 150);
+    this.unlockBodyScroll();
+    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Open the popover.
+   * @returns
+   */
+  async open() {
+    this.active = true;
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.childMenuItems.length > 0) {
+        this.childMenuItems[0].focus();
+      }
+      else {
+        this.contentContainer.focus();
+      }
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
   }
   connectTrigger() {
     var _a;
@@ -125,7 +133,7 @@ export class FlipPopover {
     this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
   }
   lockBodyScroll() {
-    const mobile = !window.matchMedia("(min-width: 768px)").matches;
+    const mobile = isMobileViewport();
     if (!mobile) {
       return;
     }
@@ -141,9 +149,9 @@ export class FlipPopover {
       "popover--active": this.active,
       "popover--inactive": !this.active,
     });
-    return (h(Host, { id: this.popoverId },
+    return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut },
       h("div", { class: className, onKeyDown: this.onKeydown },
-        h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", onClick: this.onContentClick, role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
+        h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
             top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
             left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
           } },
@@ -178,6 +186,29 @@ export class FlipPopover {
       "attribute": "label",
       "reflect": false
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@floating-ui/dom"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "\"bottom-start\""
+    },
     "popoverId": {
       "type": "string",
       "mutable": false,
@@ -218,12 +249,56 @@ export class FlipPopover {
     "closing": {},
     "position": {}
   }; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the popover.",
+        "tags": [{
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    },
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the popover.",
+        "tags": [{
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "focusout",
-      "method": "onWindowFocusout",
+      "name": "click",
+      "method": "onWindowClick",
       "target": "window",
       "capture": false,
       "passive": false
     }]; }
 }
+//# sourceMappingURL=flip-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-popover.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.triggerEl?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    const triggerComponent = querySelectorAllDeep(\n      document.body,\n      `#${this.trigger}`\n    )[0];\n\n    this.triggerEl = (triggerComponent?.children[0] ||\n      triggerComponent?.shadowRoot?.children[0] ||\n      triggerComponent) as HTMLElement;\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div class=\"popover__backdrop\" onClick={this.close}></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -53,6 +53,12 @@ const Template = (args) => {
     </flip-action-list>
   `;
   container.append(trigger, element);
+  element.addEventListener("click", (event) => {
+    const target = event.target;
+    if ((target === null || target === void 0 ? void 0 : target.tagName) === "FLIP-ACTION-LIST-ITEM") {
+      element.close();
+    }
+  });
   return container;
 };
 export const FlipPopover = Template.bind({});
@@ -61,3 +67,4 @@ FlipPopover.args = {
   popoverId: "popover",
   trigger: "trigger",
 };
+//# sourceMappingURL=flip-popover.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-popover.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,eAAe;EACb,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,WAAW,EAAE,4BAA4B;KAC1C;GACF;EACD,SAAS,EAAE,cAAc;EACzB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;;;;;;;;;gBAeE;OACT;KACF;GACF;EACD,KAAK,EAAE,wBAAwB;CAChC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACtD,MAAM,OAAO,GAAG,oBAAoB,CAClC,cAAc,EACd,IAAI,CACqB,CAAC;EAE5B,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;EACvB,OAAO,CAAC,KAAK,GAAG,iBAAiB,CAAC;EAElC,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAanB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAEnC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,MAAK,uBAAuB,EAAE;MAC/C,OAAO,CAAC,KAAK,EAAE,CAAC;KACjB;EACH,CAAC,CAAC,CAAC;EAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;EACjB,KAAK,EAAE,SAAS;EAChB,SAAS,EAAE,SAAS;EACpB,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-popover.mdx\";\n\nexport default {\n  argTypes: {\n    trigger: {\n      description: \"ID of the trigger element.\",\n    },\n  },\n  component: \"flip-popover\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: `<flip-button id=\"trigger\" label=\"Trigger\"></flip-button>\n\n<flip-popover label=\"Popover\" popover-id=\"popover\" trigger=\"trigger\">\n  <flip-action-list>\n    <flip-action-list-section label=\"Section 1\">\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 1\"></flip-action-list-item>\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 2\"></flip-action-list-item>\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 3\"></flip-action-list-item>\n    </flip-action-list-section>\n    <flip-action-list-section label=\"Section 2\">\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 1\"></flip-action-list-item>\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 2\"></flip-action-list-item>\n      <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 3\"></flip-action-list-item>\n    </flip-action-list-section>\n  </flip-action-list>\n</flip-popover>`,\n      },\n    },\n  },\n  title: \"Components/FlipPopover\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n  const trigger = document.createElement(\"flip-button\");\n  const element = generateStoryElement(\n    \"flip-popover\",\n    args\n  ) as HTMLFlipPopoverElement;\n\n  trigger.id = \"trigger\";\n  trigger.label = \"Trigger popover\";\n\n  element.innerHTML = `\n    <flip-action-list>\n      <flip-action-list-section label=\"Section 1\">\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 1\"></flip-action-list-item>\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 2\"></flip-action-list-item>\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 3\"></flip-action-list-item>\n      </flip-action-list-section>\n      <flip-action-list-section label=\"Section 2\">\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 1\"></flip-action-list-item>\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 2\"></flip-action-list-item>\n        <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 3\"></flip-action-list-item>\n      </flip-action-list-section>\n    </flip-action-list>\n  `;\n\n  container.append(trigger, element);\n\n  element.addEventListener(\"click\", (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (target?.tagName === \"FLIP-ACTION-LIST-ITEM\") {\n      element.close();\n    }\n  });\n\n  return container;\n};\n\nexport const FlipPopover = Template.bind({});\n\nFlipPopover.args = {\n  label: \"Popover\",\n  popoverId: \"popover\",\n  trigger: \"trigger\",\n};\n"]}

package/dist/collection/components/flip-progress-indicator/flip-progress-indicator.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+:host(.circle) {
+  display: inline-flex;
+  width: auto;
+}
+
+.progress-indicator {
+}
+
+.progress-indicator--variant-bar {
+  display: block;
+  width: 100%;
+  height: 0.25rem;
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.progress-indicator--variant-bar::-webkit-progress-bar {
+    border-radius: 0.125rem;
+    background-color: var(--s-surface-raised-default);
+  }
+
+.progress-indicator--variant-bar::-webkit-progress-value {
+    border-radius: 0.125rem;
+    background-color: var(--s-surface-highlight-default);
+    -webkit-transition: width 0.25s;
+    transition: width 0.25s;
+  }
+
+.progress-indicator--variant-bar::-moz-progress-bar {
+    height: 0.25rem;
+    border-radius: 0.125rem;
+    background-color: var(--s-surface-highlight-default);
+    -moz-transition: width 0.25s;
+    transition: width 0.25s;
+  }
+
+@media (prefers-reduced-motion) {
+
+.progress-indicator--variant-bar::-moz-progress-bar {
+      -moz-transition: none;
+      transition: none
+  }
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-s {
+    height: 0.125rem;
+  }
+
+.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
+      border-radius: 0.0625rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
+      border-radius: 0.0625rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
+      height: 0.125rem;
+      border-radius: 0.0625rem;
+    }
+
+.progress-indicator--variant-circle {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  width: 3rem;
+  height: 3rem;
+}
+
+.progress-indicator--variant-circle.progress-indicator--size-s {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+.progress-indicator__circle {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  inset: 0;
+}
+
+.progress-indicator__circle-background {
+  stroke: var(--s-border-default);
+  stroke-linecap: round;
+}
+
+.progress-indicator__circle-value {
+  transition: stroke-dashoffset 0.25s;
+  stroke: var(--s-interactive-primary-default);
+  stroke-linecap: round;
+}
+
+@media (prefers-reduced-motion) {
+
+.progress-indicator__circle-value {
+    transition: none
+}
+  }

package/dist/collection/components/flip-progress-indicator/flip-progress-indicator.js

@@ -0,0 +1,112 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipProgressIndicator {
+  constructor() {
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (h(Host, { class: this.variant },
+      this.variant === "bar" && (h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })),
+      this.variant === "circle" && (h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className },
+        h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` },
+          h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }),
+          h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+  static get is() { return "flip-progress-indicator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-progress-indicator.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-progress-indicator.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipProgressIndicatorSize",
+        "resolved": "\"m\" | \"s\"",
+        "references": {
+          "FlipProgressIndicatorSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipProgressIndicatorVariant",
+        "resolved": "\"bar\" | \"circle\"",
+        "references": {
+          "FlipProgressIndicatorVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"bar\""
+    }
+  }; }
+}
+//# sourceMappingURL=flip-progress-indicator.js.map

package/dist/collection/components/flip-progress-indicator/flip-progress-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/flip-progress-indicator/flip-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,qBAAqB;EALlC;IAOU,SAAI,GAA+B,GAAG,CAAC;IACvC,UAAK,GAAY,CAAC,CAAC;IACnB,YAAO,GAAkC,KAAK,CAAC;GAmExD;EAjEC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,oBAAoB,EACpB,4BAA4B,IAAI,CAAC,IAAI,EAAE,EACvC,+BAA+B,IAAI,CAAC,OAAO,EAAE,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO;MACtB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,8BACc,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,GACP,CACb;MACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAC5B,YACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS;QAEhB,WACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,IACxC,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,CAC3B,EAAE;UAEF,cACE,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,GACzB;UACF,cACE,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,sBACP,aAAa,uBACZ,UAAU,GAC7B,CACE,CACD,CACR,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipProgressIndicatorSize = \"s\" | \"m\";\n\nexport type FlipProgressIndicatorVariant = \"bar\" | \"circle\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-progress-indicator.css\",\n  tag: \"flip-progress-indicator\",\n})\nexport class FlipProgressIndicator {\n  @Prop() label!: string;\n  @Prop() size?: FlipProgressIndicatorSize = \"m\";\n  @Prop() value?: number = 0;\n  @Prop() variant?: FlipProgressIndicatorVariant = \"bar\";\n\n  render() {\n    const className = classnames(\n      \"progress-indicator\",\n      `progress-indicator--size-${this.size}`,\n      `progress-indicator--variant-${this.variant}`\n    );\n\n    const strokeWidth = this.size === \"m\" ? 4 : 2;\n    const radius = this.size === \"m\" ? 20 : 10;\n    const circumference = Math.round(radius * 2 * Math.PI);\n    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));\n\n    return (\n      <Host class={this.variant}>\n        {this.variant === \"bar\" && (\n          <progress\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n            max={100}\n            value={this.value}\n          ></progress>\n        )}\n        {this.variant === \"circle\" && (\n          <span\n            role=\"progressbar\"\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n          >\n            <svg\n              class=\"progress-indicator__circle\"\n              focusable=\"false\"\n              viewBox={`0 0 ${(radius + strokeWidth) * 2} ${\n                (radius + strokeWidth) * 2\n              }`}\n            >\n              <circle\n                class=\"progress-indicator__circle-background\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n              />\n              <circle\n                class=\"progress-indicator__circle-value\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={dashOffset}\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-progress-indicator/flip-progress-indicator.stories.js

@@ -0,0 +1,21 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-progress-indicator.mdx";
+export default {
+  component: "flip-progress-indicator",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipProgressIndicator",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-progress-indicator", args);
+  return element;
+};
+export const FlipProgressIndicator = Template.bind({});
+FlipProgressIndicator.args = {
+  label: "Upload progress",
+  value: 70,
+};
+//# sourceMappingURL=flip-progress-indicator.stories.js.map

package/dist/collection/components/flip-progress-indicator/flip-progress-indicator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-progress-indicator.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-progress-indicator/flip-progress-indicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,eAAe;EACb,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,kCAAkC;CAC1C,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;EAEtE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,qBAAqB,CAAC,IAAI,GAAG;EAC3B,KAAK,EAAE,iBAAiB;EACxB,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-progress-indicator.mdx\";\n\nexport default {\n  component: \"flip-progress-indicator\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipProgressIndicator\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-progress-indicator\", args);\n\n  return element;\n};\n\nexport const FlipProgressIndicator = Template.bind({});\n\nFlipProgressIndicator.args = {\n  label: \"Upload progress\",\n  value: 70,\n};\n"]}

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

@@ -199,3 +199,4 @@ export class FlipRadio {
       }
     }]; }
 }
+//# sourceMappingURL=flip-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-radio.js","sourceRoot":"","sources":["../../../../src/components/flip-radio/flip-radio.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;AAgBpC,MAAM,OAAO,SAAS;EAZtB;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;QAC5C,YAAM,KAAK,EAAC,gBAAgB;UAC1B;YACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB;UACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C;QACP,YAAM,KAAK,EAAC,wBAAwB;UACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ;UAC5D,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean | \"true\" | \"false\";\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-radio.css\",\n  tag: \"flip-radio\",\n})\nexport class FlipRadio {\n  @Prop({ mutable: true }) checked?: FlipRadioState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value!: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private onChange = () => {\n    this.checked = true;\n    this.valueChange.emit(this.value);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid = this.invalid;\n\n    const className = classnames(\"radio\", {\n      \"radio--checked\": checked,\n      \"radio--disabled\": this.disabled,\n      \"radio--invalid\": this.invalid,\n      \"radio--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"radio__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"radio__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"radio\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"radio__box\"></span>\n          </span>\n          <span class=\"radio__label-container\">\n            {this.label && <span class=\"radio__label\">{this.label}</span>}\n            {this.description && (\n              <span class=\"radio__description\">{this.description}</span>\n            )}\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -22,3 +22,4 @@ FlipRadio.args = {
   label: "Radio button",
   value: "Value",
 };
+//# sourceMappingURL=flip-radio.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-radio/flip-radio.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,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;EACf,OAAO,EAAE,KAAK;EACd,WAAW,EAAE,kCAAkC;EAC/C,OAAO,EAAE,OAAO;EAChB,SAAS,EAAE,OAAO;EAClB,KAAK,EAAE,cAAc;EACrB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-radio.mdx\";\n\nexport default {\n  component: \"flip-radio\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipRadio\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-radio\", args);\n\n  return element;\n};\n\nexport const FlipRadio = Template.bind({});\n\nFlipRadio.args = {\n  checked: false,\n  description: \"Optional description of the item\",\n  inputId: \"radio\",\n  inputName: \"radio\",\n  label: \"Radio button\",\n  value: \"Value\",\n};\n"]}