@nordhealth/components 4.0.0 → 4.0.1

package/custom-elements.json

@@ -790,6 +790,246 @@
         }
       ]
     },
+    {
+      "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",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
+              "name": "--n-button-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-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button 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 button group.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons 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
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons 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": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button 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\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -1403,693 +1643,330 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
+          "description": "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 how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-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-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             }
           ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
+          "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "monthSelectNode",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "HTMLElement"
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "privacy": "private"
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "focusedDayNode",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "HTMLButtonElement"
               },
-              "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
+              "privacy": "private"
+            },
             {
-              "description": "Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
+            },
             {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "shortcuts",
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "localize",
               "privacy": "private",
-              "default": "new SlotController(this)"
+              "default": "new LocalizeController<\"nord-calendar\">(this, { onLangChange: () => this.handleLangChange(), })"
             },
             {
               "kind": "field",
-              "name": "dirController",
+              "name": "dateFormatShort",
+              "type": {
+                "text": "Intl.DateTimeFormat"
+              },
               "privacy": "private",
-              "default": "new DirectionController(this)"
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "monthNames",
               "type": {
-                "text": "\"default\" | \"spaced\""
+                "text": "string[]"
               },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "attribute": "variant",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "monthNamesShort",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "string[]"
               },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "wrap",
+              "name": "dayNames",
               "type": {
-                "text": "boolean"
+                "text": "string[]"
               },
-              "default": "false",
-              "description": "Defines whether the buttons 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
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "dayNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "firstDayOfWeek",
+              "type": {
+                "text": "DaysOfWeek"
+              },
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "attribute": "first-day-of-week",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "min",
               "type": {
-                "text": "\"default\" | \"spaced\""
+                "text": "string | undefined"
               },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "fieldName": "variant"
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "attribute": "min",
+              "reflects": true
             },
             {
-              "name": "direction",
+              "kind": "field",
+              "name": "max",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "string | undefined"
               },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
+              "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
             },
             {
-              "name": "wrap",
+              "kind": "field",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "fieldName": "wrap"
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
-              "name": "role",
+              "kind": "field",
+              "name": "isDateDisabled",
               "type": {
-                "text": "string"
+                "text": "DatePredicate"
               },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button 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\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
+              "default": "isDateDisabled",
+              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
+              "kind": "field",
+              "name": "isDateHighlighted",
+              "type": {
+                "text": "(date: Date) => string | boolean"
+              },
+              "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": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
+              "kind": "field",
+              "name": "activeFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "focusedDay",
+              "privacy": "private",
+              "default": "new Date()"
+            },
             {
-              "description": "The card content.",
-              "name": ""
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the calendar."
             },
             {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
+              "kind": "method",
+              "name": "handleValueChange",
+              "privacy": "protected"
             },
             {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
+              "kind": "method",
+              "name": "handleFocusedDayChange",
+              "privacy": "protected"
             },
             {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "handleLangChange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "name": "handleDaySelect",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "headerEndSlot",
+              "kind": "method",
+              "name": "addDays",
               "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
+              "parameters": [
+                {
+                  "name": "days",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "footerSlot",
+              "kind": "method",
+              "name": "addMonths",
               "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
-          "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)"
+              "kind": "method",
+              "name": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
+              "kind": "method",
+              "name": "startOfWeek",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
+              "kind": "method",
+              "name": "endOfWeek",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "direction",
+              "kind": "method",
+              "name": "setMonth",
               "privacy": "private",
-              "default": "new DirectionController(this)"
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "swipe",
+              "kind": "method",
+              "name": "setYear",
               "privacy": "private",
-              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "shortcuts",
+              "name": "handleMonthSelect",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, { onLangChange: () => this.handleLangChange(), })"
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
             {
               "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": "handleNextMonthClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "monthNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "monthNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "dayNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "dayNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "firstDayOfWeek",
-              "type": {
-                "text": "DaysOfWeek"
-              },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "first-day-of-week",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "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
-            },
-            {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "isDateDisabled",
-              "type": {
-                "text": "DatePredicate"
-              },
-              "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": "isDateHighlighted",
-              "type": {
-                "text": "(date: Date) => string | boolean"
-              },
-              "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": "activeFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the calendar."
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addMonths",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "months",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addYears",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "years",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "startOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "endOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setYear",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "year",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePreviousMonthClick",
+              "name": "handlePreviousMonthClick",
               "privacy": "private"
             },
             {
@@ -2268,15 +2145,138 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/card/Card.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": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "cssProperties": [
             {
-              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/checkbox/Checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
               "name": "--n-label-color",
               "default": "var(--n-color-text)"
             }
@@ -7321,1369 +7321,1369 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
+      "path": "src/input/Input.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
-          "name": "Icon",
+          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the input.",
+              "name": "--n-input-inline-size",
+              "default": "240px"
+            },
+            {
+              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-background",
+              "default": "var(--n-color-active)"
+            },
+            {
+              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-color",
+              "default": "var(--n-color-text)"
+            },
+            {
+              "description": "Controls the border color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-input-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the alignment of text within the input itself.",
+              "name": "--n-input-text-align",
+              "default": "start"
+            },
+            {
+              "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": "The default slot used for placing a custom SVG icon.",
-              "name": ""
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            },
+            {
+              "description": "Optional slot used to place an icon or prefix at the start of the input.",
+              "name": "start"
+            },
+            {
+              "description": "Optional slot used to place an icon or suffix at the end of the input.",
+              "name": "end"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "manager",
+              "name": "startSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "endSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "startObserver",
               "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "default": "new ResizeController(this, () => this.startSlot)"
             },
             {
-              "kind": "method",
-              "name": "registerResolver",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "resolver",
-                  "type": {
-                    "text": "IconResolver"
-                  },
-                  "description": "The resolver function to register."
-                }
-              ],
-              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
+              "kind": "field",
+              "name": "endObserver",
+              "privacy": "private",
+              "default": "new ResizeController(this, () => this.endSlot)"
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "| \"text\"\n    | \"email\"\n    | \"password\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"number\"\n    | \"unit\"\n    | \"button\""
               },
-              "parameters": [
-                {
-                  "name": "icon",
-                  "type": {
-                    "text": "{ title: string; default: string }"
-                  },
-                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
-                }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "attribute": "type",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disallowPattern",
+              "type": {
+                "text": "string | undefined"
               },
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "attribute": "disallow-pattern",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the icon to be registered."
-                },
-                {
-                  "name": "icon",
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The SVG string for the icon."
+                    "text": "KeyboardEvent"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleInputChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
+              "name": "handleSelect",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "iconOrName",
-                  "type": {
-                    "text": "string | { title: string; default: string }"
-                  },
-                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
-                },
-                {
-                  "name": "icon",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The SVG string for the icon."
+                    "text": "Event"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              ]
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "description": "The size of the icon.",
               "default": "\"m\"",
+              "description": "The size of the component.",
               "attribute": "size",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "color",
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "errorId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "svg",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size of the icon.",
-              "default": "\"m\"",
-              "fieldName": "size"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "color",
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "error",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "image",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/IconManager.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IconManager",
-          "members": [
+              "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": "cache",
-              "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "resolver",
+              "name": "hideRequired",
               "type": {
-                "text": "IconResolver"
+                "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": "resolve",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "onResolved",
+                  "name": "e",
                   "type": {
-                    "text": "(svg: string) => void"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "registerIcon",
+              "name": "handleChange",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "iconOrName",
+                  "name": "e",
                   "type": {
-                    "text": "string | { title: string; default: string }"
+                    "text": "Event"
                   }
-                },
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "parameters": [
                 {
-                  "name": "icon",
+                  "name": "additionalContent",
                   "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "TemplateResult"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "clear"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "IconManager",
-          "declaration": {
-            "name": "IconManager",
-            "module": "src/icon/IconManager.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/input/Input.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
-          "cssProperties": [
-            {
-              "description": "Controls the inline size, or width, of the input.",
-              "name": "--n-input-inline-size",
-              "default": "240px"
-            },
-            {
-              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-background",
-              "default": "var(--n-color-active)"
-            },
-            {
-              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-color",
-              "default": "var(--n-color-text)"
-            },
-            {
-              "description": "Controls the border color of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-border-color",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-input-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the alignment of text within the input itself.",
-              "name": "--n-input-text-align",
-              "default": "start"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "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"
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot used to place an icon or prefix at the start of the input.",
-              "name": "start"
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
-            {
-              "description": "Optional slot used to place an icon or suffix at the end of the input.",
-              "name": "end"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "startSlot",
+              "name": "autocomplete",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "AutocompleteAttribute"
               },
-              "privacy": "private"
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "endSlot",
+              "name": "readonly",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "startObserver",
-              "privacy": "private",
-              "default": "new ResizeController(this, () => this.startSlot)"
-            },
-            {
-              "kind": "field",
-              "name": "endObserver",
-              "privacy": "private",
-              "default": "new ResizeController(this, () => this.endSlot)"
+              "name": "textSelectableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "name": "selectionStart",
+              "description": "Gets or sets the starting position or offset of a text selection.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "| \"text\"\n    | \"email\"\n    | \"password\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"number\"\n    | \"unit\"\n    | \"button\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "attribute": "type",
-              "reflects": true
+              "name": "selectionEnd",
+              "description": "Gets or sets the end position or offset of a text selection.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "name": "selectionDirection",
+              "description": "Gets or sets the direction in which selection occurred.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "disallowPattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
-              "attribute": "disallow-pattern",
-              "reflects": true
+              "kind": "method",
+              "name": "select",
+              "description": "Selects all the text in the text field.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
+              "name": "setSelectionRange",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "start",
                   "type": {
-                    "text": "KeyboardEvent"
-                  }
+                    "text": "number | null"
+                  },
+                  "description": "The offset into the text field for the start of the selection."
+                },
+                {
+                  "name": "end",
+                  "type": {
+                    "text": "number | null"
+                  },
+                  "description": "The offset into the text field for the end of the selection."
+                },
+                {
+                  "name": "direction",
+                  "optional": true,
+                  "type": {
+                    "text": "\"forward\" | \"backward\" | \"none\""
+                  },
+                  "description": "The direction in which the selection is performed."
                 }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleInputChange",
-              "privacy": "private"
+              ],
+              "description": "Sets the start and end positions of a selection in the text field.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)",
+              "inheritedFrom": {
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleSelect",
-              "privacy": "protected",
+              "name": "setRangeText",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "replacement",
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "string"
+                  },
+                  "description": "The string to insert."
+                },
+                {
+                  "name": "start",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection)."
+                },
+                {
+                  "name": "end",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection)."
+                },
+                {
+                  "name": "selectMode",
+                  "default": "\"preserve\"",
+                  "type": {
+                    "text": "\"select\" | \"start\" | \"end\" | \"preserve\""
+                  },
+                  "description": "A string defining how the selection should be set after the text has been replaced."
                 }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
+              ],
+              "description": "Replaces a range of text with a new string.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "kind": "method",
+              "name": "getNativeElement",
+              "description": "Returns the native `<input>` or `<textarea>` element used under the hood.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "TextSelectableMixin",
+                "module": "src/common/mixins/TextSelectableMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
+              "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": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
+              "name": "formAncestor",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "_formId",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "privacy": "protected",
-              "default": "\"input\"",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "form",
               "type": {
-                "text": "string"
+                "text": "HTMLFormElement | null"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
+              "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": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
+              "name": "focusableRef",
               "privacy": "protected",
-              "default": "\"hint\"",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "reflects": true,
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "reflects": true,
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "reflects": true,
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
+            }
+          ],
+          "events": [
+            {
+              "name": "select",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when some text has been selected."
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "input",
               "type": {
-                "text": "string | undefined"
+                "text": "NordEvent"
               },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "reflects": true,
+              "description": "Fired as the user types into the input.",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "error",
+              "name": "change",
               "type": {
-                "text": "string | undefined"
+                "text": "NordEvent"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
-              "reflects": true,
+              "description": "Fired whenever the input's value is changed via user interaction.",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "| \"text\"\n    | \"email\"\n    | \"password\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"number\"\n    | \"unit\"\n    | \"button\""
+              },
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "required",
+              "name": "expand",
               "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"
-              }
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
-              "kind": "field",
-              "name": "hideRequired",
+              "name": "disallow-pattern",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "attribute": "hide-required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "fieldName": "disallowPattern"
             },
             {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "additionalContent",
-                  "optional": true,
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
+              "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": "method",
-              "name": "renderError",
-              "privacy": "protected",
+              "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": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
+              "name": "hide-required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "autocomplete",
               "type": {
                 "text": "AutocompleteAttribute"
               },
               "default": "\"off\"",
               "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
+              "fieldName": "autocomplete",
               "inheritedFrom": {
                 "name": "AutocompleteMixin",
                 "module": "src/common/mixins/AutocompleteMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true,
+              "fieldName": "readonly",
               "inheritedFrom": {
                 "name": "ReadonlyMixin",
                 "module": "src/common/mixins/ReadonlyMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "textSelectableRef",
-              "privacy": "protected",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "selectionStart",
-              "description": "Gets or sets the starting position or offset of a text selection.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)",
-              "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "selectionEnd",
-              "description": "Gets or sets the end position or offset of a text selection.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "selectionDirection",
-              "description": "Gets or sets the direction in which selection occurred.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
               "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "kind": "method",
-              "name": "select",
-              "description": "Selects all the text in the text field.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)",
-              "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
-              }
+              "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": "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": [],
+          "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 provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\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 long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun 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 input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input 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 input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n---\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n---\n\n## Input masking\n\nWe recommend using [Maskito](https://maskito.dev/) for creating an [input mask](/components/input/?example=input+mask) which ensures that users type values according to a predefined format.\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/Icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
+          "name": "Icon",
+          "slots": [
+            {
+              "description": "The default slot used for placing a custom SVG icon.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "manager",
+              "privacy": "private",
+              "static": true,
+              "default": "new IconManager()"
             },
             {
               "kind": "method",
-              "name": "setSelectionRange",
+              "name": "registerResolver",
+              "static": true,
               "parameters": [
                 {
-                  "name": "start",
-                  "type": {
-                    "text": "number | null"
-                  },
-                  "description": "The offset into the text field for the start of the selection."
-                },
-                {
-                  "name": "end",
+                  "name": "resolver",
                   "type": {
-                    "text": "number | null"
+                    "text": "IconResolver"
                   },
-                  "description": "The offset into the text field for the end of the selection."
-                },
+                  "description": "The resolver function to register."
+                }
+              ],
+              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
+            },
+            {
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
                 {
-                  "name": "direction",
-                  "optional": true,
+                  "name": "icon",
                   "type": {
-                    "text": "\"forward\" | \"backward\" | \"none\""
+                    "text": "{ title: string; default: string }"
                   },
-                  "description": "The direction in which the selection is performed."
+                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
                 }
               ],
-              "description": "Sets the start and end positions of a selection in the text field.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)",
-              "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
-              }
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "method",
-              "name": "setRangeText",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "replacement",
+                  "name": "name",
                   "type": {
                     "text": "string"
                   },
-                  "description": "The string to insert."
+                  "description": "The name of the icon to be registered."
                 },
                 {
-                  "name": "start",
-                  "optional": true,
+                  "name": "icon",
                   "type": {
-                    "text": "number"
+                    "text": "string"
                   },
-                  "description": "The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection)."
-                },
+                  "description": "The SVG string for the icon."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+            },
+            {
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "parameters": [
                 {
-                  "name": "end",
-                  "optional": true,
+                  "name": "iconOrName",
                   "type": {
-                    "text": "number"
+                    "text": "string | { title: string; default: string }"
                   },
-                  "description": "The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection)."
+                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
                 },
                 {
-                  "name": "selectMode",
-                  "default": "\"preserve\"",
+                  "name": "icon",
+                  "optional": true,
                   "type": {
-                    "text": "\"select\" | \"start\" | \"end\" | \"preserve\""
+                    "text": "string"
                   },
-                  "description": "A string defining how the selection should be set after the text has been replaced."
+                  "description": "The SVG string for the icon."
                 }
               ],
-              "description": "Replaces a range of text with a new string.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)",
-              "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getNativeElement",
-              "description": "Returns the native `<input>` or `<textarea>` element used under the hood.",
-              "inheritedFrom": {
-                "name": "TextSelectableMixin",
-                "module": "src/common/mixins/TextSelectableMixin.ts"
-              }
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | 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"
-              }
+              "description": "The size of the icon.",
+              "default": "\"m\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formAncestor",
+              "name": "color",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_formId",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "svg",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "string"
               },
-              "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": "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"
-              }
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "select",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when some text has been selected."
-            },
-            {
-              "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"
-              }
+              "name": "handleNameChange",
+              "privacy": "protected"
             }
           ],
           "attributes": [
             {
-              "name": "type",
-              "type": {
-                "text": "| \"text\"\n    | \"email\"\n    | \"password\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"number\"\n    | \"unit\"\n    | \"button\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "fieldName": "type"
-            },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
-            {
-              "name": "disallow-pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
-              "fieldName": "disallowPattern"
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "name": "placeholder",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The size of the icon.",
+              "default": "\"m\"",
+              "fieldName": "size"
             },
             {
-              "name": "error",
+              "name": "color",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "fieldName": "label"
             }
           ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "image",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/IconManager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconManager",
+          "members": [
             {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
+              "kind": "field",
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
             },
             {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
+              "kind": "field",
+              "name": "resolver",
+              "type": {
+                "text": "IconResolver"
+              }
             },
             {
-              "name": "TextSelectableMixin",
-              "module": "/src/common/mixins/TextSelectableMixin.js"
+              "kind": "method",
+              "name": "resolve",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "onResolved",
+                  "type": {
+                    "text": "(svg: string) => void"
+                  }
+                }
+              ]
             },
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "kind": "method",
+              "name": "registerIcon",
+              "parameters": [
+                {
+                  "name": "iconOrName",
+                  "type": {
+                    "text": "string | { title: string; default: string }"
+                  }
+                },
+                {
+                  "name": "icon",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "kind": "method",
+              "name": "clear"
             }
-          ],
-          "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 provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\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 long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun 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 input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input 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 input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n---\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n---\n\n## Input masking\n\nWe recommend using [Maskito](https://maskito.dev/) for creating an [input mask](/components/input/?example=input+mask) which ensures that users type values according to a predefined format.\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-input",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-input",
+          "name": "IconManager",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "IconManager",
+            "module": "src/icon/IconManager.ts"
           }
         }
       ]
@@ -10732,6 +10732,63 @@
         }
       ]
     },
+    {
+      "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",
@@ -10873,63 +10930,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/popout/Popout.ts",
@@ -15172,80 +15172,30 @@
               "name": "label",
               "type": {
                 "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Adds an accessible label to the tab list container.",
-              "fieldName": "label"
-            },
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\" | undefined"
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the tab group component.",
-              "fieldName": "padding"
-            },
-            {
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
-              "fieldName": "sticky"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "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 multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [
-            "tab"
-          ],
-          "tagName": "nord-tab-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-group",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab-panel/TabPanel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
-          "name": "TabPanel",
-          "slots": [
+              },
+              "default": "\"\"",
+              "description": "Adds an accessible label to the tab list container.",
+              "fieldName": "label"
+            },
             {
-              "description": "The tab panel content.",
-              "name": ""
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\" | undefined"
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the tab group component.",
+              "fieldName": "padding"
+            },
+            {
+              "name": "sticky",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
+              "fieldName": "sticky"
             }
           ],
-          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -15253,10 +15203,12 @@
           "localization": [],
           "status": "ready",
           "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tab-panel",
+          "dependencies": [
+            "tab"
+          ],
+          "tagName": "nord-tab-group",
           "customElement": true
         }
       ],
@@ -15265,16 +15217,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tab-panel",
+          "name": "nord-tab-group",
           "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
           }
         }
       ]
@@ -15425,6 +15377,54 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab-panel/TabPanel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
+          "name": "TabPanel",
+          "slots": [
+            {
+              "description": "The tab panel content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-panel",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tag/Tag.ts",
@@ -15834,172 +15834,9 @@
           "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": [],
-          "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",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tag-group",
-          "customElement": true
+            "text": "object"
+          },
+          "default": "{ removeLabel: \"Remove\", }"
         }
       ],
       "exports": [
@@ -16007,16 +15844,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tag-group",
-          "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "localization",
+            "module": "src/tag/localization.ts"
           }
         }
       ]
@@ -17094,6 +16923,177 @@
         }
       ]
     },
+    {
+      "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": [],
+          "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",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-tag-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tag-group",
+          "declaration": {
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toast/Toast.ts",
@@ -18427,6 +18427,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/decorators/observe.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
+            {
+              "name": "propertyName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "observe",
+          "declaration": {
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/BroadcastChannelController.ts",
@@ -19688,41 +19723,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
-            {
-              "name": "propertyName",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "lifecycle",
-              "default": "\"update\"",
-              "type": {
-                "text": "ObserveLifecycle"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "observe",
-          "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/common/directives/cond.ts",