kemet-ui 5.0.2 → 5.0.4

package/custom-elements.json

@@ -224,236 +224,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/accordion-panel/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetAccordionPanel",
-          "cssParts": [
-            {
-              "description": "Contains the trigger for the panel.",
-              "name": "trigger"
-            },
-            {
-              "description": "Contains the body for the panel.",
-              "name": "body"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The trigger button that opens and closes the panel.",
-              "name": "trigger"
-            },
-            {
-              "description": "The body content of the panel.",
-              "name": "body"
-            },
-            {
-              "description": "The icon for the panel.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "opened",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "undefined",
-              "description": "Determines the opened state of the panel",
-              "attribute": "opened",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "maxHeight",
-              "type": {
-                "text": "string"
-              },
-              "default": "'0px'",
-              "description": "Sets the max height of the panel's body",
-              "attribute": "max-height"
-            },
-            {
-              "kind": "field",
-              "name": "slug",
-              "type": {
-                "text": "string"
-              },
-              "default": "'panel'",
-              "description": "Uniquely identifies a panel for accessibility purposes",
-              "attribute": "slug"
-            },
-            {
-              "kind": "field",
-              "name": "index",
-              "type": {
-                "text": "number"
-              },
-              "attribute": "index"
-            },
-            {
-              "kind": "field",
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "attribute": "dom",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "attribute": "polarity",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "toggle",
-              "description": "Toggles the opened state of the panel.",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focusableBodyElements"
-            },
-            {
-              "kind": "method",
-              "name": "a11y"
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Fires when a panel is opened",
-              "name": "kemet-opened"
-            },
-            {
-              "description": "Fires when a panel is closed",
-              "name": "kemet-closed"
-            },
-            {
-              "description": "Fired when the accordion panel is mounted to the DOM",
-              "name": "kemet-accordion-panel-mounted"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "opened",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "undefined",
-              "description": "Determines the opened state of the panel",
-              "fieldName": "opened"
-            },
-            {
-              "name": "max-height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'0px'",
-              "description": "Sets the max height of the panel's body",
-              "fieldName": "maxHeight"
-            },
-            {
-              "name": "slug",
-              "type": {
-                "text": "string"
-              },
-              "default": "'panel'",
-              "description": "Uniquely identifies a panel for accessibility purposes",
-              "fieldName": "slug"
-            },
-            {
-              "name": "index",
-              "type": {
-                "text": "number"
-              },
-              "fieldName": "index"
-            },
-            {
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "fieldName": "dom"
-            },
-            {
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "fieldName": "polarity"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "kemet-accordion-panel",
-          "customElement": true,
-          "summary": "A blade for an accordion."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetAccordionPanel",
-            "module": "src/elements/accordion-panel/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-accordion-panel",
-          "declaration": {
-            "name": "KemetAccordionPanel",
-            "module": "src/elements/accordion-panel/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/accordion-panel/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/accordion-panel/styles.css.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/alert/index.ts",
@@ -1108,530 +878,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/badge/index.ts",
+      "path": "src/elements/button/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetBadge",
+          "name": "KemetButton",
           "cssProperties": [
             {
-              "description": "The padding of the badge.",
-              "name": "--kemet-badge-padding"
+              "description": "The brightness of the hover state.",
+              "name": "--kemet-button-hover-brightness"
             },
             {
-              "description": "The border width of the badge.",
-              "name": "--kemet-badge-border-width"
+              "description": "The brightness of the active state.",
+              "name": "--kemet-button-active-brightness"
             },
             {
-              "description": "The border style of the badge.",
-              "name": "--kemet-badge-border-style"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "EnumAppearance"
-              },
-              "description": "The appearance of the badge's color",
-              "attribute": "appearance",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "circlePadding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Padding on the badge as a circle",
-              "attribute": "circle-padding"
-            },
-            {
-              "kind": "field",
-              "name": "rounded",
-              "type": {
-                "text": "TypeRoundedSizes"
-              },
-              "description": "Rounds the corners on the badge",
-              "attribute": "rounded",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "outlined",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Outlines the badge",
-              "attribute": "outlined",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background",
-              "attribute": "polarity",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "attribute": "dom",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconLeft",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "iconRight",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleLeftChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleRightChange"
-            },
-            {
-              "type": {
-                "text": "TypeStatus"
-              },
-              "description": "The status of the badge",
-              "name": "status",
-              "kind": "field"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fires when the badge is mounted",
-              "name": "kemet-badge-mounted"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "appearance",
-              "type": {
-                "text": "EnumAppearance"
-              },
-              "description": "The appearance of the badge's color",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "circle-padding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Padding on the badge as a circle",
-              "fieldName": "circlePadding"
-            },
-            {
-              "name": "rounded",
-              "type": {
-                "text": "TypeRoundedSizes"
-              },
-              "description": "Rounds the corners on the badge",
-              "fieldName": "rounded"
-            },
-            {
-              "name": "outlined",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Outlines the badge",
-              "fieldName": "outlined"
-            },
-            {
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background",
-              "fieldName": "polarity"
-            },
-            {
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "fieldName": "dom"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "kemet-badge",
-          "customElement": true,
-          "summary": "Badges display the status of information."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetBadge",
-            "module": "src/elements/badge/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-badge",
-          "declaration": {
-            "name": "KemetBadge",
-            "module": "src/elements/badge/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/badge/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/badge/styles.css.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/card/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetCard",
-          "cssProperties": [
-            {
-              "description": "The space around elements.",
-              "name": "--kemet-card-padding"
-            },
-            {
-              "description": "The color of the borders.",
-              "name": "--kemet-card-border-color"
-            },
-            {
-              "description": "The color of the text. Default:",
-              "name": "--kemet-card-color"
-            },
-            {
-              "description": "The max width of the card.",
-              "name": "--kemet-card-max-width"
-            },
-            {
-              "description": "The border around the card.",
-              "name": "--kemet-card-border"
-            },
-            {
-              "description": "The body spacing.",
-              "name": "--kemet-card-body-padding"
-            },
-            {
-              "description": "The header spacing.",
-              "name": "--kemet-card-header-padding"
-            },
-            {
-              "description": "The header border.",
-              "name": "--kemet-card-header-border-bottom"
-            },
-            {
-              "description": "The caption text color.",
-              "name": "--kemet-card-caption-color"
-            },
-            {
-              "description": "The caption spacing.",
-              "name": "--kemet-card-caption-padding"
-            },
-            {
-              "description": "The caption background color.",
-              "name": "--kemet-card-caption-background-color"
-            },
-            {
-              "description": "The footer spacing.",
-              "name": "--kemet-card-footer-padding"
-            },
-            {
-              "description": "The footer border.",
-              "name": "--kemet-card-footer-border-top"
-            },
-            {
-              "description": "The filled background color.",
-              "name": "--kemet-card-filled-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The media area of the card.",
-              "name": "media"
-            },
-            {
-              "description": "The main contents of the card.",
-              "name": "body"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The contents of the alert.",
-              "name": "default"
-            },
-            {
-              "description": "The card's header.",
-              "name": "header"
-            },
-            {
-              "description": "A slot for images, videos, or embeds.",
-              "name": "media"
-            },
-            {
-              "description": "Text for the media slot.",
-              "name": "caption"
-            },
-            {
-              "description": "The card's footer.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "center",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Centers the elements in the card.",
-              "attribute": "center",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "rounded",
-              "type": {
-                "text": "EnumRoundedSizes"
-              },
-              "attribute": "rounded",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "filled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Fills the card with a background color.",
-              "attribute": "filled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "borderless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Removes the border from the card.",
-              "attribute": "borderless",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "elevation",
-              "type": {
-                "text": "EnumElevation"
-              },
-              "description": "The elevation level of the card.",
-              "attribute": "elevation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background",
-              "attribute": "polarity",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "attribute": "dom",
-              "reflects": true
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the card is mounted to the DOM",
-              "name": "kemet-card-mounted"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "center",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Centers the elements in the card.",
-              "fieldName": "center"
-            },
-            {
-              "name": "rounded",
-              "type": {
-                "text": "EnumRoundedSizes"
-              },
-              "fieldName": "rounded"
-            },
-            {
-              "name": "filled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Fills the card with a background color.",
-              "fieldName": "filled"
-            },
-            {
-              "name": "borderless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Removes the border from the card.",
-              "fieldName": "borderless"
-            },
-            {
-              "name": "elevation",
-              "type": {
-                "text": "EnumElevation"
-              },
-              "description": "The elevation level of the card.",
-              "fieldName": "elevation"
-            },
-            {
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background",
-              "fieldName": "polarity"
-            },
-            {
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "fieldName": "dom"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "kemet-card",
-          "customElement": true,
-          "summary": "A highly configurable panel design to display media and information."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetCard",
-            "module": "src/elements/card/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-card",
-          "declaration": {
-            "name": "KemetCard",
-            "module": "src/elements/card/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/card/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/card/styles.css.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/button/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetButton",
-          "cssProperties": [
-            {
-              "description": "The brightness of the hover state.",
-              "name": "--kemet-button-hover-brightness"
-            },
-            {
-              "description": "The brightness of the active state.",
-              "name": "--kemet-button-active-brightness"
-            },
-            {
-              "description": "The diameter of a circle button.",
-              "name": "--kemet-button-circle-size"
-            },
+              "description": "The diameter of a circle button.",
+              "name": "--kemet-button-circle-size"
+            },
             {
               "description": "The transition speed of the hover effect.",
               "name": "--kemet-button-transition-speed"
@@ -1942,45 +1207,268 @@
               "fieldName": "iconRight"
             },
             {
-              "name": "icon-button",
+              "name": "icon-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "iconButton"
+            },
+            {
+              "name": "rounded",
+              "type": {
+                "text": "TypeRoundedSizes"
+              },
+              "description": "The border radius of the button",
+              "fieldName": "rounded"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the button is in a loading state",
+              "fieldName": "loading"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "EnumAppearance"
+              },
+              "description": "The appearance of the button's color",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "EnumSizes"
+              },
+              "description": "The size of the button",
+              "fieldName": "size"
+            },
+            {
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background",
+              "fieldName": "polarity"
+            },
+            {
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "fieldName": "dom"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-button",
+          "customElement": true,
+          "summary": "A versatile button that can be used either to submit a form, trigger an action, or link to content."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetButton",
+            "module": "src/elements/button/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-button",
+          "declaration": {
+            "name": "KemetButton",
+            "module": "src/elements/button/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/button/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/button/styles.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/badge/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetBadge",
+          "cssProperties": [
+            {
+              "description": "The padding of the badge.",
+              "name": "--kemet-badge-padding"
+            },
+            {
+              "description": "The border width of the badge.",
+              "name": "--kemet-badge-border-width"
+            },
+            {
+              "description": "The border style of the badge.",
+              "name": "--kemet-badge-border-style"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "EnumAppearance"
+              },
+              "description": "The appearance of the badge's color",
+              "attribute": "appearance",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "circlePadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Padding on the badge as a circle",
+              "attribute": "circle-padding"
+            },
+            {
+              "kind": "field",
+              "name": "rounded",
+              "type": {
+                "text": "TypeRoundedSizes"
+              },
+              "description": "Rounds the corners on the badge",
+              "attribute": "rounded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "outlined",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Outlines the badge",
+              "attribute": "outlined",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background",
+              "attribute": "polarity",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "attribute": "dom",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconLeft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "iconRight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleLeftChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleRightChange"
+            },
+            {
+              "type": {
+                "text": "TypeStatus"
+              },
+              "description": "The status of the badge",
+              "name": "status",
+              "kind": "field"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the badge is mounted",
+              "name": "kemet-badge-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "appearance",
+              "type": {
+                "text": "EnumAppearance"
+              },
+              "description": "The appearance of the badge's color",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "circle-padding",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "iconButton"
+              "default": "0",
+              "description": "Padding on the badge as a circle",
+              "fieldName": "circlePadding"
             },
             {
               "name": "rounded",
               "type": {
                 "text": "TypeRoundedSizes"
               },
-              "description": "The border radius of the button",
+              "description": "Rounds the corners on the badge",
               "fieldName": "rounded"
             },
             {
-              "name": "loading",
+              "name": "outlined",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the button is in a loading state",
-              "fieldName": "loading"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "EnumAppearance"
-              },
-              "description": "The appearance of the button's color",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "EnumSizes"
-              },
-              "description": "The size of the button",
-              "fieldName": "size"
+              "description": "Outlines the badge",
+              "fieldName": "outlined"
             },
             {
               "name": "polarity",
@@ -2004,9 +1492,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-button",
+          "tagName": "kemet-badge",
           "customElement": true,
-          "summary": "A versatile button that can be used either to submit a form, trigger an action, or link to content."
+          "summary": "Badges display the status of information."
         }
       ],
       "exports": [
@@ -2014,30 +1502,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetButton",
-            "module": "src/elements/button/index.ts"
+            "name": "KemetBadge",
+            "module": "src/elements/badge/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-button",
+          "name": "kemet-badge",
           "declaration": {
-            "name": "KemetButton",
-            "module": "src/elements/button/index.ts"
+            "name": "KemetBadge",
+            "module": "src/elements/badge/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/button/styles.css.ts",
+      "path": "src/elements/badge/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/button/styles.css.ts"
+            "module": "src/elements/badge/styles.css.ts"
           }
         }
       ]
@@ -2155,235 +1643,517 @@
               "reflects": true
             },
             {
-              "kind": "field",
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if a checkbox is required",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Is true when the checkbox is focused",
+              "attribute": "focused",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rounded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Gives the checkbox rounded edges",
+              "attribute": "rounded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Fills the checkbox with color",
+              "attribute": "filled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "EnumAppearances"
+              },
+              "description": "The status of the checkbox",
+              "attribute": "appearance",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Message associated with checkbox status",
+              "attribute": "message"
+            },
+            {
+              "kind": "field",
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background",
+              "attribute": "polarity",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "attribute": "dom",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Simulates a click on the input element.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange"
+            },
+            {
+              "kind": "method",
+              "name": "makeMessage"
+            },
+            {
+              "kind": "method",
+              "name": "makeCheckMark"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the state of the checkbox changes",
+              "name": "kemet-change"
+            },
+            {
+              "description": "Fires when the checkbox receives focus",
+              "name": "kemet-focus"
+            },
+            {
+              "description": "Fires when the checkbox loses focus",
+              "name": "kemet-blur"
+            },
+            {
+              "description": "Fires when the checkbox is mounted to the dom",
+              "name": "kemet-checkbox-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text for the checkbox",
+              "fieldName": "label"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the checkbox is selected",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "An indeterminate selection status",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'checkbox'",
+              "description": "Name of the checkbox",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "false",
+              "description": "Value of the checkbox",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if a checkbox is disabled",
+              "fieldName": "disabled"
+            },
+            {
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Determines if a checkbox is required",
-              "attribute": "required",
-              "reflects": true
+              "fieldName": "required"
             },
             {
-              "kind": "field",
               "name": "focused",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Is true when the checkbox is focused",
-              "attribute": "focused",
-              "reflects": true
+              "fieldName": "focused"
             },
             {
-              "kind": "field",
               "name": "rounded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Gives the checkbox rounded edges",
-              "attribute": "rounded",
-              "reflects": true
+              "fieldName": "rounded"
             },
             {
-              "kind": "field",
               "name": "filled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Fills the checkbox with color",
-              "attribute": "filled",
-              "reflects": true
+              "fieldName": "filled"
             },
             {
-              "kind": "field",
               "name": "appearance",
               "type": {
                 "text": "EnumAppearances"
               },
               "description": "The status of the checkbox",
-              "attribute": "appearance",
-              "reflects": true
+              "fieldName": "appearance"
             },
             {
-              "kind": "field",
               "name": "message",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Message associated with checkbox status",
-              "attribute": "message"
+              "fieldName": "message"
             },
             {
-              "kind": "field",
               "name": "polarity",
               "type": {
                 "text": "'light' | 'dark'"
               },
               "description": "Determines if the component has a dark or light background",
-              "attribute": "polarity",
-              "reflects": true
+              "fieldName": "polarity"
             },
             {
-              "kind": "field",
               "name": "dom",
               "type": {
                 "text": "string"
               },
               "default": "'initializing'",
               "description": "The status of dom initalization.",
-              "attribute": "dom",
-              "reflects": true
+              "fieldName": "dom"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-checkbox",
+          "customElement": true,
+          "summary": "An enhanced checkbox."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetCheckbox",
+            "module": "src/elements/checkbox/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-checkbox",
+          "declaration": {
+            "name": "KemetCheckbox",
+            "module": "src/elements/checkbox/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/checkbox/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/checkbox/styles.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/card/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCard",
+          "cssProperties": [
+            {
+              "description": "The space around elements.",
+              "name": "--kemet-card-padding"
             },
             {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "description": "The color of the borders.",
+              "name": "--kemet-card-border-color"
             },
             {
-              "kind": "method",
-              "name": "click",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Simulates a click on the input element.",
-              "privacy": "public"
+              "description": "The color of the text. Default:",
+              "name": "--kemet-card-color"
             },
             {
-              "kind": "method",
-              "name": "handleClick"
+              "description": "The max width of the card.",
+              "name": "--kemet-card-max-width"
             },
             {
-              "kind": "method",
-              "name": "handleBlur"
+              "description": "The border around the card.",
+              "name": "--kemet-card-border"
             },
             {
-              "kind": "method",
-              "name": "handleFocus"
+              "description": "The body spacing.",
+              "name": "--kemet-card-body-padding"
             },
             {
-              "kind": "method",
-              "name": "handleChange"
+              "description": "The header spacing.",
+              "name": "--kemet-card-header-padding"
             },
             {
-              "kind": "method",
-              "name": "makeMessage"
+              "description": "The header border.",
+              "name": "--kemet-card-header-border-bottom"
             },
             {
-              "kind": "method",
-              "name": "makeCheckMark"
+              "description": "The caption text color.",
+              "name": "--kemet-card-caption-color"
             },
             {
-              "kind": "method",
-              "name": "checkValidity"
+              "description": "The caption spacing.",
+              "name": "--kemet-card-caption-padding"
+            },
+            {
+              "description": "The caption background color.",
+              "name": "--kemet-card-caption-background-color"
+            },
+            {
+              "description": "The footer spacing.",
+              "name": "--kemet-card-footer-padding"
+            },
+            {
+              "description": "The footer border.",
+              "name": "--kemet-card-footer-border-top"
+            },
+            {
+              "description": "The filled background color.",
+              "name": "--kemet-card-filled-color"
             }
           ],
-          "events": [
+          "cssParts": [
             {
-              "description": "Fires when the state of the checkbox changes",
-              "name": "kemet-change"
+              "description": "The media area of the card.",
+              "name": "media"
             },
             {
-              "description": "Fires when the checkbox receives focus",
-              "name": "kemet-focus"
+              "description": "The main contents of the card.",
+              "name": "body"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The contents of the alert.",
+              "name": "default"
             },
             {
-              "description": "Fires when the checkbox loses focus",
-              "name": "kemet-blur"
+              "description": "The card's header.",
+              "name": "header"
             },
             {
-              "description": "Fires when the checkbox is mounted to the dom",
-              "name": "kemet-checkbox-mounted"
+              "description": "A slot for images, videos, or embeds.",
+              "name": "media"
+            },
+            {
+              "description": "Text for the media slot.",
+              "name": "caption"
+            },
+            {
+              "description": "The card's footer.",
+              "name": "footer"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "label",
+              "kind": "field",
+              "name": "center",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Label text for the checkbox",
-              "fieldName": "label"
+              "default": "false",
+              "description": "Centers the elements in the card.",
+              "attribute": "center",
+              "reflects": true
             },
             {
-              "name": "checked",
+              "kind": "field",
+              "name": "rounded",
+              "type": {
+                "text": "EnumRoundedSizes"
+              },
+              "attribute": "rounded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the checkbox is selected",
-              "fieldName": "checked"
+              "description": "Fills the card with a background color.",
+              "attribute": "filled",
+              "reflects": true
             },
             {
-              "name": "indeterminate",
+              "kind": "field",
+              "name": "borderless",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "An indeterminate selection status",
-              "fieldName": "indeterminate"
+              "description": "Removes the border from the card.",
+              "attribute": "borderless",
+              "reflects": true
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "elevation",
               "type": {
-                "text": "string"
+                "text": "EnumElevation"
               },
-              "default": "'checkbox'",
-              "description": "Name of the checkbox",
-              "fieldName": "name"
+              "description": "The elevation level of the card.",
+              "attribute": "elevation",
+              "reflects": true
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "polarity",
               "type": {
-                "text": "string"
+                "text": "'light' | 'dark'"
               },
-              "default": "false",
-              "description": "Value of the checkbox",
-              "fieldName": "value"
+              "description": "Determines if the component has a dark or light background",
+              "attribute": "polarity",
+              "reflects": true
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "dom",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines if a checkbox is disabled",
-              "fieldName": "disabled"
-            },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "attribute": "dom",
+              "reflects": true
+            }
+          ],
+          "events": [
             {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines if a checkbox is required",
-              "fieldName": "required"
-            },
+              "description": "Fired when the card is mounted to the DOM",
+              "name": "kemet-card-mounted"
+            }
+          ],
+          "attributes": [
             {
-              "name": "focused",
+              "name": "center",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Is true when the checkbox is focused",
-              "fieldName": "focused"
+              "description": "Centers the elements in the card.",
+              "fieldName": "center"
             },
             {
               "name": "rounded",
               "type": {
-                "text": "boolean"
+                "text": "EnumRoundedSizes"
               },
-              "default": "false",
-              "description": "Gives the checkbox rounded edges",
               "fieldName": "rounded"
             },
             {
@@ -2392,25 +2162,25 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Fills the checkbox with color",
+              "description": "Fills the card with a background color.",
               "fieldName": "filled"
             },
             {
-              "name": "appearance",
+              "name": "borderless",
               "type": {
-                "text": "EnumAppearances"
+                "text": "boolean"
               },
-              "description": "The status of the checkbox",
-              "fieldName": "appearance"
+              "default": "false",
+              "description": "Removes the border from the card.",
+              "fieldName": "borderless"
             },
             {
-              "name": "message",
+              "name": "elevation",
               "type": {
-                "text": "string"
+                "text": "EnumElevation"
               },
-              "default": "''",
-              "description": "Message associated with checkbox status",
-              "fieldName": "message"
+              "description": "The elevation level of the card.",
+              "fieldName": "elevation"
             },
             {
               "name": "polarity",
@@ -2434,9 +2204,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-checkbox",
+          "tagName": "kemet-card",
           "customElement": true,
-          "summary": "An enhanced checkbox."
+          "summary": "A highly configurable panel design to display media and information."
         }
       ],
       "exports": [
@@ -2444,30 +2214,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetCheckbox",
-            "module": "src/elements/checkbox/index.ts"
+            "name": "KemetCard",
+            "module": "src/elements/card/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-checkbox",
+          "name": "kemet-card",
           "declaration": {
-            "name": "KemetCheckbox",
-            "module": "src/elements/checkbox/index.ts"
+            "name": "KemetCard",
+            "module": "src/elements/card/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/checkbox/styles.css.ts",
+      "path": "src/elements/card/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/checkbox/styles.css.ts"
+            "module": "src/elements/card/styles.css.ts"
           }
         }
       ]
@@ -2714,72 +2484,266 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/dialog/effects.css.ts",
+      "path": "src/elements/count/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCount",
+          "cssProperties": [
+            {
+              "description": "The font size. Default: 90%.",
+              "name": "--kemet-count-font-size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "description": "The text label shown to users",
+              "attribute": "message"
+            },
+            {
+              "kind": "field",
+              "name": "limit",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of characters allowed",
+              "attribute": "limit"
+            },
+            {
+              "kind": "field",
+              "name": "validateImmediately",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true if the field should validate as soon as the character limit is reached",
+              "attribute": "validate-immediately"
+            },
+            {
+              "kind": "field",
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background",
+              "attribute": "polarity",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "attribute": "dom",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "remaining",
+              "type": {
+                "text": "number"
+              },
+              "description": "The number of characters remaining"
+            },
+            {
+              "kind": "field",
+              "name": "field",
+              "type": {
+                "text": "HTMLKemetFieldElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputSlot",
+              "type": {
+                "text": "HTMLKemetInputElement | HTMLKemetTextareaElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement | null"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "textarea",
+              "type": {
+                "text": "HTMLTextAreaElement | null"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when there's a change in status.",
+              "name": "kemet-count-appearance-change"
+            },
+            {
+              "description": "Fired when the count is mounted to the DOM",
+              "name": "kemet-count-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "description": "The text label shown to users",
+              "fieldName": "message"
+            },
+            {
+              "name": "limit",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of characters allowed",
+              "fieldName": "limit"
+            },
+            {
+              "name": "validate-immediately",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true if the field should validate as soon as the character limit is reached",
+              "fieldName": "validateImmediately"
+            },
+            {
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background",
+              "fieldName": "polarity"
+            },
+            {
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "fieldName": "dom"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-count",
+          "customElement": true,
+          "summary": "Maintains a character count for an input field. Is to be used only in the component slot of a Field component."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetCount",
+            "module": "src/elements/count/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-count",
+          "declaration": {
+            "name": "KemetCount",
+            "module": "src/elements/count/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/drawer/effects.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/dialog/effects.css.ts"
+            "module": "src/elements/drawer/effects.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/dialog/index.ts",
+      "path": "src/elements/drawer/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Dialog",
+          "name": "KemetDrawer",
           "cssProperties": [
             {
-              "description": "The mount of rounding for rounded corners",
-              "name": "--kemet-modal-radius"
+              "description": "The width of the drawer.",
+              "name": "--kemet-drawer-width"
             },
             {
-              "description": "The minimum width of the dialog.",
-              "name": "--kemet-modal-dialog-min-width"
+              "description": "The height of the drawer.",
+              "name": "--kemet-drawer-height"
             },
             {
-              "description": "The maximum width of the dialog.",
-              "name": "--kemet-modal-dialog-max-width"
+              "description": "The text color of the drawer.",
+              "name": "--kemet-drawer-color"
             },
             {
-              "description": "The background color of the dialog.",
-              "name": "--kemet-modal-dialog-background-color"
+              "description": "The background color of the drawer.",
+              "name": "--kemet-drawer-background-color"
             },
             {
-              "description": "The width of the mobile dialog.",
-              "name": "--kemet-modal-dialog-mobile-width"
+              "description": "The color of the overlay.",
+              "name": "--kemet-drawer-overlay-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "container"
             },
             {
-              "description": "The margins of the mobile dialog.",
-              "name": "--kemet-modal-dialog-mobile-margin"
+              "name": "drawer"
             },
             {
-              "description": "The padding of the mobile dialog.",
-              "name": "--kemet-modal-dialog-mobile-padding"
+              "name": "pusher"
             },
             {
-              "description": "The color of the backdrop overlay.",
-              "name": "--kemet-modal-overlay-background-color"
+              "name": "content"
             },
             {
-              "description": "The mount of rounding for rounded corners",
-              "name": "--kemet-modal-radius"
+              "name": "wrapper"
             }
           ],
-          "cssParts": [
+          "slots": [
             {
-              "description": "The main contents of the dialog.",
-              "name": "dialog"
+              "description": "The off-screen nav area of your app or site",
+              "name": "sidebar"
             },
             {
-              "description": "The surrounding scrim of the dialog.",
-              "name": "overlay"
+              "description": "The main content area of your app or site.",
+              "name": "body"
             }
           ],
           "members": [
@@ -2790,6 +2754,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Determines if the drawer is opened or not.",
               "attribute": "opened",
               "reflects": true
             },
@@ -2799,43 +2764,40 @@
               "type": {
                 "text": "string"
               },
+              "description": "The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)",
               "attribute": "effect",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "closeOnClick",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "close-on-click"
-            },
-            {
-              "kind": "field",
-              "name": "breakpoint",
+              "name": "side",
               "type": {
-                "text": "string"
+                "text": "EnumDirection"
               },
-              "default": "'600px'",
-              "attribute": "breakpoint"
+              "description": "Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)",
+              "attribute": "side",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mobile",
+              "name": "overlay",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "mobile",
+              "default": "false",
+              "description": "Adds an overlay over the content section of the Drawer when opened",
+              "attribute": "overlay",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "rounded",
+              "name": "fillViewport",
               "type": {
-                "text": "EnumRoundedSizes"
+                "text": "boolean"
               },
-              "attribute": "rounded",
+              "default": "false",
+              "description": "Makes the drawer fill the viewport height",
+              "attribute": "fill-viewport",
               "reflects": true
             },
             {
@@ -2858,40 +2820,20 @@
               "description": "The status of dom initalization.",
               "attribute": "dom",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "isMobile"
-            },
-            {
-              "kind": "method",
-              "name": "handleOpen"
-            },
-            {
-              "kind": "method",
-              "name": "handleClose"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusableDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
             }
           ],
           "events": [
             {
-              "description": "Fires when the dialog opens",
-              "name": "kemet-dialog-opened"
+              "description": "Fires when the drawer opens.",
+              "name": "kemet-drawer-opened"
             },
             {
-              "description": "Fires when the dialog closes",
-              "name": "kemet-dialog-closed"
+              "description": "Fires when the drawer closes.",
+              "name": "kemet-drawer-closed"
+            },
+            {
+              "description": "Fired when the button is mounted to the DOM",
+              "name": "kemet-drawer-mounted"
             }
           ],
           "attributes": [
@@ -2901,6 +2843,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Determines if the drawer is opened or not.",
               "fieldName": "opened"
             },
             {
@@ -2908,37 +2851,34 @@
               "type": {
                 "text": "string"
               },
+              "description": "The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)",
               "fieldName": "effect"
             },
             {
-              "name": "close-on-click",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "closeOnClick"
-            },
-            {
-              "name": "breakpoint",
+              "name": "side",
               "type": {
-                "text": "string"
+                "text": "EnumDirection"
               },
-              "default": "'600px'",
-              "fieldName": "breakpoint"
+              "description": "Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)",
+              "fieldName": "side"
             },
             {
-              "name": "mobile",
+              "name": "overlay",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "mobile"
+              "default": "false",
+              "description": "Adds an overlay over the content section of the Drawer when opened",
+              "fieldName": "overlay"
             },
             {
-              "name": "rounded",
+              "name": "fill-viewport",
               "type": {
-                "text": "EnumRoundedSizes"
+                "text": "boolean"
               },
-              "fieldName": "rounded"
+              "default": "false",
+              "description": "Makes the drawer fill the viewport height",
+              "fieldName": "fillViewport"
             },
             {
               "name": "polarity",
@@ -2962,9 +2902,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-dialog",
+          "tagName": "kemet-drawer",
           "customElement": true,
-          "summary": "A dialog that has many built-in effects and flexible styles."
+          "summary": "A component that adds an off-canvas menu with different effects."
         }
       ],
       "exports": [
@@ -2972,30 +2912,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Dialog",
-            "module": "src/elements/dialog/index.ts"
+            "name": "KemetDrawer",
+            "module": "src/elements/drawer/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-dialog",
+          "name": "kemet-drawer",
           "declaration": {
-            "name": "Dialog",
-            "module": "src/elements/dialog/index.ts"
+            "name": "KemetDrawer",
+            "module": "src/elements/drawer/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/dialog/styles.css.ts",
+      "path": "src/elements/drawer/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/dialog/styles.css.ts"
+            "module": "src/elements/drawer/styles.css.ts"
           }
         }
       ]
@@ -3094,73 +3034,72 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/drawer/effects.ts",
+      "path": "src/elements/dialog/effects.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/drawer/effects.ts"
+            "module": "src/elements/dialog/effects.css.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/drawer/index.ts",
+      "path": "src/elements/dialog/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetDrawer",
+          "name": "Dialog",
           "cssProperties": [
             {
-              "description": "The width of the drawer.",
-              "name": "--kemet-drawer-width"
+              "description": "The mount of rounding for rounded corners",
+              "name": "--kemet-modal-radius"
             },
             {
-              "description": "The height of the drawer.",
-              "name": "--kemet-drawer-height"
+              "description": "The minimum width of the dialog.",
+              "name": "--kemet-modal-dialog-min-width"
             },
             {
-              "description": "The text color of the drawer.",
-              "name": "--kemet-drawer-color"
+              "description": "The maximum width of the dialog.",
+              "name": "--kemet-modal-dialog-max-width"
             },
             {
-              "description": "The background color of the drawer.",
-              "name": "--kemet-drawer-background-color"
+              "description": "The background color of the dialog.",
+              "name": "--kemet-modal-dialog-background-color"
             },
             {
-              "description": "The color of the overlay.",
-              "name": "--kemet-drawer-overlay-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "name": "container"
+              "description": "The width of the mobile dialog.",
+              "name": "--kemet-modal-dialog-mobile-width"
             },
             {
-              "name": "drawer"
+              "description": "The margins of the mobile dialog.",
+              "name": "--kemet-modal-dialog-mobile-margin"
             },
             {
-              "name": "pusher"
+              "description": "The padding of the mobile dialog.",
+              "name": "--kemet-modal-dialog-mobile-padding"
             },
             {
-              "name": "content"
+              "description": "The color of the backdrop overlay.",
+              "name": "--kemet-modal-overlay-background-color"
             },
             {
-              "name": "wrapper"
+              "description": "The mount of rounding for rounded corners",
+              "name": "--kemet-modal-radius"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "The off-screen nav area of your app or site",
-              "name": "sidebar"
+              "description": "The main contents of the dialog.",
+              "name": "dialog"
             },
             {
-              "description": "The main content area of your app or site.",
-              "name": "body"
+              "description": "The surrounding scrim of the dialog.",
+              "name": "overlay"
             }
           ],
           "members": [
@@ -3171,7 +3110,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the drawer is opened or not.",
               "attribute": "opened",
               "reflects": true
             },
@@ -3181,40 +3119,43 @@
               "type": {
                 "text": "string"
               },
-              "description": "The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)",
               "attribute": "effect",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "side",
+              "name": "closeOnClick",
               "type": {
-                "text": "EnumDirection"
+                "text": "boolean"
               },
-              "description": "Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)",
-              "attribute": "side",
-              "reflects": true
+              "default": "false",
+              "attribute": "close-on-click"
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "breakpoint",
+              "type": {
+                "text": "string"
+              },
+              "default": "'600px'",
+              "attribute": "breakpoint"
+            },
+            {
+              "kind": "field",
+              "name": "mobile",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Adds an overlay over the content section of the Drawer when opened",
-              "attribute": "overlay",
+              "attribute": "mobile",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fillViewport",
+              "name": "rounded",
               "type": {
-                "text": "boolean"
+                "text": "EnumRoundedSizes"
               },
-              "default": "false",
-              "description": "Makes the drawer fill the viewport height",
-              "attribute": "fill-viewport",
+              "attribute": "rounded",
               "reflects": true
             },
             {
@@ -3237,20 +3178,40 @@
               "description": "The status of dom initalization.",
               "attribute": "dom",
               "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "isMobile"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpen"
+            },
+            {
+              "kind": "method",
+              "name": "handleClose"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocusableDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "events": [
             {
-              "description": "Fires when the drawer opens.",
-              "name": "kemet-drawer-opened"
-            },
-            {
-              "description": "Fires when the drawer closes.",
-              "name": "kemet-drawer-closed"
+              "description": "Fires when the dialog opens",
+              "name": "kemet-dialog-opened"
             },
             {
-              "description": "Fired when the button is mounted to the DOM",
-              "name": "kemet-drawer-mounted"
+              "description": "Fires when the dialog closes",
+              "name": "kemet-dialog-closed"
             }
           ],
           "attributes": [
@@ -3260,7 +3221,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the drawer is opened or not.",
               "fieldName": "opened"
             },
             {
@@ -3268,34 +3228,37 @@
               "type": {
                 "text": "string"
               },
-              "description": "The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)",
               "fieldName": "effect"
             },
             {
-              "name": "side",
+              "name": "close-on-click",
               "type": {
-                "text": "EnumDirection"
+                "text": "boolean"
               },
-              "description": "Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)",
-              "fieldName": "side"
+              "default": "false",
+              "fieldName": "closeOnClick"
             },
             {
-              "name": "overlay",
+              "name": "breakpoint",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds an overlay over the content section of the Drawer when opened",
-              "fieldName": "overlay"
+              "default": "'600px'",
+              "fieldName": "breakpoint"
             },
             {
-              "name": "fill-viewport",
+              "name": "mobile",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Makes the drawer fill the viewport height",
-              "fieldName": "fillViewport"
+              "fieldName": "mobile"
+            },
+            {
+              "name": "rounded",
+              "type": {
+                "text": "EnumRoundedSizes"
+              },
+              "fieldName": "rounded"
             },
             {
               "name": "polarity",
@@ -3319,9 +3282,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-drawer",
+          "tagName": "kemet-dialog",
           "customElement": true,
-          "summary": "A component that adds an off-canvas menu with different effects."
+          "summary": "A dialog that has many built-in effects and flexible styles."
         }
       ],
       "exports": [
@@ -3329,30 +3292,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetDrawer",
-            "module": "src/elements/drawer/index.ts"
+            "name": "Dialog",
+            "module": "src/elements/dialog/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-drawer",
+          "name": "kemet-dialog",
           "declaration": {
-            "name": "KemetDrawer",
-            "module": "src/elements/drawer/index.ts"
+            "name": "Dialog",
+            "module": "src/elements/dialog/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/drawer/styles.css.ts",
+      "path": "src/elements/dialog/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/drawer/styles.css.ts"
+            "module": "src/elements/dialog/styles.css.ts"
           }
         }
       ]
@@ -3647,55 +3610,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/count/index.ts",
+      "path": "src/elements/accordion-panel/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetCount",
-          "cssProperties": [
+          "name": "KemetAccordionPanel",
+          "cssParts": [
             {
-              "description": "The font size. Default: 90%.",
-              "name": "--kemet-count-font-size"
+              "description": "Contains the trigger for the panel.",
+              "name": "trigger"
+            },
+            {
+              "description": "Contains the body for the panel.",
+              "name": "body"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The trigger button that opens and closes the panel.",
+              "name": "trigger"
+            },
+            {
+              "description": "The body content of the panel.",
+              "name": "body"
+            },
+            {
+              "description": "The icon for the panel.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "message",
+              "name": "opened",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The text label shown to users",
-              "attribute": "message"
+              "default": "undefined",
+              "description": "Determines the opened state of the panel",
+              "attribute": "opened",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "limit",
+              "name": "maxHeight",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The maximum number of characters allowed",
-              "attribute": "limit"
+              "default": "'0px'",
+              "description": "Sets the max height of the panel's body",
+              "attribute": "max-height"
             },
             {
               "kind": "field",
-              "name": "validateImmediately",
+              "name": "slug",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Set to true if the field should validate as soon as the character limit is reached",
-              "attribute": "validate-immediately"
+              "default": "'panel'",
+              "description": "Uniquely identifies a panel for accessibility purposes",
+              "attribute": "slug"
             },
             {
               "kind": "field",
-              "name": "polarity",
+              "name": "index",
               "type": {
-                "text": "'light' | 'dark'"
+                "text": "number"
               },
-              "description": "Determines if the component has a dark or light background",
-              "attribute": "polarity",
-              "reflects": true
+              "attribute": "index"
             },
             {
               "kind": "field",
@@ -3704,54 +3687,45 @@
                 "text": "string"
               },
               "default": "'initializing'",
-              "description": "The status of dom initalization.",
               "attribute": "dom",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "remaining",
+              "name": "polarity",
               "type": {
-                "text": "number"
+                "text": "'light' | 'dark' | undefined"
               },
-              "description": "The number of characters remaining"
-            },
-            {
-              "kind": "field",
-              "name": "field",
-              "type": {
-                "text": "HTMLKemetFieldElement"
-              }
+              "attribute": "polarity",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "inputSlot",
-              "type": {
-                "text": "HTMLKemetInputElement | HTMLKemetTextareaElement"
+              "kind": "method",
+              "name": "toggle",
+              "description": "Toggles the opened state of the panel.",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement | null"
-              }
+              "kind": "method",
+              "name": "focusableBodyElements"
             },
             {
-              "kind": "field",
-              "name": "textarea",
-              "type": {
-                "text": "HTMLTextAreaElement | null"
-              }
+              "kind": "method",
+              "name": "a11y"
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleKeyDown",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
@@ -3759,46 +3733,52 @@
           ],
           "events": [
             {
-              "description": "Fires when there's a change in status.",
-              "name": "kemet-count-appearance-change"
+              "description": "Fires when a panel is opened",
+              "name": "kemet-opened"
             },
             {
-              "description": "Fired when the count is mounted to the DOM",
-              "name": "kemet-count-mounted"
+              "description": "Fires when a panel is closed",
+              "name": "kemet-closed"
+            },
+            {
+              "description": "Fired when the accordion panel is mounted to the DOM",
+              "name": "kemet-accordion-panel-mounted"
             }
           ],
           "attributes": [
             {
-              "name": "message",
+              "name": "opened",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The text label shown to users",
-              "fieldName": "message"
+              "default": "undefined",
+              "description": "Determines the opened state of the panel",
+              "fieldName": "opened"
             },
             {
-              "name": "limit",
+              "name": "max-height",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The maximum number of characters allowed",
-              "fieldName": "limit"
+              "default": "'0px'",
+              "description": "Sets the max height of the panel's body",
+              "fieldName": "maxHeight"
             },
             {
-              "name": "validate-immediately",
+              "name": "slug",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Set to true if the field should validate as soon as the character limit is reached",
-              "fieldName": "validateImmediately"
+              "default": "'panel'",
+              "description": "Uniquely identifies a panel for accessibility purposes",
+              "fieldName": "slug"
             },
             {
-              "name": "polarity",
+              "name": "index",
               "type": {
-                "text": "'light' | 'dark'"
+                "text": "number"
               },
-              "description": "Determines if the component has a dark or light background",
-              "fieldName": "polarity"
+              "fieldName": "index"
             },
             {
               "name": "dom",
@@ -3806,17 +3786,23 @@
                 "text": "string"
               },
               "default": "'initializing'",
-              "description": "The status of dom initalization.",
               "fieldName": "dom"
+            },
+            {
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "fieldName": "polarity"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-count",
+          "tagName": "kemet-accordion-panel",
           "customElement": true,
-          "summary": "Maintains a character count for an input field. Is to be used only in the component slot of a Field component."
+          "summary": "A blade for an accordion."
         }
       ],
       "exports": [
@@ -3824,16 +3810,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetCount",
-            "module": "src/elements/count/index.ts"
+            "name": "KemetAccordionPanel",
+            "module": "src/elements/accordion-panel/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-count",
+          "name": "kemet-accordion-panel",
           "declaration": {
-            "name": "KemetCount",
-            "module": "src/elements/count/index.ts"
+            "name": "KemetAccordionPanel",
+            "module": "src/elements/accordion-panel/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/accordion-panel/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/accordion-panel/styles.css.ts"
           }
         }
       ]
@@ -7194,7 +7194,7 @@
       "exports": [
         {
           "kind": "js",
-          "name": "KemetLoader",
+          "name": "default",
           "declaration": {
             "name": "KemetLoader",
             "module": "src/elements/loader/index.ts"
@@ -7987,10 +7987,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            },
             {
               "kind": "method",
               "name": "makeMessage"
@@ -8129,6 +8125,227 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/rotator/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetRotator",
+          "cssProperties": [
+            {
+              "description": "How long, in css time units, the transition effect lasts.",
+              "name": "--kemet-rotator-transition-speed"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "activeSlide",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The index number for the current slide.",
+              "attribute": "active-slide"
+            },
+            {
+              "kind": "field",
+              "name": "messages",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]",
+              "description": "Text in the rotator. Supports HTML.",
+              "attribute": "messages"
+            },
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "TypeEffects"
+              },
+              "description": "The transition effect type.",
+              "attribute": "effect",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
+              "attribute": "speed"
+            },
+            {
+              "kind": "field",
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background.",
+              "attribute": "polarity",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "attribute": "dom",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'auto'"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'auto'"
+            },
+            {
+              "kind": "field",
+              "name": "prevSlide",
+              "type": {
+                "text": "number | null"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "makeMessages"
+            },
+            {
+              "kind": "method",
+              "name": "setDimensions"
+            },
+            {
+              "kind": "method",
+              "name": "nextSlide",
+              "description": "Rotates to the next slide.",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the rotator is mounted to the DOM",
+              "name": "kemet-rotator-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active-slide",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The index number for the current slide.",
+              "fieldName": "activeSlide"
+            },
+            {
+              "name": "messages",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]",
+              "description": "Text in the rotator. Supports HTML.",
+              "fieldName": "messages"
+            },
+            {
+              "name": "effect",
+              "type": {
+                "text": "TypeEffects"
+              },
+              "description": "The transition effect type.",
+              "fieldName": "effect"
+            },
+            {
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
+              "fieldName": "speed"
+            },
+            {
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "description": "Determines if the component has a dark or light background.",
+              "fieldName": "polarity"
+            },
+            {
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "description": "The status of dom initalization.",
+              "fieldName": "dom"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-rotator",
+          "customElement": true,
+          "summary": "A component that rotates through an array of text."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetRotator",
+            "module": "src/elements/rotator/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-rotator",
+          "declaration": {
+            "name": "KemetRotator",
+            "module": "src/elements/rotator/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/rotator/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/rotator/styles.css.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/select/index.ts",
@@ -8640,227 +8857,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/rotator/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetRotator",
-          "cssProperties": [
-            {
-              "description": "How long, in css time units, the transition effect lasts.",
-              "name": "--kemet-rotator-transition-speed"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeSlide",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The index number for the current slide.",
-              "attribute": "active-slide"
-            },
-            {
-              "kind": "field",
-              "name": "messages",
-              "type": {
-                "text": "array"
-              },
-              "default": "[]",
-              "description": "Text in the rotator. Supports HTML.",
-              "attribute": "messages"
-            },
-            {
-              "kind": "field",
-              "name": "effect",
-              "type": {
-                "text": "TypeEffects"
-              },
-              "description": "The transition effect type.",
-              "attribute": "effect",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "speed",
-              "type": {
-                "text": "number"
-              },
-              "default": "3",
-              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
-              "attribute": "speed"
-            },
-            {
-              "kind": "field",
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background.",
-              "attribute": "polarity",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "attribute": "dom",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "string"
-              },
-              "default": "'auto'"
-            },
-            {
-              "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'auto'"
-            },
-            {
-              "kind": "field",
-              "name": "prevSlide",
-              "type": {
-                "text": "number | null"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "makeMessages"
-            },
-            {
-              "kind": "method",
-              "name": "setDimensions"
-            },
-            {
-              "kind": "method",
-              "name": "nextSlide",
-              "description": "Rotates to the next slide.",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the rotator is mounted to the DOM",
-              "name": "kemet-rotator-mounted"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-slide",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The index number for the current slide.",
-              "fieldName": "activeSlide"
-            },
-            {
-              "name": "messages",
-              "type": {
-                "text": "array"
-              },
-              "default": "[]",
-              "description": "Text in the rotator. Supports HTML.",
-              "fieldName": "messages"
-            },
-            {
-              "name": "effect",
-              "type": {
-                "text": "TypeEffects"
-              },
-              "description": "The transition effect type.",
-              "fieldName": "effect"
-            },
-            {
-              "name": "speed",
-              "type": {
-                "text": "number"
-              },
-              "default": "3",
-              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
-              "fieldName": "speed"
-            },
-            {
-              "name": "polarity",
-              "type": {
-                "text": "'light' | 'dark'"
-              },
-              "description": "Determines if the component has a dark or light background.",
-              "fieldName": "polarity"
-            },
-            {
-              "name": "dom",
-              "type": {
-                "text": "string"
-              },
-              "default": "'initializing'",
-              "description": "The status of dom initalization.",
-              "fieldName": "dom"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "kemet-rotator",
-          "customElement": true,
-          "summary": "A component that rotates through an array of text."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetRotator",
-            "module": "src/elements/rotator/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-rotator",
-          "declaration": {
-            "name": "KemetRotator",
-            "module": "src/elements/rotator/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/rotator/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/rotator/styles.css.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/select-option/index.ts",
@@ -12094,12 +12090,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/accordion/styles.css",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/accordion-panel/styles.css",
@@ -12120,7 +12110,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/badge/styles.css",
+      "path": "src/elements/accordion/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12132,7 +12122,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/button/styles.css",
+      "path": "src/elements/badge/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12154,6 +12144,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/button/styles.css",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/dialog/effects.css",
@@ -12210,19 +12206,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-file/loaders.css",
+      "path": "src/elements/input-files/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-file/styles.css",
+      "path": "src/elements/input-file/loaders.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-files/styles.css",
+      "path": "src/elements/input-file/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12234,13 +12230,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/password/styles.css",
+      "path": "src/elements/loader/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/loader/styles.css",
+      "path": "src/elements/password/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12252,25 +12248,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/radios/styles.css",
+      "path": "src/elements/rotator/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/select/styles.css",
+      "path": "src/elements/radios/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/sortable/styles.css",
+      "path": "src/elements/select/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/rotator/styles.css",
+      "path": "src/elements/sortable/styles.css",
       "declarations": [],
       "exports": []
     },