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

package/custom-elements.json

@@ -429,6 +429,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 to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</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| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\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/button/Button.ts",
@@ -837,49 +905,69 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/card/Card.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",
+          "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": "default slot",
+              "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": "variant",
+              "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": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
+              "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": "variant",
+              "name": "padding",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
+              "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": "new",
-          "category": "feedback",
-          "tagName": "nord-banner",
+          "status": "ready",
+          "category": "structure",
+          "tagName": "nord-card",
           "customElement": true
         }
       ],
@@ -888,20 +976,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-banner",
+          "name": "nord-card",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "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 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"
+      "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",
@@ -1371,94 +1459,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- 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",
@@ -3621,58 +3621,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/empty-state/EmptyState.ts",
+      "path": "src/date-picker/DatePicker.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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",
-          "name": "DatePicker",
-          "members": [
+          "description": "\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",
+          "name": "DatePicker",
+          "members": [
             {
               "kind": "field",
               "name": "toggleButton",
@@ -4557,6 +4512,51 @@
       ],
       "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 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/fieldset/Fieldset.ts",
@@ -4688,82 +4688,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 the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset 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\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</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\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/header/Header.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
-          "name": "Header",
-          "slots": [
-            {
-              "description": "The header content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot for buttons, toggles, etc.",
-              "name": "action"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "actionSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"action\")"
-            },
-            {
-              "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": "structure",
-          "tagName": "nord-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-header",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.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 the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/icon/Icon.ts",
@@ -5002,6 +4926,82 @@
       ],
       "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 provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/header/Header.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
+          "name": "Header",
+          "slots": [
+            {
+              "description": "The header content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for buttons, toggles, etc.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "actionSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"action\")"
+            },
+            {
+              "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": "structure",
+          "tagName": "nord-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.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 the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/input/Input.ts",
@@ -8780,206 +8780,62 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "cond"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "class",
+          "description": "",
+          "name": "DirectionController",
+          "members": [
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "field",
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "observer",
               "type": {
-                "text": "true"
-              }
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "dir",
               "type": {
-                "text": "() => TInner"
+                "text": "WritingDirection"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "field",
+              "name": "isLTR"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "field",
+              "name": "isRTL"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(innards: TInner) => TWrapper"
-              }
-            }
-          ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "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",
-          "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/mixins/DraftComponentMixin.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "observe",
               "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
+              "static": true
+            },
             {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "kind": "field",
+              "name": "host",
+              "default": "host"
             }
           ]
         }
@@ -8987,111 +8843,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"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -9099,508 +9054,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",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "events",
               "type": {
-                "text": "boolean"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "handleFormData",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
+              "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": "errorId",
+              "name": "shortcut",
               "type": {
-                "text": "string"
+                "text": "ShortcutController"
               },
-              "privacy": "protected"
+              "privacy": "private",
+              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "events",
               "type": {
-                "text": "string"
+                "text": "EventController"
               },
-              "privacy": "protected"
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "name": "handleClickOut",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "type": {
-                "text": "FormDataController"
-              },
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "hasHint",
+              "name": "container",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "HTMLElement"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
+              "name": "hostUpdated"
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
+              "name": "hostDisconnected"
             },
             {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
+              "kind": "field",
+              "name": "host",
+              "default": "host"
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "\"true\" | undefined"
-                }
-              }
+              "kind": "field",
+              "name": "options",
+              "default": "options"
             }
           ]
-        },
+        }
+      ],
+      "exports": [
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "FormAssociatedMixin",
+          "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": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")"
+              "name": "renderHook",
+              "type": {
+                "text": "Comment"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")"
+              "name": "lightDom",
+              "type": {
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")"
+              "kind": "method",
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "privacy": "protected"
+              "name": "onChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\""
+              "kind": "method",
+              "name": "syncLightDom",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\""
+              "name": "options",
+              "default": "options"
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "events",
               "type": {
-                "text": "string"
+                "text": "EventController"
               },
-              "privacy": "protected",
-              "default": "\"hint\""
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "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": "hasContent",
+              "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": "isEmpty",
+              "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": "content",
+              "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": "handleSlotChange",
+              "privacy": "private",
+              "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": "host",
+              "default": "host",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "required",
+              "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": "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",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "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": [
+          ]
+        }
+      ],
+      "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": "label",
+              "kind": "field",
+              "name": "unregister",
               "type": {
-                "text": "string"
+                "text": "ReturnType<typeof tinykeys> | undefined"
               },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label"
+              "privacy": "private"
             },
             {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "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": "hostDisconnected"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder"
+              "kind": "method",
+              "name": "unbind"
             },
             {
-              "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": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             },
             {
-              "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": "field",
+              "name": "shortcuts",
+              "default": "shortcuts"
             },
             {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "kind": "field",
+              "name": "target",
+              "default": "target"
             }
           ]
         }
@@ -9608,137 +9495,83 @@
       "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": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "hasContent"
             },
             {
               "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | undefined"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "InputMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "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": "isEmpty"
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name"
+              "name": "content"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "form",
+              "kind": "method",
+              "name": "onChange",
               "privacy": "protected",
-              "description": "Gets the form, if any, associated with the form element."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "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"
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+              "kind": "field",
+              "name": "host",
+              "default": "host"
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "kind": "field",
+              "name": "slotName",
+              "default": "slotName"
             }
           ]
         }
@@ -9746,80 +9579,109 @@
       "exports": [
         {
           "kind": "js",
-          "name": "InputMixinInterface",
-          "declaration": {
-            "name": "InputMixinInterface",
-            "module": "src/common/mixins/InputMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InputMixin",
+          "name": "SlotController",
           "declaration": {
-            "name": "InputMixin",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/controllers/SwipeController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DirectionController",
+          "name": "SwipeController",
           "members": [
             {
               "kind": "field",
-              "name": "hosts",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
               "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
+              "default": "new EventController(host)"
             },
             {
               "kind": "field",
-              "name": "observer",
+              "name": "hadFirstUpdate",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "boolean"
               },
               "privacy": "private",
-              "static": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "dir",
+              "name": "initialTouchX",
               "type": {
-                "text": "WritingDirection"
-              }
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "isLTR"
+              "name": "initialTouchY",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "isRTL"
+              "name": "options",
+              "type": {
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
+              },
+              "privacy": "private",
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostUpdated"
             },
             {
               "kind": "method",
               "name": "hostDisconnected"
             },
             {
-              "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
+              "kind": "field",
+              "name": "handleTouchStart",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "handleTouchEnd",
+              "privacy": "private"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isHorizontalSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isDownwardsSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
             }
           ]
         }
@@ -9827,651 +9689,853 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "SwipeController",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "SwipeController",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isHorizontalSwipe",
+          "declaration": {
+            "name": "isHorizontalSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDownwardsSwipe",
+          "declaration": {
+            "name": "isDownwardsSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/EventController.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "EventController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "listeners",
-              "type": {
-                "text": "Array<() => void>"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "method",
-              "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": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+          "kind": "variable",
+          "name": "cond"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/directives/wrapIf.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
             },
             {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
+              }
+            }
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        }
+      ],
+      "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",
+          "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/mixins/DraftComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "DraftComponentMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
               },
-              "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"
-                  }
-                }
-              ]
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DraftComponentMixin",
+          "declaration": {
+            "name": "DraftComponentMixin",
+            "module": "src/common/mixins/DraftComponentMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FocusableMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FocusableMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "type": {
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "listen",
+              "name": "focus",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
               "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": "boolean | AddEventListenerOptions"
+                    "text": "FocusOptions"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "listen",
+              "name": "blur",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "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": "ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
-                  }
-                },
                 {
                   "name": "options",
                   "optional": true,
                   "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
-              ]
+              ],
+              "description": "Programmatically move focus to the component."
             },
             {
               "kind": "method",
-              "name": "listen",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Window | Document | HTMLElement | ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "string"
-                  }
-                },
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
+            },
+            {
+              "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": "required",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "errorId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "labelSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hintSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "errorSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "formData",
+              "type": {
+                "text": "FormDataController"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
                 {
-                  "name": "listener",
+                  "name": "e",
                   "type": {
-                    "text": "(ev: any) => any"
+                    "text": "Event"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "boolean | AddEventListenerOptions"
+                    "text": "Event"
                   }
                 }
               ]
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EventController",
-          "declaration": {
-            "name": "EventController",
-            "module": "src/common/controllers/EventController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FormDataController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "renderLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "handleFormData",
-              "privacy": "private"
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "\"true\" | undefined"
+                }
+              }
             }
           ]
-        }
-      ],
-      "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",
+          "kind": "mixin",
           "description": "",
-          "name": "LightDismissController",
+          "name": "FormAssociatedMixin",
           "members": [
             {
               "kind": "field",
-              "name": "shortcut",
-              "type": {
-                "text": "ShortcutController"
-              },
-              "privacy": "private",
-              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")"
             },
             {
               "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "handleEsc",
-              "privacy": "private"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")"
             },
             {
               "kind": "field",
-              "name": "handleClickOut",
-              "privacy": "private"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "formValue",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "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": [
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"input\""
+            },
             {
               "kind": "field",
-              "name": "container",
+              "name": "errorId",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "\"error\""
             },
             {
-              "kind": "method",
-              "name": "hostUpdated"
+              "kind": "field",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"hint\""
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint"
             },
             {
               "kind": "field",
-              "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": [
+              "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"
+            },
             {
               "kind": "field",
-              "name": "renderHook",
+              "name": "placeholder",
               "type": {
-                "text": "Comment"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "error",
               "type": {
-                "text": "LightDomController"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error"
             },
             {
-              "kind": "method",
-              "name": "hostConnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "kind": "field",
+              "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.",
+              "attribute": "required"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "onChange",
+              "kind": "method",
+              "name": "handleInput",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "_e",
+                  "name": "e",
                   "type": {
                     "text": "Event"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "name": "hasHint",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "name": "hasError",
+              "privacy": "protected"
             }
           ],
-          "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": [
+          "events": [
             {
-              "kind": "field",
-              "name": "renderHook",
+              "name": "input",
               "type": {
-                "text": "Comment"
+                "text": "NordEvent"
               },
-              "privacy": "private"
+              "description": "Fired as the user types into the input."
             },
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "change",
               "type": {
-                "text": "LightDomController"
+                "text": "NordEvent"
               },
-              "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": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
+              "description": "Fired whenever the input's value is changed via user interaction."
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label"
             },
             {
-              "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": [
-            {
-              "kind": "field",
-              "name": "unregister",
+              "name": "hint",
               "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "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": "hostDisconnected"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder"
             },
             {
-              "kind": "method",
-              "name": "unbind"
+              "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": "bind",
-              "parameters": [
-                {
-                  "name": "shortcuts",
-                  "type": {
-                    "text": "KeyBindingMap"
-                  }
-                }
-              ]
+              "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": "field",
-              "name": "shortcuts",
-              "default": "shortcuts"
-            },
+              "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": "target",
-              "default": "target"
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
           ]
         }
@@ -10479,192 +10543,136 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ShortcutController",
+          "name": "FormAssociatedMixinInterface",
           "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ShortcutMap",
+          "name": "FormAssociatedMixin",
           "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
+      "path": "src/common/mixins/InputMixin.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlotController",
+          "name": "InputMixinInterface",
           "members": [
             {
               "kind": "field",
-              "name": "events",
+              "name": "name",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "field",
-              "name": "hasContent"
-            },
-            {
-              "kind": "field",
-              "name": "isEmpty"
-            },
-            {
-              "kind": "field",
-              "name": "content"
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName"
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | undefined"
+              }
             }
           ]
-        }
-      ],
-      "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",
+          "kind": "mixin",
           "description": "",
-          "name": "SwipeController",
+          "name": "InputMixin",
           "members": [
             {
               "kind": "field",
-              "name": "events",
+              "name": "disabled",
               "type": {
-                "text": "EventController"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "new EventController(host)"
+              "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
             },
             {
               "kind": "field",
-              "name": "hadFirstUpdate",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "The name of the form component.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "initialTouchX",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "initialTouchY",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "0"
+              "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"
             },
             {
-              "kind": "field",
-              "name": "options",
+              "name": "name",
               "type": {
-                "text": "SetRequired<SwipeControllerOptions, \"target\">"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "{\n      target: () => host,\n      ...options,\n    }"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "handleTouchStart",
-              "privacy": "private"
+              "description": "The name of the form component.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "handleTouchEnd",
-              "privacy": "private"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isHorizontalSwipe",
-          "parameters": [
-            {
-              "name": "{ distX, distY }",
+              "name": "value",
               "type": {
-                "text": "SwipeDetails"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isDownwardsSwipe",
+          ],
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "superClass",
               "type": {
-                "text": "SwipeDetails"
+                "text": "T"
               }
             }
           ]
@@ -10673,26 +10681,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SwipeController",
-          "declaration": {
-            "name": "SwipeController",
-            "module": "src/common/controllers/SwipeController.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isHorizontalSwipe",
+          "name": "InputMixinInterface",
           "declaration": {
-            "name": "isHorizontalSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isDownwardsSwipe",
+          "name": "InputMixin",
           "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         }
       ]