@nordhealth/components 3.6.2 → 3.8.0

package/custom-elements.json

@@ -456,6 +456,11 @@
               "description": "Controls the box shadow for the avatar.",
               "name": "--n-avatar-box-shadow",
               "default": "none"
+            },
+            {
+              "description": "Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).",
+              "name": "--n-avatar-text-color",
+              "default": "var(--n-color-text-on-accent)"
             }
           ],
           "members": [
@@ -628,119 +633,6 @@
         }
       ]
     },
-    {
-      "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": ""
-            },
-            {
-              "description": "Used to place an icon at the start of badge.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "attribute": "strong",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "fieldName": "type"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "fieldName": "strong"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "text",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/banner/Banner.ts",
@@ -2029,126 +1921,362 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
-          "slots": [
+          "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": "Use when a label requires more than plain text.",
-              "name": "label"
+              "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": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "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)"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked"
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
             },
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
+              "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": [
             {
-              "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.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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 place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
+          "examples": [],
+          "dependencies": [],
+          "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"
+          }
+        }
+      ]
+    },
+    {
+      "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": ""
+            },
+            {
+              "description": "Used to place an icon at the start of badge.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "attribute": "strong",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "fieldName": "type"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "fieldName": "strong"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "text",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/checkbox/Checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "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 })",
@@ -2695,161 +2823,38 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-checkbox",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-checkbox",
-          "declaration": {
-            "name": "Checkbox",
-            "module": "src/checkbox/Checkbox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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 place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-card",
-          "customElement": true
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-checkbox",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -2857,16 +2862,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-checkbox",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Checkbox",
+            "module": "src/checkbox/Checkbox.ts"
           }
         }
       ]
@@ -5956,6 +5961,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown-group/DropdownGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",
+          "name": "DropdownGroup",
+          "slots": [
+            {
+              "description": "The dropdown group content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the dropdown group.",
+              "attribute": "heading"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the dropdown group.",
+              "fieldName": "heading"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written 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\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-dropdown-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-dropdown-group",
+          "declaration": {
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/drawer/Drawer.ts",
@@ -6336,74 +6409,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/dropdown-group/DropdownGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",
-          "name": "DropdownGroup",
-          "slots": [
-            {
-              "description": "The dropdown group content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the dropdown group.",
-              "attribute": "heading"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the dropdown group.",
-              "fieldName": "heading"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written 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\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-dropdown-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "DropdownGroup",
-            "module": "src/dropdown-group/DropdownGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-dropdown-group",
-          "declaration": {
-            "name": "DropdownGroup",
-            "module": "src/dropdown-group/DropdownGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/dropdown-item/DropdownItem.ts",
@@ -6566,18 +6571,99 @@
               "name": ""
             }
           ],
-          "members": [],
+          "members": [],
+          "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 when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, 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\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\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\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</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\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</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\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-empty-state",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-empty-state",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/header/Header.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
+          "name": "Header",
+          "slots": [
+            {
+              "description": "The header content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for buttons, toggles, etc.",
+              "name": "end"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "endSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"end\")"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the size of the header component.",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the size of the header component.",
+              "fieldName": "size"
+            }
+          ],
           "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 when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, 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\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\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\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</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\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</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\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n",
+          "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 the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n- Utilise the [`n-truncate`](/css/#miscellaneous-utilities) CSS helper to prevent long headings from wrapping.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.\n\n</div>\n\n---\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-empty-state",
+          "tagName": "nord-header",
           "customElement": true
         }
       ],
@@ -6586,16 +6672,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
+            "name": "Header",
+            "module": "src/header/Header.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-empty-state",
+          "name": "nord-header",
           "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
+            "name": "Header",
+            "module": "src/header/Header.ts"
           }
         }
       ]
@@ -6793,87 +6879,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/header/Header.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
-          "name": "Header",
-          "slots": [
-            {
-              "description": "The header content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot for buttons, toggles, etc.",
-              "name": "end"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "endSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"end\")"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"s\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the size of the header component.",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"s\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the size of the header component.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n- Utilise the [`n-truncate`](/css/#miscellaneous-utilities) CSS helper to prevent long headings from wrapping.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.\n\n</div>\n\n---\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-header",
-          "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/icon/Icon.ts",
@@ -13336,233 +13341,77 @@
     },
     {
       "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",
-          "cssProperties": [
-            {
-              "description": "Controls the color the spinner.",
-              "name": "--n-spinner-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "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.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "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.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "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
-            },
+      "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",
+          "cssProperties": [
+            {
+              "description": "Controls the color the spinner.",
+              "name": "--n-spinner-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "alignItems",
+              "name": "size",
               "type": {
-                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
-              "default": "\"stretch\"",
-              "description": "How to align the child items inside the stack.",
-              "attribute": "align-items",
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "wrap",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
-              "attribute": "wrap",
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "justifyContent",
+              "name": "label",
               "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "How to justify the child items inside the stack.",
-              "attribute": "justify-content",
+              "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": "gap",
+              "name": "size",
               "type": {
-                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
-              "description": "The space injected between components.",
-              "fieldName": "gap"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "align-items",
-              "type": {
-                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
-              },
-              "default": "\"stretch\"",
-              "description": "How to align the child items inside the stack.",
-              "fieldName": "alignItems"
+              "description": "The size of the spinner.",
+              "fieldName": "size"
             },
             {
-              "name": "wrap",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
-              "fieldName": "wrap"
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "fieldName": "color"
             },
             {
-              "name": "justify-content",
+              "name": "label",
               "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "How to justify the child items inside the stack.",
-              "fieldName": "justifyContent"
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
@@ -13571,11 +13420,11 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to stack multiple components vertically or horizontally.\n- Use when you want to adjust the white space between two or more components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for building grid based layouts.\n\n</div>\n",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use 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-stack",
+          "tagName": "nord-spinner",
           "customElement": true
         }
       ],
@@ -13584,16 +13433,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-stack",
+          "name": "nord-spinner",
           "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         }
       ]
@@ -13939,6 +13788,162 @@
         }
       ]
     },
+    {
+      "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": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "justifyContent",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "attribute": "justify-content",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "gap",
+              "type": {
+                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The space injected between components.",
+              "fieldName": "gap"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "align-items",
+              "type": {
+                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
+              },
+              "default": "\"stretch\"",
+              "description": "How to align the child items inside the stack.",
+              "fieldName": "alignItems"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "justify-content",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "fieldName": "justifyContent"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to stack multiple components vertically or horizontally.\n- Use when you want to adjust the white space between two or more components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for building grid based layouts.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-stack",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-stack",
+          "declaration": {
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab-panel/TabPanel.ts",