@nordhealth/components 2.17.1 → 3.1.0

package/custom-elements.json

@@ -167,6 +167,14 @@
             "module": "\"./header/Header.js\""
           }
         },
+        {
+          "kind": "js",
+          "name": "Message",
+          "declaration": {
+            "name": "default",
+            "module": "\"./message/Message.js\""
+          }
+        },
         {
           "kind": "js",
           "name": "NavGroup",
@@ -414,6 +422,14 @@
             "name": "default",
             "module": "\"./notification-group/NotificationGroup.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "TopBar",
+          "declaration": {
+            "name": "default",
+            "module": "\"./top-bar/TopBar.js\""
+          }
         }
       ]
     },
@@ -435,6 +451,11 @@
               "description": "Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).",
               "name": "--n-avatar-size",
               "default": "var(--n-size-icon-l)"
+            },
+            {
+              "description": "Controls the box shadow for the avatar.",
+              "name": "--n-avatar-box-shadow",
+              "default": "none"
             }
           ],
           "members": [
@@ -619,6 +640,10 @@
             {
               "description": "The badge content.",
               "name": ""
+            },
+            {
+              "description": "Used to place an icon at the start of badge.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -628,248 +653,59 @@
               "type": {
                 "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
               },
-              "default": "\"neutral\"",
               "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
               "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "progress",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "attribute": "progress"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "default": "\"neutral\"",
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "fieldName": "type"
-            },
-            {
-              "name": "progress",
+              "name": "variant",
               "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
               },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "fieldName": "progress"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "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 established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</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| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "attribute": "variant",
+              "reflects": true
             },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "strong",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "boolean"
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "attribute": "strong",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
+              "name": "type",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
               },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
               },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "_warningLogged",
+              "name": "strong",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true,
               "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "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"
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "fieldName": "strong"
             }
           ],
           "superclass": {
@@ -877,12 +713,12 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "draft",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "status": "ready",
+          "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 established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</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| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-button-group",
+          "tagName": "nord-badge",
           "customElement": true
         }
       ],
@@ -891,16 +727,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-button-group",
+          "name": "nord-badge",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
           }
         }
       ]
@@ -973,6 +809,11 @@
               "description": "Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).",
               "name": "--n-button-min-block-size",
               "default": "var(--n-space-xl)"
+            },
+            {
+              "description": "Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.",
+              "name": "--n-button-toggle-icon-color",
+              "default": "var(--n-color-icon)"
             }
           ],
           "slots": [
@@ -1017,10 +858,10 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
               },
               "default": "\"default\"",
-              "description": "The style variant of the button.\n\n**Variant `switch` has been deprecated.**",
+              "description": "The style variant of the button.",
               "attribute": "variant",
               "reflects": true
             },
@@ -1226,6 +1067,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -1282,10 +1124,10 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
               },
               "default": "\"default\"",
-              "description": "The style variant of the button.\n\n**Variant `switch` has been deprecated.**",
+              "description": "The style variant of the button.",
               "fieldName": "variant"
             },
             {
@@ -1420,7 +1262,7 @@
           "localization": [],
           "status": "ready",
           "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- Only use one primary button per section, as a main call-to-action.\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a primary button in every row of a table.\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n| `switch`   | **Deprecated:** Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                               |\n\n---\n\n## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n<img src=\"/img/components/button/start-slot.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button with icon in start slot\" />\n\nWhen a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot:\n\n<img src=\"/img/components/button/dropdown.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Dropdown button\" />\n\nEach button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n<img src=\"/img/components/button/icon-sizes.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button icon sizes\" />\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n<img src=\"/img/components/button/create.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Create/add type primary action with icon\" />\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\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- Only use one primary button per section, as a main call-to-action.\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a primary button in every row of a table.\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n<img src=\"/img/components/button/start-slot.png\" class=\"n-border n-border-radius\"  style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button with icon in start slot\" />\n\nWhen a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot:\n\n<img src=\"/img/components/button/dropdown.png\" class=\"n-border n-border-radius\"  style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Dropdown button\" />\n\nEach button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n<img src=\"/img/components/button/icon-sizes.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button icon sizes\" />\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n<img src=\"/img/components/button/create.png\" class=\"n-border n-border-radius\"  style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Create/add type primary action with icon\" />\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n",
           "examples": [],
           "dependencies": [
             "spinner"
@@ -1450,12 +1292,200 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/Calendar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
@@ -2101,6 +2131,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -2403,6 +2434,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -2412,6 +2444,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -2463,6 +2496,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -2829,16 +2863,6 @@
               "description": "Show or hide the command menu.",
               "attribute": "open"
             },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Type a command or search...\"",
-              "description": "Hint text to display in the Command Menu search field.",
-              "attribute": "placeholder"
-            },
             {
               "kind": "field",
               "name": "commands",
@@ -2898,7 +2922,8 @@
               "type": {
                 "text": "ICommandMenuAction"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -3096,15 +3121,6 @@
               "default": "false",
               "description": "Show or hide the command menu.",
               "fieldName": "open"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Type a command or search...\"",
-              "description": "Hint text to display in the Command Menu search field.",
-              "fieldName": "placeholder"
             }
           ],
           "superclass": {
@@ -3143,6 +3159,10 @@
             {
               "name": "tip",
               "description": "A hint tip that describes some approaches to find a command when there are no matching results."
+            },
+            {
+              "name": "placeholder",
+              "description": "Hint text to display in the Command Menu search field."
             }
           ],
           "status": "ready",
@@ -3383,7 +3403,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  instructions: \"Press 'Enter' to confirm your input or 'Escape' to cancel\",\n  inputLabel: \"Type the name of a command to run.\",\n  footerArrowKeys: \"Navigate\",\n  footerEnterKey: \"Select\",\n  footerEscapeKey: \"Esc to dismiss\",\n  footerBackspaceKey: \"Move to parent\",\n  noResults: (searchTerm: string) => `No results for “${searchTerm}”`,\n  tip: \"Search tips: some search terms require an exact match. Try typing the entire command name, or use a different word or phrase.\",\n}"
+          "default": "{\n  instructions: \"Press 'Enter' to confirm your input or 'Escape' to cancel\",\n  inputLabel: \"Type the name of a command to run.\",\n  footerArrowKeys: \"Navigate\",\n  footerEnterKey: \"Select\",\n  footerEscapeKey: \"Esc to dismiss\",\n  footerBackspaceKey: \"Move to parent\",\n  noResults: (searchTerm: string) => `No results for “${searchTerm}”`,\n  tip: \"Search tips: some search terms require an exact match. Try typing the entire command name, or use a different word or phrase.\",\n  placeholder: \"Type a command or search…\",\n}"
         }
       ],
       "exports": [
@@ -4854,17 +4874,6 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "attribute": "max"
             },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"left\" | \"right\""
-              },
-              "default": "\"right\"",
-              "description": "This is deprecated, the popout will now adjust automatically based on available space.\nForces the opening direction of the calendar modal to be always left or right.",
-              "deprecated": "true",
-              "attribute": "direction"
-            },
             {
               "kind": "field",
               "name": "firstDayOfWeek",
@@ -5050,6 +5059,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5272,6 +5282,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5281,6 +5292,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5333,6 +5345,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -5450,16 +5463,6 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "fieldName": "max"
             },
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"left\" | \"right\""
-              },
-              "default": "\"right\"",
-              "description": "This is deprecated, the popout will now adjust automatically based on available space.\nForces the opening direction of the calendar modal to be always left or right.",
-              "deprecated": "true",
-              "fieldName": "direction"
-            },
             {
               "name": "first-day-of-week",
               "type": {
@@ -5873,20 +5876,6 @@
               "description": "Controls the padding of the drawer component.",
               "attribute": "padding",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -5900,18 +5889,12 @@
               "fieldName": "padding"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
           "localization": [],
-          "status": "draft",
+          "status": "new",
           "category": "structure",
           "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t put cards inside the drawer. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](/components/layout/).\n",
           "examples": [],
@@ -5962,18 +5945,46 @@
             {
               "description": "Used to place the toggle for dropdown.",
               "name": "toggle"
+            },
+            {
+              "description": "Optional slot that holds a header for the dropdown.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "popout",
-              "type": {
-                "text": "Popout"
-              },
-              "privacy": "private"
-            },
-            {
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "list",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "popout",
+              "type": {
+                "text": "Popout"
+              },
+              "privacy": "private"
+            },
+            {
               "kind": "field",
               "name": "expand",
               "type": {
@@ -6018,6 +6029,11 @@
               "name": "handleClose",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleOpenChange",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "hide",
@@ -6525,12 +6541,14 @@
             {
               "kind": "field",
               "name": "hasHint",
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
               "name": "hasError",
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             }
           ],
           "attributes": [
@@ -7066,14 +7084,30 @@
             {
               "kind": "field",
               "name": "startSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"start\")"
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "endSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "startObserver",
               "privacy": "private",
-              "default": "new SlotController(this, \"end\")"
+              "default": "new ResizeController(this, () => this.startSlot)"
+            },
+            {
+              "kind": "field",
+              "name": "endObserver",
+              "privacy": "private",
+              "default": "new ResizeController(this, () => this.endSlot)"
             },
             {
               "kind": "field",
@@ -7191,6 +7225,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -7413,6 +7448,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -7422,6 +7458,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -7502,6 +7539,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -7870,6 +7908,10 @@
               "description": "Used to place content inside the navigation sidebar.",
               "name": "nav"
             },
+            {
+              "description": "Used to place the [Top Bar](../top-bar/) component.",
+              "name": "top-bar"
+            },
             {
               "description": "Used to place content inside the header section.",
               "name": "header"
@@ -7892,12 +7934,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "resizeObserver",
-              "privacy": "private",
-              "default": "new ResizeObserver(entries => {\n    this.headerSize = Math.round(entries[0].borderBoxSize[0].blockSize)\n  })"
-            },
             {
               "kind": "field",
               "name": "navSlot",
@@ -7910,6 +7946,18 @@
               "privacy": "private",
               "default": "new SlotController(this, \"drawer\")"
             },
+            {
+              "kind": "field",
+              "name": "topBarSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"top-bar\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
             {
               "kind": "field",
               "name": "direction",
@@ -7928,14 +7976,6 @@
               "privacy": "private",
               "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })"
             },
-            {
-              "kind": "field",
-              "name": "stickyElement",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "navEl",
@@ -7971,15 +8011,6 @@
               "name": "wideScreen",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "headerSize",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
             {
               "kind": "field",
               "name": "navOpen",
@@ -7990,16 +8021,6 @@
               "attribute": "nav-open",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "navToggle",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID reference of element used to toggle the navigation.\nThis is deprecated, the layout component will now render its own nav toggle to simplify usage.",
-              "deprecated": "true",
-              "attribute": "nav-toggle"
-            },
             {
               "kind": "field",
               "name": "padding",
@@ -8028,13 +8049,19 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\nA narrow viewport is considered to be less than 768px wide."
+              "description": "A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\nA narrow viewport is considered to be less than 768px wide.",
+              "readonly": true
             },
             {
               "kind": "method",
               "name": "renderNavToggle",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderNavCollapse",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleNavWidthChange",
@@ -8150,19 +8177,6 @@
               "name": "handleTransitionEnd",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "isNavToggle",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "node",
-                  "type": {
-                    "text": "EventTarget | null"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleKeyboardResize",
@@ -8230,15 +8244,6 @@
               "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
               "fieldName": "navOpen"
             },
-            {
-              "name": "nav-toggle",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID reference of element used to toggle the navigation.\nThis is deprecated, the layout component will now render its own nav toggle to simplify usage.",
-              "deprecated": "true",
-              "fieldName": "navToggle"
-            },
             {
               "name": "padding",
               "type": {
@@ -8265,9 +8270,10 @@
           "localization": [],
           "status": "ready",
           "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n\n---\n\n## Theming\n\nPlease see the [Accent color](/themes/#accent-color) and [Top Bar theming](/themes/#top-bar-theming) sections in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#accent-color\">Theming Guidelines</nord-button>\n",
           "examples": [],
           "dependencies": [
+            "icon",
             "nav-toggle"
           ],
           "tagName": "nord-layout",
@@ -8321,12 +8327,14 @@
             {
               "kind": "field",
               "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence"
+              "description": "The lang of the document or element, with element taking precedence",
+              "readonly": true
             },
             {
               "kind": "field",
               "name": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -8388,7 +8396,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n  \"nord-notification\": notificationLocalization,\n}"
+          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n  \"nord-notification\": notificationLocalization,\n  \"nord-message\": messageLocalization,\n}"
         }
       ],
       "exports": [
@@ -8412,7 +8420,7 @@
           "type": {
             "text": "Translation"
           },
-          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n\n  \"nord-notification\": {\n    dismissLabel: \"Sulje ilmoitus\",\n  },\n}"
+          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n    placeholder: \"Kirjoita komento tai hakusana…\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n\n  \"nord-notification\": {\n    dismissLabel: \"Sulje ilmoitus\",\n  },\n\n  \"nord-message\": {\n    unreadLabel: \"Lukematon\",\n  },\n}"
         }
       ],
       "exports": [
@@ -8548,151 +8556,74 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modal/Modal.ts",
+      "path": "src/message/Message.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
-          "name": "Modal",
+          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
+          "name": "Message",
           "cssProperties": [
             {
-              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-inline",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-block",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the width of the modal.",
-              "name": "--n-modal-max-inline-size",
-              "default": "620px"
+              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
+              "name": "--n-message-border-color",
+              "default": "var(--n-color-border)"
             }
           ],
           "slots": [
             {
-              "description": "Default slot",
+              "description": "The message content.",
               "name": ""
             },
             {
-              "description": "Slot which holds the header of the modal, positioned next to the close button.",
-              "name": "header"
-            },
-            {
-              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
+              "description": "Used to place content after the message. Typically used for a timestamp.",
               "name": "footer"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "modal",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "featureSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"feature\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
             {
               "kind": "field",
               "name": "localize",
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-modal\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "modalController",
-              "privacy": "private",
-              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+              "default": "new LocalizeController<\"nord-message\">(this)"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the modal is open or not.",
-              "attribute": "open",
+              "description": "The url the message should link to.",
+              "attribute": "href",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "highlight",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "boolean | undefined"
               },
-              "default": "\"m\"",
-              "description": "Controls the max-width of the modal when open.",
-              "attribute": "size",
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "attribute": "highlight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "returnValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
-            },
-            {
-              "kind": "field",
-              "name": "scrollable",
+              "name": "unread",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
-              "attribute": "scrollable",
+              "description": "Mark the message as unread. By default messages are read.",
+              "attribute": "unread",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "showModal",
-              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "parameters": [
-                {
-                  "name": "returnValue",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "An optional value to indicate why the modal was closed."
-                }
-              ],
-              "description": "Programmatically close the modal."
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
@@ -8707,30 +8638,312 @@
                   "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "description": "Programmatically focus the modal."
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleOpenUpdated",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "prev",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleDismiss",
-              "privacy": "private"
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "name": "close",
+              "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": "draft",
+          "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"
+            },
+            {
+              "kind": "field",
+              "name": "backdrop",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "featureSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"feature\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-modal\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "modalController",
+              "privacy": "private",
+              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the modal is open or not.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the max-width of the modal when open.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "returnValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
+            },
+            {
+              "kind": "field",
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
+              "attribute": "scrollable",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "showModal",
+              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "An optional value to indicate why the modal was closed."
+                }
+              ],
+              "description": "Programmatically close the modal."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically focus the modal."
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenUpdated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDismiss",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
               "type": {
                 "text": "NordEvent"
               },
@@ -9168,6 +9381,11 @@
               "name": "toggleOpen",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleActiveChange",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "focusableRef",
@@ -9222,6 +9440,12 @@
                 "text": "NordEvent"
               },
               "description": "Dispatched whenever a nav item's state changes between open and closed."
+            },
+            {
+              "name": "activate",
+              "type": {
+                "text": "NordEvent"
+              }
             }
           ],
           "attributes": [
@@ -9313,7 +9537,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behaviour.",
+          "description": "Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behavior.",
           "name": "NavToggle",
           "members": [
             {
@@ -9455,6 +9679,13 @@
           "kind": "class",
           "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
           "name": "Navigation",
+          "cssProperties": [
+            {
+              "description": "Controls the background color of the navigation element.",
+              "name": "--n-navigation-background-color",
+              "default": "var(--n-color-nav-surface)"
+            }
+          ],
           "slots": [
             {
               "description": "The main section of the sidebar, for holding nav components.",
@@ -9475,6 +9706,17 @@
               "name": "headerSlot",
               "privacy": "private",
               "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "handleActivate",
+              "privacy": "private"
             }
           ],
           "superclass": {
@@ -9486,7 +9728,9 @@
           "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": [],
+          "dependencies": [
+            "nav-item"
+          ],
           "tagName": "nord-navigation",
           "customElement": true
         }
@@ -10543,6 +10787,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -10780,6 +11025,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -10789,6 +11035,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -10840,6 +11087,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -11253,6 +11501,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11458,6 +11707,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11467,6 +11717,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11547,6 +11798,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -11899,6 +12151,10 @@
             {
               "description": "Optional slot that holds error text for the input.",
               "name": "error"
+            },
+            {
+              "description": "Used to place an icon at the start of select.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -11906,6 +12162,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11944,7 +12201,8 @@
             {
               "kind": "field",
               "name": "options",
-              "privacy": "private"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -12236,6 +12494,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12245,6 +12504,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12310,6 +12570,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -12673,16 +12934,117 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/spinner/Spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "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 for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-skeleton",
+          "name": "nord-spinner",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         }
       ]
@@ -12742,18 +13104,6 @@
               "attribute": "align-items",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "responsive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
-              "deprecated": "true",
-              "attribute": "responsive",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "wrap",
@@ -12804,16 +13154,6 @@
               "description": "How to align the child items inside the stack.",
               "fieldName": "alignItems"
             },
-            {
-              "name": "responsive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
-              "deprecated": "true",
-              "fieldName": "responsive"
-            },
             {
               "name": "wrap",
               "type": {
@@ -12865,107 +13205,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/spinner/Spinner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
-          "name": "Spinner",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "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 for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-spinner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab/Tab.ts",
@@ -13172,7 +13411,8 @@
               "kind": "field",
               "name": "initialSelectedTab",
               "privacy": "private",
-              "description": "Get the selected tab button, or the first tab button."
+              "description": "Get the selected tab button, or the first tab button.",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -13320,18 +13560,170 @@
               "name": ""
             }
           ],
-          "members": [],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-panel",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/table/Table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
+          "name": "Table",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the table cells.",
+              "name": "--n-table-td-padding",
+              "default": "calc(var(--n-space-m) * 0.95)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-table-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot which holds the HTML `<table>` element.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollSnap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "attribute": "scroll-snap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "attribute": "striped",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+            },
+            {
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "fieldName": "density"
+            },
+            {
+              "name": "scroll-snap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "fieldName": "scrollSnap"
+            },
+            {
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "fieldName": "striped"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
           "localization": [],
           "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
+          "category": "list",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
+          "examples": [
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and ag grid"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and ag grid"
+            }
+          ],
           "dependencies": [],
-          "tagName": "nord-tab-panel",
+          "tagName": "nord-table",
           "customElement": true
         }
       ],
@@ -13340,16 +13732,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-tab-panel",
+          "name": "nord-table",
           "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         }
       ]
@@ -13551,6 +13943,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -13760,6 +14153,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -13769,6 +14163,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -13849,6 +14244,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -14125,227 +14521,51 @@
               "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,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "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/table/Table.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
-          "name": "Table",
-          "cssProperties": [
-            {
-              "description": "Controls the padding around the table cells.",
-              "name": "--n-table-td-padding",
-              "default": "calc(var(--n-space-m) * 0.95)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-table-border-radius",
-              "default": "var(--n-border-radius-s)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot which holds the HTML `<table>` element.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "attribute": "density",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrollSnap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "attribute": "scroll-snap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "striped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "attribute": "striped",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderStyles",
-              "privacy": "private",
-              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected",
-              "description": "opt out of shadow dom"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
-            },
-            {
-              "name": "scroll-snap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "fieldName": "scrollSnap"
-            },
-            {
-              "name": "striped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "fieldName": "striped"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "list",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
-          "examples": [
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and tanstack table"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and ag grid"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and tanstack table"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and ag grid"
+              "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-table",
-          "customElement": true
+          "tagName": "nord-textarea",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -14353,16 +14573,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-table",
+          "name": "nord-textarea",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "Textarea",
+            "module": "src/textarea/Textarea.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/textarea/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  remainingCharacters: (remainder: number) => `Characters remaining: ${remainder}`,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/textarea/localization.ts"
           }
         }
       ]
@@ -14627,6 +14871,7 @@
               "kind": "field",
               "name": "formValue",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -14925,6 +15170,7 @@
               "kind": "field",
               "name": "hasHint",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -14934,6 +15180,7 @@
               "kind": "field",
               "name": "hasError",
               "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -14985,6 +15232,7 @@
               "kind": "field",
               "name": "form",
               "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
@@ -15526,6 +15774,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/top-bar/TopBar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",
+          "name": "TopBar",
+          "slots": [
+            {
+              "description": "Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for menus, buttons, toggles, etc.",
+              "name": "end"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "draft",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. [View an example](/components/top-bar/?example=color).\n- If your application allows it, include search to help users find resources and navigate.\n- Include a user menu in the end slot of the top bar.\n- Use the [layout component](/components/layout/?example=top-bar) to provide structure for the top bar component. We’ve also created [an example which shows full theming capabilities](/components/layout/?example=theming).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for global navigation. Use the [navigation component](/components/navigation/) instead.\n- Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.\n- Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. [View an example](/components/top-bar/?example=color).\n\n</div>\n\n---\n\n## Theming\n\nPlease see the [Top Bar theming](/themes/#top-bar-theming) section in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#top-bar-theming\">Theming Guidelines</nord-button>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-top-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TopBar",
+            "module": "src/top-bar/TopBar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-top-bar",
+          "declaration": {
+            "name": "TopBar",
+            "module": "src/top-bar/TopBar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/visually-hidden/VisuallyHidden.ts",
@@ -15604,15 +15925,18 @@
               "name": "dir",
               "type": {
                 "text": "WritingDirection"
-              }
+              },
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "isLTR"
+              "name": "isLTR",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "isRTL"
+              "name": "isRTL",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -15688,7 +16012,7 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                    "text": "(this: Window, ev: WindowEventMap[K]) => void"
                   }
                 },
                 {
@@ -15724,7 +16048,7 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => void"
                   }
                 },
                 {
@@ -15760,7 +16084,7 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => void"
                   }
                 },
                 {
@@ -15796,7 +16120,7 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => void"
                   }
                 },
                 {
@@ -15832,7 +16156,43 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(this: ShadowRoot, ev: MediaQueryListEventMap[K]) => any"
+                    "text": "(this: ShadowRoot, ev: MediaQueryListEventMap[K]) => void"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "EventTarget"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: EventTarget, ev: Event) => void"
                   }
                 },
                 {
@@ -15851,7 +16211,7 @@
                 {
                   "name": "element",
                   "type": {
-                    "text": "Window | Document | HTMLElement | ShadowRoot | MediaQueryList"
+                    "text": "EventTarget"
                   }
                 },
                 {
@@ -15863,7 +16223,7 @@
                 {
                   "name": "listener",
                   "type": {
-                    "text": "(ev: any) => any"
+                    "text": "(this: EventTarget, ev: Event) => void"
                   }
                 },
                 {
@@ -16072,7 +16432,8 @@
               "type": {
                 "text": "HTMLElement"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -16184,6 +16545,7 @@
             {
               "kind": "field",
               "name": "hasContent",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "SlotController",
                 "module": "src/common/controllers/SlotController.ts"
@@ -16192,6 +16554,7 @@
             {
               "kind": "field",
               "name": "isEmpty",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "SlotController",
                 "module": "src/common/controllers/SlotController.ts"
@@ -16200,6 +16563,7 @@
             {
               "kind": "field",
               "name": "content",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "SlotController",
                 "module": "src/common/controllers/SlotController.ts"
@@ -16208,6 +16572,7 @@
             {
               "kind": "field",
               "name": "assigned",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "SlotController",
                 "module": "src/common/controllers/SlotController.ts"
@@ -16292,6 +16657,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/ResizeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ResizeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "observer",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private",
+              "default": "new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })"
+            },
+            {
+              "kind": "field",
+              "name": "hadFirstUpdate",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "borderBoxSize",
+              "type": {
+                "text": "ResizeObserverSize | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "inlineSize",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "blockSize",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ResizeController",
+          "declaration": {
+            "name": "ResizeController",
+            "module": "src/common/controllers/ResizeController.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/ScrollbarController.ts",
@@ -16459,19 +16895,23 @@
             },
             {
               "kind": "field",
-              "name": "hasContent"
+              "name": "hasContent",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "isEmpty"
+              "name": "isEmpty",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "content"
+              "name": "content",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "assigned"
+              "name": "assigned",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -17584,7 +18024,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -17592,7 +18033,8 @@
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -17600,7 +18042,8 @@
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -17721,7 +18164,8 @@
             {
               "kind": "field",
               "name": "formValue",
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -17875,12 +18319,14 @@
             {
               "kind": "field",
               "name": "hasHint",
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
               "name": "hasError",
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             }
           ],
           "events": [
@@ -18025,7 +18471,8 @@
               "name": "form",
               "type": {
                 "text": "HTMLFormElement | null"
-              }
+              },
+              "readonly": true
             }
           ]
         },
@@ -18067,7 +18514,8 @@
             {
               "kind": "field",
               "name": "form",
-              "description": "Gets the form, if any, associated with the form element."
+              "description": "Gets the form, if any, associated with the form element.",
+              "readonly": true
             }
           ],
           "attributes": [