@nordhealth/components 1.0.0-beta.17 → 1.0.0-beta.18

package/custom-elements.json

@@ -422,398 +422,372 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/button/Button.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": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
+          "name": "Button",
           "slots": [
             {
-              "description": "default slot",
+              "description": "The button content",
               "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": [
+              "description": "Used to place content before button text. Typically used for icons.",
+              "name": "before"
+            },
             {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
+              "description": "Used to place content after button text. Typically used for icons.",
+              "name": "after"
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "new",
-          "category": "feedback",
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
           "members": [
             {
               "kind": "field",
-              "name": "dialogLabelId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"dialog-header\""
-            },
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "shortcuts",
+              "name": "buttonRef",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
+              "name": "lightDom",
               "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
             },
             {
               "kind": "field",
-              "name": "localization",
+              "name": "variant",
               "type": {
-                "text": "CalendarLocalizedText"
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
               },
-              "default": "localization"
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "size",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "firstDayOfWeek"
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "attribute": "min"
+              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
+              "attribute": "href",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "download",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "attribute": "max"
+              "default": "false",
+              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
+              "attribute": "download"
             },
             {
               "kind": "field",
-              "name": "isDateDisabled",
+              "name": "target",
               "type": {
-                "text": "DateDisabledPredicate"
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "default": "\"_self\"",
+              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
+              "attribute": "target",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "activeFocus",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
+              "default": "false",
+              "description": "Controls whether the button expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "renderLink",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "innards",
                   "type": {
-                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "TemplateResult"
+                  }
                 }
               ],
-              "description": "Programmatically move focus to the calendar."
-            },
-            {
-              "kind": "method",
-              "name": "createDateFormatter",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
+              "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
             },
             {
               "kind": "method",
-              "name": "addDays",
+              "name": "renderButton",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "days",
+                  "name": "innards",
                   "type": {
-                    "text": "number"
+                    "text": "TemplateResult"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "addMonths",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "months",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "renderLightDom",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleOuterClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "addYears",
+              "name": "handleClick",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "years",
+                  "name": "e",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
-              "kind": "method",
-              "name": "startOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "endOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "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,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setYear",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "year",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "day",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "Date"
-                  }
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
-              ]
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
-            },
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "handlePreviousMonthClick",
-              "privacy": "private"
+              "name": "type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
+              "fieldName": "href"
+            },
             {
-              "name": "nord-focus-date",
+              "name": "download",
               "type": {
-                "text": "DateSelectEvent"
+                "text": "boolean"
               },
-              "description": "Dispatched when the calendar's focused date changes."
+              "default": "false",
+              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
+              "fieldName": "download"
             },
             {
+              "name": "target",
               "type": {
-                "text": "DateSelectEvent"
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
               },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
-            }
-          ],
-          "attributes": [
+              "default": "\"_self\"",
+              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
+              "fieldName": "target"
+            },
             {
-              "name": "value",
+              "name": "expand",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "Controls whether the button expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
-              "name": "firstDayOfWeek",
+              "name": "disabled",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "boolean"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
+              "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",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "min",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "fieldName": "min"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "max",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "fieldName": "max"
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -821,8 +795,8 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "list",
-          "tagName": "nord-calendar",
+          "category": "action",
+          "tagName": "nord-button",
           "customElement": true
         }
       ],
@@ -831,499 +805,415 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "Button",
+            "module": "src/button/Button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-calendar",
+          "name": "nord-button",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "Button",
+            "module": "src/button/Button.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 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"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/DateSelectEvent.ts",
+      "path": "src/banner/Banner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "DateSelectEvent",
+          "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": "date",
+              "name": "variant",
               "type": {
-                "text": "Date"
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "default": "date"
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
             }
           ],
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateSelectEvent",
-          "declaration": {
-            "name": "DateSelectEvent",
-            "module": "src/calendar/DateSelectEvent.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 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/calendar/calendar-localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "CalendarLocalizedText"
-          },
-          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n  calendarHeading: \"Choose a date\",\n  dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n  monthNames: [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ],\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  locale: \"en-GB\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/calendar/calendar-localization.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 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/calendar/month-view.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "dayView",
-          "parameters": [
-            {
-              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
-              "type": {
-                "text": "DatePickerDayProps"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "monthView",
-          "parameters": [
+          "attributes": [
             {
-              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "name": "variant",
               "type": {
-                "text": "MonthViewArgs"
-              }
+                "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": "dayView",
+          "name": "default",
           "declaration": {
-            "name": "dayView",
-            "module": "src/calendar/month-view.ts"
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "monthView",
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
           "declaration": {
-            "name": "monthView",
-            "module": "src/calendar/month-view.ts"
+            "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 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"
+      "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",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
-          "name": "Button",
-          "slots": [
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
+          "members": [
             {
-              "description": "The button content",
-              "name": ""
+              "kind": "field",
+              "name": "dialogLabelId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"dialog-header\""
             },
             {
-              "description": "Used to place content before button text. Typically used for icons.",
-              "name": "before"
+              "kind": "field",
+              "name": "monthSelectNode",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Used to place content after button text. Typically used for icons.",
-              "name": "after"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "focusedDayNode",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "buttonRef",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "shortcuts",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "dateFormatShort",
+              "type": {
+                "text": "Intl.DateTimeFormat"
+              },
               "privacy": "private",
-              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "localization",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
+                "text": "CalendarLocalizedText"
               },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
-              "attribute": "variant",
-              "reflects": true
+              "default": "localization"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "value",
               "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
+                "text": "string"
               },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
-              "attribute": "type",
-              "reflects": true
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "DaysOfWeek"
               },
-              "default": "\"m\"",
-              "description": "The size of the button.\nThis affects font-size and padding.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "attribute": "firstDayOfWeek"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "min",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
-              "attribute": "href",
-              "reflects": true
+              "default": "\"\"",
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
-              "attribute": "download"
+              "default": "\"\"",
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "isDateDisabled",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+                "text": "DateDisabledPredicate"
               },
-              "default": "\"_self\"",
-              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
-              "attribute": "target",
-              "reflects": true
+              "default": "isDateDisabled",
+              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "activeFocus",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Controls whether the button expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "renderLink",
+              "kind": "field",
+              "name": "focusedDay",
               "privacy": "private",
+              "default": "new Date()"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "innards",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "TemplateResult"
-                  }
+                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
+              "description": "Programmatically move focus to the calendar."
             },
             {
               "kind": "method",
-              "name": "renderButton",
+              "name": "createDateFormatter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDaySelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addDays",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "innards",
+                  "name": "days",
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "renderLightDom",
+              "name": "addMonths",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "startOfWeek",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleOuterClick",
+              "kind": "method",
+              "name": "endOfWeek",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "setMonth",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "month",
                   "type": {
-                    "text": "Event"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "setYear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "handleMonthSelect",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "form",
-              "privacy": "protected",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "handleNextMonthClick",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "enableActiveFocus",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "disableActiveFocus",
+              "privacy": "private"
             }
           ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
-              "fieldName": "type"
-            },
+          "events": [
             {
-              "name": "size",
+              "name": "nord-focus-date",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "DateSelectEvent"
               },
-              "default": "\"m\"",
-              "description": "The size of the button.\nThis affects font-size and padding.",
-              "fieldName": "size"
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "name": "href",
               "type": {
-                "text": "string | undefined"
+                "text": "DateSelectEvent"
               },
-              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
-              "fieldName": "href"
-            },
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "download",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
-              "fieldName": "download"
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "target",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+                "text": "DaysOfWeek"
               },
-              "default": "\"_self\"",
-              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
-              "fieldName": "target"
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "fieldName": "firstDayOfWeek"
             },
             {
-              "name": "expand",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the button expands to fill the width of its container.",
-              "fieldName": "expand"
+              "default": "\"\"",
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "fieldName": "min"
             },
             {
-              "name": "disabled",
+              "name": "max",
               "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",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
+                "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "fieldName": "max"
             }
           ],
           "superclass": {
@@ -1331,8 +1221,8 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "action",
-          "tagName": "nord-button",
+          "category": "list",
+          "tagName": "nord-calendar",
           "customElement": true
         }
       ],
@@ -1341,20 +1231,130 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "src/button/Button.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-button",
+          "name": "nord-calendar",
           "declaration": {
-            "name": "Button",
-            "module": "src/button/Button.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
+      "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/calendar/DateSelectEvent.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DateSelectEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "Date"
+              },
+              "default": "date"
+            }
+          ],
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateSelectEvent",
+          "declaration": {
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.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 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/calendar/calendar-localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "CalendarLocalizedText"
+          },
+          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n  calendarHeading: \"Choose a date\",\n  dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n  monthNames: [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ],\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  locale: \"en-GB\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/calendar/calendar-localization.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 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/calendar/month-view.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dayView",
+          "parameters": [
+            {
+              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
+              "type": {
+                "text": "DatePickerDayProps"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "monthView",
+          "parameters": [
+            {
+              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "type": {
+                "text": "MonthViewArgs"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dayView",
+          "declaration": {
+            "name": "dayView",
+            "module": "src/calendar/month-view.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "monthView",
+          "declaration": {
+            "name": "monthView",
+            "module": "src/calendar/month-view.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 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",
@@ -4673,6 +4673,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 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",
@@ -4910,92 +4986,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/header/Header.ts",
+      "path": "src/input/Input.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",
+          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
+          "name": "Input",
           "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
               "description": "Optional slot that holds hint text for the input.",
@@ -5618,27 +5618,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/Layout.ts",
+      "path": "src/nav-group/NavGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
-          "name": "Layout",
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
           "slots": [
             {
-              "description": "The default main section content.",
+              "description": "The default slot used for the nav items.",
               "name": ""
-            },
-            {
-              "description": "Used to place content inside the navigation sidebar.",
-              "name": "nav"
-            },
-            {
-              "description": "Used to place content inside the header section.",
-              "name": "header"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading"
+            },
             {
               "kind": "field",
               "name": "_warningLogged",
@@ -5654,6 +5655,16 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
+            }
+          ],
           "mixins": [
             {
               "name": "DraftComponentMixin",
@@ -5665,8 +5676,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "structure",
-          "tagName": "nord-layout",
+          "category": "navigation",
+          "tagName": "nord-nav-group",
           "customElement": true
         }
       ],
@@ -5675,45 +5686,44 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-layout",
+          "name": "nord-nav-group",
           "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\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- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoud all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-group/NavGroup.ts",
+      "path": "src/layout/Layout.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
-          "name": "NavGroup",
+          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
+          "name": "Layout",
           "slots": [
             {
-              "description": "The default slot used for the nav items.",
+              "description": "The default main section content.",
               "name": ""
+            },
+            {
+              "description": "Used to place content inside the navigation sidebar.",
+              "name": "nav"
+            },
+            {
+              "description": "Used to place content inside the header section.",
+              "name": "header"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "attribute": "heading"
-            },
             {
               "kind": "field",
               "name": "_warningLogged",
@@ -5729,16 +5739,6 @@
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "fieldName": "heading"
-            }
-          ],
           "mixins": [
             {
               "name": "DraftComponentMixin",
@@ -5750,8 +5750,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "navigation",
-          "tagName": "nord-nav-group",
+          "category": "structure",
+          "tagName": "nord-layout",
           "customElement": true
         }
       ],
@@ -5760,20 +5760,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-nav-group",
+          "name": "nord-layout",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "Layout",
+            "module": "src/layout/Layout.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- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoud all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n"
     },
     {
       "kind": "javascript-module",
@@ -8589,789 +8589,595 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
+          "kind": "variable",
+          "name": "cond"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DraftComponentMixin",
+          "name": "cond",
           "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FocusableMixinInterface",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "focusableRef",
+              "name": "condition",
               "type": {
-                "text": "Ref<HTMLElement>"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ]
+                "text": "false"
+              }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
               }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
               }
             }
           ]
         },
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component."
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component."
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component."
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
             }
-          ],
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
           "parameters": [
             {
-              "name": "superClass",
+              "name": "condition",
               "type": {
-                "text": "T"
+                "text": "any"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
               }
             }
-          ]
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FocusableMixinInterface",
+          "name": "wrapIf",
           "declaration": {
-            "name": "FocusableMixinInterface",
-            "module": "src/common/mixins/FocusableMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FocusableMixin",
+          "name": "wrapIf",
           "declaration": {
-            "name": "FocusableMixin",
-            "module": "src/common/mixins/FocusableMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/FormAssociatedMixin.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FormAssociatedMixinInterface",
+          "name": "DirectionController",
           "members": [
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "observer",
               "type": {
-                "text": "boolean"
-              }
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
               "kind": "field",
-              "name": "hint",
+              "name": "dir",
               "type": {
-                "text": "string | undefined"
+                "text": "WritingDirection"
               }
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "isLTR"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "isRTL"
             },
             {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "kind": "method",
+              "name": "observe",
+              "privacy": "private",
+              "static": true
             },
             {
               "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DirectionController",
+          "declaration": {
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/FormDataController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormDataController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "name": "handleFormData",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "name": "host",
+              "default": "host"
             },
             {
               "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": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "\"true\" | undefined"
-                }
-              }
+              "name": "options",
+              "default": "options"
             }
           ]
-        },
+        }
+      ],
+      "exports": [
         {
-          "kind": "mixin",
+          "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": "FormAssociatedMixin",
+          "name": "LightDismissController",
           "members": [
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")"
+              "name": "shortcut",
+              "type": {
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
             },
             {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "privacy": "protected"
+              "name": "handleClickOut",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\""
+              "name": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\""
-            },
+              "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": "hintId",
+              "name": "container",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "privacy": "protected",
-              "default": "\"hint\""
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label"
+              "kind": "method",
+              "name": "hostUpdated"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "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": "host",
+              "default": "host"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder"
-            },
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LightDomController",
+          "declaration": {
+            "name": "LightDomController",
+            "module": "src/common/controllers/LightDomController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightSlotController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
+          "name": "LightSlotController",
+          "members": [
             {
               "kind": "field",
-              "name": "error",
+              "name": "renderHook",
               "type": {
-                "text": "string | undefined"
+                "text": "Comment"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "lightDom",
               "type": {
-                "text": "boolean"
+                "text": "LightDomController"
               },
-              "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",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
-              "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": "method",
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "hostDisconnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleChange",
+              "kind": "field",
+              "name": "onChange",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "_e",
                   "type": {
                     "text": "Event"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected"
+              ],
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected"
+              "name": "syncLightDom",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected"
+              "name": "options",
+              "default": "options"
             },
             {
               "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."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label"
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
+              "name": "hasContent",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "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": "field",
+              "name": "isEmpty",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder"
+              "kind": "field",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "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": "host",
+              "default": "host",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
             },
             {
-              "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": "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": "FormAssociatedMixinInterface",
-          "declaration": {
-            "name": "FormAssociatedMixinInterface",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FormAssociatedMixin",
+          "name": "LightSlotController",
           "declaration": {
-            "name": "FormAssociatedMixin",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "LightSlotController",
+            "module": "src/common/controllers/LightSlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/InputMixin.ts",
+      "path": "src/common/controllers/PortalController.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "InputMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | undefined"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
+          "kind": "class",
           "description": "",
-          "name": "InputMixin",
+          "name": "PortalController",
           "members": [
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "renderHook",
               "type": {
-                "text": "boolean"
+                "text": "Comment"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "lightDom",
               "type": {
-                "text": "string | undefined"
+                "text": "LightDomController"
               },
-              "description": "The name of the form component.",
-              "attribute": "name"
+              "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": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "kind": "field",
-              "name": "form",
-              "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"
+              "kind": "method",
+              "name": "hostUpdated"
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
-            }
-          ],
-          "parameters": [
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            },
             {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+              "kind": "field",
+              "name": "options",
+              "default": "options"
             }
           ]
         }
@@ -9379,80 +9185,64 @@
       "exports": [
         {
           "kind": "js",
-          "name": "InputMixinInterface",
-          "declaration": {
-            "name": "InputMixinInterface",
-            "module": "src/common/mixins/InputMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InputMixin",
+          "name": "PortalController",
           "declaration": {
-            "name": "InputMixin",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/controllers/ShortcutController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DirectionController",
+          "name": "ShortcutController",
           "members": [
             {
               "kind": "field",
-              "name": "hosts",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
+              "name": "unregister",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "ReturnType<typeof tinykeys> | undefined"
               },
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "WritingDirection"
-              }
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "isLTR"
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "kind": "field",
-              "name": "isRTL"
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "unbind"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             },
             {
-              "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
+              "kind": "field",
+              "name": "shortcuts",
+              "default": "shortcuts"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "target",
+              "default": "target"
             }
           ]
         }
@@ -9460,22 +9250,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "ShortcutController",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "ShortcutController",
+            "module": "src/common/controllers/ShortcutController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ShortcutMap",
+          "declaration": {
+            "name": "KeyBindingMap",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
+      "path": "src/common/controllers/SlotController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FormDataController",
+          "name": "SlotController",
           "members": [
             {
               "kind": "method",
@@ -9487,9 +9285,34 @@
             },
             {
               "kind": "field",
-              "name": "handleFormData",
+              "name": "hasContent"
+            },
+            {
+              "kind": "field",
+              "name": "isEmpty"
+            },
+            {
+              "kind": "field",
+              "name": "content"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "host",
@@ -9497,8 +9320,8 @@
             },
             {
               "kind": "field",
-              "name": "options",
-              "default": "options"
+              "name": "slotName",
+              "default": "slotName"
             }
           ]
         }
@@ -9506,35 +9329,85 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormDataController",
+          "name": "SlotController",
           "declaration": {
-            "name": "FormDataController",
-            "module": "src/common/controllers/FormDataController.ts"
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightDismissController.ts",
+      "path": "src/common/controllers/SwipeController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LightDismissController",
+          "name": "SwipeController",
           "members": [
             {
               "kind": "field",
-              "name": "shortcut",
+              "name": "host",
               "type": {
-                "text": "ShortcutController"
+                "text": "ReactiveElement"
               },
               "privacy": "private",
-              "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "attached",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "initialTouchX",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "initialTouchY",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "() => HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onSwipeEnd",
+              "type": {
+                "text": "SwipeControllerOptions[\"onSwipeEnd\"]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "matchesGesture",
+              "type": {
+                "text": "SwipeControllerOptions[\"matchesGesture\"]"
+              }
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostUpdated"
             },
             {
               "kind": "method",
@@ -9542,23 +9415,37 @@
             },
             {
               "kind": "field",
-              "name": "handleEsc",
+              "name": "handleTouchStart",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleClickOut",
+              "name": "handleTouchEnd",
               "privacy": "private"
-            },
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isHorizontalSwipe",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
-            },
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isDownwardsSwipe",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
             }
           ]
         }
@@ -9566,48 +9453,56 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDismissController",
+          "name": "SwipeController",
           "declaration": {
-            "name": "LightDismissController",
-            "module": "src/common/controllers/LightDismissController.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/LightDomController.ts",
+      "path": "src/common/mixins/DraftComponentMixin.ts",
       "declarations": [
         {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "LightDomController",
+          "name": "DraftComponentMixin",
           "members": [
             {
               "kind": "field",
-              "name": "container",
+              "name": "_warningLogged",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "host",
-              "default": "host"
-            },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            }
+          ],
+          "parameters": [
             {
-              "kind": "field",
-              "name": "options",
-              "default": "options"
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
           ]
         }
@@ -9615,468 +9510,619 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDomController",
+          "name": "DraftComponentMixin",
           "declaration": {
-            "name": "LightDomController",
-            "module": "src/common/controllers/LightDomController.ts"
+            "name": "DraftComponentMixin",
+            "module": "src/common/mixins/DraftComponentMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightSlotController.ts",
+      "path": "src/common/mixins/FocusableMixin.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
-          "name": "LightSlotController",
+          "description": "",
+          "name": "FocusableMixinInterface",
           "members": [
             {
               "kind": "field",
-              "name": "renderHook",
+              "name": "focusableRef",
               "type": {
-                "text": "Comment"
+                "text": "Ref<HTMLElement>"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "lightDom",
-              "type": {
-                "text": "LightDomController"
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostConnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "hostDisconnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
-            },
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
               "kind": "field",
-              "name": "onChange",
-              "privacy": "protected",
+              "name": "focusableRef",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "_e",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "description": "Programmatically move focus to the component."
             },
             {
               "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
             },
+            {
+              "kind": "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": "options",
-              "default": "options"
+              "name": "label",
+              "type": {
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "required",
+              "type": {
+                "text": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
               }
-            }
-          ],
-          "superclass": {
-            "name": "SlotController",
-            "module": "/src/common/controllers/SlotController.js"
-          },
-          "status": null,
-          "category": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LightSlotController",
-          "declaration": {
-            "name": "LightSlotController",
-            "module": "src/common/controllers/LightSlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/PortalController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PortalController",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "renderHook",
+              "name": "inputId",
               "type": {
-                "text": "Comment"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "errorId",
               "type": {
-                "text": "LightDomController"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostUpdated"
+              "kind": "field",
+              "name": "labelSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "hintSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "errorSlot",
+              "type": {
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "options",
-              "default": "options"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PortalController",
-          "declaration": {
-            "name": "PortalController",
-            "module": "src/common/controllers/PortalController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/ShortcutController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ShortcutController",
-          "members": [
+              "name": "formData",
+              "type": {
+                "text": "FormDataController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "unregister",
+              "name": "formValue",
               "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "hasHint",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "unbind"
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "bind",
+              "name": "handleInput",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "shortcuts",
+                  "name": "e",
                   "type": {
-                    "text": "KeyBindingMap"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "shortcuts",
-              "default": "shortcuts"
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "target",
-              "default": "target"
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "\"true\" | undefined"
+                }
+              }
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ShortcutController",
-          "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ShortcutMap",
-          "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
-      "declarations": [
+          ]
+        },
         {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "SlotController",
+          "name": "FormAssociatedMixin",
           "members": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "hasContent"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")"
             },
             {
               "kind": "field",
-              "name": "isEmpty"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })"
             },
             {
               "kind": "field",
-              "name": "content"
+              "name": "formValue",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"input\""
             },
             {
-              "kind": "method",
-              "name": "onChange",
+              "kind": "field",
+              "name": "errorId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "\"error\""
             },
             {
               "kind": "field",
-              "name": "host",
-              "default": "host"
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"hint\""
             },
             {
               "kind": "field",
-              "name": "slotName",
-              "default": "slotName"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SlotController",
-          "declaration": {
-            "name": "SlotController",
-            "module": "src/common/controllers/SlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SwipeController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SwipeController",
-          "members": [
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label"
+            },
             {
               "kind": "field",
-              "name": "host",
+              "name": "hint",
               "type": {
-                "text": "ReactiveElement"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "host"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint"
             },
             {
               "kind": "field",
-              "name": "attached",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label"
             },
             {
               "kind": "field",
-              "name": "initialTouchX",
+              "name": "placeholder",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "initialTouchY",
+              "name": "error",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "required",
               "type": {
-                "text": "() => HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required"
             },
             {
               "kind": "field",
-              "name": "onSwipeEnd",
+              "name": "expand",
               "type": {
-                "text": "SwipeControllerOptions[\"onSwipeEnd\"]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "matchesGesture",
-              "type": {
-                "text": "SwipeControllerOptions[\"matchesGesture\"]"
-              }
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostUpdated"
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "renderLabel",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "handleTouchStart",
-              "privacy": "private"
+              "name": "hasHint",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "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."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint"
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error"
             },
             {
-              "kind": "field",
-              "name": "handleTouchEnd",
-              "privacy": "private"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isHorizontalSwipe",
-          "parameters": [
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required"
+            },
             {
-              "name": "{ distX, distY }",
+              "name": "expand",
               "type": {
-                "text": "SwipeDetails"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "isDownwardsSwipe",
+          ],
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "superClass",
               "type": {
-                "text": "SwipeDetails"
+                "text": "T"
               }
             }
           ]
@@ -10085,202 +10131,156 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SwipeController",
-          "declaration": {
-            "name": "SwipeController",
-            "module": "src/common/controllers/SwipeController.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isHorizontalSwipe",
+          "name": "FormAssociatedMixinInterface",
           "declaration": {
-            "name": "isHorizontalSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isDownwardsSwipe",
-          "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "cond"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "cond",
+          "name": "FormAssociatedMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/InputMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "class",
+          "description": "",
+          "name": "InputMixinInterface",
+          "members": [
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
+                "text": "string"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "true"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "HTMLFormElement | undefined"
               }
             }
           ]
         },
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "InputMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "unknown"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element."
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+          ],
+          "attributes": [
             {
-              "name": "condition",
+              "name": "disabled",
               "type": {
-                "text": "any"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled"
             },
             {
-              "name": "inner",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name"
             },
             {
-              "name": "wrapper",
+              "name": "value",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
             }
           ],
-          "return": {
-            "type": {
-              "text": ""
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
-          }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
+          "name": "InputMixinInterface",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "InputMixin",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         }
       ]