@nordhealth/components 4.2.0 → 4.3.0

package/custom-elements.json

@@ -673,6 +673,123 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place an icon at the start of badge.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "default": "\"neutral\"",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "default": "\"neutral\"",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "attribute": "strong",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "default": "\"neutral\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "default": "\"neutral\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "fieldName": "strong"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "text",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s easy to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -1369,123 +1486,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            },
-            {
-              "description": "Used to place an icon at the start of badge.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "default": "\"neutral\"",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "default": "\"neutral\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "attribute": "strong",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "default": "\"neutral\"",
-              "fieldName": "type"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "default": "\"neutral\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "fieldName": "strong"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "text",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s easy to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/button-group/ButtonGroup.ts",
@@ -1782,6 +1782,16 @@
               "attribute": "max",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "attribute": "today",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "expand",
@@ -1861,6 +1871,11 @@
               "name": "handleDaySelect",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getToday",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "addDays",
@@ -2030,6 +2045,14 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "fieldName": "max"
             },
+            {
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "fieldName": "today"
+            },
             {
               "name": "expand",
               "type": {
@@ -5174,17 +5197,27 @@
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "today",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "string | undefined"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "first-day-of-week",
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "attribute": "today",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "dateAdapter",
+              "name": "firstDayOfWeek",
+              "type": {
+                "text": "DaysOfWeek"
+              },
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "attribute": "first-day-of-week",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dateAdapter",
               "type": {
                 "text": "DateAdapter"
               },
@@ -5817,6 +5850,14 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "fieldName": "max"
             },
+            {
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "fieldName": "today"
+            },
             {
               "name": "first-day-of-week",
               "type": {
@@ -10607,6 +10648,136 @@
         }
       ]
     },
+    {
+      "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/notification/Notification.ts",
@@ -10750,97 +10921,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
+      "path": "src/notification-group/NotificationGroup.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)"
-            }
-          ],
+          "description": "Notification group is used to position and style a group of notifications.",
+          "name": "NotificationGroup",
           "slots": [
             {
-              "description": "The main section of the sidebar, for holding nav components.",
+              "description": "Default slot in which to place notifications.",
               "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"
             }
           ],
+          "members": [],
           "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"
+              "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": {
@@ -10849,13 +10949,11 @@
           },
           "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",
+          "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": [
-            "nav-item"
-          ],
-          "tagName": "nord-navigation",
+          "dependencies": [],
+          "tagName": "nord-notification-group",
           "customElement": true
         }
       ],
@@ -10864,80 +10962,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-navigation",
+          "name": "nord-notification-group",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         }
       ]
     },
     {
       "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",
+      "path": "src/popout/Popout.ts",
       "declarations": [
         {
           "kind": "class",
@@ -14551,6 +14592,86 @@
         }
       ]
     },
+    {
+      "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",
@@ -14661,49 +14782,125 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/skeleton/Skeleton.ts",
+      "path": "src/stack/Stack.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",
+          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
+          "name": "Stack",
           "cssProperties": [
             {
-              "description": "Controls 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 spacing between items, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-stack-gap",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
             {
-              "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)"
+              "description": "The stack content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "effect",
+              "name": "gap",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
+                "text": "\"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "attribute": "effect",
+              "default": "\"m\"",
+              "description": "The space injected between components.",
+              "attribute": "gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "alignItems",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"stretch\" | undefined"
+              },
+              "default": "\"stretch\"",
+              "description": "How to align the child items inside the stack.",
+              "attribute": "align-items",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "justifyContent",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "attribute": "justify-content",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "effect",
+              "name": "gap",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
+                "text": "\"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "fieldName": "effect"
+              "default": "\"m\"",
+              "description": "The space injected between components.",
+              "fieldName": "gap"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "align-items",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"stretch\" | undefined"
+              },
+              "default": "\"stretch\"",
+              "description": "How to align the child items inside the stack.",
+              "fieldName": "alignItems"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "justify-content",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "fieldName": "justifyContent"
             }
           ],
           "superclass": {
@@ -14712,11 +14909,11 @@
           },
           "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",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to stack multiple components vertically or horizontally.\n- Use when you want to adjust the white space between two or more components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for building grid based layouts.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-skeleton",
+          "tagName": "nord-stack",
           "customElement": true
         }
       ],
@@ -14725,16 +14922,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-skeleton",
+          "name": "nord-stack",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
           }
         }
       ]
@@ -14834,162 +15031,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/stack/Stack.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
-          "name": "Stack",
-          "cssProperties": [
-            {
-              "description": "Controls the spacing between items, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-stack-gap",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The stack content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "\"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The space injected between components.",
-              "attribute": "gap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "alignItems",
-              "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"stretch\" | undefined"
-              },
-              "default": "\"stretch\"",
-              "description": "How to align the child items inside the stack.",
-              "attribute": "align-items",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
-              "attribute": "wrap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "justifyContent",
-              "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
-              },
-              "description": "How to justify the child items inside the stack.",
-              "attribute": "justify-content",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "gap",
-              "type": {
-                "text": "\"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The space injected between components.",
-              "fieldName": "gap"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "align-items",
-              "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"stretch\" | undefined"
-              },
-              "default": "\"stretch\"",
-              "description": "How to align the child items inside the stack.",
-              "fieldName": "alignItems"
-            },
-            {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
-              "fieldName": "wrap"
-            },
-            {
-              "name": "justify-content",
-              "type": {
-                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
-              },
-              "description": "How to justify the child items inside the stack.",
-              "fieldName": "justifyContent"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to stack multiple components vertically or horizontally.\n- Use when you want to adjust the white space between two or more components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for building grid based layouts.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-stack",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-stack",
-          "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",
@@ -17344,342 +17385,76 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tooltip/Tooltip.ts",
+      "path": "src/toggle/Toggle.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",
+          "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 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
-            },
-            {
-              "kind": "field",
-              "name": "shortcutSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"shortcut\")"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "currentElement",
+              "name": "checked",
               "type": {
-                "text": "FocusableElement | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Controls whether the toggle is checked or not.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "timeoutId",
+              "name": "reverse",
               "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "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": "proxy",
+              "name": "size",
               "type": {
-                "text": "HTMLSpanElement | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "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": "string"
-              },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "attribute": "id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "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"
-            },
-            {
-              "kind": "field",
-              "name": "removeDescribedBy",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "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.",
-              "fieldName": "position"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "fieldName": "role"
-            },
-            {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "fieldName": "id"
-            },
-            {
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "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,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the toggle is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "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": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the toggle switch.",
-              "attribute": "size",
-              "reflects": true
+              "default": "\"m\"",
+              "description": "The size of the toggle switch.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -17938,341 +17713,631 @@
               }
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "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.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formAncestor",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_formId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "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.",
+              "attribute": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the toggle is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "reverse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
+              "fieldName": "reverse"
+            },
+            {
+              "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"
               }
             },
             {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
+              "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": "hasError",
-              "privacy": "protected",
-              "readonly": true,
+              "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": "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.",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the form component.",
-              "attribute": "name",
-              "reflects": true,
+              "fieldName": "name",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The value of the form component.",
-              "attribute": "value",
+              "fieldName": "value",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formAncestor",
+              "name": "form",
               "type": {
                 "text": "HTMLFormElement | null"
               },
-              "privacy": "private",
-              "default": "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"
             },
             {
-              "kind": "field",
-              "name": "_formId",
+              "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": "string | undefined"
+                "text": "NordEvent"
               },
-              "privacy": "protected",
+              "description": "Fired as the user types into the input.",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "form",
+              "name": "change",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "NordEvent"
               },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "attribute": "form",
+              "description": "Fired whenever the input's value is changed via user interaction.",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "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/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": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "lastOpened",
+              "type": {
+                "text": "Tooltip | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "shortcutSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"shortcut\")"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "kind": "field",
+              "name": "currentElement",
+              "type": {
+                "text": "FocusableElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
-              "name": "checked",
+              "kind": "field",
+              "name": "timeoutId",
               "type": {
-                "text": "boolean"
+                "text": "ReturnType<typeof setTimeout> | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the toggle is checked or not.",
-              "fieldName": "checked"
+              "privacy": "private"
             },
             {
-              "name": "reverse",
+              "kind": "field",
+              "name": "proxy",
               "type": {
-                "text": "boolean"
+                "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": "false",
-              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
-              "fieldName": "reverse"
+              "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
             },
             {
-              "name": "size",
+              "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": {
@@ -18281,36 +18346,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": [
@@ -18318,16 +18359,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"
           }
         }
       ]