@nordhealth/components 3.14.1 → 3.15.0

package/custom-elements.json

@@ -6669,6 +6669,12 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "endSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"end\")"
+            },
             {
               "kind": "field",
               "name": "href",
@@ -9083,6 +9089,211 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/message/Message.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"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-message\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "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": "unread",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Mark the message as unread. By default messages are read.",
+              "attribute": "unread",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "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": "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",
@@ -9340,256 +9551,51 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/message/Message.ts",
+      "path": "src/modal/Modal.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",
+          "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 border color of the message, using our [color tokens](/tokens/#color).",
-              "name": "--n-message-border-color",
-              "default": "var(--n-color-border)"
+              "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": "The message content.",
+              "description": "Default slot",
               "name": ""
             },
             {
-              "description": "Used to place content after the message. Typically used for a timestamp.",
+              "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": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-message\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "href",
+              "name": "modal",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLDivElement"
               },
-              "description": "The url the message should link to.",
-              "attribute": "href",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "attribute": "unread",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The url the message should link to.",
-              "fieldName": "href"
-            },
-            {
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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": "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/modal/Modal.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",
-          "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": "modal",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -9973,93 +9979,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/nav-item/NavItem.ts",
@@ -10495,55 +10414,143 @@
           ],
           "slots": [
             {
-              "description": "The main section of the sidebar, for holding nav components.",
+              "description": "The main section of the sidebar, for holding nav components.",
+              "name": ""
+            },
+            {
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
+            {
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "allowItemsToRemainOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "stickyFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigations's footer has sticky positioning.",
+              "attribute": "sticky-footer",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleActivate",
+              "privacy": "private"
+            }
+          ],
+          "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": "sticky-footer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigations's footer has sticky positioning.",
+              "fieldName": "stickyFooter"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\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 place a `<nav>` element inside the navigation component, as it already contains one internally.\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": [
+            "nav-item"
+          ],
+          "tagName": "nord-navigation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-navigation",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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": ""
-            },
-            {
-              "description": "The top section of the sidebar.",
-              "name": "header"
-            },
-            {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "allowItemsToRemainOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "stickyFooter",
+              "name": "heading",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the navigations's footer has sticky positioning.",
-              "attribute": "sticky-footer",
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "handleActivate",
-              "privacy": "private"
             }
           ],
           "events": [
@@ -10564,13 +10571,12 @@
           ],
           "attributes": [
             {
-              "name": "sticky-footer",
+              "name": "heading",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the navigations's footer has sticky positioning.",
-              "fieldName": "stickyFooter"
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
             }
           ],
           "superclass": {
@@ -10580,12 +10586,12 @@
           "localization": [],
           "status": "ready",
           "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\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 place a `<nav>` element inside the navigation component, as it already contains one internally.\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",
+          "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": [
-            "nav-item"
+            "icon"
           ],
-          "tagName": "nord-navigation",
+          "tagName": "nord-nav-group",
           "customElement": true
         }
       ],
@@ -10594,16 +10600,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-navigation",
+          "name": "nord-nav-group",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
           }
         }
       ]
@@ -11261,217 +11267,31 @@
                 "text": "number | undefined"
               },
               "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "fieldName": "value"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "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 to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-progress-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/qrcode/Qrcode.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"
-            },
-            {
-              "kind": "field",
-              "name": "computed",
-              "type": {
-                "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"
+              "fieldName": "value"
             },
             {
-              "name": "color",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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"
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
             },
             {
-              "name": "background",
+              "name": "label",
               "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"
-            },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
             {
-              "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"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -11480,12 +11300,11 @@
           },
           "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",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-qrcode",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -11494,16 +11313,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-qrcode",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         }
       ]
@@ -11678,6 +11497,21 @@
               "name": "handleFocus",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "formData",
@@ -12009,6 +11843,19 @@
               "description": "Controls whether the checkbox is checked or not.",
               "fieldName": "checked"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
             {
               "name": "label",
               "type": {
@@ -12149,6 +11996,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
             {
               "name": "FormAssociatedMixin",
               "module": "/src/common/mixins/FormAssociatedMixin.js"
@@ -12187,17 +12038,204 @@
               }
             },
             {
-              "name": "change",
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-radio",
+          "declaration": {
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/qrcode/Qrcode.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"
+            },
+            {
+              "kind": "field",
+              "name": "computed",
+              "type": {
+                "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": "NordEvent"
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": [
@@ -12205,16 +12243,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-radio",
+          "name": "nord-qrcode",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         }
       ]
@@ -15663,240 +15701,31 @@
             },
             {
               "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "removeLabel",
-              "description": "Accessible label for the remove button."
-            }
-          ],
-          "status": "draft",
-          "category": "text",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for labeling, categorizing, or organizing objects.\n- Ensure there is enough space around tags when they are interactive.\n- Always position tags so that it’s easy to understand what object they’re related to.\n- Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for showing the status of an object, use the [badge component](/components/badge/) instead.\n- Don’t use when you want to highlight something that has been added recently, use the [badge component](/components/badge/) instead.\n- Don’t use alternatives to existing tag variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name         | Purpose                                           |\n| ------------ | ------------------------------------------------- |\n| `default`    | The default variant for a non-interactive tag.    |\n| `removable`  | Used for tags that can be removed by the user.    |\n| `selectable` | Used for tags that can be selected or deselected. |\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-tag",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tag",
-          "declaration": {
-            "name": "Tag",
-            "module": "src/tag/Tag.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tag/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\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": "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": [
+              "module": "/src/common/mixins/InputMixin.js"
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "localization": [],
+          "localization": [
+            {
+              "name": "removeLabel",
+              "description": "Accessible label for the remove button."
+            }
+          ],
           "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",
+          "category": "text",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for labeling, categorizing, or organizing objects.\n- Ensure there is enough space around tags when they are interactive.\n- Always position tags so that it’s easy to understand what object they’re related to.\n- Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for showing the status of an object, use the [badge component](/components/badge/) instead.\n- Don’t use when you want to highlight something that has been added recently, use the [badge component](/components/badge/) instead.\n- Don’t use alternatives to existing tag variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nTags should use short and clear labels for easy scanning. They should be concise and informative:\n\n<div class=\"n-usage n-usage-do\">Has seizures</div>\n<div class=\"n-usage n-usage-dont\">This dog has seizures often</div>\n\nWhen writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">Service Dog</div>\n\nAvoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Service dog</div>\n<div class=\"n-usage n-usage-dont\">A service dog</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name         | Purpose                                           |\n| ------------ | ------------------------------------------------- |\n| `default`    | The default variant for a non-interactive tag.    |\n| `removable`  | Used for tags that can be removed by the user.    |\n| `selectable` | Used for tags that can be selected or deselected. |\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tag-group",
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-tag",
           "customElement": true
         }
       ],
@@ -15905,16 +15734,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "name": "Tag",
+            "module": "src/tag/Tag.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tag-group",
+          "name": "nord-tag",
           "declaration": {
-            "name": "TagGroup",
-            "module": "src/tag-group/TagGroup.ts"
+            "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"
           }
         }
       ]
@@ -16912,34 +16765,249 @@
               "module": "/src/common/mixins/ReadonlyMixin.js"
             },
             {
-              "name": "TextSelectableMixin",
-              "module": "/src/common/mixins/TextSelectableMixin.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": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.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": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "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": [
-            {
-              "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",
+          "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-textarea",
+          "tagName": "nord-tag-group",
           "customElement": true
         }
       ],
@@ -16948,40 +17016,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.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",
+          "name": "nord-tag-group",
           "declaration": {
-            "name": "localization",
-            "module": "src/textarea/localization.ts"
+            "name": "TagGroup",
+            "module": "src/tag-group/TagGroup.ts"
           }
         }
       ]
@@ -17142,93 +17186,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/toggle/Toggle.ts",
@@ -17945,6 +17902,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/tooltip/Tooltip.ts",