@nordhealth/components 1.0.0-alpha.57 → 1.0.0-alpha.58

package/custom-elements.json

@@ -688,519 +688,275 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
+          "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": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
+              "name": "dialogLabelId",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
+              "privacy": "private",
+              "default": "\"dialog-header\""
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
+              "name": "monthSelectNode",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "HTMLElement"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.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",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "focusedDayNode",
               "type": {
-                "text": "boolean"
+                "text": "HTMLButtonElement"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked"
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "shortcuts",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "localization",
+              "type": {
+                "text": "CalendarLocalizedText"
+              },
+              "default": "localization"
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "string"
+                "text": "DaysOfWeek"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "hintId",
+              "name": "min",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "label",
+              "name": "max",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "hint",
+              "name": "isDateDisabled",
               "type": {
-                "text": "string | undefined"
+                "text": "DateDisabledPredicate"
               },
-              "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"
-              }
+              "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": "hideLabel",
+              "name": "activeFocus",
               "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"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
               "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"
-              }
+              "name": "focusedDay",
+              "privacy": "private",
+              "default": "new Date()"
             },
             {
-              "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"
-              }
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "createDateFormatter",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleDaySelect",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
+              "name": "addDays",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "days",
                   "type": {
-                    "text": "Event"
+                    "text": "number"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "addMonths",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "startOfWeek",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "endOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "setMonth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setYear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "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"
-              }
+              "name": "handleMonthSelect",
+              "privacy": "private"
             },
             {
               "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"
-              }
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
             {
               "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"
-              }
+              "name": "handleNextMonthClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "form",
-              "privacy": "protected",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "enableActiveFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "disableActiveFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -1219,154 +975,42 @@
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "label",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "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"
-              }
-            },
-            {
-              "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": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "disabled",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "boolean"
+                "text": "DaysOfWeek"
               },
-              "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"
-              }
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "fieldName": "firstDayOfWeek"
             },
             {
-              "name": "name",
+              "name": "min",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "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": "value",
+              "name": "max",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "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"
             }
           ],
           "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"
-            },
             {
               "name": "DraftComponentMixin",
               "module": "/src/common/mixins/DraftComponentMixin.js"
@@ -1377,33 +1021,9 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "form",
-          "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"
-              }
-            }
-          ]
+          "category": "list",
+          "tagName": "nord-calendar",
+          "customElement": true
         }
       ],
       "exports": [
@@ -1411,291 +1031,412 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-checkbox",
+          "name": "nord-calendar",
           "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
           }
         }
       ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/calendar/DateSelectEvent.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",
+          "description": "",
+          "name": "DateSelectEvent",
           "members": [
             {
               "kind": "field",
-              "name": "dialogLabelId",
+              "name": "eventName",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "\"dialog-header\""
-            },
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "static": true,
+              "default": "\"nord-select\""
             },
             {
               "kind": "field",
-              "name": "focusedDayNode",
+              "name": "date",
               "type": {
-                "text": "HTMLButtonElement"
+                "text": "Date"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
+              "default": "date"
+            }
+          ],
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateSelectEvent",
+          "declaration": {
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/calendar-localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "CalendarLocalizedText"
+          },
+          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n  calendarHeading: \"Choose a date\",\n  dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n  monthNames: [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ],\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  locale: \"en-GB\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/calendar/calendar-localization.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/month-view.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dayView",
+          "parameters": [
+            {
+              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
+              "type": {
+                "text": "DatePickerDayProps"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "monthView",
+          "parameters": [
+            {
+              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "type": {
+                "text": "MonthViewArgs"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dayView",
+          "declaration": {
+            "name": "dayView",
+            "module": "src/calendar/month-view.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "monthView",
+          "declaration": {
+            "name": "monthView",
+            "module": "src/calendar/month-view.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "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": "shortcuts",
+              "name": "listRef",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
+              "name": "previousFocus",
               "type": {
-                "text": "Intl.DateTimeFormat"
+                "text": "HTMLElement | undefined"
               },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dismissController",
               "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
             },
             {
               "kind": "field",
-              "name": "localization",
+              "name": "keyboardController",
+              "privacy": "private",
+              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
               "type": {
-                "text": "CalendarLocalizedText"
+                "text": "boolean"
               },
-              "default": "localization"
+              "default": "false",
+              "description": "Show or hide the command menu.",
+              "attribute": "open"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "default": "\"Type a command or search...\"",
+              "description": "Hint text to display in the Command Menu search field.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "commands",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "Array<ICommandMenuAction>"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "firstDayOfWeek"
+              "default": "[]",
+              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "parent",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "attribute": "min"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "search",
               "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"
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "isDateDisabled",
+              "name": "bump",
               "type": {
-                "text": "DateDisabledPredicate"
+                "text": "boolean"
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "privacy": "private",
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "activeFocus",
+              "name": "selectedIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "focusedDay",
+              "name": "filteredCommands",
+              "type": {
+                "text": "Array<ICommandMenuAction>"
+              },
               "privacy": "private",
-              "default": "new Date()"
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "ICommandMenuAction"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "show",
               "parameters": [
                 {
                   "name": "options",
-                  "optional": true,
+                  "default": "{}",
                   "type": {
-                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  }
+                    "text": "{ parent?: string }"
+                  },
+                  "description": "allows you to open the menu filtered to a specific parent command."
                 }
-              ]
+              ],
+              "description": "Show the command menu programmatically."
             },
             {
               "kind": "method",
-              "name": "createDateFormatter",
-              "privacy": "private"
+              "name": "close",
+              "description": "Close the command menu programmatically."
             },
             {
-              "kind": "field",
-              "name": "handleDaySelect",
+              "kind": "method",
+              "name": "toggleOpen",
+              "description": "Toggle the open state programmatically."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "description": "Focus the command menu's input."
+            },
+            {
+              "kind": "method",
+              "name": "renderNoResults",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "addDays",
+              "name": "renderSection",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "days",
+                  "name": "section",
                   "type": {
-                    "text": "number"
+                    "text": "string | undefined"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addMonths",
-              "privacy": "private",
-              "parameters": [
+                },
                 {
-                  "name": "months",
+                  "name": "commands",
                   "type": {
-                    "text": "number"
+                    "text": "ICommandMenuAction[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "addYears",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "years",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "startOfWeek",
+              "name": "handleAnimationEnd",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "endOfWeek",
+              "name": "handleBlur",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "setMonth",
+              "name": "handleInput",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "month",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "setYear",
+              "name": "select",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "year",
+                  "name": "command",
+                  "default": "this.selected",
                   "type": {
-                    "text": "number"
+                    "text": "ICommandMenuAction"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "name": "start",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleMonthSelect",
+              "kind": "method",
+              "name": "end",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleYearSelect",
+              "kind": "method",
+              "name": "next",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleNextMonthClick",
+              "kind": "method",
+              "name": "previous",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handlePreviousMonthClick",
+              "kind": "method",
+              "name": "goBack",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "kind": "method",
+              "name": "setParent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "parent",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "disableActiveFocus",
+              "kind": "method",
+              "name": "setSearch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "filterCommands",
               "privacy": "private"
             },
             {
@@ -1713,41 +1454,47 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "value",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "NordEvent"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
+              "description": "The command menu was opened."
             },
             {
-              "name": "firstDayOfWeek",
+              "name": "close",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "NordEvent"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
+              "description": "The command menu was closed."
             },
             {
-              "name": "min",
               "type": {
-                "text": "string"
+                "text": "SelectEvent"
               },
-              "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": "User selected a command from the menu.",
+              "name": "nord-select"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show or hide the command menu.",
+              "fieldName": "open"
             },
             {
-              "name": "max",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "fieldName": "max"
+              "default": "\"Type a command or search...\"",
+              "description": "Hint text to display in the Command Menu search field.",
+              "fieldName": "placeholder"
             }
           ],
           "mixins": [
@@ -1761,8 +1508,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "list",
-          "tagName": "nord-calendar",
+          "category": "action",
+          "tagName": "nord-command-menu",
           "customElement": true
         }
       ],
@@ -1771,116 +1518,161 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "CommandMenu",
+            "module": "src/command-menu/CommandMenu.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-calendar",
+          "name": "nord-command-menu",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "CommandMenu",
+            "module": "src/command-menu/CommandMenu.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 to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/DateSelectEvent.ts",
+      "path": "src/command-menu/CommandMenuAction.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "DateSelectEvent",
+          "description": "Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",
+          "name": "CommandMenuAction",
           "members": [
             {
               "kind": "field",
-              "name": "eventName",
+              "name": "command",
               "type": {
-                "text": "string"
+                "text": "ICommandMenuAction"
               },
-              "static": true,
-              "default": "\"nord-select\""
+              "attribute": "command"
             },
             {
               "kind": "field",
-              "name": "date",
+              "name": "selected",
               "type": {
-                "text": "Date"
+                "text": "boolean"
               },
-              "default": "date"
+              "default": "false",
+              "attribute": "selected"
+            },
+            {
+              "kind": "method",
+              "name": "ensureInView",
+              "privacy": "private",
+              "description": "Scroll to show element"
+            },
+            {
+              "kind": "method",
+              "name": "renderShortcut",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "command",
+              "type": {
+                "text": "ICommandMenuAction"
+              },
+              "fieldName": "command"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
             }
           ],
           "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "internal",
+          "category": null,
+          "tagName": "nord-command-menu-action",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DateSelectEvent",
+          "name": "default",
           "declaration": {
-            "name": "DateSelectEvent",
-            "module": "src/calendar/DateSelectEvent.ts"
+            "name": "CommandMenuAction",
+            "module": "src/command-menu/CommandMenuAction.ts"
           }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/calendar-localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "CalendarLocalizedText"
-          },
-          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n  calendarHeading: \"Choose a date\",\n  dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n  monthNames: [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ],\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  locale: \"en-GB\",\n}"
-        }
-      ],
-      "exports": [
+        },
         {
-          "kind": "js",
-          "name": "default",
+          "kind": "custom-element-definition",
+          "name": "nord-command-menu-action",
           "declaration": {
-            "name": "localization",
-            "module": "src/calendar/calendar-localization.ts"
+            "name": "CommandMenuAction",
+            "module": "src/command-menu/CommandMenuAction.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 to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/month-view.ts",
+      "path": "src/command-menu/ICommandMenuAction.ts",
+      "declarations": [],
+      "exports": [],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/command-menu/KeyboardController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "dayView",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "KeyboardController",
+          "members": [
             {
-              "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": [
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "CommandMenu"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
             {
-              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "kind": "field",
+              "name": "globalShortcuts",
               "type": {
-                "text": "MonthViewArgs"
-              }
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })"
+            },
+            {
+              "kind": "field",
+              "name": "navigationShortcuts",
+              "type": {
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )"
+            },
+            {
+              "kind": "field",
+              "name": "commandShortcuts",
+              "type": {
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(host)"
+            },
+            {
+              "kind": "method",
+              "name": "registerCommandShortcuts"
             }
           ]
         }
@@ -1888,531 +1680,668 @@
       "exports": [
         {
           "kind": "js",
-          "name": "dayView",
+          "name": "KeyboardController",
           "declaration": {
-            "name": "dayView",
-            "module": "src/calendar/month-view.ts"
+            "name": "KeyboardController",
+            "module": "src/command-menu/KeyboardController.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 provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/command-menu/SelectEvent.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SelectEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "eventName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "\"nord-select\""
+            },
+            {
+              "kind": "field",
+              "name": "command",
+              "type": {
+                "text": "ICommandMenuAction"
+              },
+              "default": "command"
+            }
+          ],
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "monthView",
+          "name": "SelectEvent",
           "declaration": {
-            "name": "monthView",
-            "module": "src/calendar/month-view.ts"
+            "name": "SelectEvent",
+            "module": "src/command-menu/SelectEvent.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 to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
+      "path": "src/checkbox/Checkbox.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",
+          "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": [
             {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
+              "name": "formValue",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked"
             },
             {
-              "kind": "field",
-              "name": "previousFocus",
-              "type": {
-                "text": "HTMLElement | undefined"
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "private"
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dismissController",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "keyboardController",
-              "privacy": "private",
-              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show or hide the command menu.",
-              "attribute": "open"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Type a command or search...\"",
-              "description": "Hint text to display in the Command Menu search field.",
-              "attribute": "placeholder"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "commands",
+              "name": "inputId",
               "type": {
-                "text": "Array<ICommandMenuAction>"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "parent",
+              "name": "errorId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "search",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "bump",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "true"
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "selectedIndex",
+              "name": "hint",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "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": "filteredCommands",
+              "name": "hideLabel",
               "type": {
-                "text": "Array<ICommandMenuAction>"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "[]"
+              "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": "selected",
+              "name": "placeholder",
               "type": {
-                "text": "ICommandMenuAction"
+                "text": "string | undefined"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "parameters": [
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "{ parent?: string }"
-                  },
-                  "description": "allows you to open the menu filtered to a specific parent command."
-                }
-              ],
-              "description": "Show the command menu programmatically."
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "description": "Close the command menu programmatically."
-            },
-            {
-              "kind": "method",
-              "name": "toggleOpen",
-              "description": "Toggle the open state programmatically."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "description": "Focus the command menu's input."
-            },
-            {
-              "kind": "method",
-              "name": "renderNoResults",
-              "privacy": "private"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "renderSection",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "section",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "commands",
-                  "type": {
-                    "text": "ICommandMenuAction[]"
-                  }
-                }
-              ]
+              "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"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleAnimationEnd",
-              "privacy": "private"
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
               "name": "handleInput",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "select",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "command",
-                  "default": "this.selected",
+                  "name": "e",
                   "type": {
-                    "text": "ICommandMenuAction"
+                    "text": "Event"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "start",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "end",
-              "privacy": "private"
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "next",
-              "privacy": "private"
+              "name": "renderLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "previous",
-              "privacy": "private"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "goBack",
-              "privacy": "private"
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setParent",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "parent",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setSearch",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "str",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "filterCommands",
-              "privacy": "private"
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true,
               "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": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
-            }
-          ],
-          "events": [
-            {
-              "name": "open",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "The command menu was opened."
             },
             {
-              "name": "close",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "The command menu was closed."
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "SelectEvent"
+                "text": "string"
               },
-              "description": "User selected a command from the menu.",
-              "name": "nord-select"
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "open",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show or hide the command menu.",
-              "fieldName": "open"
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
-              "name": "placeholder",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "\"Type a command or search...\"",
-              "description": "Hint text to display in the Command Menu search field.",
-              "fieldName": "placeholder"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "action",
-          "tagName": "nord-command-menu",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CommandMenu",
-            "module": "src/command-menu/CommandMenu.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-command-menu",
-          "declaration": {
-            "name": "CommandMenu",
-            "module": "src/command-menu/CommandMenu.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 provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenuAction.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",
-          "name": "CommandMenuAction",
-          "members": [
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "command",
+              "name": "hint",
               "type": {
-                "text": "ICommandMenuAction"
+                "text": "string | undefined"
               },
-              "attribute": "command"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "selected",
+              "name": "hide-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "selected"
+              "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"
+              }
             },
             {
-              "kind": "method",
-              "name": "ensureInView",
-              "privacy": "private",
-              "description": "Scroll to show element"
+              "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"
+              }
             },
             {
-              "kind": "method",
-              "name": "renderShortcut",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
+              "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": "command",
+              "name": "required",
               "type": {
-                "text": "ICommandMenuAction"
+                "text": "boolean"
               },
-              "fieldName": "command"
+              "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": "selected",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "selected"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "internal",
-          "category": null,
-          "tagName": "nord-command-menu-action",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CommandMenuAction",
-            "module": "src/command-menu/CommandMenuAction.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-command-menu-action",
-          "declaration": {
-            "name": "CommandMenuAction",
-            "module": "src/command-menu/CommandMenuAction.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 provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/ICommandMenuAction.ts",
-      "declarations": [],
-      "exports": [],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/KeyboardController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KeyboardController",
-          "members": [
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "host",
+              "name": "disabled",
               "type": {
-                "text": "CommandMenu"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "host"
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "globalShortcuts",
+              "name": "name",
               "type": {
-                "text": "ShortcutController"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "navigationShortcuts",
+              "name": "value",
               "type": {
-                "text": "ShortcutController"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )"
+              "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"
             },
             {
-              "kind": "field",
-              "name": "commandShortcuts",
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "form",
+          "tagName": "nord-checkbox",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
               "type": {
-                "text": "ShortcutController"
+                "text": "NordEvent"
               },
-              "privacy": "private",
-              "default": "new ShortcutController(host)"
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "registerCommandShortcuts"
+              "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"
+              }
             }
           ]
         }
@@ -2420,59 +2349,130 @@
       "exports": [
         {
           "kind": "js",
-          "name": "KeyboardController",
+          "name": "default",
+          "declaration": {
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-checkbox",
           "declaration": {
-            "name": "KeyboardController",
-            "module": "src/command-menu/KeyboardController.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 to provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\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- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/command-menu/SelectEvent.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "SelectEvent",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "eventName",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
               "type": {
-                "text": "string"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "static": true,
-              "default": "\"nord-select\""
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "command",
+              "name": "_warningLogged",
               "type": {
-                "text": "ICommandMenuAction"
+                "text": "boolean"
               },
-              "default": "command"
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SelectEvent",
+          "name": "default",
           "declaration": {
-            "name": "SelectEvent",
-            "module": "src/command-menu/SelectEvent.ts"
+            "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 provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\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",
@@ -4493,82 +4493,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/header/Header.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
-          "name": "Header",
-          "slots": [
-            {
-              "description": "The header content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot for buttons, toggles, etc.",
-              "name": "action"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "actionSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"action\")"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-header",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/icon/Icon.ts",
@@ -4824,6 +4748,82 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/header/Header.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
+          "name": "Header",
+          "slots": [
+            {
+              "description": "The header content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for buttons, toggles, etc.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "actionSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"action\")"
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/input/Input.ts",