@nordhealth/components 4.0.0-alpha.3 → 4.0.0

package/custom-elements.json

@@ -673,91 +673,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/badge/Badge.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",
@@ -1766,1174 +1766,1223 @@
     },
     {
       "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "dayNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "dayNamesShort",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "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": "hintId",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "string"
+                "text": "DaysOfWeek"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "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": "label",
+              "name": "min",
               "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": "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": "hint",
+              "name": "max",
               "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": "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": "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "handleLangChange",
+              "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"
-              }
+              "name": "handleDaySelect",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "addDays",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "days",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "formAncestor",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
+              "kind": "method",
+              "name": "addMonths",
               "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "parameters": [
+                {
+                  "name": "months",
+                  "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": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "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": "startOfWeek",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "method",
+              "name": "endOfWeek",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setMonth",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "month",
                   "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": "setYear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "kind": "field",
+              "name": "handleMonthSelect",
+              "privacy": "private"
             },
             {
-              "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": "field",
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "handleNextMonthClick",
+              "privacy": "private"
             },
             {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "enableActiveFocus",
+              "privacy": "private"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
+              "kind": "field",
+              "name": "disableActiveFocus",
+              "privacy": "private"
+            }
+          ],
+          "events": [
             {
-              "name": "error",
+              "name": "nord-focus-date",
               "type": {
-                "text": "string | undefined"
+                "text": "DateSelectEvent"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "name": "required",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "hide-required",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "disabled",
+              "name": "first-day-of-week",
               "type": {
-                "text": "boolean"
+                "text": "DaysOfWeek"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "fieldName": "firstDayOfWeek"
             },
             {
-              "name": "name",
+              "name": "min",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.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": "value",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "fieldName": "max"
             },
             {
-              "name": "form",
+              "name": "expand",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "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": [
+        {
+          "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": "default",
+          "name": "DateSelectEvent",
           "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/localization.ts",
+      "declarations": [
         {
-          "kind": "custom-element-definition",
-          "name": "nord-checkbox",
+          "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": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
+            "name": "calendarLocalization",
+            "module": "src/calendar/localization.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/checkbox/Checkbox.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
+          "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": [
             {
-              "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 text color of the label, using our [color tokens](/tokens/#color).",
+              "name": "--n-label-color",
+              "default": "var(--n-color-text)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "focusedDayNode",
+              "name": "indeterminate",
               "type": {
-                "text": "HTMLButtonElement"
+                "text": "boolean"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "shortcuts",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, { onLangChange: () => this.handleLangChange(), })"
+              "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"
+              }
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
-              "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "monthNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "monthNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dayNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "dayNamesShort",
+              "name": "inputId",
               "type": {
-                "text": "string[]"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "hintId",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "string"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "first-day-of-week",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "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
+              "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": "expand",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "isDateDisabled",
+              "name": "placeholder",
               "type": {
-                "text": "DatePredicate"
+                "text": "string | undefined"
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "isDateHighlighted",
+              "name": "error",
               "type": {
-                "text": "(date: Date) => string | boolean"
+                "text": "string | undefined"
               },
-              "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."
+              "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": "activeFocus",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "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": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
+              "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": "focus",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "options",
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "additionalContent",
                   "optional": true,
                   "type": {
-                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "TemplateResult"
+                  }
                 }
               ],
-              "description": "Programmatically move focus to the calendar."
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleValueChange",
-              "privacy": "protected"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": 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": "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": "addYears",
+              "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": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formAncestor",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "years",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "default": "null",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "startOfWeek",
-              "privacy": "private"
+              "kind": "field",
+              "name": "_formId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "endOfWeek",
-              "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": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "month",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "number"
-                  }
+                    "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": "setYear",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "year",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
-              "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
+              "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": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handlePreviousMonthClick",
-              "privacy": "private"
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "name": "nord-focus-date",
+              "name": "error",
               "type": {
-                "text": "DateSelectEvent"
+                "text": "string | undefined"
               },
-              "description": "Dispatched when the calendar's focused date changes."
+              "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": "DateSelectEvent"
+                "text": "boolean"
               },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
-            }
-          ],
-          "attributes": [
+              "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": "value",
+              "name": "hide-required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "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": "first-day-of-week",
+              "name": "disabled",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "boolean"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "min",
+              "name": "name",
               "type": {
                 "text": "string | 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"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "max",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "fieldName": "max"
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "expand",
+              "name": "form",
               "type": {
-                "text": "boolean"
+                "text": "HTMLFormElement | null"
               },
-              "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "fieldName": "expand"
+              "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"
+              }
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
+          "mixins": [
             {
-              "name": "prevMonthLabel",
-              "description": "Accessible label for the previous month button."
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "name": "nextMonthLabel",
-              "description": "Accessible label for the next month button."
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
             {
-              "name": "monthSelectLabel",
-              "description": "Accessible label for the month select."
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
             },
             {
-              "name": "yearSelectLabel",
-              "description": "Accessible label for the year select."
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
           "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",
+          "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": [
-            "button",
-            "visually-hidden",
             "icon"
           ],
-          "tagName": "nord-calendar",
-          "customElement": true
+          "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": [
@@ -2941,65 +2990,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.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",
+          "name": "nord-checkbox",
           "declaration": {
-            "name": "calendarLocalization",
-            "module": "src/calendar/localization.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         }
       ]
@@ -10732,63 +10732,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification-group/NotificationGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Notification group is used to position and style a group of notifications.",
-          "name": "NotificationGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place notifications.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "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 in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification 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\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-notification-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-notification-group",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/notification/Notification.ts",
@@ -10932,141 +10875,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/progress-bar/ProgressBar.ts",
+      "path": "src/notification-group/NotificationGroup.ts",
       "declarations": [
-        {
-          "kind": "class",
-          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
-          "name": "ProgressBar",
-          "cssProperties": [
-            {
-              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-progress-size",
-              "default": "var(--n-space-s)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-progress-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
-              "name": "--n-progress-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+        {
+          "kind": "class",
+          "description": "Notification group is used to position and style a group of notifications.",
+          "name": "NotificationGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place notifications.",
+              "name": ""
             }
           ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "fieldName": "value"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
-            },
+          "members": [],
+          "events": [
             {
-              "name": "label",
               "type": {
-                "text": "string"
+                "text": "NordEvent"
               },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
+              "name": "dismiss"
             }
           ],
           "superclass": {
@@ -11076,10 +10904,10 @@
           "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 to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification 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\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-progress-bar",
+          "tagName": "nord-notification-group",
           "customElement": true
         }
       ],
@@ -11088,16 +10916,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
+          "name": "nord-notification-group",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         }
       ]
@@ -11350,66 +11178,238 @@
           ],
           "attributes": [
             {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-controls.",
-              "fieldName": "id"
-            },
-            {
-              "name": "anchor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Set an optional anchor element to align against, replacing the triggering element.",
-              "fieldName": "anchor"
-            },
-            {
-              "name": "open",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-controls.",
+              "fieldName": "id"
+            },
+            {
+              "name": "anchor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Set an optional anchor element to align against, replacing the triggering element.",
+              "fieldName": "anchor"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "fieldName": "align",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
+              },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
+              "fieldName": "position",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FloatingMixin",
+              "module": "/src/common/mixins/FloatingComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "overlay",
+          "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- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-popout",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-popout",
+          "declaration": {
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/progress-bar/ProgressBar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
+          "cssProperties": [
+            {
+              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-progress-size",
+              "default": "var(--n-space-s)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-progress-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
+              "name": "--n-progress-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "fieldName": "open",
-              "inheritedFrom": {
-                "name": "FloatingMixin",
-                "module": "src/common/mixins/FloatingComponentMixin.ts"
-              }
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "fieldName": "value"
             },
             {
-              "name": "align",
+              "name": "max",
               "type": {
-                "text": "\"start\" | \"end\""
+                "text": "number"
               },
-              "default": "\"start\"",
-              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
-              "fieldName": "align",
-              "inheritedFrom": {
-                "name": "FloatingMixin",
-                "module": "src/common/mixins/FloatingComponentMixin.ts"
-              }
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
             },
             {
-              "name": "position",
+              "name": "label",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
+                "text": "string"
               },
-              "default": "\"block-end\"",
-              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
-              "fieldName": "position",
-              "inheritedFrom": {
-                "name": "FloatingMixin",
-                "module": "src/common/mixins/FloatingComponentMixin.ts"
-              }
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
             }
           ],
           "mixins": [
             {
-              "name": "FloatingMixin",
-              "module": "/src/common/mixins/FloatingComponentMixin.js"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -11418,11 +11418,11 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "overlay",
-          "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- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
+          "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 to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-popout",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -11431,16 +11431,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-popout",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         }
       ]
@@ -12383,92 +12383,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/segmented-control/SegmentedControl.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",
-          "name": "SegmentedControl",
-          "slots": [
-            {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the segmented control expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever a segmented control item has been checked.",
-              "name": "change"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the segmented control expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "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\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",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SegmentedControl",
-            "module": "src/segmented-control/SegmentedControl.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-segmented-control",
-          "declaration": {
-            "name": "SegmentedControl",
-            "module": "src/segmented-control/SegmentedControl.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/range/Range.ts",
@@ -13227,36 +13141,122 @@
             {
               "name": "form",
               "type": {
-                "text": "HTMLFormElement | null"
+                "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.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 user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range 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\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-range",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Range",
+            "module": "src/range/Range.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-range",
+          "declaration": {
+            "name": "Range",
+            "module": "src/range/Range.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/segmented-control/SegmentedControl.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",
+          "name": "SegmentedControl",
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Controls whether the segmented control expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             }
           ],
-          "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
-            },
+          "events": [
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever a segmented control item has been checked.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the segmented control expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
           "superclass": {
@@ -13264,12 +13264,12 @@
             "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 user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range 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\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
+          "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\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-range",
+          "tagName": "nord-segmented-control",
           "customElement": true
         }
       ],
@@ -13278,16 +13278,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "SegmentedControl",
+            "module": "src/segmented-control/SegmentedControl.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-range",
+          "name": "nord-segmented-control",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "SegmentedControl",
+            "module": "src/segmented-control/SegmentedControl.ts"
           }
         }
       ]
@@ -15782,28 +15782,223 @@
               "module": "/src/common/mixins/InputMixin.js"
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "removeLabel",
+              "description": "Accessible label for the remove button."
+            }
+          ],
+          "status": "new",
+          "category": "text",
+          "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 labeling, categorizing, or organizing objects.\n- Ensure there is enough space around tags when they are interactive.\n- Always position tags so that it’s easy to understand what object they’re related to.\n- Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for showing the status of an object, use the [badge component](/components/badge/) instead.\n- Don’t use when you want to highlight something that has been added recently, use the [badge component](/components/badge/) instead.\n- Don’t use alternatives to existing tag variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag 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\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name         | Purpose                                           |\n| ------------ | ------------------------------------------------- |\n| `default`    | The default variant for a non-interactive tag.    |\n| `removable`  | Used for tags that can be removed by the user.    |\n| `selectable` | Used for tags that can be selected or deselected. |\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-tag",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tag",
+            "module": "src/tag/Tag.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tag",
+          "declaration": {
+            "name": "Tag",
+            "module": "src/tag/Tag.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tag/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ removeLabel: \"Remove\", }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/tag/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tag-group/TagGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",
+          "name": "TagGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
+              "name": "--n-tag-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
+              "name": "--n-tag-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "dirController",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the tag group.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the tag group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever a tag has been checked or unchecked via user interaction.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.",
+              "name": "remove"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the tag group.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the tag group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "localization": [
-            {
-              "name": "removeLabel",
-              "description": "Accessible label for the remove button."
-            }
-          ],
+          "localization": [],
           "status": "new",
-          "category": "text",
-          "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 labeling, categorizing, or organizing objects.\n- Ensure there is enough space around tags when they are interactive.\n- Always position tags so that it’s easy to understand what object they’re related to.\n- Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for showing the status of an object, use the [badge component](/components/badge/) instead.\n- Don’t use when you want to highlight something that has been added recently, use the [badge component](/components/badge/) instead.\n- Don’t use alternatives to existing tag variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag 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\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name         | Purpose                                           |\n| ------------ | ------------------------------------------------- |\n| `default`    | The default variant for a non-interactive tag.    |\n| `removable`  | Used for tags that can be removed by the user.    |\n| `selectable` | Used for tags that can be selected or deselected. |\n",
+          "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 group together selectable tags.\n- Use the appropriate `role` attribute on the tag group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the tag group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than selectable tags and in some instances visually hidden components to the tag group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag 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\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                     |\n| --------- | ------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of tags to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the tags to space them out evenly.                 |\n",
           "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-tag",
+          "dependencies": [],
+          "tagName": "nord-tag-group",
           "customElement": true
         }
       ],
@@ -15812,40 +16007,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tag",
-          "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tag/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ removeLabel: \"Remove\", }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "nord-tag-group",
           "declaration": {
-            "name": "localization",
-            "module": "src/tag/localization.ts"
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.ts"
           }
         }
       ]
@@ -16841,237 +17012,42 @@
               "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
             {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
-            },
-            {
-              "name": "TextSelectableMixin",
-              "module": "/src/common/mixins/TextSelectableMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "remainingCharacters",
-              "description": "A function which receives the number of remaining characters and returns a string to be used as the aria-live message."
-            }
-          ],
-          "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 allow text input where the expected input is long.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is short. Use input component instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nTextarea labels act as a title for the text 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 textarea 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\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide Description</div>\n\nWhen a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in textarea labels:\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide description:</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-textarea",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-textarea",
-          "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/textarea/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ remainingCharacters: (remainder: number) => `Characters remaining: ${remainder}`, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/textarea/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tag-group/TagGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",
-          "name": "TagGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
-              "name": "--n-tag-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
-              "name": "--n-tag-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tag group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dirController",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the tag group.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the tag group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "attribute": "wrap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever a tag has been checked or unchecked via user interaction.",
-              "name": "change"
-            },
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.",
-              "name": "remove"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the tag group.",
-              "fieldName": "variant"
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
             },
             {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the tag group.",
-              "fieldName": "direction"
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
             },
             {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "fieldName": "wrap"
+              "name": "TextSelectableMixin",
+              "module": "/src/common/mixins/TextSelectableMixin.js"
             },
             {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
+              "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": "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 group together selectable tags.\n- Use the appropriate `role` attribute on the tag group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the tag group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than selectable tags and in some instances visually hidden components to the tag group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag 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\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                     |\n| --------- | ------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of tags to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the tags to space them out evenly.                 |\n",
+          "localization": [
+            {
+              "name": "remainingCharacters",
+              "description": "A function which receives the number of remaining characters and returns a string to be used as the aria-live message."
+            }
+          ],
+          "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 allow text input where the expected input is long.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is short. Use input component instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nTextarea labels act as a title for the text 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 textarea 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\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide Description</div>\n\nWhen a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in textarea labels:\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide description:</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-tag-group",
+          "tagName": "nord-textarea",
           "customElement": true
         }
       ],
@@ -17080,16 +17056,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tag-group",
+          "name": "nord-textarea",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/textarea/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ remainingCharacters: (remainder: number) => `Characters remaining: ${remainder}`, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/textarea/localization.ts"
           }
         }
       ]
@@ -17250,6 +17250,93 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/toast-group/ToastGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
+          "name": "ToastGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place toasts.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "addToast",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text/message of the toast."
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ToastOptions"
+                  },
+                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
+                }
+              ],
+              "description": "Convenience method for creating and adding a toast to the group.",
+              "return": {
+                "type": {
+                  "text": "Toast"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "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 in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast 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\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "toast"
+          ],
+          "tagName": "nord-toast-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast-group",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toggle/Toggle.ts",
@@ -17974,93 +18061,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/toast-group/ToastGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
-          "name": "ToastGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place toasts.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "addToast",
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text/message of the toast."
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ToastOptions"
-                  },
-                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
-                }
-              ],
-              "description": "Convenience method for creating and adding a toast to the group.",
-              "return": {
-                "type": {
-                  "text": "Toast"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "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 in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast 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\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "toast"
-          ],
-          "tagName": "nord-toast-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast-group",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tooltip/Tooltip.ts",