kemet-ui 5.0.4 → 5.0.5

package/custom-elements.json

@@ -778,25 +778,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/avatars/index.ts",
+      "path": "src/elements/badge/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetAvatars",
+          "name": "KemetBadge",
           "cssProperties": [
             {
-              "description": "The space between avatars. Default: -1.5rem.",
-              "name": "--kemet-avatars-squeeze"
+              "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' | undefined"
+                "text": "'light' | 'dark'"
               },
+              "description": "Determines if the component has a dark or light background",
               "attribute": "polarity",
               "reflects": true
             },
@@ -807,22 +857,94 @@
                 "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 avatars are mounted.",
-              "name": "kemet-avatars-mounted"
+              "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' | undefined"
+                "text": "'light' | 'dark'"
               },
+              "description": "Determines if the component has a dark or light background",
               "fieldName": "polarity"
             },
             {
@@ -831,6 +953,7 @@
                 "text": "string"
               },
               "default": "'initializing'",
+              "description": "The status of dom initalization.",
               "fieldName": "dom"
             }
           ],
@@ -838,9 +961,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-avatars",
+          "tagName": "kemet-badge",
           "customElement": true,
-          "summary": "Groups multiple avatar elements."
+          "summary": "Badges display the status of information."
         }
       ],
       "exports": [
@@ -848,30 +971,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetAvatars",
-            "module": "src/elements/avatars/index.ts"
+            "name": "KemetBadge",
+            "module": "src/elements/badge/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-avatars",
+          "name": "kemet-badge",
           "declaration": {
-            "name": "KemetAvatars",
-            "module": "src/elements/avatars/index.ts"
+            "name": "KemetBadge",
+            "module": "src/elements/badge/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/avatars/styles.css.ts",
+      "path": "src/elements/badge/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/avatars/styles.css.ts"
+            "module": "src/elements/badge/styles.css.ts"
           }
         }
       ]
@@ -1309,77 +1432,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/badge/index.ts",
+      "path": "src/elements/accordion-panel/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetBadge",
-          "cssProperties": [
+          "name": "KemetAccordionPanel",
+          "cssParts": [
             {
-              "description": "The padding of the badge.",
-              "name": "--kemet-badge-padding"
+              "description": "Contains the trigger for the panel.",
+              "name": "trigger"
             },
             {
-              "description": "The border width of the badge.",
-              "name": "--kemet-badge-border-width"
+              "description": "Contains the body for the panel.",
+              "name": "body"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The trigger button that opens and closes the panel.",
+              "name": "trigger"
             },
             {
-              "description": "The border style of the badge.",
-              "name": "--kemet-badge-border-style"
+              "description": "The body content of the panel.",
+              "name": "body"
+            },
+            {
+              "description": "The icon for the panel.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "opened",
               "type": {
-                "text": "EnumAppearance"
+                "text": "boolean"
               },
-              "description": "The appearance of the badge's color",
-              "attribute": "appearance",
+              "default": "undefined",
+              "description": "Determines the opened state of the panel",
+              "attribute": "opened",
               "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",
+              "name": "maxHeight",
               "type": {
-                "text": "TypeRoundedSizes"
+                "text": "string"
               },
-              "description": "Rounds the corners on the badge",
-              "attribute": "rounded",
-              "reflects": true
+              "default": "'0px'",
+              "description": "Sets the max height of the panel's body",
+              "attribute": "max-height"
             },
             {
               "kind": "field",
-              "name": "outlined",
+              "name": "slug",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Outlines the badge",
-              "attribute": "outlined",
-              "reflects": true
+              "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",
@@ -1388,95 +1509,98 @@
                 "text": "string"
               },
               "default": "'initializing'",
-              "description": "The status of dom initalization.",
               "attribute": "dom",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconLeft",
+              "name": "polarity",
               "type": {
-                "text": "boolean"
+                "text": "'light' | 'dark' | undefined"
               },
-              "default": "false"
+              "attribute": "polarity",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "iconRight",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "toggle",
+              "description": "Toggles the opened state of the panel.",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "handleSlotChange"
+              "name": "focusableBodyElements"
             },
             {
               "kind": "method",
-              "name": "handleLeftChange"
+              "name": "a11y"
             },
             {
               "kind": "method",
-              "name": "handleRightChange"
-            },
-            {
-              "type": {
-                "text": "TypeStatus"
-              },
-              "description": "The status of the badge",
-              "name": "status",
-              "kind": "field"
+              "name": "handleKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "events": [
             {
-              "description": "Fires when the badge is mounted",
-              "name": "kemet-badge-mounted"
+              "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": "appearance",
-              "type": {
-                "text": "EnumAppearance"
-              },
-              "description": "The appearance of the badge's color",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "circle-padding",
+              "name": "opened",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "Padding on the badge as a circle",
-              "fieldName": "circlePadding"
+              "default": "undefined",
+              "description": "Determines the opened state of the panel",
+              "fieldName": "opened"
             },
             {
-              "name": "rounded",
+              "name": "max-height",
               "type": {
-                "text": "TypeRoundedSizes"
+                "text": "string"
               },
-              "description": "Rounds the corners on the badge",
-              "fieldName": "rounded"
+              "default": "'0px'",
+              "description": "Sets the max height of the panel's body",
+              "fieldName": "maxHeight"
             },
             {
-              "name": "outlined",
+              "name": "slug",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Outlines the badge",
-              "fieldName": "outlined"
+              "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",
@@ -1484,17 +1608,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-badge",
+          "tagName": "kemet-accordion-panel",
           "customElement": true,
-          "summary": "Badges display the status of information."
+          "summary": "A blade for an accordion."
         }
       ],
       "exports": [
@@ -1502,223 +1632,198 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetBadge",
-            "module": "src/elements/badge/index.ts"
+            "name": "KemetAccordionPanel",
+            "module": "src/elements/accordion-panel/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-badge",
+          "name": "kemet-accordion-panel",
           "declaration": {
-            "name": "KemetBadge",
-            "module": "src/elements/badge/index.ts"
+            "name": "KemetAccordionPanel",
+            "module": "src/elements/accordion-panel/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/badge/styles.css.ts",
+      "path": "src/elements/accordion-panel/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/badge/styles.css.ts"
+            "module": "src/elements/accordion-panel/styles.css.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/checkbox/index.ts",
+      "path": "src/elements/card/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetCheckbox",
+          "name": "KemetCard",
           "cssProperties": [
             {
-              "description": "The width and height of the checkbox.",
-              "name": "--kemet-checkbox-size"
+              "description": "The space around elements.",
+              "name": "--kemet-card-padding"
             },
             {
-              "description": "The color of the checkbox mark.",
-              "name": "--kemet-checkbox-color"
+              "description": "The color of the borders.",
+              "name": "--kemet-card-border-color"
             },
             {
-              "description": "The border of the checkbox.",
-              "name": "--kemet-checkbox-border"
+              "description": "The color of the text. Default:",
+              "name": "--kemet-card-color"
             },
             {
-              "description": "The border radius of the checkbox.",
-              "name": "--kemet-checkbox-border-radius"
+              "description": "The max width of the card.",
+              "name": "--kemet-card-max-width"
             },
             {
-              "description": "The filled color of the checkbox mark.",
-              "name": "--kemet-checkbox-filled-color"
+              "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-checkbox-filled-background-color"
+              "name": "--kemet-card-filled-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The label element.",
-              "name": "label"
+              "description": "The media area of the card.",
+              "name": "media"
             },
             {
-              "description": "The label's text.",
-              "name": "text"
+              "description": "The main contents of the card.",
+              "name": "body"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The contents of the alert.",
+              "name": "default"
             },
             {
-              "description": "The icon of the check mark.",
-              "name": "mark"
+              "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": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Label text for the checkbox",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "checked",
+              "name": "center",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the checkbox is selected",
-              "attribute": "checked",
+              "description": "Centers the elements in the card.",
+              "attribute": "center",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "rounded",
               "type": {
-                "text": "boolean"
+                "text": "EnumRoundedSizes"
               },
-              "default": "false",
-              "description": "An indeterminate selection status",
-              "attribute": "indeterminate",
+              "attribute": "rounded",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "filled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'checkbox'",
-              "description": "Name of the checkbox",
-              "attribute": "name"
+              "default": "false",
+              "description": "Fills the card with a background color.",
+              "attribute": "filled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "borderless",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "default": "false",
-              "description": "Value of the checkbox",
-              "attribute": "value"
+              "description": "Removes the border from the card.",
+              "attribute": "borderless",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "elevation",
               "type": {
-                "text": "boolean"
+                "text": "EnumElevation"
               },
-              "default": "false",
-              "description": "Determines if a checkbox is disabled",
-              "attribute": "disabled",
+              "description": "The elevation level of the card.",
+              "attribute": "elevation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "polarity",
               "type": {
-                "text": "boolean"
+                "text": "'light' | 'dark'"
               },
-              "default": "false",
-              "description": "Determines if a checkbox is required",
-              "attribute": "required",
+              "description": "Determines if the component has a dark or light background",
+              "attribute": "polarity",
               "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",
+              "name": "dom",
               "type": {
                 "text": "string"
               },
@@ -1726,152 +1831,29 @@
               "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"
+              "description": "Fired when the card is mounted to the DOM",
+              "name": "kemet-card-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",
-              "fieldName": "required"
-            },
-            {
-              "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"
             },
             {
@@ -1880,25 +1862,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",
@@ -1922,9 +1904,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": [
@@ -1932,150 +1914,276 @@
           "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"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/card/index.ts",
+      "path": "src/elements/avatars/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetCard",
+          "name": "KemetAvatars",
           "cssProperties": [
             {
-              "description": "The space around elements.",
-              "name": "--kemet-card-padding"
+              "description": "The space between avatars. Default: -1.5rem.",
+              "name": "--kemet-avatars-squeeze"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "attribute": "polarity",
+              "reflects": true
             },
             {
-              "description": "The color of the borders.",
-              "name": "--kemet-card-border-color"
-            },
+              "kind": "field",
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "attribute": "dom",
+              "reflects": true
+            }
+          ],
+          "events": [
             {
-              "description": "The color of the text. Default:",
-              "name": "--kemet-card-color"
-            },
+              "description": "Fires when the avatars are mounted.",
+              "name": "kemet-avatars-mounted"
+            }
+          ],
+          "attributes": [
             {
-              "description": "The max width of the card.",
-              "name": "--kemet-card-max-width"
+              "name": "polarity",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "fieldName": "polarity"
             },
             {
-              "description": "The border around the card.",
-              "name": "--kemet-card-border"
-            },
+              "name": "dom",
+              "type": {
+                "text": "string"
+              },
+              "default": "'initializing'",
+              "fieldName": "dom"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-avatars",
+          "customElement": true,
+          "summary": "Groups multiple avatar elements."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetAvatars",
+            "module": "src/elements/avatars/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-avatars",
+          "declaration": {
+            "name": "KemetAvatars",
+            "module": "src/elements/avatars/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/avatars/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/avatars/styles.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/checkbox/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetCheckbox",
+          "cssProperties": [
             {
-              "description": "The body spacing.",
-              "name": "--kemet-card-body-padding"
+              "description": "The width and height of the checkbox.",
+              "name": "--kemet-checkbox-size"
             },
             {
-              "description": "The header spacing.",
-              "name": "--kemet-card-header-padding"
+              "description": "The color of the checkbox mark.",
+              "name": "--kemet-checkbox-color"
             },
             {
-              "description": "The header border.",
-              "name": "--kemet-card-header-border-bottom"
+              "description": "The border of the checkbox.",
+              "name": "--kemet-checkbox-border"
             },
             {
-              "description": "The caption text color.",
-              "name": "--kemet-card-caption-color"
+              "description": "The border radius of the checkbox.",
+              "name": "--kemet-checkbox-border-radius"
             },
             {
-              "description": "The caption spacing.",
-              "name": "--kemet-card-caption-padding"
+              "description": "The filled color of the checkbox mark.",
+              "name": "--kemet-checkbox-filled-color"
             },
             {
-              "description": "The caption background color.",
-              "name": "--kemet-card-caption-background-color"
-            },
+              "description": "The filled background color.",
+              "name": "--kemet-checkbox-filled-background-color"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The footer spacing.",
-              "name": "--kemet-card-footer-padding"
+              "description": "The label element.",
+              "name": "label"
             },
             {
-              "description": "The footer border.",
-              "name": "--kemet-card-footer-border-top"
+              "description": "The label's text.",
+              "name": "text"
             },
             {
-              "description": "The filled background color.",
-              "name": "--kemet-card-filled-color"
+              "description": "The icon of the check mark.",
+              "name": "mark"
             }
           ],
-          "cssParts": [
+          "members": [
             {
-              "description": "The media area of the card.",
-              "name": "media"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text for the checkbox",
+              "attribute": "label"
             },
             {
-              "description": "The main contents of the card.",
-              "name": "body"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the checkbox is selected",
+              "attribute": "checked",
+              "reflects": true
+            },
             {
-              "description": "The contents of the alert.",
-              "name": "default"
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "An indeterminate selection status",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
-              "description": "The card's header.",
-              "name": "header"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'checkbox'",
+              "description": "Name of the checkbox",
+              "attribute": "name"
             },
             {
-              "description": "A slot for images, videos, or embeds.",
-              "name": "media"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "false",
+              "description": "Value of the checkbox",
+              "attribute": "value"
             },
             {
-              "description": "Text for the media slot.",
-              "name": "caption"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if a checkbox is disabled",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "description": "The card's footer.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if a checkbox is required",
+              "attribute": "required",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "center",
+              "name": "focused",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Centers the elements in the card.",
-              "attribute": "center",
+              "description": "Is true when the checkbox is focused",
+              "attribute": "focused",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "rounded",
               "type": {
-                "text": "EnumRoundedSizes"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Gives the checkbox rounded edges",
               "attribute": "rounded",
               "reflects": true
             },
@@ -2086,30 +2194,29 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Fills the card with a background color.",
+              "description": "Fills the checkbox with color",
               "attribute": "filled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "borderless",
+              "name": "appearance",
               "type": {
-                "text": "boolean"
+                "text": "EnumAppearances"
               },
-              "default": "false",
-              "description": "Removes the border from the card.",
-              "attribute": "borderless",
+              "description": "The status of the checkbox",
+              "attribute": "appearance",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "elevation",
+              "name": "message",
               "type": {
-                "text": "EnumElevation"
+                "text": "string"
               },
-              "description": "The elevation level of the card.",
-              "attribute": "elevation",
-              "reflects": true
+              "default": "''",
+              "description": "Message associated with checkbox status",
+              "attribute": "message"
             },
             {
               "kind": "field",
@@ -2131,29 +2238,152 @@
               "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",
+              "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": "Centers the elements in the card.",
-              "fieldName": "center"
+              "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",
+              "fieldName": "required"
+            },
+            {
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Is true when the checkbox is focused",
+              "fieldName": "focused"
             },
             {
               "name": "rounded",
               "type": {
-                "text": "EnumRoundedSizes"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Gives the checkbox rounded edges",
               "fieldName": "rounded"
             },
             {
@@ -2162,25 +2392,25 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Fills the card with a background color.",
+              "description": "Fills the checkbox with color",
               "fieldName": "filled"
             },
             {
-              "name": "borderless",
+              "name": "appearance",
               "type": {
-                "text": "boolean"
+                "text": "EnumAppearances"
               },
-              "default": "false",
-              "description": "Removes the border from the card.",
-              "fieldName": "borderless"
+              "description": "The status of the checkbox",
+              "fieldName": "appearance"
             },
             {
-              "name": "elevation",
+              "name": "message",
               "type": {
-                "text": "EnumElevation"
+                "text": "string"
               },
-              "description": "The elevation level of the card.",
-              "fieldName": "elevation"
+              "default": "''",
+              "description": "Message associated with checkbox status",
+              "fieldName": "message"
             },
             {
               "name": "polarity",
@@ -2204,9 +2434,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-card",
+          "tagName": "kemet-checkbox",
           "customElement": true,
-          "summary": "A highly configurable panel design to display media and information."
+          "summary": "An enhanced checkbox."
         }
       ],
       "exports": [
@@ -2214,30 +2444,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetCard",
-            "module": "src/elements/card/index.ts"
+            "name": "KemetCheckbox",
+            "module": "src/elements/checkbox/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-card",
+          "name": "kemet-checkbox",
           "declaration": {
-            "name": "KemetCard",
-            "module": "src/elements/card/index.ts"
+            "name": "KemetCheckbox",
+            "module": "src/elements/checkbox/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/card/styles.css.ts",
+      "path": "src/elements/checkbox/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/card/styles.css.ts"
+            "module": "src/elements/checkbox/styles.css.ts"
           }
         }
       ]
@@ -2677,73 +2907,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": [
@@ -2754,7 +2983,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the drawer is opened or not.",
               "attribute": "opened",
               "reflects": true
             },
@@ -2764,40 +2992,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": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds an overlay over the content section of the Drawer when opened",
-              "attribute": "overlay",
-              "reflects": true
+              "default": "'600px'",
+              "attribute": "breakpoint"
             },
             {
               "kind": "field",
-              "name": "fillViewport",
+              "name": "mobile",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Makes the drawer fill the viewport height",
-              "attribute": "fill-viewport",
+              "attribute": "mobile",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rounded",
+              "type": {
+                "text": "EnumRoundedSizes"
+              },
+              "attribute": "rounded",
               "reflects": true
             },
             {
@@ -2820,20 +3051,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": [
@@ -2843,7 +3094,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines if the drawer is opened or not.",
               "fieldName": "opened"
             },
             {
@@ -2851,34 +3101,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",
@@ -2902,9 +3155,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": [
@@ -2912,30 +3165,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"
           }
         }
       ]
@@ -3034,72 +3287,73 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/dialog/effects.css.ts",
+      "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": [
@@ -3110,6 +3364,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Determines if the drawer is opened or not.",
               "attribute": "opened",
               "reflects": true
             },
@@ -3119,43 +3374,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
             },
             {
@@ -3178,40 +3430,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": [
@@ -3221,6 +3453,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Determines if the drawer is opened or not.",
               "fieldName": "opened"
             },
             {
@@ -3228,37 +3461,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",
@@ -3282,9 +3512,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": [
@@ -3292,30 +3522,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"
           }
         }
       ]
@@ -3608,236 +3838,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/field/index.ts",
@@ -3996,10 +3996,6 @@
                 "text": "HTMLKemetComboElement"
               }
             },
-            {
-              "kind": "method",
-              "name": "makeStatusMessage"
-            },
             {
               "kind": "method",
               "name": "handleFocused",
@@ -7212,14 +7208,358 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/loader/styles.css.ts",
+      "path": "src/elements/loader/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/loader/styles.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/radio/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetRadio",
+          "cssProperties": [
+            {
+              "description": "The size of the radio button.",
+              "name": "--kemet-radio-size"
+            },
+            {
+              "description": "The outer border of the radio button.",
+              "name": "--kemet-radio-border"
+            },
+            {
+              "description": "The color of the radio button's dot.",
+              "name": "--kemet-radio-dot-color"
+            },
+            {
+              "description": "The border width of the radio button's dot.",
+              "name": "--kemet-radio-dot-border-width"
+            },
+            {
+              "description": "The border color of the radio button's dot.",
+              "name": "--kemet-radio-dot-border-color"
+            },
+            {
+              "description": "The filled color of the radio button.",
+              "name": "--kemet-radio-dot-color-filled"
+            },
+            {
+              "description": "The ring color of the radio button's dot.",
+              "name": "--kemet-radio-dot-ring-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The label that contains the radio button.",
+              "name": "label"
+            },
+            {
+              "description": "The radio button.",
+              "name": "button"
+            },
+            {
+              "description": "The text next to the radio button.",
+              "name": "text"
+            },
+            {
+              "description": "The circle that fills the radio button.",
+              "name": "dot"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The text next to the radio button",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the button is checked",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the field",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value of the radio button",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the button should be disabled",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Is true when the button is focused on",
+              "attribute": "focused",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Displayed the button as a filled button",
+              "attribute": "filled",
+              "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": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the input element.",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Calls blur on the input element.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Calls focus on the input element.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus"
+            },
+            {
+              "kind": "method",
+              "name": "makeDot"
+            }
+          ],
+          "events": [
+            {
+              "description": " Fires when the checkbox receives focus",
+              "name": "kemet-radio-focus"
+            },
+            {
+              "description": "Fires when the checkbox loses focus",
+              "name": "kemet-radio-blur"
+            },
+            {
+              "description": "Fired when the radio is mounted to the DOM",
+              "name": "kemet-radio-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The text next to the radio button",
+              "fieldName": "label"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the button is checked",
+              "fieldName": "checked"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the field",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value of the radio button",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the button should be disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Is true when the button is focused on",
+              "fieldName": "focused"
+            },
+            {
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Displayed the button as a filled button",
+              "fieldName": "filled"
+            },
+            {
+              "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-radio",
+          "customElement": true,
+          "summary": "An enhanced radio button."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetRadio",
+            "module": "src/elements/radio/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-radio",
+          "declaration": {
+            "name": "KemetRadio",
+            "module": "src/elements/radio/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/radio/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/loader/styles.css.ts"
+            "module": "src/elements/radio/styles.css.ts"
           }
         }
       ]
@@ -7507,134 +7847,58 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/radio/index.ts",
+      "path": "src/elements/rotator/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "KemetRadio",
+          "name": "KemetRotator",
           "cssProperties": [
             {
-              "description": "The size of the radio button.",
-              "name": "--kemet-radio-size"
-            },
-            {
-              "description": "The outer border of the radio button.",
-              "name": "--kemet-radio-border"
-            },
-            {
-              "description": "The color of the radio button's dot.",
-              "name": "--kemet-radio-dot-color"
-            },
-            {
-              "description": "The border width of the radio button's dot.",
-              "name": "--kemet-radio-dot-border-width"
-            },
-            {
-              "description": "The border color of the radio button's dot.",
-              "name": "--kemet-radio-dot-border-color"
-            },
-            {
-              "description": "The filled color of the radio button.",
-              "name": "--kemet-radio-dot-color-filled"
-            },
-            {
-              "description": "The ring color of the radio button's dot.",
-              "name": "--kemet-radio-dot-ring-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The label that contains the radio button.",
-              "name": "label"
-            },
-            {
-              "description": "The radio button.",
-              "name": "button"
-            },
-            {
-              "description": "The text next to the radio button.",
-              "name": "text"
-            },
-            {
-              "description": "The circle that fills the radio button.",
-              "name": "dot"
+              "description": "How long, in css time units, the transition effect lasts.",
+              "name": "--kemet-rotator-transition-speed"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The text next to the radio button",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether or not the button is checked",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the field",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "value",
+              "name": "activeSlide",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The value of the radio button",
-              "attribute": "value"
+              "default": "0",
+              "description": "The index number for the current slide.",
+              "attribute": "active-slide"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "messages",
               "type": {
-                "text": "boolean"
+                "text": "array"
               },
-              "default": "false",
-              "description": "Determines if the button should be disabled",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "[]",
+              "description": "Text in the rotator. Supports HTML.",
+              "attribute": "messages"
             },
             {
               "kind": "field",
-              "name": "focused",
+              "name": "effect",
               "type": {
-                "text": "boolean"
+                "text": "TypeEffects"
               },
-              "default": "false",
-              "description": "Is true when the button is focused on",
-              "attribute": "focused",
+              "description": "The transition effect type.",
+              "attribute": "effect",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "filled",
+              "name": "speed",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Displayed the button as a filled button",
-              "attribute": "filled",
-              "reflects": true
+              "default": "3",
+              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
+              "attribute": "speed"
             },
             {
               "kind": "field",
@@ -7642,7 +7906,7 @@
               "type": {
                 "text": "'light' | 'dark'"
               },
-              "description": "Determines if the component has a dark or light background",
+              "description": "Determines if the component has a dark or light background.",
               "attribute": "polarity",
               "reflects": true
             },
@@ -7659,142 +7923,95 @@
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "width",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "string"
               },
-              "default": "undefined"
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the input element.",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "default": "'auto'"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
               },
-              "description": "Calls blur on the input element.",
-              "privacy": "public"
+              "default": "'auto'"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Calls focus on the input element.",
-              "privacy": "public"
+              "kind": "field",
+              "name": "prevSlide",
+              "type": {
+                "text": "number | null"
+              }
             },
             {
               "kind": "method",
-              "name": "handleBlur"
+              "name": "makeMessages"
             },
             {
               "kind": "method",
-              "name": "handleFocus"
+              "name": "setDimensions"
             },
             {
               "kind": "method",
-              "name": "makeDot"
+              "name": "nextSlide",
+              "description": "Rotates to the next slide.",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
           "events": [
             {
-              "description": " Fires when the checkbox receives focus",
-              "name": "kemet-radio-focus"
-            },
-            {
-              "description": "Fires when the checkbox loses focus",
-              "name": "kemet-radio-blur"
-            },
-            {
-              "description": "Fired when the radio is mounted to the DOM",
-              "name": "kemet-radio-mounted"
+              "description": "Fired when the rotator is mounted to the DOM",
+              "name": "kemet-rotator-mounted"
             }
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The text next to the radio button",
-              "fieldName": "label"
-            },
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether or not the button is checked",
-              "fieldName": "checked"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the field",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
+              "name": "active-slide",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The value of the radio button",
-              "fieldName": "value"
+              "default": "0",
+              "description": "The index number for the current slide.",
+              "fieldName": "activeSlide"
             },
             {
-              "name": "disabled",
+              "name": "messages",
               "type": {
-                "text": "boolean"
+                "text": "array"
               },
-              "default": "false",
-              "description": "Determines if the button should be disabled",
-              "fieldName": "disabled"
+              "default": "[]",
+              "description": "Text in the rotator. Supports HTML.",
+              "fieldName": "messages"
             },
             {
-              "name": "focused",
+              "name": "effect",
               "type": {
-                "text": "boolean"
+                "text": "TypeEffects"
               },
-              "default": "false",
-              "description": "Is true when the button is focused on",
-              "fieldName": "focused"
+              "description": "The transition effect type.",
+              "fieldName": "effect"
             },
             {
-              "name": "filled",
+              "name": "speed",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Displayed the button as a filled button",
-              "fieldName": "filled"
+              "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",
+              "description": "Determines if the component has a dark or light background.",
               "fieldName": "polarity"
             },
             {
@@ -7811,9 +8028,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-radio",
+          "tagName": "kemet-rotator",
           "customElement": true,
-          "summary": "An enhanced radio button."
+          "summary": "A component that rotates through an array of text."
         }
       ],
       "exports": [
@@ -7821,30 +8038,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetRadio",
-            "module": "src/elements/radio/index.ts"
+            "name": "KemetRotator",
+            "module": "src/elements/rotator/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-radio",
+          "name": "kemet-rotator",
           "declaration": {
-            "name": "KemetRadio",
-            "module": "src/elements/radio/index.ts"
+            "name": "KemetRotator",
+            "module": "src/elements/rotator/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/radio/styles.css.ts",
+      "path": "src/elements/rotator/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/radio/styles.css.ts"
+            "module": "src/elements/rotator/styles.css.ts"
           }
         }
       ]
@@ -8022,276 +8239,55 @@
                 "text": "TypeAxis"
               },
               "description": "The direction of the button's layout",
-              "fieldName": "axis"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The value of the selected radio button",
-              "fieldName": "value"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "'radios'",
-              "description": "The name of the radio button set",
-              "fieldName": "name"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "EnumAppearances"
-              },
-              "description": "The appearance of the radio button set",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "message",
-              "type": {
-                "text": "string"
-              },
-              "description": "Validation message for the user",
-              "fieldName": "message"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the radio button set is required",
-              "fieldName": "required"
-            },
-            {
-              "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-radios",
-          "customElement": true,
-          "summary": "A group of radio buttons."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetRadios",
-            "module": "src/elements/radios/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-radios",
-          "declaration": {
-            "name": "KemetRadios",
-            "module": "src/elements/radios/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/radios/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/radios/styles.css.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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": [
+              "fieldName": "axis"
+            },
             {
-              "name": "active-slide",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The index number for the current slide.",
-              "fieldName": "activeSlide"
+              "description": "The value of the selected radio button",
+              "fieldName": "value"
             },
             {
-              "name": "messages",
+              "name": "name",
               "type": {
-                "text": "array"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Text in the rotator. Supports HTML.",
-              "fieldName": "messages"
+              "default": "'radios'",
+              "description": "The name of the radio button set",
+              "fieldName": "name"
             },
             {
-              "name": "effect",
+              "name": "appearance",
               "type": {
-                "text": "TypeEffects"
+                "text": "EnumAppearances"
               },
-              "description": "The transition effect type.",
-              "fieldName": "effect"
+              "description": "The appearance of the radio button set",
+              "fieldName": "appearance"
             },
             {
-              "name": "speed",
+              "name": "message",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "3",
-              "description": "How fast, in seconds, each slide lasts. Stop the rotator with 0.",
-              "fieldName": "speed"
+              "description": "Validation message for the user",
+              "fieldName": "message"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the radio button set is required",
+              "fieldName": "required"
             },
             {
               "name": "polarity",
               "type": {
                 "text": "'light' | 'dark'"
               },
-              "description": "Determines if the component has a dark or light background.",
+              "description": "Determines if the component has a dark or light background",
               "fieldName": "polarity"
             },
             {
@@ -8308,9 +8304,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-rotator",
+          "tagName": "kemet-radios",
           "customElement": true,
-          "summary": "A component that rotates through an array of text."
+          "summary": "A group of radio buttons."
         }
       ],
       "exports": [
@@ -8318,30 +8314,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetRotator",
-            "module": "src/elements/rotator/index.ts"
+            "name": "KemetRadios",
+            "module": "src/elements/radios/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-rotator",
+          "name": "kemet-radios",
           "declaration": {
-            "name": "KemetRotator",
-            "module": "src/elements/rotator/index.ts"
+            "name": "KemetRadios",
+            "module": "src/elements/radios/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/rotator/styles.css.ts",
+      "path": "src/elements/radios/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/rotator/styles.css.ts"
+            "module": "src/elements/radios/styles.css.ts"
           }
         }
       ]
@@ -10766,200 +10762,16 @@
               "default": "'initializing'",
               "description": "The status of dom initalization.",
               "attribute": "dom",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getTimeInSeconds",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "time",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "timer",
-              "parameters": [
-                {
-                  "name": "seconds",
-                  "default": "0",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "countDown"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fires when the timer starts",
-              "name": "kemet-timer-start"
-            },
-            {
-              "description": "Fires when the timer reaches 0",
-              "name": "kemet-timer-complete"
-            },
-            {
-              "description": "Fires on tick of the timer",
-              "name": "kemet-timer-increment"
-            },
-            {
-              "description": "Fired when the timer is mounted to the DOM",
-              "name": "kemet-timer-mounted"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "format",
-              "type": {
-                "text": "TypeFormats"
-              },
-              "description": "The format of the amount property",
-              "fieldName": "format"
-            },
-            {
-              "name": "amount",
-              "type": {
-                "text": "number"
-              },
-              "default": "10",
-              "description": "The amount of time to set the timer",
-              "fieldName": "amount"
-            },
-            {
-              "name": "expires",
-              "type": {
-                "text": "string"
-              },
-              "description": "Begins a count down to a specified time, accepts a string that matches value given for a Date constructor",
-              "fieldName": "expires"
-            },
-            {
-              "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-timer",
-          "customElement": true,
-          "summary": "Counts down from a specified amount of time or date."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "KemetTimer",
-            "module": "src/elements/timer/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "kemet-timer",
-          "declaration": {
-            "name": "KemetTimer",
-            "module": "src/elements/timer/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/timer/styles.css.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/elements/timer/styles.css.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/timer-display/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KemetTimerDisplay",
-          "members": [
-            {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "EnumFormats"
-              },
-              "description": "The format to display the remaining time in",
-              "attribute": "format"
-            },
-            {
-              "kind": "field",
-              "name": "displayTime",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "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": "method",
-              "name": "getTime"
+              "reflects": true
             },
             {
               "kind": "method",
               "name": "getTimeInSeconds",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
               "parameters": [
                 {
                   "name": "time",
@@ -10968,23 +10780,69 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "timer",
+              "parameters": [
+                {
+                  "name": "seconds",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "countDown"
             }
           ],
           "events": [
             {
-              "description": "Fired when the timer display is mounted to the DOM",
-              "name": "kemet-timer-display-mounted"
+              "description": "Fires when the timer starts",
+              "name": "kemet-timer-start"
+            },
+            {
+              "description": "Fires when the timer reaches 0",
+              "name": "kemet-timer-complete"
+            },
+            {
+              "description": "Fires on tick of the timer",
+              "name": "kemet-timer-increment"
+            },
+            {
+              "description": "Fired when the timer is mounted to the DOM",
+              "name": "kemet-timer-mounted"
             }
           ],
           "attributes": [
             {
               "name": "format",
               "type": {
-                "text": "EnumFormats"
+                "text": "TypeFormats"
               },
-              "description": "The format to display the remaining time in",
+              "description": "The format of the amount property",
               "fieldName": "format"
             },
+            {
+              "name": "amount",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The amount of time to set the timer",
+              "fieldName": "amount"
+            },
+            {
+              "name": "expires",
+              "type": {
+                "text": "string"
+              },
+              "description": "Begins a count down to a specified time, accepts a string that matches value given for a Date constructor",
+              "fieldName": "expires"
+            },
             {
               "name": "polarity",
               "type": {
@@ -11007,9 +10865,9 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kemet-timer-display",
+          "tagName": "kemet-timer",
           "customElement": true,
-          "summary": "Displays remaining time"
+          "summary": "Counts down from a specified amount of time or date."
         }
       ],
       "exports": [
@@ -11017,30 +10875,30 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "KemetTimerDisplay",
-            "module": "src/elements/timer-display/index.ts"
+            "name": "KemetTimer",
+            "module": "src/elements/timer/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "kemet-timer-display",
+          "name": "kemet-timer",
           "declaration": {
-            "name": "KemetTimerDisplay",
-            "module": "src/elements/timer-display/index.ts"
+            "name": "KemetTimer",
+            "module": "src/elements/timer/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/timer-display/styles.css.ts",
+      "path": "src/elements/timer/styles.css.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/elements/timer-display/styles.css.ts"
+            "module": "src/elements/timer/styles.css.ts"
           }
         }
       ]
@@ -11379,6 +11237,144 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/timer-display/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetTimerDisplay",
+          "members": [
+            {
+              "kind": "field",
+              "name": "format",
+              "type": {
+                "text": "EnumFormats"
+              },
+              "description": "The format to display the remaining time in",
+              "attribute": "format"
+            },
+            {
+              "kind": "field",
+              "name": "displayTime",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "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": "method",
+              "name": "getTime"
+            },
+            {
+              "kind": "method",
+              "name": "getTimeInSeconds",
+              "parameters": [
+                {
+                  "name": "time",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the timer display is mounted to the DOM",
+              "name": "kemet-timer-display-mounted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "format",
+              "type": {
+                "text": "EnumFormats"
+              },
+              "description": "The format to display the remaining time in",
+              "fieldName": "format"
+            },
+            {
+              "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-timer-display",
+          "customElement": true,
+          "summary": "Displays remaining time"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetTimerDisplay",
+            "module": "src/elements/timer-display/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-timer-display",
+          "declaration": {
+            "name": "KemetTimerDisplay",
+            "module": "src/elements/timer-display/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/timer-display/styles.css.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/elements/timer-display/styles.css.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/tracker/index.ts",
@@ -12092,13 +12088,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/accordion-panel/styles.css",
+      "path": "src/elements/accordion/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/alert/styles.css",
+      "path": "src/elements/avatar/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12110,19 +12106,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/accordion/styles.css",
+      "path": "src/elements/badge/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/avatar/styles.css",
+      "path": "src/elements/alert/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/badge/styles.css",
+      "path": "src/elements/accordion-panel/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12164,13 +12160,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/fab/styles.css",
+      "path": "src/elements/drawer/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/drawer/styles.css",
+      "path": "src/elements/fab/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12188,13 +12184,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/icon/styles.css",
+      "path": "src/elements/input/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input/styles.css",
+      "path": "src/elements/icon/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12206,19 +12202,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-files/styles.css",
+      "path": "src/elements/input-file/loaders.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-file/loaders.css",
+      "path": "src/elements/input-file/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/input-file/styles.css",
+      "path": "src/elements/input-files/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12230,13 +12226,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/loader/styles.css",
+      "path": "src/elements/password/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/password/styles.css",
+      "path": "src/elements/loader/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12248,13 +12244,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/rotator/styles.css",
+      "path": "src/elements/radios/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/radios/styles.css",
+      "path": "src/elements/rotator/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12290,13 +12286,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/tabs/styles.css",
+      "path": "src/elements/textarea/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/textarea/styles.css",
+      "path": "src/elements/tabs/styles.css",
       "declarations": [],
       "exports": []
     },
@@ -12320,13 +12316,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/tracker/styles.css",
+      "path": "src/elements/tracker-step/styles.css",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/tracker-step/styles.css",
+      "path": "src/elements/tracker/styles.css",
       "declarations": [],
       "exports": []
     }