@nordhealth/components 2.17.0 → 2.17.1

package/custom-elements.json

@@ -697,6 +697,214 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "draft",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -1242,246 +1450,38 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
+              "name": "--n-calendar-border-radius",
               "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "monthSelectNode",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "HTMLElement"
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "privacy": "private"
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "focusedDayNode",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "draft",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
+                "text": "HTMLButtonElement"
               },
               "privacy": "private"
             },
@@ -12689,177 +12689,76 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/spinner/Spinner.ts",
+      "path": "src/stack/Stack.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
-          "name": "Spinner",
+          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
+          "name": "Stack",
+          "cssProperties": [
+            {
+              "description": "Controls the spacing between items, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-stack-gap",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The stack content.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "gap",
               "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
+              "description": "The space injected between components.",
+              "attribute": "gap",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "direction",
               "type": {
-                "text": "string | undefined"
+                "text": "\"vertical\" | \"horizontal\""
               },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "attribute": "direction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "alignItems",
               "type": {
-                "text": "string | undefined"
+                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
               },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
+              "default": "\"stretch\"",
+              "description": "How to align the child items inside the stack.",
+              "attribute": "align-items",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "responsive",
               "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "boolean"
               },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
+              "default": "false",
+              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
+              "deprecated": "true",
+              "attribute": "responsive",
+              "reflects": true
             },
             {
-              "name": "color",
+              "kind": "field",
+              "name": "wrap",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-spinner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/stack/Stack.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
-          "name": "Stack",
-          "cssProperties": [
-            {
-              "description": "Controls the spacing between items, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-stack-gap",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The stack content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The space injected between components.",
-              "attribute": "gap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "alignItems",
-              "type": {
-                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
-              },
-              "default": "\"stretch\"",
-              "description": "How to align the child items inside the stack.",
-              "attribute": "align-items",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "responsive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
-              "deprecated": "true",
-              "attribute": "responsive",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
+                "text": "boolean"
               },
               "default": "false",
               "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
@@ -12966,6 +12865,107 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/spinner/Spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab/Tab.ts",
@@ -13244,216 +13244,31 @@
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Adds an accessible label to the tab list container.",
-              "fieldName": "label"
-            },
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\" | undefined"
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the tab group component.",
-              "fieldName": "padding"
-            },
-            {
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
-              "fieldName": "sticky"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [
-            "tab"
-          ],
-          "tagName": "nord-tab-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-group",
-          "declaration": {
-            "name": "TabGroup",
-            "module": "src/tab-group/TabGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab-panel/TabPanel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
-          "name": "TabPanel",
-          "slots": [
-            {
-              "description": "The tab panel content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tab-panel",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-panel",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/table/Table.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
-          "name": "Table",
-          "cssProperties": [
-            {
-              "description": "Controls the padding around the table cells.",
-              "name": "--n-table-td-padding",
-              "default": "calc(var(--n-space-m) * 0.95)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-table-border-radius",
-              "default": "var(--n-border-radius-s)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot which holds the HTML `<table>` element.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "attribute": "density",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrollSnap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "attribute": "scroll-snap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "striped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "attribute": "striped",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderStyles",
-              "privacy": "private",
-              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected",
-              "description": "opt out of shadow dom"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "density",
+              "name": "label",
               "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
+                "text": "string"
               },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
+              "default": "\"\"",
+              "description": "Adds an accessible label to the tab list container.",
+              "fieldName": "label"
             },
             {
-              "name": "scroll-snap",
+              "name": "padding",
               "type": {
-                "text": "boolean"
+                "text": "\"m\" | \"l\" | \"none\" | undefined"
               },
-              "default": "false",
-              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
-              "fieldName": "scrollSnap"
+              "default": "\"m\"",
+              "description": "Controls the padding of the tab group component.",
+              "fieldName": "padding"
             },
             {
-              "name": "striped",
+              "name": "sticky",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
-              "fieldName": "striped"
+              "description": "Whether the tab list sticks to the top of the tab group as you scroll.",
+              "fieldName": "sticky"
             }
           ],
           "superclass": {
@@ -13462,28 +13277,61 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "list",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
-          "examples": [
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and tanstack table"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
-              "name": "with react and ag grid"
-            },
-            {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and tanstack table"
-            },
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to allow multiple panels to be contained within a single window.\n- Use the tab panel and tab components within the tab group component.\n- Use the tab and tab panel components in order to create a tab group content structure.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use other components to the tab and tab panel within the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n- Don't add a tab or tab panel component without providing an accompanying panel or tab.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "dependencies": [
+            "tab"
+          ],
+          "tagName": "nord-tab-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-group",
+          "declaration": {
+            "name": "TabGroup",
+            "module": "src/tab-group/TabGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab-panel/TabPanel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
+          "name": "TabPanel",
+          "slots": [
             {
-              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
-              "name": "with vue and ag grid"
+              "description": "The tab panel content.",
+              "name": ""
             }
           ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
           "dependencies": [],
-          "tagName": "nord-table",
+          "tagName": "nord-tab-panel",
           "customElement": true
         }
       ],
@@ -13492,16 +13340,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-table",
+          "name": "nord-tab-panel",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
           }
         }
       ]
@@ -14367,6 +14215,158 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/table/Table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
+          "name": "Table",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the table cells.",
+              "name": "--n-table-td-padding",
+              "default": "calc(var(--n-space-m) * 0.95)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-table-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot which holds the HTML `<table>` element.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollSnap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "attribute": "scroll-snap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "attribute": "striped",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+            },
+            {
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "fieldName": "density"
+            },
+            {
+              "name": "scroll-snap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables scroll-snapping, meaning the scroll position is always column-aligned.",
+              "fieldName": "scrollSnap"
+            },
+            {
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether to use zebra striping on tables, which can improve readability.",
+              "fieldName": "striped"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "list",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
+          "examples": [
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
+              "name": "with react and ag grid"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and tanstack table"
+            },
+            {
+              "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview",
+              "name": "with vue and ag grid"
+            }
+          ],
+          "dependencies": [],
+          "tagName": "nord-table",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toast/Toast.ts",