@nordhealth/components 3.15.0 → 3.16.0

package/custom-elements.json

@@ -1481,161 +1481,6 @@
         }
       ]
     },
-    {
-      "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": "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 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/calendar/Calendar.ts",
@@ -2993,103 +2838,258 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
+      "path": "src/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
+          "description": "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 max inline size, or width, of the command menu.",
-              "name": "--n-command-menu-inline-size",
-              "default": "640px"
-            },
-            {
-              "description": "Controls the max block size, or height, of the command menu.",
-              "name": "--n-command-menu-block-size",
-              "default": "290px"
+              "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 command menu offset from the block start, or top, of the screen.",
-              "name": "--n-command-menu-block-start",
-              "default": "16%"
+              "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": "Used to replace the default footer contents.",
-              "name": "footer"
+              "description": "The button group content",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
             },
             {
               "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
+              "name": "dirController",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "previousFocus",
+              "name": "variant",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "\"default\" | \"spaced\""
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-command-menu\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dismissController",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "keyboardController",
-              "privacy": "private",
-              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "wrap",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show or hide the command menu.",
-              "attribute": "open",
+              "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": "commands",
+              "name": "role",
               "type": {
-                "text": "Array<ICommandMenuAction>"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
-            },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "parent",
+              "name": "variant",
               "type": {
-                "text": "ICommandMenuAction[\"parent\"]"
+                "text": "\"default\" | \"spaced\""
               },
-              "privacy": "private"
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "search",
+              "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": "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 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/command-menu/CommandMenu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
+          "name": "CommandMenu",
+          "cssProperties": [
+            {
+              "description": "Controls the max inline size, or width, of the command menu.",
+              "name": "--n-command-menu-inline-size",
+              "default": "640px"
+            },
+            {
+              "description": "Controls the max block size, or height, of the command menu.",
+              "name": "--n-command-menu-block-size",
+              "default": "290px"
+            },
+            {
+              "description": "Controls the command menu offset from the block start, or top, of the screen.",
+              "name": "--n-command-menu-block-start",
+              "default": "16%"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Used to replace the default footer contents.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "listRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previousFocus",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-command-menu\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "dismissController",
+              "privacy": "private",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "keyboardController",
+              "privacy": "private",
+              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show or hide the command menu.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "commands",
+              "type": {
+                "text": "Array<ICommandMenuAction>"
+              },
+              "default": "[]",
+              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
+            },
+            {
+              "kind": "field",
+              "name": "parent",
+              "type": {
+                "text": "ICommandMenuAction[\"parent\"]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "search",
               "type": {
                 "text": "string"
               },
@@ -6167,100 +6167,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/drawer/Drawer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",
-          "name": "Drawer",
-          "cssProperties": [
-            {
-              "description": "Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).",
-              "name": "--n-drawer-padding",
-              "default": "var(--n-space-l)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Optional slot that holds a header for the drawer.",
-              "name": "header"
-            },
-            {
-              "description": "Default slot.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds footer content for the drawer.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the drawer component.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the drawer component.",
-              "fieldName": "padding"
-            }
-          ],
-          "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 for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t put cards inside the drawer. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](/components/layout/).\n",
-          "examples": [],
-          "dependencies": [
-            "footer"
-          ],
-          "tagName": "nord-drawer",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Drawer",
-            "module": "src/drawer/Drawer.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-drawer",
-          "declaration": {
-            "name": "Drawer",
-            "module": "src/drawer/Drawer.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/dropdown/Dropdown.ts",
@@ -6636,12 +6542,106 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/dropdown-item/DropdownItem.ts",
+      "path": "src/drawer/Drawer.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",
-          "name": "DropdownItem",
+          "description": "Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",
+          "name": "Drawer",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-drawer-padding",
+              "default": "var(--n-space-l)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Optional slot that holds a header for the drawer.",
+              "name": "header"
+            },
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds footer content for the drawer.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the drawer component.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the drawer component.",
+              "fieldName": "padding"
+            }
+          ],
+          "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 for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t put cards inside the drawer. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](/components/layout/).\n",
+          "examples": [],
+          "dependencies": [
+            "footer"
+          ],
+          "tagName": "nord-drawer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Drawer",
+            "module": "src/drawer/Drawer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-drawer",
+          "declaration": {
+            "name": "Drawer",
+            "module": "src/drawer/Drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown-item/DropdownItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",
+          "name": "DropdownItem",
           "cssProperties": [
             {
               "description": "Controls the background color of the item, using our [color tokens](/tokens/#color).",
@@ -6947,6 +6947,17 @@
               "attribute": "hide-label",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the label.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "hasHint",
@@ -7012,6 +7023,15 @@
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
               "fieldName": "hideLabel"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the label.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -9091,281 +9111,76 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/message/Message.ts",
+      "path": "src/localization/LocalizeController.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
-          "name": "Message",
-          "cssProperties": [
-            {
-              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
-              "name": "--n-message-border-color",
-              "default": "var(--n-color-border)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The message content.",
-              "name": ""
-            },
-            {
-              "description": "Used to place content after the message. Typically used for a timestamp.",
-              "name": "footer"
-            }
-          ],
+          "description": "",
+          "name": "LocalizeController",
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-message\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "href",
+              "name": "unsubscribe",
               "type": {
-                "text": "string | undefined"
+                "text": "ReturnType<typeof subscribe> | undefined"
               },
-              "description": "The url the message should link to.",
-              "attribute": "href",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "highlight",
+              "name": "resolvedTranslation",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Translation"
               },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "attribute": "highlight",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "attribute": "unread",
-              "reflects": true
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation",
+              "readonly": 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": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "hostConnected"
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The url the message should link to.",
-              "fieldName": "href"
-            },
-            {
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
+              "name": "term",
+              "return": {
+                "type": {
+                  "text": "Result<Translation[TComponentName], Key>"
+                }
               },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "fieldName": "highlight"
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Key"
+                  }
+                },
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "FuncParams<Translation[TComponentName], Key>"
+                  }
+                }
+              ]
             },
             {
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "fieldName": "unread"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "unreadLabel",
-              "description": "Label for the unread messages."
-            }
-          ],
-          "status": "new",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage 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 message 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\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "dropdown-item"
-          ],
-          "tagName": "nord-message",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-message",
-          "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/message/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  unreadLabel: \"Unread\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/message/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/LocalizeController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LocalizeController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "unsubscribe",
-              "type": {
-                "text": "ReturnType<typeof subscribe> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "resolvedTranslation",
-              "type": {
-                "text": "Translation"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "term",
-              "return": {
-                "type": {
-                  "text": "Result<Translation[TComponentName], Key>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Key"
-                  }
-                },
-                {
-                  "name": "args",
-                  "type": {
-                    "text": "FuncParams<Translation[TComponentName], Key>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleLangChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "handleLangChange",
+              "privacy": "private"
             }
           ]
         }
@@ -9551,151 +9366,74 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modal/Modal.ts",
+      "path": "src/message/Message.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
-          "name": "Modal",
+          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
+          "name": "Message",
           "cssProperties": [
             {
-              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-inline",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-block",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the width of the modal.",
-              "name": "--n-modal-max-inline-size",
-              "default": "620px"
+              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
+              "name": "--n-message-border-color",
+              "default": "var(--n-color-border)"
             }
           ],
           "slots": [
             {
-              "description": "Default slot",
+              "description": "The message content.",
               "name": ""
             },
             {
-              "description": "Slot which holds the header of the modal, positioned next to the close button.",
-              "name": "header"
-            },
-            {
-              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
+              "description": "Used to place content after the message. Typically used for a timestamp.",
               "name": "footer"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "modal",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "featureSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"feature\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
             {
               "kind": "field",
               "name": "localize",
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-modal\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "modalController",
-              "privacy": "private",
-              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+              "default": "new LocalizeController<\"nord-message\">(this)"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the modal is open or not.",
-              "attribute": "open",
+              "description": "The url the message should link to.",
+              "attribute": "href",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "highlight",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\""
+                "text": "boolean | undefined"
               },
-              "default": "\"m\"",
-              "description": "Controls the max-width of the modal when open.",
-              "attribute": "size",
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "attribute": "highlight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "returnValue",
+              "name": "unread",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "\"\"",
-              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
+              "description": "Mark the message as unread. By default messages are read.",
+              "attribute": "unread",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "scrollable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
-              "attribute": "scrollable",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "showModal",
-              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "parameters": [
-                {
-                  "name": "returnValue",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "An optional value to indicate why the modal was closed."
-                }
-              ],
-              "description": "Programmatically close the modal."
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
@@ -9710,70 +9448,61 @@
                   "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "description": "Programmatically focus the modal."
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleOpenUpdated",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "prev",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleDismiss",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "close",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched when a modal is closed for any reason."
-            },
-            {
-              "name": "cancel",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing."
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "open",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the modal is open or not.",
-              "fieldName": "open"
+              "description": "The url the message should link to.",
+              "fieldName": "href"
             },
             {
-              "name": "size",
+              "name": "highlight",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\""
+                "text": "boolean | undefined"
               },
-              "default": "\"m\"",
-              "description": "Controls the max-width of the modal when open.",
-              "fieldName": "size"
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "fieldName": "highlight"
             },
             {
-              "name": "scrollable",
+              "name": "unread",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
-              "fieldName": "scrollable"
+              "description": "Mark the message as unread. By default messages are read.",
+              "fieldName": "unread"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -9782,19 +9511,18 @@
           },
           "localization": [
             {
-              "name": "closeLabel",
-              "description": "Accessible label for the close button."
+              "name": "unreadLabel",
+              "description": "Label for the unread messages."
             }
           ],
-          "status": "ready",
-          "category": "overlay",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n",
+          "status": "new",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage 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 message 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\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
           "examples": [],
           "dependencies": [
-            "icon",
-            "footer"
+            "dropdown-item"
           ],
-          "tagName": "nord-modal",
+          "tagName": "nord-message",
           "customElement": true
         }
       ],
@@ -9803,96 +9531,388 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Modal",
-            "module": "src/modal/Modal.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-modal",
+          "name": "nord-message",
           "declaration": {
-            "name": "Modal",
-            "module": "src/modal/Modal.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modal/ModalController.ts",
+      "path": "src/message/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  unreadLabel: \"Unread\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/message/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modal/Modal.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "ModalController",
+          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
+          "name": "Modal",
+          "cssProperties": [
+            {
+              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-inline",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-block",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the width of the modal.",
+              "name": "--n-modal-max-inline-size",
+              "default": "620px"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            },
+            {
+              "description": "Slot which holds the header of the modal, positioned next to the close button.",
+              "name": "header"
+            },
+            {
+              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "openModals",
-              "privacy": "private",
-              "static": true,
-              "default": "new Stack<ModalController>()"
+              "name": "modal",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "scrollBar",
+              "name": "backdrop",
               "type": {
-                "text": "ScrollbarController"
+                "text": "HTMLDivElement"
               },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "headerSlot",
               "privacy": "private",
-              "default": "new ScrollbarController(host)"
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "FocusTrapController"
-              },
+              "name": "featureSlot",
               "privacy": "private",
-              "default": "new FocusTrapController(host)"
+              "default": "new SlotController(this, \"feature\")"
             },
             {
               "kind": "field",
-              "name": "lightDismiss",
-              "type": {
-                "text": "LightDismissController"
-              },
+              "name": "footerSlot",
               "privacy": "private",
-              "default": "new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })"
+              "default": "new SlotController(this, \"footer\")"
             },
             {
               "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
+              "name": "localize",
               "privacy": "private",
-              "default": "new EventController(host)"
+              "default": "new LocalizeController<\"nord-modal\">(this)"
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "modalController",
+              "privacy": "private",
+              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
               "type": {
-                "text": "ModalControllerOptions"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "options"
+              "default": "false",
+              "description": "Controls whether the modal is open or not.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "size",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\""
               },
-              "privacy": "private"
+              "default": "\"m\"",
+              "description": "Controls the max-width of the modal when open.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "lastButton",
+              "name": "returnValue",
               "type": {
-                "text": "HTMLButtonElement | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "\"\"",
+              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
+            },
+            {
+              "kind": "field",
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
+              "attribute": "scrollable",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "showModal",
+              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "An optional value to indicate why the modal was closed."
+                }
+              ],
+              "description": "Programmatically close the modal."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically focus the modal."
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenUpdated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDismiss",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched when a modal is closed for any reason."
+            },
+            {
+              "name": "cancel",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the modal is open or not.",
+              "fieldName": "open"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the max-width of the modal when open.",
+              "fieldName": "size"
+            },
+            {
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
+              "fieldName": "scrollable"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "closeLabel",
+              "description": "Accessible label for the close button."
+            }
+          ],
+          "status": "ready",
+          "category": "overlay",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n",
+          "examples": [],
+          "dependencies": [
+            "icon",
+            "footer"
+          ],
+          "tagName": "nord-modal",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Modal",
+            "module": "src/modal/Modal.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-modal",
+          "declaration": {
+            "name": "Modal",
+            "module": "src/modal/Modal.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modal/ModalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ModalController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "openModals",
+              "privacy": "private",
+              "static": true,
+              "default": "new Stack<ModalController>()"
+            },
+            {
+              "kind": "field",
+              "name": "scrollBar",
+              "type": {
+                "text": "ScrollbarController"
+              },
+              "privacy": "private",
+              "default": "new ScrollbarController(host)"
+            },
+            {
+              "kind": "field",
+              "name": "focusTrap",
+              "type": {
+                "text": "FocusTrapController"
+              },
+              "privacy": "private",
+              "default": "new FocusTrapController(host)"
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "type": {
+                "text": "LightDismissController"
+              },
+              "privacy": "private",
+              "default": "new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "ModalControllerOptions"
+              },
+              "privacy": "private",
+              "default": "options"
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lastButton",
+              "type": {
+                "text": "HTMLButtonElement | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -9981,40 +10001,267 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-item/NavItem.ts",
+      "path": "src/nav-group/NavGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
-          "name": "NavItem",
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
           "slots": [
             {
-              "description": "The default slot used for the nav item's text.",
+              "description": "The default slot used for the nav items.",
               "name": ""
-            },
-            {
-              "description": "Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.",
-              "name": "subnav"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "subnavSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"subnav\")"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "active",
+              "name": "heading",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched whenever a nav item's state changes between open and closed.",
+              "name": "toggle"
+            },
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched whenever a nav item has been marked as active",
+              "name": "activate"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
+            }
+          ],
+          "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- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item 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 item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-nav-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/NavToggle.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behavior.",
+          "name": "NavToggle",
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "localization",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-nav-toggle\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "label",
+              "description": "Accessible label for the nav toggle button."
+            }
+          ],
+          "status": "new",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip with the toggle that’s labelled as `Toggle navigation`.\n- We recommend setting a keyboard shortcut that toggles the navigation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic button or toggle. Use the [Button component](/components/button/) instead.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [
+            "button",
+            "icon",
+            "visually-hidden"
+          ],
+          "tagName": "nord-nav-toggle",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-toggle",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  label: \"Toggle navigation\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/nav-toggle/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-item/NavItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
+          "name": "NavItem",
+          "slots": [
+            {
+              "description": "The default slot used for the nav item's text.",
+              "name": ""
+            },
+            {
+              "description": "Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.",
+              "name": "subnav"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "subnavSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"subnav\")"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
               },
               "default": "false",
               "description": "Used for indicating the current page. This gives a prominent background to the nav item,\nand marks the item as the current page for assistive technology.",
@@ -10259,153 +10506,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-toggle/NavToggle.ts",
+      "path": "src/navigation/Navigation.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behavior.",
-          "name": "NavToggle",
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "localization",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-nav-toggle\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "label",
-              "description": "Accessible label for the nav toggle button."
-            }
-          ],
-          "status": "new",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip with the toggle that’s labelled as `Toggle navigation`.\n- We recommend setting a keyboard shortcut that toggles the navigation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic button or toggle. Use the [Button component](/components/button/) instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [
-            "button",
-            "icon",
-            "visually-hidden"
-          ],
-          "tagName": "nord-nav-toggle",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NavToggle",
-            "module": "src/nav-toggle/NavToggle.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-nav-toggle",
-          "declaration": {
-            "name": "NavToggle",
-            "module": "src/nav-toggle/NavToggle.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/nav-toggle/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  label: \"Toggle navigation\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/nav-toggle/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "cssProperties": [
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
+          "cssProperties": [
             {
               "description": "Controls the background color of the navigation element.",
               "name": "--n-navigation-background-color",
@@ -10527,93 +10634,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/nav-group/NavGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
-          "name": "NavGroup",
-          "slots": [
-            {
-              "description": "The default slot used for the nav items.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "attribute": "heading",
-              "reflects": true
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched whenever a nav item's state changes between open and closed.",
-              "name": "toggle"
-            },
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched whenever a nav item has been marked as active",
-              "name": "activate"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "fieldName": "heading"
-            }
-          ],
-          "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- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item 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 item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-nav-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-nav-group",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/notification/Notification.ts",
@@ -10869,7 +10889,7 @@
               "kind": "field",
               "name": "dismiss",
               "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"mouseup\"),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })",
               "description": "Handle dismissal of the popout, clicking outside the target button and popout."
             },
             {
@@ -11329,45 +11349,232 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/qrcode/Qrcode.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
+          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
+          "name": "Qrcode",
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "canvas",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "computed",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "background",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "attribute": "correction",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "generate",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
+            {
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "background"
+            },
+            {
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "fieldName": "correction"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "image",
+          "displayName": "QR Code",
+          "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 people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-qrcode",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-qrcode",
+          "declaration": {
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/radio/Radio.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hintId",
+              "type": {
+                "text": "string"
               },
               "privacy": "protected",
               "default": "\"hint\"",
@@ -12072,214 +12279,27 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/qrcode/Qrcode.ts",
+      "path": "src/range/Range.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
-          "name": "Qrcode",
-          "members": [
-            {
-              "kind": "field",
-              "name": "canvas",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
+          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
+          "name": "Range",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "computed",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Controls the size of the thumb.",
+              "name": "--n-range-thumb-size",
+              "default": "20px"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "attribute": "value",
-              "reflects": true
+              "description": "Controls the color of the portion of the track that represents the current value.",
+              "name": "--n-range-track-color-active",
+              "default": "var(--n-color-accent)"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "background",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "attribute": "correction",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "generate",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "fieldName": "value"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "background"
-            },
-            {
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "fieldName": "correction"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "image",
-          "displayName": "QR Code",
-          "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 people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-qrcode",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-qrcode",
-          "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/range/Range.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
-          "name": "Range",
-          "cssProperties": [
-            {
-              "description": "Controls the size of the thumb.",
-              "name": "--n-range-thumb-size",
-              "default": "20px"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the current value.",
-              "name": "--n-range-track-color-active",
-              "default": "var(--n-color-accent)"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the remaining value.",
-              "name": "--n-range-track-color-inactive",
-              "default": "var(--n-color-border-strong)"
+              "description": "Controls the color of the portion of the track that represents the remaining value.",
+              "name": "--n-range-track-color-inactive",
+              "default": "var(--n-color-border-strong)"
             },
             {
               "description": "Controls the height of the track.",
@@ -14445,86 +14465,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/skeleton/Skeleton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-skeleton-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-color",
-              "default": "var(--n-color-border)"
-            },
-            {
-              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-sheen-color",
-              "default": "var(--n-color-border-strong)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "attribute": "effect",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "fieldName": "effect"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "new",
-          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-skeleton",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-skeleton",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/spinner/Spinner.ts",
@@ -14791,17 +14731,97 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tab/Tab.ts",
+      "path": "src/skeleton/Skeleton.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The interactive tab button for use within the tab group component.",
-          "name": "Tab",
+          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
+          "name": "Skeleton",
           "cssProperties": [
             {
-              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
-              "name": "--n-tab-color",
-              "default": "var(--n-color-text-weak)"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-skeleton-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-color",
+              "default": "var(--n-color-border)"
+            },
+            {
+              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-sheen-color",
+              "default": "var(--n-color-border-strong)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "\"pulse\" | \"sheen\" | undefined"
+              },
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "attribute": "effect",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "\"pulse\" | \"sheen\" | undefined"
+              },
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "fieldName": "effect"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-skeleton",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab/Tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The interactive tab button for use within the tab group component.",
+          "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
+              "name": "--n-tab-color",
+              "default": "var(--n-color-text-weak)"
             },
             {
               "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
@@ -15178,158 +15198,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/table/Table.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
-          "name": "Table",
-          "cssProperties": [
-            {
-              "description": "Controls the padding around the table cells.",
-              "name": "--n-table-td-padding",
-              "default": "calc(var(--n-space-m) * 0.95)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-table-border-radius",
-              "default": "var(--n-border-radius-s)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot which holds the HTML `<table>` element.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "attribute": "density",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrollSnap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "attribute": "scroll-snap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "striped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "attribute": "striped",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderStyles",
-              "privacy": "private",
-              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected",
-              "description": "opt out of shadow dom"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
-            },
-            {
-              "name": "scroll-snap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "fieldName": "scrollSnap"
-            },
-            {
-              "name": "striped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "fieldName": "striped"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "list",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
-          "examples": [
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and tanstack table"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and ag grid"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and tanstack table"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and ag grid"
-            }
-          ],
-          "dependencies": [],
-          "tagName": "nord-table",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-table",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tag/Tag.ts",
@@ -15725,7 +15593,374 @@
           "dependencies": [
             "icon"
           ],
-          "tagName": "nord-tag",
+          "tagName": "nord-tag",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tag",
+            "module": "src/tag/Tag.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tag",
+          "declaration": {
+            "name": "Tag",
+            "module": "src/tag/Tag.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tag/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  removeLabel: \"Remove\",\n}"
+        }
+      ],
+      "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
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "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"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "draft",
+          "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/table/Table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
+          "name": "Table",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the table cells.",
+              "name": "--n-table-td-padding",
+              "default": "calc(var(--n-space-m) * 0.95)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-table-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot which holds the HTML `<table>` element.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollSnap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "attribute": "scroll-snap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "attribute": "striped",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+            },
+            {
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "fieldName": "density"
+            },
+            {
+              "name": "scroll-snap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "fieldName": "scrollSnap"
+            },
+            {
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "fieldName": "striped"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "list",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
+          "examples": [
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and ag grid"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and ag grid"
+            }
+          ],
+          "dependencies": [],
+          "tagName": "nord-table",
           "customElement": true
         }
       ],
@@ -15734,40 +15969,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tag",
-          "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tag/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  removeLabel: \"Remove\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "nord-table",
           "declaration": {
-            "name": "localization",
-            "module": "src/tag/localization.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         }
       ]
@@ -16757,257 +16968,42 @@
               "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
             {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
-            },
-            {
-              "name": "TextSelectableMixin",
-              "module": "/src/common/mixins/TextSelectableMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "remainingCharacters",
-              "description": "A function which receives the number of remaining characters and returns a string to be used as the aria-live message."
-            }
-          ],
-          "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow text input where the expected input is long.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is short. Use input component instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nTextarea labels act as a title for the text field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing textarea labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide Description</div>\n\nWhen a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in textarea labels:\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide description:</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-textarea",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-textarea",
-          "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/textarea/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  remainingCharacters: (remainder: number) => `Characters remaining: ${remainder}`,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/textarea/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tag-group/TagGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",
-          "name": "TagGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
-              "name": "--n-tag-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
-              "name": "--n-tag-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tag group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dirController",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the tag group.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the tag group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "attribute": "wrap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "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": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
             },
             {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the tags are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "fieldName": "wrap"
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
             },
             {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "mixins": [
+              "name": "TextSelectableMixin",
+              "module": "/src/common/mixins/TextSelectableMixin.js"
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "localization": [],
-          "status": "draft",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together selectable tags.\n- Use the appropriate `role` attribute on the tag group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the tag group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than selectable tags and in some instances visually hidden components to the tag group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                     |\n| --------- | ------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of tags to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the tags to space them out evenly.                 |\n",
+          "localization": [
+            {
+              "name": "remainingCharacters",
+              "description": "A function which receives the number of remaining characters and returns a string to be used as the aria-live message."
+            }
+          ],
+          "status": "ready",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow text input where the expected input is long.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is short. Use input component instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nTextarea labels act as a title for the text field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing textarea labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide Description</div>\n\nWhen a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in textarea labels:\n\n<div class=\"n-usage n-usage-do\">Provide description</div>\n<div class=\"n-usage n-usage-dont\">Provide description:</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-tag-group",
+          "tagName": "nord-textarea",
           "customElement": true
         }
       ],
@@ -17016,16 +17012,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tag-group",
+          "name": "nord-textarea",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/textarea/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  remainingCharacters: (remainder: number) => `Characters remaining: ${remainder}`,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/textarea/localization.ts"
           }
         }
       ]
@@ -17186,6 +17206,93 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/toast-group/ToastGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
+          "name": "ToastGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place toasts.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "addToast",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text/message of the toast."
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ToastOptions"
+                  },
+                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
+                }
+              ],
+              "description": "Convenience method for creating and adding a toast to the group.",
+              "return": {
+                "type": {
+                  "text": "Toast"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "toast"
+          ],
+          "tagName": "nord-toast-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast-group",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toggle/Toggle.ts",
@@ -17902,93 +18009,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/toast-group/ToastGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
-          "name": "ToastGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place toasts.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "addToast",
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text/message of the toast."
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ToastOptions"
-                  },
-                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
-                }
-              ],
-              "description": "Convenience method for creating and adding a toast to the group.",
-              "return": {
-                "type": {
-                  "text": "Toast"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "toast"
-          ],
-          "tagName": "nord-toast-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast-group",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tooltip/Tooltip.ts",
@@ -18950,7 +18970,7 @@
             },
             {
               "kind": "field",
-              "name": "handleMouseUp",
+              "name": "handleClick",
               "privacy": "private"
             }
           ]