@nordhealth/components 2.7.0 → 2.8.0

package/custom-elements.json

@@ -552,175 +552,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
     },
-    {
-      "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"
-          },
-          "status": "ready",
-          "category": "feedback",
-          "displayName": null,
-          "examples": [],
-          "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"
-          }
-        }
-      ],
-      "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"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "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.",
-              "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",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "fieldName": "progress"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
-          "displayName": null,
-          "examples": [],
-          "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"
-          }
-        }
-      ],
-      "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"
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -1761,92 +1592,52 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/banner/Banner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "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-card-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-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            },
-            {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
             }
           ],
           "slots": [
             {
-              "description": "The card content.",
+              "description": "default slot",
               "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
+              "name": "variant",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "padding",
+              "name": "variant",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -1854,10 +1645,10 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "structure",
+          "category": "feedback",
           "displayName": null,
           "examples": [],
-          "tagName": "nord-card",
+          "tagName": "nord-banner",
           "customElement": true
         }
       ],
@@ -1866,17 +1657,226 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-banner",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "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.",
+              "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",
+              "type": {
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
+              },
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "fieldName": "progress"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "displayName": null,
+          "examples": [],
+          "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"
+          }
+        }
+      ],
+      "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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
         }
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
@@ -7884,22 +7884,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lastButton",
-              "type": {
-                "text": "HTMLButtonElement | undefined"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "headerSlot",
@@ -7918,18 +7902,6 @@
               "privacy": "private",
               "default": "new SlotController(this, \"footer\")"
             },
-            {
-              "kind": "field",
-              "name": "scrollBar",
-              "privacy": "private",
-              "default": "new ScrollbarController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "privacy": "private",
-              "default": "new FocusTrapController(this, () => this.modal)"
-            },
             {
               "kind": "field",
               "name": "localize",
@@ -7938,15 +7910,9 @@
             },
             {
               "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "lightDismiss",
+              "name": "modalController",
               "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\n  })"
+              "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",
@@ -8028,33 +7994,20 @@
             {
               "kind": "method",
               "name": "handleOpenUpdated",
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "enableScroll",
-              "privacy": "private"
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "handleDismiss",
               "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "trackLastButton",
-              "privacy": "private",
-              "description": "capture the last button clicked, so that we can polyfill `submitter` property in submit event"
-            },
-            {
-              "kind": "field",
-              "name": "polyfillSubmitter",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSubmit",
-              "privacy": "private"
             }
           ],
           "events": [
@@ -8134,6 +8087,146 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/modal/ModalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ModalController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "openModals",
+              "privacy": "private",
+              "static": true,
+              "default": "new Stack<ModalController>()"
+            },
+            {
+              "kind": "field",
+              "name": "scrollBar",
+              "type": {
+                "text": "ScrollbarController"
+              },
+              "privacy": "private",
+              "default": "new ScrollbarController(host)"
+            },
+            {
+              "kind": "field",
+              "name": "focusTrap",
+              "type": {
+                "text": "FocusTrapController"
+              },
+              "privacy": "private",
+              "default": "new FocusTrapController(host, options.dialog)"
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "type": {
+                "text": "LightDismissController"
+              },
+              "privacy": "private",
+              "default": "new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "ModalControllerOptions"
+              },
+              "privacy": "private",
+              "default": "options"
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lastButton",
+              "type": {
+                "text": "HTMLButtonElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "block"
+            },
+            {
+              "kind": "method",
+              "name": "unblock"
+            },
+            {
+              "kind": "field",
+              "name": "trackLastButton",
+              "privacy": "private",
+              "description": "capture the last button clicked, so that we can polyfill `submitter` property in submit event"
+            },
+            {
+              "kind": "field",
+              "name": "polyfillSubmitter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleLightDismiss",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleSubmit",
+              "privacy": "private"
+            }
+          ],
+          "examples": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ModalController",
+          "declaration": {
+            "name": "ModalController",
+            "module": "src/modal/ModalController.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/modal/localization.ts",
@@ -11142,1121 +11235,1128 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tab-group/TabGroup.ts",
+      "path": "src/tab-panel/TabPanel.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",
-          "name": "TabGroup",
+          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
+          "name": "TabPanel",
+          "slots": [
+            {
+              "description": "The tab panel content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "navigation",
+          "displayName": null,
+          "examples": [],
+          "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"
+          }
+        }
+      ],
+      "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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/textarea/Textarea.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",
+          "name": "Textarea",
           "cssProperties": [
             {
-              "description": "Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).",
-              "name": "--n-tab-group-padding",
-              "default": "0"
+              "description": "Controls the inline size, or width, of the textarea.",
+              "name": "--n-textarea-inline-size",
+              "default": "240px"
+            },
+            {
+              "description": "Controls the block size, or height, or the textarea.",
+              "name": "--n-textarea-block-size",
+              "default": "76px"
+            },
+            {
+              "description": "Controls the background of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-background",
+              "default": "var(--n-color-active)"
+            },
+            {
+              "description": "Controls the text color of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-color",
+              "default": "var(--n-color-text)"
+            },
+            {
+              "description": "Controls the border color of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-textarea-border-radius",
+              "default": "var(--n-border-radius-s)"
             }
           ],
           "slots": [
             {
-              "description": "The element which contains the content to be revealed.",
-              "name": ""
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "description": "The element which contains all tabs to reveal tabbed content.",
-              "name": "tab"
+              "description": "Optional slot that holds hint text for the textarea.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the textarea.",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
+              "name": "inputId",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "\"textarea\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "observerOptions",
+              "name": "resize",
               "type": {
-                "text": "object"
+                "text": "\"vertical\" | \"auto\""
               },
-              "privacy": "private",
-              "static": true,
-              "default": "{\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }"
+              "default": "\"vertical\"",
+              "description": "Controls whether the textarea is resizable.\nBy default is manually resizable vertically.\nSet to \"auto\" to enable auto-resizing as content grows.",
+              "attribute": "resize",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tabGroupId",
-              "privacy": "private",
-              "default": "`nord-tab-group-${tabGroupCount++}`",
-              "description": "Unique ID for each tab group component present."
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the textarea expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "resizeToFitContent",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "default": "\"\"",
-              "description": "Adds an accessible label to the tab list container.",
-              "attribute": "label",
-              "reflects": true
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorId",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\" | undefined"
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the tab group component.",
-              "attribute": "padding",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "sticky",
+              "name": "hintId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
-              "attribute": "sticky",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "selectedTab",
-              "privacy": "private",
-              "description": "The current tab node selected in the tab group."
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateSlots",
-              "privacy": "private"
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleMutation",
-              "privacy": "private",
-              "description": "If the selected tab is selected programmatically update all the tabs."
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "initialSelectedTab",
-              "privacy": "private",
-              "description": "Get the selected tab button, or the first tab button."
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setupTabs",
-              "privacy": "private",
-              "description": "Apply accessible attributes and values to the tab buttons."
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setupPanels",
-              "privacy": "private",
-              "description": "Apply accessible attributes and values to the tab panels."
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleTabChange",
-              "privacy": "private",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "e",
                   "type": {
                     "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "previousTab",
-              "privacy": "private",
+              "name": "handleChange",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "tab",
+                  "name": "e",
                   "type": {
-                    "text": "Tab"
+                    "text": "Event"
                   }
                 }
               ],
-              "description": "Get the previous tab button in the tab group"
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handle keyboard accessible controls."
+              "name": "renderLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "updateSelectedTab",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "selectedTab",
-                  "type": {
-                    "text": "Tab"
-                  }
-                }
-              ],
-              "description": "Update the selected tab button with attributes and values.\nUpdate the tab group state."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Adds an accessible label to the tab list container.",
-              "fieldName": "label"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\" | undefined"
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the tab group component.",
-              "fieldName": "padding"
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
-              "fieldName": "sticky"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "new",
-          "category": "navigation",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-tab-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-group",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab-panel/TabPanel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
-          "name": "TabPanel",
-          "slots": [
-            {
-              "description": "The tab panel content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "new",
-          "category": "navigation",
-          "displayName": null,
-          "examples": [],
-          "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"
-          }
-        }
-      ],
-      "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"
-    },
-    {
-      "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)"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
-            {
-              "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
+              "name": "hasHint",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "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
+              "name": "hasError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "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",
+              "name": "autocomplete",
               "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
+                "text": "AutocompleteAttribute"
               },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
             },
             {
-              "name": "scroll-snap",
+              "kind": "field",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "fieldName": "scrollSnap"
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
             },
             {
-              "name": "striped",
+              "kind": "field",
+              "name": "disabled",
               "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"
-          },
-          "status": "ready",
-          "category": "list",
-          "displayName": null,
-          "examples": [
-            {
-              "name": "with react and tanstack table",
-              "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 ag grid",
-              "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 vue and tanstack table",
-              "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 ag grid",
-              "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"
-            }
-          ],
-          "tagName": "nord-table",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-table",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        }
-      ],
-      "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"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/textarea/Textarea.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",
-          "name": "Textarea",
-          "cssProperties": [
-            {
-              "description": "Controls the inline size, or width, of the textarea.",
-              "name": "--n-textarea-inline-size",
-              "default": "240px"
-            },
-            {
-              "description": "Controls the block size, or height, or the textarea.",
-              "name": "--n-textarea-block-size",
-              "default": "76px"
-            },
-            {
-              "description": "Controls the background of the textarea, using our [color tokens](/tokens/#color).",
-              "name": "--n-textarea-background",
-              "default": "var(--n-color-active)"
-            },
-            {
-              "description": "Controls the text color of the textarea, using our [color tokens](/tokens/#color).",
-              "name": "--n-textarea-color",
-              "default": "var(--n-color-text)"
-            },
-            {
-              "description": "Controls the border color of the textarea, using our [color tokens](/tokens/#color).",
-              "name": "--n-textarea-border-color",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-textarea-border-radius",
-              "default": "var(--n-border-radius-s)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the textarea.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the textarea.",
-              "name": "error"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"textarea\"",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "resize",
-              "type": {
-                "text": "\"vertical\" | \"auto\""
-              },
-              "default": "\"vertical\"",
-              "description": "Controls whether the textarea is resizable.\nBy default is manually resizable vertically.\nSet to \"auto\" to enable auto-resizing as content grows.",
-              "attribute": "resize",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "expand",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the textarea expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "resizeToFitContent",
-              "privacy": "protected"
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "value",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "name": "form",
+              "description": "Gets the form, if any, associated with the form element.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "focusableRef",
               "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "resize",
+              "type": {
+                "text": "\"vertical\" | \"auto\""
+              },
+              "default": "\"vertical\"",
+              "description": "Controls whether the textarea is resizable.\nBy default is manually resizable vertically.\nSet to \"auto\" to enable auto-resizing as content grows.",
+              "fieldName": "resize"
             },
             {
-              "kind": "field",
-              "name": "errorId",
+              "name": "expand",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the textarea expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
-              "kind": "field",
-              "name": "hintId",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Label for the input.",
-              "attribute": "label",
+              "fieldName": "label",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
+              "fieldName": "hint",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "hide-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
+              "fieldName": "hideLabel",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
+              "fieldName": "placeholder",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "error",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
+              "fieldName": "error",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "form",
+          "displayName": null,
+          "examples": [],
+          "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"
               }
             },
             {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
+              "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"
+          }
+        }
+      ],
+      "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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab-group/TabGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",
+          "name": "TabGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-tab-group-padding",
+              "default": "0"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The element which contains the content to be revealed.",
+              "name": ""
             },
+            {
+              "description": "The element which contains all tabs to reveal tabbed content.",
+              "name": "tab"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "observer",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "MutationObserver | undefined"
               },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "observerOptions",
               "type": {
-                "text": "boolean"
+                "text": "object"
               },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
+              "privacy": "private",
+              "static": true,
+              "default": "{\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "tabGroupId",
+              "privacy": "private",
+              "default": "`nord-tab-group-${tabGroupCount++}`",
+              "description": "Unique ID for each tab group component present."
+            },
+            {
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "Adds an accessible label to the tab list container.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "padding",
               "type": {
-                "text": "string | undefined"
+                "text": "\"m\" | \"l\" | \"none\" | undefined"
               },
-              "description": "The name of the form component.",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"m\"",
+              "description": "Controls the padding of the tab group component.",
+              "attribute": "padding",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "sticky",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "false",
+              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
+              "attribute": "sticky",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "selectedTab",
+              "privacy": "private",
+              "description": "The current tab node selected in the tab group."
+            },
+            {
+              "kind": "method",
+              "name": "updateSlots",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "handleMutation",
+              "privacy": "private",
+              "description": "If the selected tab is selected programmatically update all the tabs."
+            },
+            {
+              "kind": "field",
+              "name": "initialSelectedTab",
+              "privacy": "private",
+              "description": "Get the selected tab button, or the first tab button."
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setupTabs",
+              "privacy": "private",
+              "description": "Apply accessible attributes and values to the tab buttons."
+            },
+            {
+              "kind": "method",
+              "name": "setupPanels",
+              "privacy": "private",
+              "description": "Apply accessible attributes and values to the tab panels."
+            },
+            {
+              "kind": "method",
+              "name": "handleTabChange",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "previousTab",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "tab",
+                  "type": {
+                    "text": "Tab"
+                  }
                 }
               ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "description": "Get the previous tab button in the tab group"
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "handleKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Handle keyboard accessible controls."
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "updateSelectedTab",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "selectedTab",
+                  "type": {
+                    "text": "Tab"
+                  }
+                }
+              ],
+              "description": "Update the selected tab button with attributes and values.\nUpdate the tab group state."
             }
           ],
           "attributes": [
-            {
-              "name": "resize",
-              "type": {
-                "text": "\"vertical\" | \"auto\""
-              },
-              "default": "\"vertical\"",
-              "description": "Controls whether the textarea is resizable.\nBy default is manually resizable vertically.\nSet to \"auto\" to enable auto-resizing as content grows.",
-              "fieldName": "resize"
-            },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the textarea expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
-            },
             {
               "name": "label",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "Adds an accessible label to the tab list container.",
+              "fieldName": "label"
             },
             {
-              "name": "error",
+              "name": "padding",
               "type": {
-                "text": "string | undefined"
+                "text": "\"m\" | \"l\" | \"none\" | undefined"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"m\"",
+              "description": "Controls the padding of the tab group component.",
+              "fieldName": "padding"
             },
             {
-              "name": "required",
+              "name": "sticky",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
+              "fieldName": "sticky"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "navigation",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-tab-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-group",
+          "declaration": {
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n"
+    },
+    {
+      "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)"
             },
             {
-              "name": "autocomplete",
+              "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": "AutocompleteAttribute"
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
               },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "scrollSnap",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "attribute": "scroll-snap",
+              "reflects": true
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "striped",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "attribute": "striped",
+              "reflects": true
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
             }
           ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
+          "attributes": [
             {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
+              "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": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "name": "scroll-snap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "fieldName": "scrollSnap"
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "fieldName": "striped"
             }
           ],
           "superclass": {
@@ -12264,35 +12364,28 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "form",
+          "category": "list",
           "displayName": null,
-          "examples": [],
-          "tagName": "nord-textarea",
-          "customElement": true,
-          "events": [
+          "examples": [
             {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "with react and tanstack table",
+              "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": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "with react and ag grid",
+              "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 vue and tanstack table",
+              "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 ag grid",
+              "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"
             }
-          ]
+          ],
+          "tagName": "nord-table",
+          "customElement": true
         }
       ],
       "exports": [
@@ -12300,20 +12393,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-textarea",
+          "name": "nord-table",
           "declaration": {
-            "name": "Textarea",
-            "module": "src/textarea/Textarea.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         }
       ],
-      "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"
+      "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"
     },
     {
       "kind": "javascript-module",