@nordhealth/components 3.21.0 → 3.22.0-alpha.0

package/custom-elements.json

@@ -1486,161 +1486,6 @@
         }
       ]
     },
-    {
-      "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 group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dirController",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "attribute": "wrap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "fieldName": "wrap"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "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 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\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\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",
@@ -2145,93 +1990,125 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "description": "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 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 rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
-              "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)"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
             }
           ],
           "slots": [
             {
-              "description": "The card content.",
+              "description": "The button group 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",
+              "name": "defaultSlot",
               "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "default": "new SlotController(this)"
             },
             {
               "kind": "field",
-              "name": "headerEndSlot",
+              "name": "dirController",
               "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "direction",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"vertical\" | \"horizontal\""
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "padding",
+              "name": "variant",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"default\" | \"spaced\""
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
           ],
           "superclass": {
             "name": "LitElement",
@@ -2240,10 +2117,10 @@
           "localization": [],
           "status": "ready",
           "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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",
+          "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\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-card",
+          "tagName": "nord-button-group",
           "customElement": true
         }
       ],
@@ -2252,16 +2129,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-button-group",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
           }
         }
       ]
@@ -3004,6 +2881,129 @@
         }
       ]
     },
+    {
+      "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",
+          "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/command-menu/CommandMenu.ts",
@@ -7238,6 +7238,87 @@
         }
       ]
     },
+    {
+      "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",
@@ -9118,88 +9199,7 @@
     },
     {
       "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/localization/LocalizeController.ts",
+      "path": "src/localization/LocalizeController.ts",
       "declarations": [
         {
           "kind": "class",
@@ -10462,136 +10462,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "cssProperties": [
-            {
-              "description": "Controls the background color of the navigation element.",
-              "name": "--n-navigation-background-color",
-              "default": "var(--n-color-nav-surface)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The main section of the sidebar, for holding nav components.",
-              "name": ""
-            },
-            {
-              "description": "The top section of the sidebar.",
-              "name": "header"
-            },
-            {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "allowItemsToRemainOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "stickyFooter",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the navigations's footer has sticky positioning.",
-              "attribute": "sticky-footer",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "handleActivate",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched whenever a nav item's state changes between open and closed.",
-              "name": "toggle"
-            },
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched whenever a nav item has been marked as active",
-              "name": "activate"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "sticky-footer",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the navigations's footer has sticky positioning.",
-              "fieldName": "stickyFooter"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "nav-item"
-          ],
-          "tagName": "nord-navigation",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-navigation",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/nav-toggle/NavToggle.ts",
@@ -10734,56 +10604,186 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/notification/Notification.ts",
+      "path": "src/navigation/Navigation.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
-          "name": "Notification",
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
+          "cssProperties": [
+            {
+              "description": "Controls the background color of the navigation element.",
+              "name": "--n-navigation-background-color",
+              "default": "var(--n-color-nav-surface)"
+            }
+          ],
           "slots": [
             {
-              "description": "Default slot used for the notification text/message.",
+              "description": "The main section of the sidebar, for holding nav components.",
               "name": ""
             },
             {
-              "description": "Slot used for the notification icon.",
-              "name": "icon"
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
+            {
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
+              "name": "headerSlot",
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-notification\">(this)"
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "notificationRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
             },
             {
               "kind": "field",
-              "name": "dismissed",
+              "name": "allowItemsToRemainOpen",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "dismiss",
-              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
-              "inheritedFrom": {
+              "kind": "field",
+              "name": "stickyFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigations's footer has sticky positioning.",
+              "attribute": "sticky-footer",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleActivate",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched whenever a nav item's state changes between open and closed.",
+              "name": "toggle"
+            },
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched whenever a nav item has been marked as active",
+              "name": "activate"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "sticky-footer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigations's footer has sticky positioning.",
+              "fieldName": "stickyFooter"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "dependencies": [
+            "nav-item"
+          ],
+          "tagName": "nord-navigation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-navigation",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification/Notification.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
+          "name": "Notification",
+          "slots": [
+            {
+              "description": "Default slot used for the notification text/message.",
+              "name": ""
+            },
+            {
+              "description": "Slot used for the notification icon.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-notification\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "notificationRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dismissed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
+              "inheritedFrom": {
                 "name": "NotificationMixin",
                 "module": "src/common/mixins/NotificationMixin.ts"
               }
@@ -10873,63 +10873,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification-group/NotificationGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Notification group is used to position and style a group of notifications.",
-          "name": "NotificationGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place notifications.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link 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-notification-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-notification-group",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/popout/Popout.ts",
@@ -11273,6 +11216,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification-group/NotificationGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notification group is used to position and style a group of notifications.",
+          "name": "NotificationGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place notifications.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link 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-notification-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-notification-group",
+          "declaration": {
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/progress-bar/ProgressBar.ts",
@@ -11458,7 +11458,7 @@
               "kind": "field",
               "name": "canvas",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLCanvasElement"
               },
               "privacy": "private"
             },
@@ -11634,32 +11634,17 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/range/Range.ts",
+      "path": "src/radio/Radio.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
-          "name": "Range",
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
           "cssProperties": [
             {
-              "description": "Controls the size of the thumb.",
-              "name": "--n-range-thumb-size",
-              "default": "20px"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the current value.",
-              "name": "--n-range-track-color-active",
-              "default": "var(--n-color-accent)"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the remaining value.",
-              "name": "--n-range-track-color-inactive",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls the height of the track.",
-              "name": "--n-range-track-size",
-              "default": "3px"
+              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
+              "name": "--n-label-color",
+              "default": "var(--n-color-text)"
             }
           ],
           "slots": [
@@ -11679,66 +11664,38 @@
           "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Minimum value for the range slider.",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
+              "name": "inputId",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "10",
-              "description": "Maximum value for the range slider.",
-              "attribute": "max",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "hintId",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Step amount for the range slider.",
-              "attribute": "step",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "default": "\"error\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11746,9 +11703,10 @@
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "default": "new LightSlotController(this, { slotName: \"hint\", render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing), syncLightDom: element => { element.id = this.hintId }, })",
+              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11756,9 +11714,9 @@
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "labelSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
+              "default": "new LightSlotController(this, { slotName: \"label\", render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing), syncLightDom: element => { if (!isLabel(element)) { // eslint-disable-next-line no-console console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`) } else { element.htmlFor = this.inputId } }, })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11766,9 +11724,9 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "errorSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "default": "new LightSlotController(this, { slotName: \"error\", render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing), syncLightDom: element => { element.id = this.hintId }, })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11776,13 +11734,9 @@
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "inputSlot",
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "new LightDomController(this, { render: () => html` <input slot=\"input\" @blur=${this.handleBlur} @focus=${this.handleFocus} ${ref(this.focusableRef)} class=\"n-input\" id=${this.inputId} type=\"radio\" name=${cond(this.name)} .value=${cond(this.value)} .checked=${this.checked} ?disabled=${this.disabled} ?required=${this.required} aria-describedby=${cond(this.getDescribedBy())} aria-invalid=${cond(this.getInvalid())} form=${cond(this._formId)} /> `, })"
             },
             {
               "kind": "field",
@@ -11796,12 +11750,50 @@
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange",
               "privacy": "protected",
-              "default": "\"input\"",
+              "parameters": [
+                {
+                  "name": "previousChecked",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "uncheckSiblings",
+              "privacy": "private"
+            },
+            {
+              "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"
@@ -11809,25 +11801,34 @@
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "protected",
-              "default": "\"error\"",
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
+              "name": "formData",
               "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11937,7 +11938,7 @@
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "handleInput",
               "privacy": "protected",
               "parameters": [
                 {
@@ -12017,35 +12018,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -12174,96 +12146,58 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "name": "input",
+              "name": "checked",
               "type": {
-                "text": "NordEvent"
+                "text": "boolean"
               },
-              "description": "Fired as the user types into the input.",
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "change",
+              "name": "hint",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "min",
+              "name": "hide-label",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Minimum value for the range slider.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "10",
-              "description": "Maximum value for the range slider.",
-              "fieldName": "max"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Step amount for the range slider.",
-              "fieldName": "step"
-            },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
+                "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
@@ -12323,32 +12257,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -12402,16 +12310,12 @@
           ],
           "mixins": [
             {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
             {
               "name": "InputMixin",
@@ -12429,11 +12333,35 @@
           "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 to let user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range 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\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favor radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 radio 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 ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-range",
-          "customElement": true
+          "tagName": "nord-radio",
+          "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": [
@@ -12441,33 +12369,48 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-range",
+          "name": "nord-radio",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/range/Range.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
+          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
+          "name": "Range",
           "cssProperties": [
             {
-              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
-              "name": "--n-label-color",
-              "default": "var(--n-color-text)"
+              "description": "Controls the size of the thumb.",
+              "name": "--n-range-thumb-size",
+              "default": "20px"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the current value.",
+              "name": "--n-range-track-color-active",
+              "default": "var(--n-color-accent)"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the remaining value.",
+              "name": "--n-range-track-color-inactive",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls the height of the track.",
+              "name": "--n-range-track-size",
+              "default": "3px"
             }
           ],
           "slots": [
@@ -12487,38 +12430,66 @@
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "0",
+              "description": "Minimum value for the range slider.",
+              "attribute": "min",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "10",
+              "description": "Maximum value for the range slider.",
+              "attribute": "max",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "step",
               "type": {
-                "text": "string"
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Step amount for the range slider.",
+              "attribute": "step",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
               "privacy": "protected",
-              "default": "\"error\"",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12526,10 +12497,9 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "labelSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, { slotName: \"hint\", render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing), syncLightDom: element => { element.id = this.hintId }, })",
-              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12537,9 +12507,9 @@
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "errorSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, { slotName: \"label\", render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing), syncLightDom: element => { if (!isLabel(element)) { // eslint-disable-next-line no-console console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`) } else { element.htmlFor = this.inputId } }, })",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12547,9 +12517,9 @@
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, { slotName: \"error\", render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing), syncLightDom: element => { element.id = this.hintId }, })",
+              "default": "new SlotController(this, \"hint\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12557,9 +12527,13 @@
             },
             {
               "kind": "field",
-              "name": "inputSlot",
+              "name": "formData",
               "privacy": "protected",
-              "default": "new LightDomController(this, { render: () => html` <input slot=\"input\" @blur=${this.handleBlur} @focus=${this.handleFocus} ${ref(this.focusableRef)} class=\"n-input\" id=${this.inputId} type=\"radio\" name=${cond(this.name)} .value=${cond(this.value)} .checked=${this.checked} ?disabled=${this.disabled} ?required=${this.required} aria-describedby=${cond(this.getDescribedBy())} aria-invalid=${cond(this.getInvalid())} form=${cond(this._formId)} /> `, })"
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
@@ -12573,50 +12547,12 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "inputId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleCheckedChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "previousChecked",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12624,34 +12560,25 @@
             },
             {
               "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "size",
+              "name": "errorId",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
+              "privacy": "protected",
+              "default": "\"error\"",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12761,7 +12688,7 @@
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleChange",
               "privacy": "protected",
               "parameters": [
                 {
@@ -12841,6 +12768,35 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -12969,28 +12925,66 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "checked",
+              "name": "input",
               "type": {
-                "text": "boolean"
+                "text": "NordEvent"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "size",
+              "name": "change",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "NordEvent"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
+              "description": "Fired whenever the input's value is changed via user interaction.",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Minimum value for the range slider.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "Maximum value for the range slider.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Step amount for the range slider.",
+              "fieldName": "step"
+            },
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
               "name": "label",
@@ -13080,6 +13074,32 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -13132,14 +13152,18 @@
             }
           ],
           "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
             {
               "name": "FormAssociatedMixin",
               "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
             {
               "name": "InputMixin",
               "module": "/src/common/mixins/InputMixin.js"
@@ -13156,35 +13180,11 @@
           "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 a radio component when users can only select one option from a list.\n- Favor radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 radio 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 ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to let user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range 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\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-radio",
-          "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"
-              }
-            }
-          ]
+          "tagName": "nord-range",
+          "customElement": true
         }
       ],
       "exports": [
@@ -13192,33 +13192,119 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Range",
+            "module": "src/range/Range.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-radio",
+          "name": "nord-range",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Range",
+            "module": "src/range/Range.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/segmented-control-item/SegmentedControlItem.ts",
+      "path": "src/segmented-control/SegmentedControl.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",
-          "name": "SegmentedControlItem",
-          "cssProperties": [
+          "description": "Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",
+          "name": "SegmentedControl",
+          "slots": [
             {
-              "description": "Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-segmented-control-item-border-radius",
-              "default": "var(--n-border-radius-s)"
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the segmented control expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever a segmented control item has been checked.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the segmented control expands to fill the width of its container.",
+              "fieldName": "expand"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.\n- Favor segmented control or [radio component](/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Segmented control items are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of segmented control items.\n- Give each segmented control item within a group a unique `value`.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a [checkbox](/components/checkbox/) or [selectable tag](/components/tag/?example=selectable) instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a [checkbox](/components/checkbox/) instead.\n- When you have more than 5 options to choose from. Consider using a [select](/components/select/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nSegmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 segmented control 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 ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-segmented-control",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SegmentedControl",
+            "module": "src/segmented-control/SegmentedControl.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-segmented-control",
+          "declaration": {
+            "name": "SegmentedControl",
+            "module": "src/segmented-control/SegmentedControl.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/segmented-control-item/SegmentedControlItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",
+          "name": "SegmentedControlItem",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-segmented-control-item-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
               "description": "Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).",
@@ -13656,55 +13742,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/segmented-control/SegmentedControl.ts",
+      "path": "src/skeleton/Skeleton.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",
-          "name": "SegmentedControl",
-          "slots": [
+          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
+          "name": "Skeleton",
+          "cssProperties": [
             {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-skeleton-border-radius",
+              "default": "var(--n-border-radius)"
+            },
             {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
+              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-color",
+              "default": "var(--n-color-border)"
             },
             {
-              "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the segmented control expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-sheen-color",
+              "default": "var(--n-color-border-strong)"
             }
           ],
-          "events": [
+          "members": [
             {
+              "kind": "field",
+              "name": "effect",
               "type": {
-                "text": "NordEvent"
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "description": "Fired whenever a segmented control item has been checked.",
-              "name": "change"
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "attribute": "effect",
+              "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "expand",
+              "name": "effect",
               "type": {
-                "text": "boolean"
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the segmented control expands to fill the width of its container.",
-              "fieldName": "expand"
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "fieldName": "effect"
             }
           ],
           "superclass": {
@@ -13712,12 +13792,12 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "new",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.\n- Favor segmented control or [radio component](/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Segmented control items are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of segmented control items.\n- Give each segmented control item within a group a unique `value`.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a [checkbox](/components/checkbox/) or [selectable tag](/components/tag/?example=selectable) instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a [checkbox](/components/checkbox/) instead.\n- When you have more than 5 options to choose from. Consider using a [select](/components/select/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nSegmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\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 segmented control 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 ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.\n",
+          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-segmented-control",
+          "tagName": "nord-skeleton",
           "customElement": true
         }
       ],
@@ -13726,16 +13806,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SegmentedControl",
-            "module": "src/segmented-control/SegmentedControl.ts"
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-segmented-control",
+          "name": "nord-skeleton",
           "declaration": {
-            "name": "SegmentedControl",
-            "module": "src/segmented-control/SegmentedControl.ts"
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
           }
         }
       ]
@@ -14546,86 +14626,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/skeleton/Skeleton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-skeleton-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-color",
-              "default": "var(--n-color-border)"
-            },
-            {
-              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-sheen-color",
-              "default": "var(--n-color-border-strong)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "attribute": "effect",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "fieldName": "effect"
-            }
-          ],
-          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-skeleton",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-skeleton",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/spinner/Spinner.ts",
@@ -17252,389 +17252,245 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/toast-group/ToastGroup.ts",
+      "path": "src/toggle/Toggle.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
-          "name": "ToastGroup",
-          "slots": [
+          "description": "Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",
+          "name": "Toggle",
+          "cssProperties": [
             {
-              "description": "Default slot in which to place toasts.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "addToast",
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text/message of the toast."
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ToastOptions"
-                  },
-                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
-                }
-              ],
-              "description": "Convenience method for creating and adding a toast to the group.",
-              "return": {
-                "type": {
-                  "text": "Toast"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "toast"
-          ],
-          "tagName": "nord-toast-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast-group",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tooltip/Tooltip.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
-          "name": "Tooltip",
-          "cssProperties": [
-            {
-              "description": "Controls the maximum inline size, or width, of the tooltip.",
-              "name": "--n-tooltip-max-size",
-              "default": "50ch"
+              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
+              "name": "--n-label-color",
+              "default": "var(--n-color-text)"
             }
           ],
           "slots": [
             {
-              "description": "The tooltip content",
-              "name": ""
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "description": "Optional slot that holds shortcut keys to access the subject",
-              "name": "shortcut"
+              "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": "lastOpened",
-              "type": {
-                "text": "Tooltip | undefined"
-              },
-              "privacy": "private",
-              "static": true
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "shortcutSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"shortcut\")"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the toggle is checked or not.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
+              "name": "reverse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
+              "attribute": "reverse",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "currentElement",
+              "name": "size",
               "type": {
-                "text": "FocusableElement | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "private"
+              "default": "\"m\"",
+              "description": "The size of the toggle switch.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "timeoutId",
-              "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "private"
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "proxy",
-              "privacy": "private",
-              "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "TooltipStates"
-              },
-              "privacy": "private",
-              "default": "\"hidden\"",
-              "description": "The current state of the tooltip, dependent on the state machine"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "coords",
-              "type": {
-                "text": "[number, number]"
-              },
-              "privacy": "private",
-              "default": "[0, 0]"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "string"
               },
-              "default": "\"block-start\"",
-              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
-              "attribute": "position",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "attribute": "role",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "attribute": "id",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "500",
-              "description": "The delay in milliseconds before the tooltip is opened.",
-              "attribute": "delay",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleIdChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleStateChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "prevState",
-                  "type": {
-                    "text": "TooltipStates"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "updatePosition",
-              "privacy": "private",
-              "description": "Setting and updating the position of the tooltip"
-            },
-            {
-              "kind": "field",
-              "name": "hideTooltip",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "reposition",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleShow",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleHide",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hideOnEscape",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "addDescribedBy",
-              "privacy": "private"
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "removeDescribedBy",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "position",
+              "name": "hint",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "string | undefined"
               },
-              "default": "\"block-start\"",
-              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
-              "fieldName": "position"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "role",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "fieldName": "role"
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "id",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "fieldName": "id"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "delay",
+              "kind": "field",
+              "name": "error",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "500",
-              "description": "The delay in milliseconds before the tooltip is opened.",
-              "fieldName": "delay"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "overlay",
-          "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 a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tooltip",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/tooltip/Tooltip.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tooltip",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/tooltip/Tooltip.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/toggle/Toggle.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",
-          "name": "Toggle",
-          "cssProperties": [
-            {
-              "description": "Controls the text color of the label, using our [color tokens](/tokens/#color).",
-              "name": "--n-label-color",
-              "default": "var(--n-color-text)"
-            }
-          ],
-          "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,
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -17642,40 +17498,37 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the toggle is checked or not.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "reverse",
+              "name": "hideRequired",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
-              "attribute": "reverse",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the toggle switch.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "attribute": "hide-required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "handleInput",
               "privacy": "protected",
               "parameters": [
                 {
@@ -17685,227 +17538,24 @@
                   }
                 }
               ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
+              "kind": "method",
+              "name": "renderLabel",
               "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "attribute": "hide-required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "additionalContent",
-                  "optional": true,
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
+              "parameters": [
+                {
+                  "name": "additionalContent",
+                  "optional": true,
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -18106,165 +17756,542 @@
               "fieldName": "reverse"
             },
             {
-              "name": "size",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the toggle switch.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "hide-required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "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 toggles when your intent is to turn something on or off instantly.\n- Use for any feature or option that can be turned on or off.\n- If a physical switch would work for the action, the toggle is probably the best component to use.\n- Use for making it possible to choose one or more options from a limited number of options.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Toggles should never require users to click a button to apply or save the setting.\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nToggle 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 toggle 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-toggle",
+          "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": "Toggle",
+            "module": "src/toggle/Toggle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toggle",
+          "declaration": {
+            "name": "Toggle",
+            "module": "src/toggle/Toggle.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/toast-group/ToastGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
+          "name": "ToastGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place toasts.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "addToast",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text/message of the toast."
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ToastOptions"
+                  },
+                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
+                }
+              ],
+              "description": "Convenience method for creating and adding a toast to the group.",
+              "return": {
+                "type": {
+                  "text": "Toast"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "toast"
+          ],
+          "tagName": "nord-toast-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast-group",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tooltip/Tooltip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
+          "name": "Tooltip",
+          "cssProperties": [
+            {
+              "description": "Controls the maximum inline size, or width, of the tooltip.",
+              "name": "--n-tooltip-max-size",
+              "default": "50ch"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tooltip content",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds shortcut keys to access the subject",
+              "name": "shortcut"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "lastOpened",
+              "type": {
+                "text": "Tooltip | undefined"
+              },
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "shortcutSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"shortcut\")"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "currentElement",
+              "type": {
+                "text": "FocusableElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "proxy",
+              "type": {
+                "text": "HTMLSpanElement | undefined"
+              },
+              "privacy": "private",
+              "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "TooltipStates"
+              },
+              "privacy": "private",
+              "default": "\"hidden\"",
+              "description": "The current state of the tooltip, dependent on the state machine"
+            },
+            {
+              "kind": "field",
+              "name": "coords",
+              "type": {
+                "text": "[number, number]"
+              },
+              "privacy": "private",
+              "default": "[0, 0]"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-start\"",
+              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the toggle switch.",
-              "fieldName": "size"
+              "default": "\"tooltip\"",
+              "description": "The tooltip role, set on the component by default.",
+              "attribute": "role",
+              "reflects": true
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The id for the active element to reference via aria-describedby.",
+              "attribute": "id",
+              "reflects": true
             },
             {
-              "name": "hint",
+              "kind": "field",
+              "name": "delay",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "500",
+              "description": "The delay in milliseconds before the tooltip is opened.",
+              "attribute": "delay",
+              "reflects": true
             },
             {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "handleIdChange",
+              "privacy": "protected"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "handleStateChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "prevState",
+                  "type": {
+                    "text": "TooltipStates"
+                  }
+                }
+              ]
             },
             {
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "updatePosition",
+              "privacy": "private",
+              "description": "Setting and updating the position of the tooltip"
             },
             {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "hideTooltip",
+              "privacy": "private"
             },
             {
-              "name": "hide-required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "reposition",
+              "privacy": "private"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "handleShow",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hideOnEscape",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "addDescribedBy",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "removeDescribedBy",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"block-start\"",
+              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
+              "fieldName": "position"
             },
             {
-              "name": "name",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"tooltip\"",
+              "description": "The tooltip role, set on the component by default.",
+              "fieldName": "role"
             },
             {
-              "name": "value",
+              "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The id for the active element to reference via aria-describedby.",
+              "fieldName": "id"
             },
             {
-              "name": "form",
+              "name": "delay",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "number"
               },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "default": "500",
+              "description": "The delay in milliseconds before the tooltip is opened.",
+              "fieldName": "delay"
             }
           ],
           "superclass": {
@@ -18273,36 +18300,12 @@
           },
           "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 toggles when your intent is to turn something on or off instantly.\n- Use for any feature or option that can be turned on or off.\n- If a physical switch would work for the action, the toggle is probably the best component to use.\n- Use for making it possible to choose one or more options from a limited number of options.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Toggles should never require users to click a button to apply or save the setting.\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nToggle 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 toggle 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",
+          "category": "overlay",
+          "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 a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-toggle",
-          "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"
-              }
-            }
-          ]
+          "tagName": "nord-tooltip",
+          "customElement": true
         }
       ],
       "exports": [
@@ -18310,16 +18313,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toggle",
-            "module": "src/toggle/Toggle.ts"
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-toggle",
+          "name": "nord-tooltip",
           "declaration": {
-            "name": "Toggle",
-            "module": "src/toggle/Toggle.ts"
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.ts"
           }
         }
       ]
@@ -19089,7 +19092,7 @@
               "kind": "field",
               "name": "renderHook",
               "type": {
-                "text": "Comment"
+                "text": "Comment | undefined"
               },
               "privacy": "private"
             },
@@ -19097,7 +19100,7 @@
               "kind": "field",
               "name": "lightDom",
               "type": {
-                "text": "LightDomController"
+                "text": "LightDomController | undefined"
               },
               "privacy": "private",
               "default": "new LightDomController(host, { render: () => (this.hasContent ? nothing : this.options.render()), renderOptions: { renderBefore: this.renderHook }, })"
@@ -19285,10 +19288,9 @@
               "kind": "field",
               "name": "observer",
               "type": {
-                "text": "ResizeObserver"
+                "text": "ResizeObserver | undefined"
               },
-              "privacy": "private",
-              "default": "new ResizeObserver(([entry]) => { const [borderBoxSize] = entry.borderBoxSize this.borderBoxSize = borderBoxSize host.requestUpdate() })"
+              "privacy": "private"
             },
             {
               "kind": "field",