@nordhealth/components 4.1.1 → 4.3.0

package/custom-elements.json

@@ -790,91 +790,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -1486,6 +1401,91 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button-group/ButtonGroup.ts",
@@ -1643,721 +1643,459 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
+          "description": "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",
           "cssProperties": [
             {
-              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
-              "name": "--n-label-color",
-              "default": "var(--n-color-text)"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-calendar-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             }
           ],
-          "slots": [
+          "members": [
             {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
+              "kind": "field",
+              "name": "monthSelectNode",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "kind": "field",
+              "name": "focusedDayNode",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
             {
               "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "shortcuts",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-calendar\">(this, { onLangChange: () => this.handleLangChange(), })"
+            },
+            {
+              "kind": "field",
+              "name": "dateFormatShort",
               "type": {
-                "text": "boolean"
+                "text": "Intl.DateTimeFormat"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "privacy": "private",
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "monthNames",
               "type": {
-                "text": "boolean"
+                "text": "string[]"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "monthNamesShort",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string[]"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "dayNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "dayNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
             },
             {
               "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": "first-day-of-week",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "reflects": true,
-              "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",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hint",
+              "name": "today",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "attribute": "today",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideLabel",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "isDateDisabled",
               "type": {
-                "text": "string | undefined"
+                "text": "DatePredicate"
               },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "reflects": true,
-              "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": "error",
+              "name": "isDateHighlighted",
               "type": {
-                "text": "string | undefined"
+                "text": "(date: Date) => string | boolean"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "isDateHighlighted",
+              "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "activeFocus",
               "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",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "hideRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "attribute": "hide-required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "focusedDay",
+              "privacy": "private",
+              "default": "new Date()"
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Programmatically move focus to the calendar."
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "additionalContent",
-                  "optional": true,
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleValueChange",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleFocusedDayChange",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleLangChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleDaySelect",
+              "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"
-              }
+              "kind": "method",
+              "name": "getToday",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "addDays",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "days",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "addMonths",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "formAncestor",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
+              "kind": "method",
+              "name": "addYears",
               "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_formId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "startOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "attribute": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "endOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "method",
+              "name": "setMonth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setYear",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "year",
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "number"
+                  }
                 }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "handleMonthSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleYearSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleNextMonthClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "enableActiveFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "disableActiveFocus",
+              "privacy": "private"
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "indeterminate",
+              "name": "nord-focus-date",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "name": "checked",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
-            },
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "size",
+              "name": "value",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "label",
+              "name": "first-day-of-week",
               "type": {
-                "text": "string"
+                "text": "DaysOfWeek"
               },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "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.",
+              "fieldName": "firstDayOfWeek"
             },
             {
-              "name": "hint",
+              "name": "min",
               "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"
-              }
+              "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": "placeholder",
+              "name": "max",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "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.",
+              "fieldName": "max"
             },
             {
-              "name": "error",
+              "name": "today",
               "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": "hide-required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "fieldName": "today"
             },
             {
-              "name": "disabled",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
-          "mixins": [
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
             {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
+              "name": "prevMonthLabel",
+              "description": "Accessible label for the previous month button."
             },
             {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
+              "name": "nextMonthLabel",
+              "description": "Accessible label for the next month button."
             },
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "name": "monthSelectLabel",
+              "description": "Accessible label for the month select."
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "yearSelectLabel",
+              "description": "Accessible label for the year select."
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
           "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n",
+          "category": "list",
+          "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",
           "examples": [],
           "dependencies": [
+            "button",
+            "visually-hidden",
             "icon"
           ],
-          "tagName": "nord-checkbox",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
+          "tagName": "nord-calendar",
+          "customElement": true
         }
       ],
       "exports": [
@@ -2365,610 +2103,869 @@
           "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"
           }
         }
       ]
     },
     {
       "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",
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateSelectEvent",
+          "declaration": {
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "calendarLocalization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ prevMonthLabel: \"Previous month\", nextMonthLabel: \"Next month\", monthSelectLabel: \"Month\", yearSelectLabel: \"Year\", }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "calendarLocalization",
+            "module": "src/calendar/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
+              "name": "--n-card-border-radius",
               "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
+              "name": "--n-card-box-shadow",
               "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
             },
             {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
-            },
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "shortcuts",
-              "privacy": "private"
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "headerEndSlot",
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, { onLangChange: () => this.handleLangChange(), })"
+              "default": "new SlotController(this, \"header-end\")"
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
+              "name": "footerSlot",
               "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 SlotController(this, \"footer\")"
             },
             {
               "kind": "field",
-              "name": "monthNames",
+              "name": "padding",
               "type": {
-                "text": "string[]"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "privacy": "private"
-            },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "monthNamesShort",
+              "name": "padding",
               "type": {
-                "text": "string[]"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "privacy": "private"
-            },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
+          "examples": [],
+          "dependencies": [],
+          "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"
+          }
+        }
+      ]
+    },
+    {
+      "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",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "dayNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
+              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
+              "name": "--n-label-color",
+              "default": "var(--n-color-text)"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "dayNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
             },
             {
-              "kind": "field",
-              "name": "firstDayOfWeek",
-              "type": {
-                "text": "DaysOfWeek"
-              },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "first-day-of-week",
-              "reflects": true
-            },
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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",
-              "reflects": true
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "indeterminate",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "attribute": "max",
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "attribute": "expand",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "isDateDisabled",
-              "type": {
-                "text": "DatePredicate"
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "isDateHighlighted",
+              "name": "size",
               "type": {
-                "text": "(date: Date) => string | boolean"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "default": "isDateHighlighted",
-              "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "activeFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"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\" }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the calendar."
+              "kind": "field",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleValueChange",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "errorId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addMonths",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "months",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addYears",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "years",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "startOfWeek",
-              "privacy": "private"
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "endOfWeek",
-              "privacy": "private"
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideRequired",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "attribute": "hide-required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "month",
+                  "name": "e",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setYear",
-              "privacy": "private",
+              "name": "renderLabel",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "year",
+                  "name": "additionalContent",
+                  "optional": true,
                   "type": {
-                    "text": "number"
+                    "text": "TemplateResult"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handlePreviousMonthClick",
-              "privacy": "private"
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "nord-focus-date",
+              "name": "disabled",
               "type": {
-                "text": "DateSelectEvent"
+                "text": "boolean"
               },
-              "description": "Dispatched when the calendar's focused date changes."
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "DateSelectEvent"
+                "text": "string | undefined"
               },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
-            }
-          ],
-          "attributes": [
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "first-day-of-week",
+              "kind": "field",
+              "name": "formAncestor",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "HTMLFormElement | null"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "min",
+              "kind": "field",
+              "name": "_formId",
               "type": {
                 "text": "string | undefined"
               },
-              "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"
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "max",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLFormElement | null"
               },
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "fieldName": "max"
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "attribute": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "prevMonthLabel",
-              "description": "Accessible label for the previous month button."
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "name": "nextMonthLabel",
-              "description": "Accessible label for the next month button."
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "name": "monthSelectLabel",
-              "description": "Accessible label for the month select."
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "name": "yearSelectLabel",
-              "description": "Accessible label for the year select."
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
-          "status": "ready",
-          "category": "list",
-          "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",
-          "examples": [],
-          "dependencies": [
-            "button",
-            "visually-hidden",
-            "icon"
-          ],
-          "tagName": "nord-calendar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-calendar",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/DateSelectEvent.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "DateSelectEvent",
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateSelectEvent",
-          "declaration": {
-            "name": "DateSelectEvent",
-            "module": "src/calendar/DateSelectEvent.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "calendarLocalization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ prevMonthLabel: \"Previous month\", nextMonthLabel: \"Next month\", monthSelectLabel: \"Month\", yearSelectLabel: \"Year\", }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "calendarLocalization",
-            "module": "src/calendar/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "cssProperties": [
+          "attributes": [
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "description": "The card content.",
-              "name": ""
+              "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"
+              }
             },
             {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
+              "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"
+              }
             },
             {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
+              "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"
+              }
             },
             {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+              "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"
+              }
+            },
             {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
+              "name": "hide-required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "padding",
+              "name": "name",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "string | undefined"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             }
           ],
-          "attributes": [
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
             {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -2977,12 +2974,38 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "structure",
-          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-card",
-          "customElement": true
+          "dependencies": [
+            "icon"
+          ],
+          "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"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -2990,16 +3013,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-checkbox",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         }
       ]
@@ -5172,6 +5195,16 @@
               "attribute": "max",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "attribute": "today",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "firstDayOfWeek",
@@ -5817,6 +5850,14 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "fieldName": "max"
             },
+            {
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "fieldName": "today"
+            },
             {
               "name": "first-day-of-week",
               "type": {
@@ -6303,6 +6344,11 @@
               "description": "Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.",
               "name": "--n-dropdown-size",
               "default": "250px"
+            },
+            {
+              "description": "Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.",
+              "name": "--n-dropdown-max-block-size",
+              "default": "460px"
             }
           ],
           "slots": [
@@ -13294,424 +13340,185 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/Select.ts",
+      "path": "src/segmented-control-item/SegmentedControlItem.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
-          "name": "Select",
+          "description": "Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",
+          "name": "SegmentedControlItem",
           "cssProperties": [
             {
-              "description": "Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).",
-              "name": "--n-select-block-size",
-              "default": "var(--n-space-xl)"
-            },
-            {
-              "description": "Controls the inline size, or width, of the select.",
-              "name": "--n-select-inline-size",
-              "default": "fit-content"
-            },
-            {
-              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
-              "name": "--n-label-color",
-              "default": "var(--n-color-text)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for holding <option> elements.",
-              "name": ""
-            },
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Use when a hint requires more than plain text.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            },
-            {
-              "description": "Used to place an icon at the start of select.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"select\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getButtonText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "HTMLOptionElement[]"
-                  }
-                }
-              ]
+              "description": "Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-segmented-control-item-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
-              "kind": "method",
-              "name": "renderOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "HTMLOptionElement"
-                  }
-                }
-              ]
+              "description": "Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-segmented-control-item-gap",
+              "default": "var(--n-space-xs)"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
+              "description": "Controls the overlayed gradient background on the item.",
+              "name": "--n-segmented-control-item-gradient",
+              "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the background color of the item, using our [color tokens](/tokens/#color).",
+              "name": "--n-segmented-control-item-background-color",
+              "default": "var(--n-color-nav-hover)"
             },
             {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the color of the text within the item, using our [color tokens](/tokens/#color).",
+              "name": "--n-segmented-control-item-color",
+              "default": "var(--n-color-text-weaker)"
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the inline, or left and right, padding of the item.",
+              "name": "--n-segmented-control-item-padding-inline",
+              "default": "calc(var(--n-space-m) / 1.2)"
             },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+            {
+              "description": "Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-segmented-control-item-box-shadow",
+              "default": "none"
             },
             {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the size of the text within the item, using our [font tokens](/tokens/#font).",
+              "name": "--n-segmented-control-item-font-size",
+              "default": "var(--n-font-size-m)"
             },
             {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the weight of the text within the item, using our [font tokens](/tokens/#font).",
+              "name": "--n-segmented-control-item-font-weight",
+              "default": "var(--n-font-weight)"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).",
+              "name": "--n-segmented-control-item-min-block-size",
+              "default": "calc(var(--n-space-xl) - 2px)"
             },
+            {
+              "description": "Controls the inline size of the item.",
+              "name": "--n-segmented-control-item-inline-size",
+              "default": "auto"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "inputId",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "inputSlot",
+              "privacy": "protected",
+              "default": "new LightDomController(this, { render: () => html` <input slot=\"input\" @blur=${this.handleBlur} @focus=${this.handleFocus} ${ref(this.focusableRef)} id=${this.inputId} type=\"radio\" class=\"n-input\" name=${cond(this.name)} .value=${cond(this.value)} .checked=${this.checked} ?disabled=${this.disabled} form=${cond(this._formId)} /> `, })",
+              "description": "For accessibility reasons, we render the form parts of the component to the light DOM."
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, { slotName: \"label\", render: () => this.label ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>` : nothing, syncLightDom: element => { if (!isLabel(element)) { // eslint-disable-next-line no-console console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`) } else { element.htmlFor = this.inputId } }, })"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the segmented control item is checked or not.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "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",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"m\"",
+              "description": "The size of the segmented control item.\nThis affects font-size and padding.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideRequired",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "attribute": "hide-required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "Label for the segmented control item.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleCheckedChange",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "previousChecked",
                   "type": {
-                    "text": "Event"
+                    "text": "boolean"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "uncheckSiblings",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderLabel",
+              "name": "handleChange",
               "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "additionalContent",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "Event"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              ]
             },
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleBlur",
+              "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -13841,15 +13648,31 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the segmented control item has been checked."
+            },
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input."
+            }
+          ],
           "attributes": [
             {
-              "name": "expand",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
-              "fieldName": "expand"
+              "description": "Controls whether the segmented control item is checked or not.",
+              "fieldName": "checked"
             },
             {
               "name": "size",
@@ -13857,12 +13680,8 @@
                 "text": "\"s\" | \"m\" | \"l\""
               },
               "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
+              "description": "The size of the segmented control item.\nThis affects font-size and padding.",
+              "fieldName": "size"
             },
             {
               "name": "label",
@@ -13870,384 +13689,432 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
+              "description": "Label for the segmented control item.",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "name": "hint",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
+              "description": "The name of the form component.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "name": "hide-label",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "name": "placeholder",
+              "name": "form",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLFormElement | null"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "action",
+          "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 segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.\n- Favor segmented control or [radio component](/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Segmented control items are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of segmented control items.\n- Give each segmented control item within a group a unique `value`.\n- Segmented control items **must** be used in combination with a [segmented control component](/components/segmented-control/).\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 when a user can select more than one option. In this case, use a [checkbox](/components/checkbox/) or [selectable tag](/components/tag/?example=selectable) instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a [checkbox](/components/checkbox/) instead.\n- When you have more than 5 options to choose from. Consider using a [select](/components/select/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nSegmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 segmented control labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-segmented-control-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SegmentedControlItem",
+            "module": "src/segmented-control-item/SegmentedControlItem.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-segmented-control-item",
+          "declaration": {
+            "name": "SegmentedControlItem",
+            "module": "src/segmented-control-item/SegmentedControlItem.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/Select.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
+          "name": "Select",
+          "cssProperties": [
+            {
+              "description": "Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).",
+              "name": "--n-select-block-size",
+              "default": "var(--n-space-xl)"
+            },
+            {
+              "description": "Controls the inline size, or width, of the select.",
+              "name": "--n-select-inline-size",
+              "default": "fit-content"
+            },
+            {
+              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
+              "name": "--n-label-color",
+              "default": "var(--n-color-text)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for holding <option> elements.",
+              "name": ""
+            },
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Use when a hint requires more than plain text.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            },
+            {
+              "description": "Used to place an icon at the start of select.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "error",
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
+              "privacy": "protected",
+              "default": "\"select\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the select expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getButtonText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "HTMLOptionElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "HTMLOptionElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "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",
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
-              "name": "hide-required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
+              "kind": "field",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
+              "kind": "field",
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
+              "kind": "field",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name",
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
+              "privacy": "protected",
+              "default": "\"error\"",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "form",
-          "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 let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using [segmented control](/components/segmented-control/) or [radio components](/components/radio/) instead, if you have enough space to allow it.\n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing select 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
-          "examples": [],
-          "dependencies": [
-            "button",
-            "icon"
-          ],
-          "tagName": "nord-select",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "NordEvent"
+                "text": "string"
               },
-              "description": "Fired as the user types into the input.",
+              "privacy": "protected",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "change",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "NordEvent"
+                "text": "string"
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-select",
-          "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/segmented-control-item/SegmentedControlItem.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",
-          "name": "SegmentedControlItem",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-segmented-control-item-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-segmented-control-item-gap",
-              "default": "var(--n-space-xs)"
-            },
-            {
-              "description": "Controls the overlayed gradient background on the item.",
-              "name": "--n-segmented-control-item-gradient",
-              "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
-            },
-            {
-              "description": "Controls the background color of the item, using our [color tokens](/tokens/#color).",
-              "name": "--n-segmented-control-item-background-color",
-              "default": "var(--n-color-nav-hover)"
-            },
-            {
-              "description": "Controls the color of the text within the item, using our [color tokens](/tokens/#color).",
-              "name": "--n-segmented-control-item-color",
-              "default": "var(--n-color-text-weaker)"
-            },
-            {
-              "description": "Controls the inline, or left and right, padding of the item.",
-              "name": "--n-segmented-control-item-padding-inline",
-              "default": "calc(var(--n-space-m) / 1.2)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-segmented-control-item-box-shadow",
-              "default": "none"
-            },
-            {
-              "description": "Controls the size of the text within the item, using our [font tokens](/tokens/#font).",
-              "name": "--n-segmented-control-item-font-size",
-              "default": "var(--n-font-size-m)"
-            },
-            {
-              "description": "Controls the weight of the text within the item, using our [font tokens](/tokens/#font).",
-              "name": "--n-segmented-control-item-font-weight",
-              "default": "var(--n-font-weight)"
-            },
-            {
-              "description": "Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).",
-              "name": "--n-segmented-control-item-min-block-size",
-              "default": "calc(var(--n-space-xl) - 2px)"
             },
-            {
-              "description": "Controls the inline size of the item.",
-              "name": "--n-segmented-control-item-inline-size",
-              "default": "auto"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "inputId",
-              "privacy": "protected"
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "inputSlot",
-              "privacy": "protected",
-              "default": "new LightDomController(this, { render: () => html` <input slot=\"input\" @blur=${this.handleBlur} @focus=${this.handleFocus} ${ref(this.focusableRef)} id=${this.inputId} type=\"radio\" class=\"n-input\" name=${cond(this.name)} .value=${cond(this.value)} .checked=${this.checked} ?disabled=${this.disabled} form=${cond(this._formId)} /> `, })",
-              "description": "For accessibility reasons, we render the form parts of the component to the light DOM."
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, { slotName: \"label\", render: () => this.label ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>` : nothing, syncLightDom: element => { if (!isLabel(element)) { // eslint-disable-next-line no-console console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`) } else { element.htmlFor = this.inputId } }, })"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "error",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the segmented control item is checked or not.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "required",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "boolean"
               },
-              "default": "\"m\"",
-              "description": "The size of the segmented control item.\nThis affects font-size and padding.",
-              "attribute": "size",
-              "reflects": true
+              "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",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "hideRequired",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "Label for the segmented control item.",
-              "attribute": "label",
-              "reflects": true
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "attribute": "hide-required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleCheckedChange",
+              "name": "handleInput",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "previousChecked",
+                  "name": "e",
                   "type": {
-                    "text": "boolean"
+                    "text": "Event"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private"
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
               "name": "handleChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
                   "name": "e",
@@ -14255,30 +14122,90 @@
                     "text": "Event"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "renderLabel",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "additionalContent",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
+                    "text": "TemplateResult"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
             },
             {
               "kind": "field",
@@ -14366,91 +14293,171 @@
               "name": "focusableRef",
               "privacy": "protected",
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the select expands to fill the width of its container.",
+              "fieldName": "expand"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.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.",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
+              "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": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
+              "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": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "change",
+              "name": "placeholder",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired whenever the segmented control item has been checked."
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "input",
+              "name": "error",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired as the user types into the input."
-            }
-          ],
-          "attributes": [
+              "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": "checked",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the segmented control item is checked or not.",
-              "fieldName": "checked"
+              "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": "size",
+              "name": "hide-required",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "boolean"
               },
-              "default": "\"m\"",
-              "description": "The size of the segmented control item.\nThis affects font-size and padding.",
-              "fieldName": "size"
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "name": "autocomplete",
               "type": {
-                "text": "string"
+                "text": "AutocompleteAttribute"
               },
-              "default": "\"\"",
-              "description": "Label for the segmented control item.",
-              "fieldName": "label"
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
             },
             {
               "name": "disabled",
@@ -14504,6 +14511,18 @@
             }
           ],
           "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
             {
               "name": "InputMixin",
               "module": "/src/common/mixins/InputMixin.js"
@@ -14518,13 +14537,40 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "new",
-          "category": "action",
-          "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 segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.\n- Favor segmented control or [radio component](/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Segmented control items are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of segmented control items.\n- Give each segmented control item within a group a unique `value`.\n- Segmented control items **must** be used in combination with a [segmented control component](/components/segmented-control/).\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 when a user can select more than one option. In this case, use a [checkbox](/components/checkbox/) or [selectable tag](/components/tag/?example=selectable) instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a [checkbox](/components/checkbox/) instead.\n- When you have more than 5 options to choose from. Consider using a [select](/components/select/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nSegmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 segmented control labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.\n",
+          "status": "ready",
+          "category": "form",
+          "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 let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using [segmented control](/components/segmented-control/) or [radio components](/components/radio/) instead, if you have enough space to allow it.\n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing select 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-segmented-control-item",
-          "customElement": true
+          "dependencies": [
+            "button",
+            "icon"
+          ],
+          "tagName": "nord-select",
+          "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"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -14532,16 +14578,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SegmentedControlItem",
-            "module": "src/segmented-control-item/SegmentedControlItem.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-segmented-control-item",
+          "name": "nord-select",
           "declaration": {
-            "name": "SegmentedControlItem",
-            "module": "src/segmented-control-item/SegmentedControlItem.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         }
       ]
@@ -18427,41 +18473,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
-            {
-              "name": "propertyName",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "lifecycle",
-              "default": "\"update\"",
-              "type": {
-                "text": "ObserveLifecycle"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "observe",
-          "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/BroadcastChannelController.ts",
@@ -19723,6 +19734,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/decorators/observe.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
+            {
+              "name": "propertyName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "observe",
+          "declaration": {
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/directives/cond.ts",