@nordhealth/components 1.0.0-beta.2 → 1.0.0-beta.22

package/custom-elements.json

@@ -206,9 +206,161 @@
             "name": "default",
             "module": "\"./empty-state/EmptyState.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Banner",
+          "declaration": {
+            "name": "default",
+            "module": "\"./banner/Banner.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Avatar",
+          "declaration": {
+            "name": "default",
+            "module": "\"./avatar/Avatar.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressBar",
+          "declaration": {
+            "name": "default",
+            "module": "\"./progress-bar/ProgressBar.js\""
+          }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/avatar/Avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
+          "name": "Avatar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "States<typeof transition>"
+              },
+              "privacy": "private",
+              "default": "\"initial\""
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "attribute": "src",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "attribute": "name"
+            },
+            {
+              "kind": "method",
+              "name": "renderImage",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderFallback",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleLoad",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "fieldName": "size"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "image",
+          "tagName": "nord-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.ts",
@@ -234,20 +386,6 @@
               "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
               "attribute": "type",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -261,17 +399,11 @@
               "fieldName": "type"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "text",
           "tagName": "nord-badge",
           "customElement": true
@@ -311,12 +443,12 @@
               "name": ""
             },
             {
-              "description": "Used to place content before button text. Typically used for icons.",
-              "name": "before"
+              "description": "Used to place content at the start of button text. Typically used for icons.",
+              "name": "start"
             },
             {
-              "description": "Used to place content after button text. Typically used for icons.",
-              "name": "after"
+              "description": "Used to place content at the end of button text. Typically used for icons.",
+              "name": "end"
             }
           ],
           "members": [
@@ -325,6 +457,12 @@
               "name": "buttonRef",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
             {
               "kind": "field",
               "name": "lightDom",
@@ -438,10 +576,23 @@
               "name": "renderLightDom",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "handleOuterClick",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleClick",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -540,20 +691,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -666,17 +803,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-button",
           "customElement": true
@@ -702,6 +835,74 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "feedback",
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -842,9 +1043,11 @@
                   "optional": true,
                   "type": {
                     "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  }
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
-              ]
+              ],
+              "description": "Programmatically move focus to the calendar."
             },
             {
               "kind": "method",
@@ -973,20 +1176,22 @@
               "kind": "field",
               "name": "disableActiveFocus",
               "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "nord-focus-date",
+              "type": {
+                "text": "DateSelectEvent"
+              },
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "kind": "field",
-              "name": "_warningLogged",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -1026,17 +1231,11 @@
               "fieldName": "max"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "list",
           "tagName": "nord-calendar",
           "customElement": true
@@ -1071,15 +1270,6 @@
           "description": "",
           "name": "DateSelectEvent",
           "members": [
-            {
-              "kind": "field",
-              "name": "eventName",
-              "type": {
-                "text": "string"
-              },
-              "static": true,
-              "default": "\"nord-select\""
-            },
             {
               "kind": "field",
               "name": "date",
@@ -1181,6 +1371,94 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -1227,11 +1505,6 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
                   "name": "e",
@@ -1240,6 +1513,11 @@
                   }
                 }
               ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -1588,20 +1866,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -1753,17 +2017,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-checkbox",
           "customElement": true,
@@ -1813,114 +2073,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -2194,20 +2346,6 @@
               "kind": "method",
               "name": "filterCommands",
               "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "events": [
@@ -2253,17 +2391,11 @@
               "fieldName": "placeholder"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-command-menu",
           "customElement": true
@@ -3286,7 +3418,35 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/input.ts",
+      "path": "src/common/fsm.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "fsm",
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "TTransitions"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fsm",
+          "declaration": {
+            "name": "fsm",
+            "module": "src/common/fsm.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/input.ts",
       "declarations": [
         {
           "kind": "function",
@@ -3459,6 +3619,51 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/empty-state/EmptyState.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",
+          "name": "EmptyState",
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "feedback",
+          "tagName": "nord-empty-state",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-empty-state",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/date-picker/DatePicker.ts",
@@ -3637,10 +3842,14 @@
               "parameters": [
                 {
                   "name": "moveFocusToButton",
-                  "default": "true"
+                  "default": "true",
+                  "description": "controls whether focus should be returned to the date picker's button.",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ],
-              "description": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\nreturning to the date picker's button. Default is true."
+              "description": "Hide the calendar modal."
             },
             {
               "kind": "method",
@@ -3901,6 +4110,14 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -4043,20 +4260,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "events": [
@@ -4272,17 +4475,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-date-picker",
           "customElement": true
@@ -4358,72 +4557,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use to choose a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nDate picker is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Choose date button\n\n- `Space, Enter`: Opens the date picker dialog and moves focus to the first select menu in the dialog.\n\n### Date picker dialog\n\n- `Esc`: Closes the date picker dialog and moves focus back to the “choose date” button.\n- `Tab`: Moves focus to the next element in the dialog. Please note since the calendar uses `role=\"grid\"`, only one button in the calendar grid is in the tab sequence. Additionally, if focus is on the last focusable element, focus is next moved back to the first focusable element inside the date picker dialog.\n- `Shift + Tab`: Same as above, but in reverse order.\n\n### Date picker dialog: Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Date picker dialog: Date grid\n\n- `Space, Enter`: Selects a date, closes the dialog, and moves focus back to the “Choose Date” button. Additionally updates the value of the date picker input with the selected date, and adds selected date to “Choose Date” button label.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day.  In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n\n#### Date picker dialog: Close button\n\n- `Space, Enter`: Closes the dialog, moves focus to “choose date” button, but does not update the date in input.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/empty-state/EmptyState.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state should provide\nexplanation or guidance to help user progress.",
-          "name": "EmptyState",
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "feedback",
-          "tagName": "nord-empty-state",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-empty-state",
-          "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/fieldset/Fieldset.ts",
@@ -4496,20 +4629,6 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -4539,17 +4658,11 @@
               "fieldName": "error"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-fieldset",
           "customElement": true
@@ -4747,16 +4860,19 @@
                   "name": "iconOrName",
                   "type": {
                     "text": "string | { title: string; default: string }"
-                  }
+                  },
+                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
                 },
                 {
                   "name": "icon",
                   "optional": true,
                   "type": {
                     "text": "string"
-                  }
+                  },
+                  "description": "The SVG string for the icon."
                 }
-              ]
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "field",
@@ -4818,20 +4934,6 @@
                   "text": "string | Promise<string>"
                 }
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -4870,17 +4972,11 @@
               "fieldName": "label"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "image",
           "tagName": "nord-icon",
           "customElement": true
@@ -4928,16 +5024,16 @@
               "name": "error"
             },
             {
-              "description": "Optional slot that holds an icon for the input.",
-              "name": "before"
+              "description": "Optional slot used to place an icon at the start of the input.",
+              "name": "start"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "beforeSlot",
+              "name": "startSlot",
               "privacy": "private",
-              "default": "new SlotController(this, \"before\")"
+              "default": "new SlotController(this, \"start\")"
             },
             {
               "kind": "field",
@@ -5167,6 +5263,14 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5323,20 +5427,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -5488,17 +5578,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-input",
           "customElement": true,
@@ -5554,7 +5640,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configurations: one-column. Please note\nthat responsive behaviour is still under work.",
+          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
           "name": "Layout",
           "slots": [
             {
@@ -6060,34 +6146,186 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/progress-bar/ProgressBar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "privacy": "protected",
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "fieldName": "value"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "feedback",
+          "tagName": "nord-progress-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-progress-bar",
+          "declaration": {
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/radio/Radio.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
               "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
@@ -6186,11 +6424,6 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
                   "name": "e",
@@ -6199,6 +6432,11 @@
                   }
                 }
               ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6488,20 +6726,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -6653,17 +6877,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-radio",
           "customElement": true,
@@ -6987,6 +7207,14 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -7143,20 +7371,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "mixins": [
@@ -7171,17 +7385,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-select",
           "customElement": true,
@@ -7398,20 +7608,6 @@
               "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
               "attribute": "label",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -7441,17 +7637,11 @@
               "fieldName": "label"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "feedback",
           "tagName": "nord-spinner",
           "customElement": true
@@ -7526,17 +7716,13 @@
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "justifyContent",
               "type": {
-                "text": "boolean"
+                "text": "\"center\" | \"start\" | \"end\" | undefined"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "description": "How to justify the child items inside the stack.",
+              "attribute": "justify-content",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -7565,19 +7751,21 @@
               },
               "description": "How to align the child items inside the stack.",
               "fieldName": "alignItems"
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "justify-content",
+              "type": {
+                "text": "\"center\" | \"start\" | \"end\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "fieldName": "justifyContent"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "structure",
           "tagName": "nord-stack",
           "customElement": true
@@ -7640,44 +7828,24 @@
               "name": "createRenderRoot",
               "privacy": "protected",
               "description": "opt out of shadow dom"
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "_warningLogged",
+              "name": "density",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
               },
               "default": "\"default\"",
               "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
               "fieldName": "density"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "list",
           "tagName": "nord-table",
           "customElement": true
@@ -7947,6 +8115,14 @@
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -8103,20 +8279,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -8268,17 +8430,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-textarea",
           "customElement": true,
@@ -8363,9 +8521,23 @@
             },
             {
               "kind": "field",
-              "name": "targetElement",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "currentElement",
+              "type": {
+                "text": "FocusableElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timeoutId",
               "type": {
-                "text": "FocusableElement"
+                "text": "ReturnType<typeof setTimeout> | undefined"
               },
               "privacy": "private"
             },
@@ -8377,12 +8549,22 @@
             },
             {
               "kind": "field",
-              "name": "visible",
+              "name": "state",
               "type": {
-                "text": "boolean"
+                "text": "TooltipStates"
               },
-              "default": "false",
-              "description": "Determines whether the tooltip is visible or not."
+              "privacy": "private",
+              "default": "\"hidden\"",
+              "description": "The current state of the tooltip, dependent on the state machine"
+            },
+            {
+              "kind": "field",
+              "name": "coords",
+              "type": {
+                "text": "[number, number]"
+              },
+              "privacy": "private",
+              "default": "[0, 0]"
             },
             {
               "kind": "field",
@@ -8428,6 +8610,19 @@
               "attribute": "delay",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "handleTransition",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "prevState",
+                  "type": {
+                    "text": "TooltipStates"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "updatePosition",
@@ -8436,48 +8631,38 @@
             },
             {
               "kind": "field",
-              "name": "handleScroll",
+              "name": "hideTooltip",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "showTooltip",
-              "privacy": "private",
-              "description": "Show and hide the tooltip using inline styles"
+              "name": "reposition",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hideTooltip",
+              "name": "handleShow",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hideOnEscape",
+              "name": "handleHide",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "addDescribedBy",
+              "name": "hideOnEscape",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "removeDescribedBy",
+              "name": "addDescribedBy",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "name": "removeDescribedBy",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -8518,17 +8703,11 @@
               "fieldName": "delay"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "overlay",
           "tagName": "nord-tooltip",
           "customElement": true
@@ -8568,33 +8747,12 @@
               "name": ""
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "text",
           "tagName": "nord-visually-hidden",
           "customElement": true
@@ -8622,217 +8780,206 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "DirectionController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hosts",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
-              "type": {
-                "text": "MutationObserver | undefined"
-              },
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "WritingDirection"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isLTR"
-            },
-            {
-              "kind": "field",
-              "name": "isRTL"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
-            }
-          ]
+          "kind": "variable",
+          "name": "cond"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "cond",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FormDataController",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleFormData",
-              "privacy": "private"
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FormDataController",
-          "declaration": {
-            "name": "FormDataController",
-            "module": "src/common/controllers/FormDataController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/LightDismissController.ts",
-      "declarations": [
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "LightDismissController",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "shortcut",
+              "name": "condition",
               "type": {
-                "text": "ShortcutController"
-              },
-              "privacy": "private",
-              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleEsc",
-              "privacy": "private"
-            },
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "handleClickOut",
-              "privacy": "private"
+              "name": "condition",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
+              }
             }
-          ]
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LightDismissController",
+          "name": "wrapIf",
           "declaration": {
-            "name": "LightDismissController",
-            "module": "src/common/controllers/LightDismissController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightDomController.ts",
+      "path": "src/common/mixins/DraftComponentMixin.ts",
       "declarations": [
         {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "LightDomController",
+          "name": "DraftComponentMixin",
           "members": [
             {
               "kind": "field",
-              "name": "container",
+              "name": "_warningLogged",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
-            },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            }
+          ],
+          "parameters": [
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
           ]
         }
@@ -8840,468 +8987,619 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDomController",
+          "name": "DraftComponentMixin",
           "declaration": {
-            "name": "LightDomController",
-            "module": "src/common/controllers/LightDomController.ts"
+            "name": "DraftComponentMixin",
+            "module": "src/common/mixins/DraftComponentMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightSlotController.ts",
+      "path": "src/common/mixins/FocusableMixin.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
-          "name": "LightSlotController",
+          "description": "",
+          "name": "FocusableMixinInterface",
           "members": [
             {
               "kind": "field",
-              "name": "renderHook",
+              "name": "focusableRef",
               "type": {
-                "text": "Comment"
+                "text": "Ref<HTMLElement>"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "lightDom",
-              "type": {
-                "text": "LightDomController"
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostConnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "hostDisconnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
-            },
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
               "kind": "field",
-              "name": "onChange",
-              "privacy": "protected",
+              "name": "focusableRef",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "_e",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "description": "Programmatically move focus to the component."
             },
             {
               "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
             },
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FocusableMixinInterface",
+          "declaration": {
+            "name": "FocusableMixinInterface",
+            "module": "src/common/mixins/FocusableMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FocusableMixin",
+          "declaration": {
+            "name": "FocusableMixin",
+            "module": "src/common/mixins/FocusableMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FormAssociatedMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "required",
+              "type": {
+                "text": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
               }
-            }
-          ],
-          "superclass": {
-            "name": "SlotController",
-            "module": "/src/common/controllers/SlotController.js"
-          },
-          "status": null,
-          "category": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LightSlotController",
-          "declaration": {
-            "name": "LightSlotController",
-            "module": "src/common/controllers/LightSlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/PortalController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PortalController",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "renderHook",
+              "name": "inputId",
               "type": {
-                "text": "Comment"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "errorId",
               "type": {
-                "text": "LightDomController"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostUpdated"
+              "kind": "field",
+              "name": "labelSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "hintSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "errorSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "options",
-              "default": "options"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PortalController",
-          "declaration": {
-            "name": "PortalController",
-            "module": "src/common/controllers/PortalController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/ShortcutController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ShortcutController",
-          "members": [
+              "name": "formData",
+              "type": {
+                "text": "FormDataController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "unregister",
+              "name": "formValue",
               "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "hasHint",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "unbind"
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "bind",
+              "name": "handleInput",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "shortcuts",
+                  "name": "e",
                   "type": {
-                    "text": "KeyBindingMap"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "shortcuts",
-              "default": "shortcuts"
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "target",
-              "default": "target"
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "\"true\" | undefined"
+                }
+              }
             }
           ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ShortcutController",
-          "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
-          }
         },
         {
-          "kind": "js",
-          "name": "ShortcutMap",
-          "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
-      "declarations": [
-        {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "SlotController",
+          "name": "FormAssociatedMixin",
           "members": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "hasContent"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")"
             },
             {
               "kind": "field",
-              "name": "isEmpty"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })"
             },
             {
               "kind": "field",
-              "name": "content"
+              "name": "formValue",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"input\""
             },
             {
-              "kind": "method",
-              "name": "onChange",
+              "kind": "field",
+              "name": "errorId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "\"error\""
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"hint\""
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SlotController",
-          "declaration": {
-            "name": "SlotController",
-            "module": "src/common/controllers/SlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SwipeController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SwipeController",
-          "members": [
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label"
+            },
             {
               "kind": "field",
-              "name": "host",
+              "name": "hint",
               "type": {
-                "text": "ReactiveElement"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "host"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint"
             },
             {
               "kind": "field",
-              "name": "attached",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label"
             },
             {
               "kind": "field",
-              "name": "initialTouchX",
+              "name": "placeholder",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "initialTouchY",
+              "name": "error",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "required",
               "type": {
-                "text": "() => HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required"
             },
             {
               "kind": "field",
-              "name": "onSwipeEnd",
+              "name": "expand",
               "type": {
-                "text": "SwipeControllerOptions[\"onSwipeEnd\"]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "matchesGesture",
-              "type": {
-                "text": "SwipeControllerOptions[\"matchesGesture\"]"
-              }
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostUpdated"
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "renderLabel",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "handleTouchStart",
-              "privacy": "private"
+              "name": "hasHint",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "handleTouchEnd",
-              "privacy": "private"
+              "name": "hasError",
+              "privacy": "protected"
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isHorizontalSwipe",
-          "parameters": [
+          ],
+          "events": [
             {
-              "name": "{ distX, distY }",
+              "name": "input",
               "type": {
-                "text": "SwipeDetails"
-              }
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction."
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isDownwardsSwipe",
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint"
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required"
+            },
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
+            }
+          ],
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "superClass",
               "type": {
-                "text": "SwipeDetails"
+                "text": "T"
               }
             }
           ]
@@ -9310,232 +9608,218 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SwipeController",
-          "declaration": {
-            "name": "SwipeController",
-            "module": "src/common/controllers/SwipeController.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isHorizontalSwipe",
+          "name": "FormAssociatedMixinInterface",
           "declaration": {
-            "name": "isHorizontalSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isDownwardsSwipe",
-          "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "cond"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "cond",
+          "name": "FormAssociatedMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/InputMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "class",
+          "description": "",
+          "name": "InputMixinInterface",
+          "members": [
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
+                "text": "string"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "true"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "HTMLFormElement | undefined"
               }
             }
           ]
         },
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "InputMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "unknown"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element."
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+          ],
+          "attributes": [
             {
-              "name": "condition",
+              "name": "disabled",
               "type": {
-                "text": "any"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled"
             },
             {
-              "name": "inner",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
-            },
-            {
-              "name": "wrapper",
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
             }
           ],
-          "return": {
-            "type": {
-              "text": ""
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
-          }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
+          "name": "InputMixinInterface",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "InputMixin",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
-          "kind": "mixin",
+          "kind": "class",
           "description": "",
-          "name": "DraftComponentMixin",
+          "name": "DirectionController",
           "members": [
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
+            },
+            {
+              "kind": "field",
+              "name": "observer",
               "type": {
-                "text": "boolean"
+                "text": "MutationObserver | undefined"
               },
               "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
+              "static": true
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "dir",
               "type": {
-                "text": "T"
+                "text": "WritingDirection"
               }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR"
+            },
+            {
+              "kind": "field",
+              "name": "isRTL"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
             }
           ]
         }
@@ -9543,111 +9827,210 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DraftComponentMixin",
+          "name": "DirectionController",
           "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
+      "path": "src/common/controllers/EventController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FocusableMixinInterface",
+          "name": "EventController",
           "members": [
             {
               "kind": "field",
-              "name": "focusableRef",
+              "name": "listeners",
               "type": {
-                "text": "Ref<HTMLElement>"
+                "text": "Array<() => void>"
               },
-              "privacy": "protected"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "listen",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
               "parameters": [
+                {
+                  "name": "window",
+                  "type": {
+                    "text": "Window"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                  }
+                },
                 {
                   "name": "options",
                   "optional": true,
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "boolean | AddEventListenerOptions"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "blur",
+              "name": "listen",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "document",
+                  "type": {
+                    "text": "Document"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "click",
+              "name": "listen",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
+              },
               "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
                 {
                   "name": "options",
                   "optional": true,
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "boolean | AddEventListenerOptions"
+                  }
                 }
-              ],
-              "description": "Programmatically move focus to the component."
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component."
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component."
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "name": "listen",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Window | Document | HTMLElement | ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(ev: any) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -9655,500 +10038,440 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FocusableMixinInterface",
-          "declaration": {
-            "name": "FocusableMixinInterface",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FocusableMixin",
+          "name": "EventController",
           "declaration": {
-            "name": "FocusableMixin",
-            "module": "src/common/mixins/FocusableMixin.ts"
+            "name": "EventController",
+            "module": "src/common/controllers/EventController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/FormAssociatedMixin.ts",
+      "path": "src/common/controllers/FormDataController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FormAssociatedMixinInterface",
+          "name": "FormDataController",
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "events",
               "type": {
-                "text": "string"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "handleFormData",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormDataController",
+          "declaration": {
+            "name": "FormDataController",
+            "module": "src/common/controllers/FormDataController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDismissController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LightDismissController",
+          "members": [
             {
               "kind": "field",
-              "name": "error",
+              "name": "shortcut",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "events",
               "type": {
-                "text": "boolean"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "name": "handleClickOut",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LightDismissController",
+          "declaration": {
+            "name": "LightDismissController",
+            "module": "src/common/controllers/LightDismissController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDomController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LightDomController",
+          "members": [
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "container",
               "type": {
-                "text": "SlotController"
+                "text": "HTMLElement"
               },
-              "privacy": "protected"
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "formData",
-              "type": {
-                "text": "FormDataController"
-              },
-              "privacy": "protected"
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "hasError",
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LightDomController",
+          "declaration": {
+            "name": "LightDomController",
+            "module": "src/common/controllers/LightDomController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightSlotController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
+          "name": "LightSlotController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "renderHook",
               "type": {
-                "text": "boolean"
+                "text": "Comment"
               },
-              "privacy": "protected"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasHint",
+              "name": "lightDom",
               "type": {
-                "text": "boolean"
+                "text": "LightDomController"
               },
-              "privacy": "protected"
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "onChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "_e",
                   "type": {
                     "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "\"true\" | undefined"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FormAssociatedMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
-            },
-            {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected"
+              "name": "syncLightDom",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\""
+              "name": "options",
+              "default": "options"
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "events",
               "type": {
-                "text": "string"
+                "text": "EventController"
               },
-              "privacy": "protected",
-              "default": "\"error\""
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\""
+              "name": "hasContent",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label"
+              "name": "isEmpty",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint"
+              "name": "content",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label"
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder"
+              "name": "host",
+              "default": "host",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error"
-            },
+              "name": "slotName",
+              "default": "slotName",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SlotController",
+            "module": "/src/common/controllers/SlotController.js"
+          },
+          "status": null,
+          "category": null
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LightSlotController",
+          "declaration": {
+            "name": "LightSlotController",
+            "module": "src/common/controllers/LightSlotController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/PortalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PortalController",
+          "members": [
             {
               "kind": "field",
-              "name": "required",
+              "name": "renderHook",
               "type": {
-                "text": "boolean"
+                "text": "Comment"
               },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "lightDom",
               "type": {
-                "text": "boolean"
+                "text": "LightDomController"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected"
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected"
+              "name": "hostConnected"
             },
             {
               "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected"
+              "name": "hostUpdated"
             },
             {
               "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected"
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input."
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction."
+              "name": "options",
+              "default": "options"
             }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label"
-            },
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PortalController",
+          "declaration": {
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/ShortcutController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ShortcutController",
+          "members": [
             {
-              "name": "hint",
+              "kind": "field",
+              "name": "unregister",
               "type": {
-                "text": "string | undefined"
+                "text": "ReturnType<typeof tinykeys> | undefined"
               },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
+              "privacy": "private"
             },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel"
+            {
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error"
+              "kind": "method",
+              "name": "unbind"
             },
             {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required"
+              "kind": "method",
+              "name": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             },
             {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "parameters": [
+              "kind": "field",
+              "name": "shortcuts",
+              "default": "shortcuts"
+            },
             {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "kind": "field",
+              "name": "target",
+              "default": "target"
             }
           ]
         }
@@ -10156,136 +10479,192 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormAssociatedMixinInterface",
+          "name": "ShortcutController",
           "declaration": {
-            "name": "FormAssociatedMixinInterface",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "ShortcutController",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FormAssociatedMixin",
+          "name": "ShortcutMap",
           "declaration": {
-            "name": "FormAssociatedMixin",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "KeyBindingMap",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/InputMixin.ts",
+      "path": "src/common/controllers/SlotController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "InputMixinInterface",
+          "name": "SlotController",
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "events",
               "type": {
-                "text": "string"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
+              "name": "hasContent"
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "isEmpty"
             },
             {
               "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | undefined"
-              }
+              "name": "content"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "slotName",
+              "default": "slotName"
             }
           ]
-        },
+        }
+      ],
+      "exports": [
         {
-          "kind": "mixin",
+          "kind": "js",
+          "name": "SlotController",
+          "declaration": {
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/SwipeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
           "description": "",
-          "name": "InputMixin",
+          "name": "SwipeController",
           "members": [
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "events",
               "type": {
-                "text": "boolean"
+                "text": "EventController"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "hadFirstUpdate",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The name of the form component.",
-              "attribute": "name"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "initialTouchX",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "form",
-              "privacy": "protected",
-              "description": "Gets the form, if any, associated with the form element."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
+              "name": "initialTouchY",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled"
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "options",
               "type": {
-                "text": "string | undefined"
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+              "privacy": "private",
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
-              "name": "value",
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchEnd",
+              "privacy": "private"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isHorizontalSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
+                "text": "SwipeDetails"
+              }
             }
-          ],
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isDownwardsSwipe",
           "parameters": [
             {
-              "name": "superClass",
+              "name": "{ distX, distY }",
               "type": {
-                "text": "T"
+                "text": "SwipeDetails"
               }
             }
           ]
@@ -10294,18 +10673,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "InputMixinInterface",
+          "name": "SwipeController",
           "declaration": {
-            "name": "InputMixinInterface",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "SwipeController",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         },
         {
           "kind": "js",
-          "name": "InputMixin",
+          "name": "isHorizontalSwipe",
           "declaration": {
-            "name": "InputMixin",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "isHorizontalSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDownwardsSwipe",
+          "declaration": {
+            "name": "isDownwardsSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         }
       ]