@nordhealth/components 1.13.0 → 1.14.1

package/custom-elements.json

@@ -574,125 +574,209 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/Button.ts",
+      "path": "src/badge/Badge.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",
+          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
+          "name": "Badge",
           "slots": [
             {
-              "description": "The button content",
+              "description": "The badge content.",
               "name": ""
-            },
+            }
+          ],
+          "members": [
             {
-              "description": "Used to place content at the start of button text. Typically used for icons.",
-              "name": "start"
-            },
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "attribute": "type",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "description": "Used to place content at the end of button text. Typically used for icons.",
-              "name": "end"
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "fieldName": "type"
             }
           ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "displayName": null,
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/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": "buttonRef",
+              "name": "dialogLabelId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"dialog-header\""
+            },
+            {
+              "kind": "field",
+              "name": "monthSelectNode",
+              "type": {
+                "text": "HTMLElement"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "events",
+              "name": "focusedDayNode",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
               "privacy": "private",
-              "default": "new EventController(this)"
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "swipe",
               "privacy": "private",
-              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
+              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "shortcuts",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "dateFormatShort",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
+                "text": "Intl.DateTimeFormat"
               },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
-              "attribute": "variant",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "monthNames",
               "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
+                "text": "string[]"
               },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
-              "attribute": "type",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "monthNamesShort",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string[]"
               },
-              "default": "\"m\"",
-              "description": "The size of the button.\nThis affects font-size and padding.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "accessibleExpanded",
+              "name": "dayNames",
               "type": {
-                "text": "\"true\" | \"false\" | undefined"
+                "text": "string[]"
               },
-              "privacy": "private",
-              "attribute": "aria-expanded"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "accessibleHasPopup",
+              "name": "dayNamesShort",
               "type": {
-                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+                "text": "string[]"
               },
-              "privacy": "private",
-              "attribute": "aria-haspopup"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "value",
               "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": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "boolean"
+                "text": "DaysOfWeek"
               },
-              "default": "false",
-              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
-              "attribute": "download"
+              "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": "target",
+              "name": "min",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+                "text": "string"
               },
-              "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": "\"\"",
+              "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": "max",
+              "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.",
+              "attribute": "max"
             },
             {
               "kind": "field",
@@ -701,308 +785,248 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the button expands to fill the width of its container.",
+              "description": "Controls whether the calendar expands to fill the width of its container.",
               "attribute": "expand",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "isDateDisabled",
+              "type": {
+                "text": "DateDisabledPredicate"
+              },
+              "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": "activeFocus",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
-              "attribute": "loading",
-              "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",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "innards",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
+              "name": "handleValueChange",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "renderLightDom",
-              "privacy": "private"
+              "name": "handleFocusedDayChange",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "handleOuterClick",
+              "kind": "method",
+              "name": "handleLangChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDaySelect",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "addDays",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "days",
                   "type": {
-                    "text": "Event"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleProxyChange",
+              "name": "addMonths",
               "privacy": "private",
-              "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
-            },
-            {
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "months",
+                  "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": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "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": "method",
+              "name": "startOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "endOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "method",
+              "name": "setMonth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setYear",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "year",
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "number"
+                  }
                 }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
-              "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": "handleMonthSelect",
+              "privacy": "private"
+            },
             {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
-              "fieldName": "variant"
+              "kind": "field",
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
-              "fieldName": "type"
+              "kind": "field",
+              "name": "handleNextMonthClick",
+              "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": "handlePreviousMonthClick",
+              "privacy": "private"
             },
             {
-              "name": "aria-expanded",
-              "type": {
-                "text": "\"true\" | \"false\" | undefined"
-              },
-              "fieldName": "accessibleExpanded"
+              "kind": "field",
+              "name": "enableActiveFocus",
+              "privacy": "private"
             },
             {
-              "name": "aria-haspopup",
+              "kind": "field",
+              "name": "disableActiveFocus",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "nord-focus-date",
               "type": {
-                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+                "text": "DateSelectEvent"
               },
-              "fieldName": "accessibleHasPopup"
+              "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": "loading",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
-              "fieldName": "loading"
+              "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"
             },
             {
-              "name": "disabled",
+              "name": "expand",
               "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"
-              },
-              "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": "Controls whether the calendar expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
           "superclass": {
@@ -1010,9 +1034,9 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "action",
+          "category": "list",
           "displayName": null,
-          "tagName": "nord-button",
+          "tagName": "nord-calendar",
           "customElement": true
         }
       ],
@@ -1021,57 +1045,187 @@
           "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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\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/badge/Badge.ts",
+      "path": "src/calendar/DateSelectEvent.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
-          "name": "Badge",
+          "description": "",
+          "name": "DateSelectEvent",
+          "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/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "calendarLocalization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "calendarLocalization",
+            "module": "src/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  dayNames,\n  dayNamesShort,\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",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "slots": [
             {
-              "description": "The badge content.",
+              "description": "The card content.",
               "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "attribute": "type",
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "padding",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "fieldName": "type"
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
             }
           ],
           "superclass": {
@@ -1079,9 +1233,9 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "text",
+          "category": "structure",
           "displayName": null,
-          "tagName": "nord-badge",
+          "tagName": "nord-card",
           "customElement": true
         }
       ],
@@ -1090,407 +1244,569 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-badge",
+          "name": "nord-card",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         }
       ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/checkbox/Checkbox.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": [
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "slots": [
             {
-              "kind": "field",
-              "name": "dialogLabelId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"dialog-header\""
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
             },
             {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
-            },
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "name": "formValue",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate"
             },
             {
               "kind": "field",
-              "name": "shortcuts",
-              "privacy": "private"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked"
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
-              "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"
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "monthNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "monthNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dayNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dayNamesShort",
+              "name": "inputId",
               "type": {
-                "text": "string[]"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "hintId",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "string"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "firstDayOfWeek"
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "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": "Label for the input.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "hint",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "isDateDisabled",
+              "name": "placeholder",
               "type": {
-                "text": "DateDisabledPredicate"
+                "text": "string | undefined"
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "activeFocus",
+              "name": "error",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "Event"
+                  }
                 }
               ],
-              "description": "Programmatically move focus to the calendar."
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleValueChange",
-              "privacy": "protected"
+              "name": "renderLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "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": "method",
-              "name": "endOfWeek",
-              "privacy": "private"
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setYear",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "year",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
+              "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": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
+              "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": "handleNextMonthClick",
-              "privacy": "private"
+              "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": "handlePreviousMonthClick",
-              "privacy": "private"
+              "name": "form",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "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"
+              }
+            },
             {
-              "name": "nord-focus-date",
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when the calendar's focused date changes."
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "indeterminate",
               "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 checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
-              "name": "firstDayOfWeek",
+              "name": "checked",
               "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": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
-              "name": "min",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "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": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "max",
+              "name": "hint",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "expand",
+              "name": "hide-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "fieldName": "expand"
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.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",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "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",
+              "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"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -1498,107 +1814,31 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "list",
+          "category": "form",
           "displayName": null,
-          "tagName": "nord-calendar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-calendar",
-          "declaration": {
-            "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 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",
-          "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/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "calendarLocalization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "calendarLocalization",
-            "module": "src/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": [
+          "tagName": "nord-checkbox",
+          "customElement": true,
+          "events": [
             {
-              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
+              "name": "input",
               "type": {
-                "text": "DatePickerDayProps"
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "monthView",
-          "parameters": [
+            },
             {
-              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  dayNames,\n  dayNamesShort,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "name": "change",
               "type": {
-                "text": "MonthViewArgs"
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             }
           ]
@@ -1607,146 +1847,47 @@
       "exports": [
         {
           "kind": "js",
-          "name": "dayView",
+          "name": "default",
           "declaration": {
-            "name": "dayView",
-            "module": "src/calendar/month-view.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "monthView",
+          "kind": "custom-element-definition",
+          "name": "nord-checkbox",
           "declaration": {
-            "name": "monthView",
-            "module": "src/calendar/month-view.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.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 for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/command-menu/CommandMenu.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
+          "name": "CommandMenu",
           "slots": [
             {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
+              "description": "Used to replace the default footer contents.",
               "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "name": "inputRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "structure",
-          "displayName": null,
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
-          "slots": [
-            {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
+              "name": "listRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -1807,7 +1948,7 @@
               "kind": "field",
               "name": "parent",
               "type": {
-                "text": "string | undefined"
+                "text": "ICommandMenuAction[\"parent\"]"
               },
               "privacy": "private"
             },
@@ -1995,7 +2136,7 @@
                   "name": "parent",
                   "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "ICommandMenuAction[\"parent\"]"
                   }
                 }
               ]
@@ -2316,308 +2457,211 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/button/Button.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
+          "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": "Use when a label requires more than plain text.",
-              "name": "label"
+              "description": "The button content",
+              "name": ""
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "description": "Used to place content at the start of button text. Typically used for icons.",
+              "name": "start"
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "description": "Used to place content at the end of button text. Typically used for icons.",
+              "name": "end"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "buttonRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate"
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
             },
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked"
+              "name": "lightDom",
+              "privacy": "private",
+              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "accessibleExpanded",
+              "type": {
+                "text": "\"true\" | \"false\" | undefined"
+              },
+              "privacy": "private",
+              "attribute": "aria-expanded"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "accessibleHasPopup",
+              "type": {
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+              },
+              "privacy": "private",
+              "attribute": "aria-haspopup"
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "errorId",
+              "name": "download",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "hintId",
+              "name": "target",
               "type": {
-                "text": "string"
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls whether the button expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
+              "name": "renderLink",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "innards",
                   "type": {
-                    "text": "Event"
+                    "text": "TemplateResult"
                   }
                 }
               ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "renderLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "renderButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "renderLightDom",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "handleOuterClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "handleProxyChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
             },
             {
               "kind": "field",
@@ -2719,100 +2763,92 @@
           ],
           "attributes": [
             {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
-            },
-            {
-              "name": "checked",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "fieldName": "variant"
             },
             {
-              "name": "label",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "fieldName": "type"
             },
             {
-              "name": "hint",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "fieldName": "size"
             },
             {
-              "name": "hide-label",
+              "name": "aria-expanded",
               "type": {
-                "text": "boolean"
+                "text": "\"true\" | \"false\" | undefined"
               },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "fieldName": "accessibleExpanded"
             },
             {
-              "name": "placeholder",
+              "name": "aria-haspopup",
               "type": {
-                "text": "string | undefined"
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "fieldName": "accessibleHasPopup"
             },
             {
-              "name": "error",
+              "name": "href",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
+              "fieldName": "href"
             },
             {
-              "name": "required",
+              "name": "download",
               "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",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
+              "fieldName": "download"
             },
             {
-              "name": "disabled",
+              "name": "target",
+              "type": {
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+              },
+              "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": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the button expands to fill the width of its container.",
+              "fieldName": "expand"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
@@ -2851,10 +2887,6 @@
             }
           ],
           "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
             {
               "name": "InputMixin",
               "module": "/src/common/mixins/InputMixin.js"
@@ -2869,34 +2901,10 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "form",
+          "category": "action",
           "displayName": null,
-          "tagName": "nord-checkbox",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
+          "tagName": "nord-button",
+          "customElement": true
         }
       ],
       "exports": [
@@ -2904,20 +2912,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
+            "name": "Button",
+            "module": "src/button/Button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-checkbox",
+          "name": "nord-button",
           "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.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 for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
+      "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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\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",
@@ -5210,6 +5218,17 @@
               "attribute": "expand",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the dropdown. This affects the minimum and maximum inline-size\nof the dropdown.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "hide",
@@ -5271,6 +5290,15 @@
               "default": "false",
               "description": "Controls whether the toggle slot expands to fill the width of its container.",
               "fieldName": "expand"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the dropdown. This affects the minimum and maximum inline-size\nof the dropdown.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -5302,7 +5330,7 @@
           }
         }
       ],
-      "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- Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or commands, where an action is initiated based on the selection.\n- When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.\n- Use for a “more” menu, where the control contains an icon.\n- Use for user profiles, where the control is an avatar.\n- Use in conjunction with the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding primary actions since they should be visible by default.\n- Don’t use for selecting an option from a list of options, use the [select component](/components/select/) instead.\n- Don’t nest elements or components other than the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components. Consider using the [popout component](/components/popout/) when creating custom UI.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written 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\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items 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\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</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- Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or commands, where an action is initiated based on the selection.\n- When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.\n- Use for a “more” menu, where the control contains an icon.\n- Use for user profiles, where the control is an avatar.\n- Use in conjunction with the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for form inputs or selects, use the [select component](/components/select/) or [input component](/components/input/) instead.\n- Don’t use for hiding primary actions since they should be visible by default.\n- Don’t nest elements or components other than the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components. Consider using the [popout component](/components/popout/) when creating custom UI.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written 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\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items 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\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
     },
     {
       "kind": "javascript-module",
@@ -10041,9 +10069,9 @@
               },
               "default": "false",
               "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
+              "deprecated": true,
               "attribute": "responsive",
-              "reflects": true,
-              "deprecated": true
+              "reflects": true
             },
             {
               "kind": "field",
@@ -10102,6 +10130,7 @@
               },
               "default": "false",
               "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
+              "deprecated": "true",
               "fieldName": "responsive"
             },
             {
@@ -13550,210 +13579,215 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/common/mixins/AutocompleteMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof value | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "AutocompleteMixinInterface",
+          "members": [
             {
-              "name": "value",
+              "kind": "field",
+              "name": "autocomplete",
               "type": {
-                "text": "any"
+                "text": "AutocompleteAttribute"
               }
             }
-          ],
-          "description": "if value is truthy, return it, otherwise return nothing"
+          ]
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "AutocompleteMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "autocomplete",
               "type": {
-                "text": "unknown"
-              }
-            },
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete"
+            }
+          ],
+          "attributes": [
             {
-              "name": "trueCase",
+              "name": "autocomplete",
               "type": {
-                "text": "any"
-              }
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete"
             }
           ],
-          "description": "if condition is truthy, return trueCase, otherwise return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
-            },
-            {
-              "name": "trueCase",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
-          ],
-          "description": "condition is true, so always return trueCase"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AutocompleteMixinInterface",
+          "declaration": {
+            "name": "AutocompleteMixinInterface",
+            "module": "src/common/mixins/AutocompleteMixin.ts"
+          }
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "js",
+          "name": "AutocompleteMixin",
+          "declaration": {
+            "name": "AutocompleteMixin",
+            "module": "src/common/mixins/AutocompleteMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "DraftComponentMixin",
+          "members": [
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "_warningLogged",
               "type": {
-                "text": "any"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
             }
           ],
-          "description": "condition is false, to will always return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof falseCase"
-            }
-          },
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
-            },
-            {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "falseCase",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DraftComponentMixin",
+          "declaration": {
+            "name": "DraftComponentMixin",
+            "module": "src/common/mixins/DraftComponentMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FocusableMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FocusableMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "focusableRef",
               "type": {
-                "text": "true"
-              }
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             }
-          ],
-          "description": "condition is true, so always return trueCase"
+          ]
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "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": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
             }
           ],
-          "description": "condition is false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
-            },
-            {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "falseCase",
-              "default": "nothing",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
           ]
@@ -13762,603 +13796,164 @@
       "exports": [
         {
           "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
+          "name": "FocusableMixinInterface",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FocusableMixinInterface",
+            "module": "src/common/mixins/FocusableMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "cond",
+          "name": "FocusableMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FocusableMixin",
+            "module": "src/common/mixins/FocusableMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/FormAssociatedMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "false"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "string | undefined"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
-                "text": "true"
+                "text": "boolean"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "() => TInner"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "error",
               "type": {
-                "text": "unknown"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "expand",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "errorId",
               "type": {
-                "text": "any"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "labelSlot",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
-              }
-            }
-          ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/AutocompleteMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "AutocompleteMixinInterface",
-          "members": [
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "hintSlot",
               "type": {
-                "text": "AutocompleteAttribute"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "AutocompleteMixin",
-          "members": [
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "errorSlot",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "SlotController"
               },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete"
-            }
-          ],
-          "attributes": [
+              "privacy": "protected"
+            },
             {
-              "name": "autocomplete",
+              "kind": "field",
+              "name": "formData",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "FormDataController"
               },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete"
-            }
-          ],
-          "parameters": [
+              "privacy": "protected"
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "formValue",
               "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AutocompleteMixinInterface",
-          "declaration": {
-            "name": "AutocompleteMixinInterface",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "AutocompleteMixin",
-          "declaration": {
-            "name": "AutocompleteMixin",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DraftComponentMixin",
-          "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FocusableMixinInterface",
-          "members": [
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "focusableRef",
+              "name": "hasHint",
               "type": {
-                "text": "Ref<HTMLElement>"
+                "text": "boolean"
               },
               "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component."
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component."
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FocusableMixinInterface",
-          "declaration": {
-            "name": "FocusableMixinInterface",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FocusableMixin",
-          "declaration": {
-            "name": "FocusableMixin",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FormAssociatedMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FormAssociatedMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "type": {
-                "text": "FormDataController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "formValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
+              "name": "handleChange",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -14690,230 +14285,664 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormAssociatedMixinInterface",
+          "name": "FormAssociatedMixinInterface",
+          "declaration": {
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormAssociatedMixin",
+          "declaration": {
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/InputMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "InputMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "InputMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "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"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputMixinInterface",
+          "declaration": {
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputMixin",
+          "declaration": {
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/ReadonlyMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ReadonlyMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "ReadonlyMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ReadonlyMixinInterface",
+          "declaration": {
+            "name": "ReadonlyMixinInterface",
+            "module": "src/common/mixins/ReadonlyMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ReadonlyMixin",
+          "declaration": {
+            "name": "ReadonlyMixin",
+            "module": "src/common/mixins/ReadonlyMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/directives/cond.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, to will always return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof falseCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, so always return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "default": "condition",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "default": "nothing",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
           "declaration": {
-            "name": "FormAssociatedMixinInterface",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FormAssociatedMixin",
+          "name": "cond",
           "declaration": {
-            "name": "FormAssociatedMixin",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/InputMixin.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "InputMixinInterface",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "name",
+              "name": "condition",
               "type": {
-                "text": "string | undefined"
+                "text": "false"
               }
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "inner",
               "type": {
-                "text": "string"
+                "text": "() => TInner"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "wrapper",
               "type": {
-                "text": "boolean"
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
               }
             },
             {
-              "kind": "field",
-              "name": "form",
+              "name": "inner",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
               }
             }
           ]
         },
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "InputMixin",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "condition",
               "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
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "inner",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "wrapper",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element."
+                "text": "(inner: TInner) => TWrapper"
+              }
             }
-          ],
-          "attributes": [
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
             {
-              "name": "disabled",
+              "name": "condition",
               "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"
+                "text": "any"
+              }
             },
             {
-              "name": "name",
+              "name": "inner",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+                "text": "() => TInner"
+              }
             },
             {
-              "name": "value",
+              "name": "wrapper",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
+                "text": "(innards: TInner) => TWrapper"
+              }
             }
           ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+          "return": {
+            "type": {
+              "text": ""
             }
-          ]
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "InputMixinInterface",
+          "name": "wrapIf",
           "declaration": {
-            "name": "InputMixinInterface",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "InputMixin",
+          "name": "wrapIf",
           "declaration": {
-            "name": "InputMixin",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/ReadonlyMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ReadonlyMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              }
-            }
-          ]
         },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "ReadonlyMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "ReadonlyMixinInterface",
+          "name": "wrapIf",
           "declaration": {
-            "name": "ReadonlyMixinInterface",
-            "module": "src/common/mixins/ReadonlyMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ReadonlyMixin",
+          "name": "wrapIf",
           "declaration": {
-            "name": "ReadonlyMixin",
-            "module": "src/common/mixins/ReadonlyMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]