kemet-ui 1.0.0 → 1.2.0

package/custom-elements.json

@@ -231,6 +231,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-badge/kemet-badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetBadge",
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "string"
+              },
+              "default": "'primary'",
+              "privacy": "public",
+              "description": "The status of the badge",
+              "attribute": "status",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Rounds the corners on the badge",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "circle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Displays the badge in a circle",
+              "attribute": "circle",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "circlePadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "privacy": "public",
+              "description": "Padding on the badge as a circle",
+              "attribute": "circle-padding"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "status",
+              "description": "The status of the badge",
+              "fieldName": "status"
+            },
+            {
+              "name": "circle",
+              "description": "Displays the badge in a circle",
+              "fieldName": "circle"
+            },
+            {
+              "name": "pill",
+              "description": "Rounds the corners on the badge",
+              "fieldName": "pill"
+            },
+            {
+              "name": "circle-padding",
+              "description": "Padding on the badge as a circle",
+              "fieldName": "circlePadding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetBadge",
+            "module": "src/components/kemet-badge/kemet-badge.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-badge",
+          "declaration": {
+            "name": "KemetBadge",
+            "module": "src/components/kemet-badge/kemet-badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/kemet-button/kemet-button.js",
@@ -354,55 +464,856 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "disabled",
+              "privacy": "public",
+              "description": "Determines whether not a button is disabled",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "description": "Determines whether or not the button is active",
+              "fieldName": "active"
+            },
+            {
+              "name": "hover",
+              "description": "Is true when the button is hovered",
+              "fieldName": "hover"
+            },
+            {
+              "name": "focused",
+              "description": "Is true when the button is focused",
+              "fieldName": "focused"
+            },
+            {
+              "name": "link",
+              "description": "The url a button should link too",
+              "fieldName": "link"
+            },
+            {
+              "name": "outlined",
+              "description": "Outline style for a button",
+              "fieldName": "outlined"
+            },
+            {
+              "name": "disabled",
+              "description": "Determines whether not a button is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "type",
+              "description": "Controls the type of button\nstandard | text | circle | rounded | pill",
+              "fieldName": "type"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetButton",
+            "module": "src/components/kemet-button/kemet-button.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-button",
+          "declaration": {
+            "name": "KemetButton",
+            "module": "src/components/kemet-button/kemet-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-current.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselCurrent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "current",
+              "privacy": "public",
+              "attribute": "current"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "current",
+              "fieldName": "current"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-current",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KemetCarouselCurrent",
+          "declaration": {
+            "name": "KemetCarouselCurrent",
+            "module": "src/components/kemet-carousel/kemet-carousel-current.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-current",
+          "declaration": {
+            "name": "KemetCarouselCurrent",
+            "module": "src/components/kemet-carousel/kemet-carousel-current.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-first.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselFirst",
+          "members": [
+            {
+              "kind": "method",
+              "name": "first"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-first",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-first",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KemetCarouselFirst",
+          "declaration": {
+            "name": "KemetCarouselFirst",
+            "module": "src/components/kemet-carousel/kemet-carousel-first.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-first",
+          "declaration": {
+            "name": "KemetCarouselFirst",
+            "module": "src/components/kemet-carousel/kemet-carousel-first.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-last.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselLast",
+          "members": [
+            {
+              "kind": "method",
+              "name": "last"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-last",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-last",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KemetCarouselLast",
+          "declaration": {
+            "name": "KemetCarouselLast",
+            "module": "src/components/kemet-carousel/kemet-carousel-last.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-last",
+          "declaration": {
+            "name": "KemetCarouselLast",
+            "module": "src/components/kemet-carousel/kemet-carousel-last.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-link.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselLink",
+          "members": [
+            {
+              "kind": "method",
+              "name": "changed"
+            },
+            {
+              "kind": "field",
+              "name": "slide",
+              "privacy": "public",
+              "attribute": "slide",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "privacy": "public",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-link",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "slide",
+              "fieldName": "slide"
+            },
+            {
+              "name": "selected",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-link",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetCarouselLink",
+            "module": "src/components/kemet-carousel/kemet-carousel-link.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-link",
+          "declaration": {
+            "name": "KemetCarouselLink",
+            "module": "src/components/kemet-carousel/kemet-carousel-link.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-next.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselNext",
+          "members": [
+            {
+              "kind": "method",
+              "name": "next"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-next",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-next",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetCarouselNext",
+            "module": "src/components/kemet-carousel/kemet-carousel-next.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-next",
+          "declaration": {
+            "name": "KemetCarouselNext",
+            "module": "src/components/kemet-carousel/kemet-carousel-next.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-prev.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselPrev",
+          "members": [
+            {
+              "kind": "method",
+              "name": "prev"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-prev",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-prev",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KemetCarouselPrev",
+          "declaration": {
+            "name": "KemetCarouselPrev",
+            "module": "src/components/kemet-carousel/kemet-carousel-prev.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-prev",
+          "declaration": {
+            "name": "KemetCarouselPrev",
+            "module": "src/components/kemet-carousel/kemet-carousel-prev.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-slide.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselSlide",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Determines if the slide is selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "type": {
+                "text": "string"
+              },
+              "default": "'true'"
+            },
+            {
+              "kind": "field",
+              "name": "'aria-hidden'",
+              "privacy": "public",
+              "attribute": "'aria-hidden'",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "description": "Determines if the slide is selected",
+              "fieldName": "selected"
+            },
+            {
+              "name": "'aria-hidden'",
+              "fieldName": "'aria-hidden'"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-slide",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetCarouselSlide",
+            "module": "src/components/kemet-carousel/kemet-carousel-slide.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-slide",
+          "declaration": {
+            "name": "KemetCarouselSlide",
+            "module": "src/components/kemet-carousel/kemet-carousel-slide.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel-total.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarouselTotal",
+          "members": [
+            {
+              "kind": "field",
+              "name": "total",
+              "privacy": "public",
+              "attribute": "total"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "total",
+              "fieldName": "total"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-carousel-total",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KemetCarouselTotal",
+          "declaration": {
+            "name": "KemetCarouselTotal",
+            "module": "src/components/kemet-carousel/kemet-carousel-total.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-carousel-total",
+          "declaration": {
+            "name": "KemetCarouselTotal",
+            "module": "src/components/kemet-carousel/kemet-carousel-total.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-carousel/kemet-carousel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCarousel",
+          "members": [
+            {
+              "kind": "method",
+              "name": "swipeStart",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "swipeEnd",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "swipeUpdate",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "swipeLeave"
+            },
+            {
+              "kind": "method",
+              "name": "setSlideSize"
+            },
+            {
+              "kind": "method",
+              "name": "setToolbarSize"
+            },
+            {
+              "kind": "method",
+              "name": "makeToolbar"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleArrows"
+            },
+            {
+              "kind": "method",
+              "name": "handleFirst"
+            },
+            {
+              "kind": "method",
+              "name": "handleLast"
+            },
+            {
+              "kind": "method",
+              "name": "handleNext"
+            },
+            {
+              "kind": "method",
+              "name": "handlePrev"
+            },
+            {
+              "kind": "method",
+              "name": "updateIndex",
+              "parameters": [
+                {
+                  "name": "newIndex"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateInformation"
+            },
+            {
+              "kind": "method",
+              "name": "goToSlide",
+              "parameters": [
+                {
+                  "name": "index"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTransitionEnd"
+            },
+            {
+              "kind": "method",
+              "name": "handleLink",
+              "parameters": [
+                {
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getOption",
+              "parameters": [
+                {
+                  "name": "option"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "index",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "privacy": "public",
+              "description": "The current slide index.",
+              "attribute": "index",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "total",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "privacy": "public",
+              "description": "The total amount of slides",
+              "attribute": "total"
+            },
+            {
+              "kind": "field",
+              "name": "sliderWidth",
+              "type": {
+                "text": "string"
+              },
+              "default": "'auto'",
+              "privacy": "public",
+              "description": "The width of the slider",
+              "attribute": "sliderWidth"
+            },
+            {
+              "kind": "field",
+              "name": "sliderTranslateX",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "privacy": "public",
+              "description": "The X position of the slider",
+              "attribute": "sliderTranslateX"
+            },
+            {
+              "kind": "field",
+              "name": "inner",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Displays the toolbar inside the carousel container",
+              "attribute": "inner",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "arrows",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Determines whether or not to display arrows",
+              "attribute": "arrows",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "object"
+              },
+              "default": "{\n      perView: 1,\n      perMove: 1,\n      gap: 12,\n      slideshow: 0,\n      rewind: true,\n      center: false,\n    }",
+              "privacy": "public",
+              "description": "Default options for the carousel",
+              "attribute": "options"
+            },
+            {
+              "kind": "field",
+              "name": "breakpoints",
+              "type": {
+                "text": "object"
+              },
+              "default": "{\n      768: {\n        perView: 2,\n        gap: 24,\n        rewind: false,\n      },\n      1280: {\n        perView: 2.5,\n        center: true,\n      },\n    }",
               "privacy": "public",
-              "description": "Determines whether not a button is disabled",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Options are different breakpoints for the carousel. Is mobile first.",
+              "attribute": "breakpoints"
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-carousel-change-start",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires with the a slide has begun to change"
+            },
+            {
+              "name": "kemet-carousel-change-finished",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when a slide has changed and finished animating"
             }
           ],
           "attributes": [
             {
-              "name": "active",
-              "description": "Determines whether or not the button is active",
-              "fieldName": "active"
+              "name": "index",
+              "description": "The current slide index.",
+              "fieldName": "index"
             },
             {
-              "name": "hover",
-              "description": "Is true when the button is hovered",
-              "fieldName": "hover"
+              "name": "total",
+              "description": "The total amount of slides",
+              "fieldName": "total"
             },
             {
-              "name": "focused",
-              "description": "Is true when the button is focused",
-              "fieldName": "focused"
+              "name": "sliderWidth",
+              "description": "The width of the slider",
+              "fieldName": "sliderWidth"
             },
             {
-              "name": "link",
-              "description": "The url a button should link too",
-              "fieldName": "link"
+              "name": "sliderTranslateX",
+              "description": "The X position of the slider",
+              "fieldName": "sliderTranslateX"
             },
             {
-              "name": "outlined",
-              "description": "Outline style for a button",
-              "fieldName": "outlined"
+              "name": "inner",
+              "description": "Displays the toolbar inside the carousel container",
+              "fieldName": "inner"
             },
             {
-              "name": "disabled",
-              "description": "Determines whether not a button is disabled",
-              "fieldName": "disabled"
+              "name": "arrows",
+              "description": "Determines whether or not to display arrows",
+              "fieldName": "arrows"
             },
             {
-              "name": "type",
-              "description": "Controls the type of button\nstandard | text | circle | rounded | pill",
-              "fieldName": "type"
+              "name": "options",
+              "description": "Default options for the carousel",
+              "fieldName": "options"
+            },
+            {
+              "name": "breakpoints",
+              "description": "Options are different breakpoints for the carousel. Is mobile first.",
+              "fieldName": "breakpoints"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-button",
+          "tagName": "kemet-carousel",
           "customElement": true
         }
       ],
@@ -411,16 +1322,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetButton",
-            "module": "src/components/kemet-button/kemet-button.js"
+            "name": "KemetCarousel",
+            "module": "src/components/kemet-carousel/kemet-carousel.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-button",
+          "name": "kemet-carousel",
           "declaration": {
-            "name": "KemetButton",
-            "module": "src/components/kemet-button/kemet-button.js"
+            "name": "KemetCarousel",
+            "module": "src/components/kemet-carousel/kemet-carousel.js"
           }
         }
       ]
@@ -811,116 +1722,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/kemet-badge/kemet-badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetBadge",
-          "members": [
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            },
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "string"
-              },
-              "default": "'primary'",
-              "privacy": "public",
-              "description": "The status of the badge",
-              "attribute": "status",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "privacy": "public",
-              "description": "Rounds the corners on the badge",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "circle",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "privacy": "public",
-              "description": "Displays the badge in a circle",
-              "attribute": "circle",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "circlePadding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "privacy": "public",
-              "description": "Padding on the badge as a circle",
-              "attribute": "circle-padding"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "status",
-              "description": "The status of the badge",
-              "fieldName": "status"
-            },
-            {
-              "name": "circle",
-              "description": "Displays the badge in a circle",
-              "fieldName": "circle"
-            },
-            {
-              "name": "pill",
-              "description": "Rounds the corners on the badge",
-              "fieldName": "pill"
-            },
-            {
-              "name": "circle-padding",
-              "description": "Padding on the badge as a circle",
-              "fieldName": "circlePadding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "kemet-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetBadge",
-            "module": "src/components/kemet-badge/kemet-badge.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-badge",
-          "declaration": {
-            "name": "KemetBadge",
-            "module": "src/components/kemet-badge/kemet-badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/kemet-count/kemet-count.js",
@@ -1294,18 +2095,157 @@
       "exports": [
         {
           "kind": "js",
-          "name": "stylesBase",
+          "name": "stylesBase",
+          "declaration": {
+            "name": "stylesBase",
+            "module": "src/components/kemet-drawer/kemet-drawer.styles.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "stylesEffects",
+          "declaration": {
+            "name": "stylesEffects",
+            "module": "src/components/kemet-drawer/kemet-drawer.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-fab/kemet-fab.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetFAB",
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleMouseOver"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut"
+            },
+            {
+              "kind": "method",
+              "name": "handleScroll"
+            },
+            {
+              "kind": "field",
+              "name": "outlined",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Outline style for a button",
+              "attribute": "outlined",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Determines whether not a button is disabled",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "The expanded state of the button",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "privacy": "public",
+              "description": "Displays the fab with rounded corners",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expandPoint",
+              "privacy": "public",
+              "description": "The distance, in pixels, where the fab should automatically expand",
+              "attribute": "expand-point"
+            },
+            {
+              "kind": "field",
+              "name": "collapsePoint",
+              "privacy": "public",
+              "description": "The distance, in pixels, where the fab should automatically collapse",
+              "attribute": "collapse-point"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "expanded",
+              "description": "The expanded state of the button",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "outlined",
+              "description": "Outline style for a button",
+              "fieldName": "outlined"
+            },
+            {
+              "name": "disabled",
+              "description": "Determines whether not a button is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "pill",
+              "description": "Displays the fab with rounded corners",
+              "fieldName": "pill"
+            },
+            {
+              "name": "expand-point",
+              "description": "The distance, in pixels, where the fab should automatically expand",
+              "fieldName": "expandPoint"
+            },
+            {
+              "name": "collapse-point",
+              "description": "The distance, in pixels, where the fab should automatically collapse",
+              "fieldName": "collapsePoint"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-fab",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
           "declaration": {
-            "name": "stylesBase",
-            "module": "src/components/kemet-drawer/kemet-drawer.styles.js"
+            "name": "KemetFAB",
+            "module": "src/components/kemet-fab/kemet-fab.js"
           }
         },
         {
-          "kind": "js",
-          "name": "stylesEffects",
+          "kind": "custom-element-definition",
+          "name": "kemet-fab",
           "declaration": {
-            "name": "stylesEffects",
-            "module": "src/components/kemet-drawer/kemet-drawer.styles.js"
+            "name": "KemetFAB",
+            "module": "src/components/kemet-fab/kemet-fab.js"
           }
         }
       ]
@@ -1883,11 +2823,6 @@
             {
               "kind": "method",
               "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e"
-                }
-              ],
               "description": "Handles when the input receives input",
               "privacy": "private"
             },
@@ -2024,6 +2959,18 @@
               "description": "Manages password visibility",
               "attribute": "isPasswordVisible"
             },
+            {
+              "kind": "field",
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": "Determines if the input is focused",
+              "attribute": "focused",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "formSubmitController",
@@ -2384,6 +3331,11 @@
               "name": "inputType",
               "description": "Input Type of keypress handled through handleInput(e)",
               "fieldName": "inputType"
+            },
+            {
+              "name": "focused",
+              "description": "Determines if the input is focused",
+              "fieldName": "focused"
             }
           ],
           "superclass": {
@@ -2504,76 +3456,311 @@
               },
               "default": "false",
               "privacy": "public",
-              "attribute": "close-on-click"
+              "attribute": "close-on-click"
+            },
+            {
+              "kind": "field",
+              "name": "breakpoint",
+              "type": {
+                "text": "string"
+              },
+              "default": "'600px'",
+              "privacy": "public",
+              "attribute": "breakpoint"
+            },
+            {
+              "kind": "field",
+              "name": "effect",
+              "privacy": "public",
+              "attribute": "effect",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mobile",
+              "privacy": "public",
+              "attribute": "mobile",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "kemet-modal-opened",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when the modal opens"
+            },
+            {
+              "name": "kemet-modal-closed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when the modal closes"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "opened",
+              "fieldName": "opened"
+            },
+            {
+              "name": "effect",
+              "fieldName": "effect"
+            },
+            {
+              "name": "close-on-click",
+              "fieldName": "closeOnClick"
+            },
+            {
+              "name": "breakpoint",
+              "fieldName": "breakpoint"
+            },
+            {
+              "name": "mobile",
+              "fieldName": "mobile"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-modal",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetModal",
+            "module": "src/components/kemet-modal/kemet-modal.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-modal",
+          "declaration": {
+            "name": "KemetModal",
+            "module": "src/components/kemet-modal/kemet-modal.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-modal/kemet-modal.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "stylesBase",
+          "default": "css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  .content {\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-content-min-width, 0);\n    max-width: var(--kemet-modal-content-max-width, none);\n  }\n\n  :host([mobile]) .content {\n    min-width: var(--kemet-modal-content-mobile-min-width, 100%);\n    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);\n    padding: var(--kemet-modal-content-mobile-padding, 1rem);\n  }\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "stylesEffects",
+          "default": "css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) .content {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) .content {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) .content {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) .content {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) .content {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) .content {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"newspaper\"][opened]) .content {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) .content {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) .content {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) .content {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) .content {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) .content {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "stylesBase",
+          "declaration": {
+            "name": "stylesBase",
+            "module": "src/components/kemet-modal/kemet-modal.styles.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "stylesEffects",
+          "declaration": {
+            "name": "stylesEffects",
+            "module": "src/components/kemet-modal/kemet-modal.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-password/kemet-password.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetPassword",
+          "members": [
+            {
+              "kind": "method",
+              "name": "makeRules",
+              "description": "Makes the list of rules",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "templateResults"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "makeCheckIcon",
+              "parameters": [
+                {
+                  "name": "meetsCriteria",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Makes the check icon if the criteria has been met",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "templateResults"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "*"
+                  }
+                }
+              ],
+              "description": "Handles the kemet-input-input event",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setStrength",
+              "description": "Determines the strength of the password",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "visibility",
+              "description": "Determines whether to show or hide the component",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "rules",
+              "type": {
+                "text": "array"
+              },
+              "default": "[\n      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n    ]",
+              "privacy": "public",
+              "description": "An array of objects containing the rules the password must meet",
+              "attribute": "rules"
+            },
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Please make sure you meet all the requirements.'",
+              "privacy": "public",
+              "description": "A message that is above the rules",
+              "attribute": "message"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "'check2'",
+              "privacy": "public",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "number"
+              },
+              "default": "16",
+              "privacy": "public",
+              "attribute": "iconSize"
             },
             {
               "kind": "field",
-              "name": "breakpoint",
-              "type": {
-                "text": "string"
-              },
-              "default": "'600px'",
+              "name": "show",
               "privacy": "public",
-              "attribute": "breakpoint"
+              "description": "Controls the display of the component",
+              "attribute": "show",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "effect",
+              "name": "value",
               "privacy": "public",
-              "attribute": "effect",
-              "reflects": true
+              "description": "The value of the input component",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "mobile",
+              "name": "strength",
               "privacy": "public",
-              "attribute": "mobile",
-              "reflects": true
+              "description": "The strength of the password. Weak | Better | Strong",
+              "attribute": "strength"
             }
           ],
           "events": [
             {
-              "name": "kemet-modal-opened",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fires when the modal opens"
-            },
-            {
-              "name": "kemet-modal-closed",
+              "name": "kemet-password-status",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fires when the modal closes"
+              "description": "Fires when there's a change in status."
             }
           ],
           "attributes": [
             {
-              "name": "opened",
-              "fieldName": "opened"
+              "name": "rules",
+              "description": "An array of objects containing the rules the password must meet",
+              "fieldName": "rules"
             },
             {
-              "name": "effect",
-              "fieldName": "effect"
+              "name": "show",
+              "description": "Controls the display of the component",
+              "fieldName": "show"
             },
             {
-              "name": "close-on-click",
-              "fieldName": "closeOnClick"
+              "name": "value",
+              "description": "The value of the input component",
+              "fieldName": "value"
             },
             {
-              "name": "breakpoint",
-              "fieldName": "breakpoint"
+              "name": "message",
+              "description": "A message that is above the rules",
+              "fieldName": "message"
             },
             {
-              "name": "mobile",
-              "fieldName": "mobile"
+              "name": "strength",
+              "description": "The strength of the password. Weak | Better | Strong",
+              "fieldName": "strength"
+            },
+            {
+              "name": "icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "iconSize",
+              "fieldName": "iconSize"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-modal",
+          "tagName": "kemet-password",
           "customElement": true
         }
       ],
@@ -2582,50 +3769,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetModal",
-            "module": "src/components/kemet-modal/kemet-modal.js"
+            "name": "KemetPassword",
+            "module": "src/components/kemet-password/kemet-password.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-modal",
-          "declaration": {
-            "name": "KemetModal",
-            "module": "src/components/kemet-modal/kemet-modal.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/kemet-modal/kemet-modal.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "stylesBase",
-          "default": "css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  .content {\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-content-min-width, 0);\n    max-width: var(--kemet-modal-content-max-width, none);\n  }\n\n  :host([mobile]) .content {\n    min-width: var(--kemet-modal-content-mobile-min-width, 100%);\n    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);\n    padding: var(--kemet-modal-content-mobile-padding, 1rem);\n  }\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "stylesEffects",
-          "default": "css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) .content {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) .content {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) .content {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) .content {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) .content {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) .content {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"newspaper\"][opened]) .content {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) .content {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) .content {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) .content {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) .content {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) .content {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "stylesBase",
-          "declaration": {
-            "name": "stylesBase",
-            "module": "src/components/kemet-modal/kemet-modal.styles.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "stylesEffects",
+          "name": "kemet-password",
           "declaration": {
-            "name": "stylesEffects",
-            "module": "src/components/kemet-modal/kemet-modal.styles.js"
+            "name": "KemetPassword",
+            "module": "src/components/kemet-password/kemet-password.js"
           }
         }
       ]
@@ -5802,6 +6955,233 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-tracker/kemet-tracker-step.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetTrackerStep",
+          "members": [
+            {
+              "kind": "method",
+              "name": "makeLine"
+            },
+            {
+              "kind": "method",
+              "name": "makeCompletedLine"
+            },
+            {
+              "kind": "method",
+              "name": "makeDotContent"
+            },
+            {
+              "kind": "method",
+              "name": "makeSlotContent"
+            },
+            {
+              "kind": "method",
+              "name": "handleCompletedLineEnd"
+            },
+            {
+              "kind": "field",
+              "name": "completedSize",
+              "type": {
+                "text": "number"
+              },
+              "default": "16",
+              "privacy": "public",
+              "description": "The icon size for the completed check mark",
+              "attribute": "completedSize"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "privacy": "public",
+              "description": "The current step number",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "completed",
+              "privacy": "public",
+              "description": "Determines whether or not a step renders as complete",
+              "attribute": "completed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "current",
+              "privacy": "public",
+              "description": "Determines whether or not a step renders as the current step",
+              "attribute": "current",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "last",
+              "privacy": "public",
+              "description": "Is automatically added to the last step",
+              "attribute": "last",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mobile",
+              "privacy": "public",
+              "description": "Determines if a step should render as mobile",
+              "attribute": "mobile",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideDotContent",
+              "privacy": "public",
+              "description": "Hides the label inside of a dot",
+              "attribute": "hide-dot-content",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "step",
+              "description": "The current step number",
+              "fieldName": "step"
+            },
+            {
+              "name": "completed",
+              "description": "Determines whether or not a step renders as complete",
+              "fieldName": "completed"
+            },
+            {
+              "name": "current",
+              "description": "Determines whether or not a step renders as the current step",
+              "fieldName": "current"
+            },
+            {
+              "name": "last",
+              "description": "Is automatically added to the last step",
+              "fieldName": "last"
+            },
+            {
+              "name": "mobile",
+              "description": "Determines if a step should render as mobile",
+              "fieldName": "mobile"
+            },
+            {
+              "name": "hide-dot-content",
+              "description": "Hides the label inside of a dot",
+              "fieldName": "hideDotContent"
+            },
+            {
+              "name": "completedSize",
+              "description": "The icon size for the completed check mark",
+              "fieldName": "completedSize"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-tracker-step",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetTrackerStep",
+            "module": "src/components/kemet-tracker/kemet-tracker-step.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-tracker-step",
+          "declaration": {
+            "name": "KemetTrackerStep",
+            "module": "src/components/kemet-tracker/kemet-tracker-step.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kemet-tracker/kemet-tracker.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetTracker",
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "isMobile"
+            },
+            {
+              "kind": "field",
+              "name": "breakpoint",
+              "type": {
+                "text": "string"
+              },
+              "default": "'767px'",
+              "privacy": "public",
+              "description": "The point at which the tracker goes from mobile to standard",
+              "attribute": "breakpoint"
+            },
+            {
+              "kind": "field",
+              "name": "total",
+              "privacy": "public",
+              "description": "The total number of steps",
+              "attribute": "total"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "total",
+              "description": "The total number of steps",
+              "fieldName": "total"
+            },
+            {
+              "name": "breakpoint",
+              "description": "The point at which the tracker goes from mobile to standard",
+              "fieldName": "breakpoint"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-tracker",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetTracker",
+            "module": "src/components/kemet-tracker/kemet-tracker.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-tracker",
+          "declaration": {
+            "name": "KemetTracker",
+            "module": "src/components/kemet-tracker/kemet-tracker.js"
+          }
+        }
+      ]
     }
   ]
 }