@nordhealth/components 3.5.0 → 3.6.0

package/custom-elements.json

@@ -546,6 +546,91 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/avatar/Avatar.ts",
@@ -1330,91 +1415,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/button-group/ButtonGroup.ts",
@@ -4831,88 +4831,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/Divider.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",
-          "name": "Divider",
-          "cssProperties": [
-            {
-              "description": "Controls the color of the divider, using our [color tokens](/tokens/#color).",
-              "name": "--n-divider-color",
-              "default": "var(--n-color-border)"
-            },
-            {
-              "description": "Controls the size, or thickness, of the divider.",
-              "name": "--n-divider-size",
-              "default": "1px"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the divider.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleDirectionChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the divider.",
-              "fieldName": "direction"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "new",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to represent thematic breaks between elements.\n- Use when you need to divide sections of content from each other.\n- Use to separate content into clear groups.\n- Use dividers sparingly, to create groupings or to separate items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using for presentational purposes only.\n- Don’t use strong colors in dividers.\n- Don’t use dividers for replacing card components.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Divider uses a role called `separator` which indicates that the element is a divider that separates and distinguishes sections of content or groups of menu items. The implicit ARIA role of the native thematic break (`<hr>` element) is a separator.\n- Dividers have an implicit aria-orientation value of `horizontal` which can be changed using the `direction` property.\n- For more details, please see [ARIA: separator role on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role).\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-divider",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Divider",
-            "module": "src/divider/Divider.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-divider",
-          "declaration": {
-            "name": "Divider",
-            "module": "src/divider/Divider.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/date-picker/DatePicker.ts",
@@ -5952,12 +5870,94 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/drawer/Drawer.ts",
+      "path": "src/divider/Divider.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",
-          "name": "Drawer",
+          "description": "Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",
+          "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "Controls the color of the divider, using our [color tokens](/tokens/#color).",
+              "name": "--n-divider-color",
+              "default": "var(--n-color-border)"
+            },
+            {
+              "description": "Controls the size, or thickness, of the divider.",
+              "name": "--n-divider-size",
+              "default": "1px"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the divider.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleDirectionChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the divider.",
+              "fieldName": "direction"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to represent thematic breaks between elements.\n- Use when you need to divide sections of content from each other.\n- Use to separate content into clear groups.\n- Use dividers sparingly, to create groupings or to separate items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using for presentational purposes only.\n- Don’t use strong colors in dividers.\n- Don’t use dividers for replacing card components.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Divider uses a role called `separator` which indicates that the element is a divider that separates and distinguishes sections of content or groups of menu items. The implicit ARIA role of the native thematic break (`<hr>` element) is a separator.\n- Dividers have an implicit aria-orientation value of `horizontal` which can be changed using the `direction` property.\n- For more details, please see [ARIA: separator role on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role).\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-divider",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Divider",
+            "module": "src/divider/Divider.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-divider",
+          "declaration": {
+            "name": "Divider",
+            "module": "src/divider/Divider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/drawer/Drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",
+          "name": "Drawer",
           "cssProperties": [
             {
               "description": "Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).",
@@ -6870,495 +6870,325 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/Layout.ts",
+      "path": "src/icon/Icon.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
-          "name": "Layout",
-          "cssProperties": [
-            {
-              "description": "Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).",
-              "name": "--n-layout-padding",
-              "default": "var(--n-space-l)"
-            },
-            {
-              "description": "Controls the width of the drawer area, when used.",
-              "name": "--n-layout-drawer-inline-size",
-              "default": "320px"
-            },
+          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
+          "name": "Icon",
+          "slots": [
             {
-              "description": "Controls the background color of the layout, using [color tokens](/tokens/#color).",
-              "name": "--n-layout-background-color",
-              "default": "var(--n-color-background)"
+              "description": "The default slot used for placing a custom SVG icon.",
+              "name": ""
             }
           ],
-          "slots": [
+          "members": [
             {
-              "description": "The default main section content.",
-              "name": ""
+              "kind": "field",
+              "name": "manager",
+              "privacy": "private",
+              "static": true,
+              "default": "new IconManager()"
             },
             {
-              "description": "Used to place content inside the navigation sidebar.",
-              "name": "nav"
+              "kind": "method",
+              "name": "registerResolver",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "resolver",
+                  "type": {
+                    "text": "IconResolver"
+                  },
+                  "description": "The resolver function to register."
+                }
+              ],
+              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
             },
             {
-              "description": "Used to place the [Top Bar](../top-bar/) component.",
-              "name": "top-bar"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "{ title: string; default: string }"
+                  },
+                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
-              "description": "Used to place content inside the header section.",
-              "name": "header"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the icon to be registered."
+                },
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The SVG string for the icon."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
-              "description": "Used to place additional content/details relating to a selected item.",
-              "name": "drawer"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "iconOrName",
+                  "type": {
+                    "text": "string | { title: string; default: string }"
+                  },
+                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
+                },
+                {
+                  "name": "icon",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The SVG string for the icon."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
-            {
-              "description": "Used to place a own nav-toggle component, for cases where you might need to add a tooltip.",
-              "name": "nav-toggle"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "peekTimeoutId",
+              "name": "name",
               "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "navSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"nav\")"
+              "name": "size",
+              "type": {
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+              },
+              "description": "The size of the icon.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "drawerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"drawer\")"
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "topBarSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"top-bar\")"
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "headerSlot",
+              "name": "svg",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "default": "\"\""
             },
             {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "lightDismiss",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "broadcast",
-              "privacy": "private",
-              "default": "new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "navEl",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "navWidth",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "isDragging",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "navState",
-              "type": {
-                "text": "NavState"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "wideScreen",
-              "privacy": "private"
-            },
+              "kind": "method",
+              "name": "handleNameChange",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "navOpen",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
-              "attribute": "nav-open",
-              "reflects": true
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "persistNavState",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
-              "attribute": "persist-nav-state"
+              "description": "The size of the icon.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "syncNavState",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
-              "attribute": "sync-nav-state",
-              "reflects": true
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "padding",
+              "name": "label",
               "type": {
-                "text": "\"m\" | \"none\""
+                "text": "string | undefined"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            },
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "image",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/IconManager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconManager",
+          "members": [
             {
               "kind": "field",
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the layout's header has sticky positioning.",
-              "attribute": "sticky",
-              "reflects": true
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
             },
             {
               "kind": "field",
-              "name": "isNarrow",
+              "name": "resolver",
               "type": {
-                "text": "boolean"
-              },
-              "description": "A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\nA narrow viewport is considered to be less than 768px wide.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "renderNavToggle",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderNavCollapse",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleNavWidthChange",
-              "privacy": "protected"
+                "text": "IconResolver"
+              }
             },
             {
               "kind": "method",
-              "name": "handleNavStateChange",
-              "privacy": "protected",
+              "name": "resolve",
               "parameters": [
                 {
-                  "name": "prev",
+                  "name": "name",
                   "type": {
-                    "text": "NavState"
+                    "text": "string"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange",
-              "privacy": "protected",
-              "parameters": [
+                },
                 {
-                  "name": "prev",
+                  "name": "onResolved",
                   "type": {
-                    "text": "boolean"
+                    "text": "(svg: string) => void"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "navTransition",
-              "privacy": "private",
+              "name": "registerIcon",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "iconOrName",
                   "type": {
-                    "text": "NavEvent"
+                    "text": "string | { title: string; default: string }"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleNavClick",
-              "privacy": "private",
-              "parameters": [
+                },
                 {
-                  "name": "e",
+                  "name": "icon",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleMainClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDropdownOpen",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDropdownClose",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleMediaQueryChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleToggleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleNavFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleMainFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleMouseEnter",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleMouseLeave",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleTransitionEnd",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyboardResize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setNavWidth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "width",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "startDragging",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "stopDragging",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "nav-open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
-              "fieldName": "navOpen"
-            },
-            {
-              "name": "persist-nav-state",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
-              "fieldName": "persistNavState"
-            },
-            {
-              "name": "sync-nav-state",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
-              "fieldName": "syncNavState"
-            },
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
-              "fieldName": "padding"
-            },
-            {
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the layout's header has sticky positioning.",
-              "fieldName": "sticky"
-            }
-          ],
-          "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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n\n---\n\n## Theming\n\nPlease see the [Accent color](/themes/#accent-color) and [Top Bar theming](/themes/#top-bar-theming) sections in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#accent-color\">Theming Guidelines</nord-button>\n",
-          "examples": [],
-          "dependencies": [
-            "icon",
-            "nav-toggle"
-          ],
-          "tagName": "nord-layout",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-layout",
-          "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/input/Input.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
-          "cssProperties": [
-            {
-              "description": "Controls the inline size, or width, of the input.",
-              "name": "--n-input-inline-size",
-              "default": "240px"
+              "name": "clear"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconManager",
+          "declaration": {
+            "name": "IconManager",
+            "module": "src/icon/IconManager.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/input/Input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the input.",
+              "name": "--n-input-inline-size",
+              "default": "240px"
             },
             {
               "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
@@ -8081,471 +7911,641 @@
               }
             },
             {
-              "name": "autocomplete",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "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 to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-input",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/Layout.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
+          "name": "Layout",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-layout-padding",
+              "default": "var(--n-space-l)"
+            },
+            {
+              "description": "Controls the width of the drawer area, when used.",
+              "name": "--n-layout-drawer-inline-size",
+              "default": "320px"
+            },
+            {
+              "description": "Controls the background color of the layout, using [color tokens](/tokens/#color).",
+              "name": "--n-layout-background-color",
+              "default": "var(--n-color-background)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default main section content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place content inside the navigation sidebar.",
+              "name": "nav"
+            },
+            {
+              "description": "Used to place the [Top Bar](../top-bar/) component.",
+              "name": "top-bar"
+            },
+            {
+              "description": "Used to place content inside the header section.",
+              "name": "header"
+            },
+            {
+              "description": "Used to place additional content/details relating to a selected item.",
+              "name": "drawer"
+            },
+            {
+              "description": "Used to place a own nav-toggle component, for cases where you might need to add a tooltip.",
+              "name": "nav-toggle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "peekTimeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"nav\")"
+            },
+            {
+              "kind": "field",
+              "name": "drawerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"drawer\")"
+            },
+            {
+              "kind": "field",
+              "name": "topBarSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"top-bar\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "privacy": "private",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "broadcast",
+              "privacy": "private",
+              "default": "new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "navEl",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "navState",
+              "type": {
+                "text": "NavState"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "wideScreen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navOpen",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "boolean"
               },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
+              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
+              "attribute": "nav-open",
+              "reflects": true
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "persistNavState",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
+              "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
+              "attribute": "persist-nav-state"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "syncNavState",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
+              "attribute": "sync-nav-state",
+              "reflects": true
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "padding",
               "type": {
-                "text": "string | undefined"
+                "text": "\"m\" | \"none\""
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"m\"",
+              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "sticky",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the layout's header has sticky positioning.",
+              "attribute": "sticky",
+              "reflects": true
             },
             {
-              "name": "form",
+              "kind": "field",
+              "name": "isNarrow",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "boolean"
               },
-              "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": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
+              "description": "A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\nA narrow viewport is considered to be less than 768px wide.",
+              "readonly": true
             },
             {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
+              "kind": "method",
+              "name": "renderNavToggle",
+              "privacy": "private"
             },
             {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
+              "kind": "method",
+              "name": "renderNavCollapse",
+              "privacy": "private"
             },
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "kind": "method",
+              "name": "handleNavWidthChange",
+              "privacy": "protected"
             },
             {
-              "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 to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-input",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "method",
+              "name": "handleNavStateChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "NavState"
+                  }
+                }
+              ]
             },
             {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-input",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
-          "name": "Icon",
-          "slots": [
-            {
-              "description": "The default slot used for placing a custom SVG icon.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "manager",
-              "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "kind": "method",
+              "name": "handleOpenChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "registerResolver",
-              "static": true,
+              "name": "navTransition",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "resolver",
+                  "name": "event",
                   "type": {
-                    "text": "IconResolver"
-                  },
-                  "description": "The resolver function to register."
+                    "text": "NavEvent"
+                  }
                 }
-              ],
-              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
+              ]
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "handleNavClick",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "icon",
+                  "name": "e",
                   "type": {
-                    "text": "{ title: string; default: string }"
-                  },
-                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
+                    "text": "Event"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              ]
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "handleMainClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDropdownOpen",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the icon to be registered."
-                },
-                {
-                  "name": "icon",
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The SVG string for the icon."
+                    "text": "Event"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              ]
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
+              "name": "handleDropdownClose",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "iconOrName",
-                  "type": {
-                    "text": "string | { title: string; default: string }"
-                  },
-                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
-                },
-                {
-                  "name": "icon",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The SVG string for the icon."
+                    "text": "Event"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              ]
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              "name": "handleMediaQueryChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
-              },
-              "description": "The size of the icon.",
-              "attribute": "size",
-              "reflects": true
+              "name": "handleToggleClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "name": "handleNavFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
+              "name": "handleMainFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "svg",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"\""
-            },
-            {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
-              },
-              "description": "The size of the icon.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "name": "handleMouseEnter",
+              "privacy": "private"
             },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "image",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/IconManager.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IconManager",
-          "members": [
             {
               "kind": "field",
-              "name": "cache",
-              "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
+              "name": "handleMouseLeave",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "resolver",
-              "type": {
-                "text": "IconResolver"
-              }
+              "name": "handleTransitionEnd",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "resolve",
+              "name": "handleKeyboardResize",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "name",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "KeyboardEvent"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setNavWidth",
+              "privacy": "private",
+              "parameters": [
                 {
-                  "name": "onResolved",
+                  "name": "width",
                   "type": {
-                    "text": "(svg: string) => void"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "registerIcon",
+              "name": "startDragging",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "iconOrName",
+                  "name": "e",
                   "type": {
-                    "text": "string | { title: string; default: string }"
+                    "text": "PointerEvent"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "stopDragging",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDrag",
+              "privacy": "private",
+              "parameters": [
                 {
-                  "name": "icon",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "PointerEvent"
                   }
                 }
               ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "nav-open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
+              "fieldName": "navOpen"
+            },
+            {
+              "name": "persist-nav-state",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
+              "fieldName": "persistNavState"
+            },
+            {
+              "name": "sync-nav-state",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
+              "fieldName": "syncNavState"
+            },
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
+              "fieldName": "padding"
             },
             {
-              "kind": "method",
-              "name": "clear"
+              "name": "sticky",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the layout's header has sticky positioning.",
+              "fieldName": "sticky"
             }
-          ]
+          ],
+          "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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n\n---\n\n## Theming\n\nPlease see the [Accent color](/themes/#accent-color) and [Top Bar theming](/themes/#top-bar-theming) sections in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#accent-color\">Theming Guidelines</nord-button>\n",
+          "examples": [],
+          "dependencies": [
+            "icon",
+            "nav-toggle"
+          ],
+          "tagName": "nord-layout",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "IconManager",
+          "name": "default",
           "declaration": {
-            "name": "IconManager",
-            "module": "src/icon/IconManager.ts"
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-layout",
+          "declaration": {
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
           }
         }
       ]
@@ -8738,69 +8738,274 @@
               "description": "the lang code e.g. \"en\" or \"en-GB\""
             }
           ],
-          "description": "Check whether there is a translation registered for the given lang"
-        },
-        {
-          "kind": "function",
-          "name": "resolveTranslation",
-          "parameters": [
+          "description": "Check whether there is a translation registered for the given lang"
+        },
+        {
+          "kind": "function",
+          "name": "resolveTranslation",
+          "parameters": [
+            {
+              "name": "langCode",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "clearTranslations",
+          "declaration": {
+            "name": "clearTranslations",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTranslation",
+          "declaration": {
+            "name": "registerTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "subscribe",
+          "declaration": {
+            "name": "subscribe",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isTranslationRegistered",
+          "declaration": {
+            "name": "isTranslationRegistered",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveTranslation",
+          "declaration": {
+            "name": "resolveTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fallback",
+          "declaration": {
+            "name": "en",
+            "module": "src/localization/translation.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/message/Message.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
+          "name": "Message",
+          "cssProperties": [
+            {
+              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
+              "name": "--n-message-border-color",
+              "default": "var(--n-color-border)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The message content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place content after the message. Typically used for a timestamp.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-message\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "attribute": "highlight",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "unread",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Mark the message as unread. By default messages are read.",
+              "attribute": "unread",
+              "reflects": true
+            },
+            {
+              "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": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "fieldName": "highlight"
+            },
+            {
+              "name": "unread",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Mark the message as unread. By default messages are read.",
+              "fieldName": "unread"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
             {
-              "name": "langCode",
-              "type": {
-                "text": "string"
-              }
+              "name": "unreadLabel",
+              "description": "Label for the unread messages."
             }
           ],
-          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+          "status": "draft",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage 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 message 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\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
+          "examples": [],
+          "dependencies": [
+            "dropdown-item"
+          ],
+          "tagName": "nord-message",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "clearTranslations",
-          "declaration": {
-            "name": "clearTranslations",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerTranslation",
-          "declaration": {
-            "name": "registerTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "subscribe",
+          "name": "default",
           "declaration": {
-            "name": "subscribe",
-            "module": "src/localization/translation.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "isTranslationRegistered",
+          "kind": "custom-element-definition",
+          "name": "nord-message",
           "declaration": {
-            "name": "isTranslationRegistered",
-            "module": "src/localization/translation.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/message/localization.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "resolveTranslation",
-          "declaration": {
-            "name": "resolveTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  unreadLabel: \"Unread\",\n}"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "fallback",
+          "name": "default",
           "declaration": {
-            "name": "en",
-            "module": "src/localization/translation.ts"
+            "name": "localization",
+            "module": "src/message/localization.ts"
           }
         }
       ]
@@ -9147,277 +9352,72 @@
               "type": {
                 "text": "HTMLButtonElement | undefined"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "block"
-            },
-            {
-              "kind": "method",
-              "name": "unblock"
-            },
-            {
-              "kind": "field",
-              "name": "trackLastButton",
-              "privacy": "private",
-              "description": "capture the last button clicked, so that we can polyfill `submitter` property in submit event"
-            },
-            {
-              "kind": "field",
-              "name": "polyfillSubmitter",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleTransitionEnd",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleLightDismiss",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSubmit",
-              "privacy": "private"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ModalController",
-          "declaration": {
-            "name": "ModalController",
-            "module": "src/modal/ModalController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modal/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  closeLabel: \"Close dialog\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/modal/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/message/Message.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
-          "name": "Message",
-          "cssProperties": [
-            {
-              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
-              "name": "--n-message-border-color",
-              "default": "var(--n-color-border)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The message content.",
-              "name": ""
-            },
-            {
-              "description": "Used to place content after the message. Typically used for a timestamp.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-message\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The url the message should link to.",
-              "attribute": "href",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "attribute": "highlight",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "attribute": "unread",
-              "reflects": true
-            },
-            {
-              "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."
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "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"
-              }
+              "name": "block"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "name": "unblock"
+            },
             {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The url the message should link to.",
-              "fieldName": "href"
+              "kind": "field",
+              "name": "trackLastButton",
+              "privacy": "private",
+              "description": "capture the last button clicked, so that we can polyfill `submitter` property in submit event"
             },
             {
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "fieldName": "highlight"
+              "kind": "field",
+              "name": "polyfillSubmitter",
+              "privacy": "private"
             },
             {
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "fieldName": "unread"
-            }
-          ],
-          "mixins": [
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
+            },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
+              "kind": "field",
+              "name": "handleLightDismiss",
+              "privacy": "private"
+            },
             {
-              "name": "unreadLabel",
-              "description": "Label for the unread messages."
+              "kind": "field",
+              "name": "handleSubmit",
+              "privacy": "private"
             }
-          ],
-          "status": "draft",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage 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 message 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\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "dropdown-item"
-          ],
-          "tagName": "nord-message",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-message",
+          "name": "ModalController",
           "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
+            "name": "ModalController",
+            "module": "src/modal/ModalController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/message/localization.ts",
+      "path": "src/modal/localization.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -9425,7 +9425,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  unreadLabel: \"Unread\",\n}"
+          "default": "{\n  closeLabel: \"Close dialog\",\n}"
         }
       ],
       "exports": [
@@ -9434,77 +9434,7 @@
           "name": "default",
           "declaration": {
             "name": "localization",
-            "module": "src/message/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/nav-group/NavGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
-          "name": "NavGroup",
-          "slots": [
-            {
-              "description": "The default slot used for the nav items.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "attribute": "heading"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "fieldName": "heading"
-            }
-          ],
-          "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- 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 use for grouping other types of content.\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": [
-            "icon"
-          ],
-          "tagName": "nord-nav-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-nav-group",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "module": "src/modal/localization.ts"
           }
         }
       ]
@@ -9776,8 +9706,78 @@
           "kind": "custom-element-definition",
           "name": "nord-nav-item",
           "declaration": {
-            "name": "NavItem",
-            "module": "src/nav-item/NavItem.ts"
+            "name": "NavItem",
+            "module": "src/nav-item/NavItem.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-group/NavGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
+          "slots": [
+            {
+              "description": "The default slot used for the nav items.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
+            }
+          ],
+          "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- 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 use for grouping other types of content.\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": [
+            "icon"
+          ],
+          "tagName": "nord-nav-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
           }
         }
       ]
@@ -9871,11 +9871,262 @@
           "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 with the toggle that’s labelled as `Toggle navigation`.\n- We recommend setting a keyboard shortcut that toggles the navigation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic button or toggle. Use the [Button component](/components/button/) instead.\n\n</div>\n",
           "examples": [],
           "dependencies": [
-            "button",
-            "icon",
-            "visually-hidden"
+            "button",
+            "icon",
+            "visually-hidden"
+          ],
+          "tagName": "nord-nav-toggle",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-toggle",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  label: \"Toggle navigation\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/nav-toggle/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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": "handleActivate",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "dependencies": [
+            "nav-item"
+          ],
+          "tagName": "nord-navigation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-navigation",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification/Notification.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
+          "name": "Notification",
+          "slots": [
+            {
+              "description": "Default slot used for the notification text/message.",
+              "name": ""
+            },
+            {
+              "description": "Slot used for the notification icon.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-notification\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "notificationRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dismissed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NotificationMixin",
+              "module": "/src/common/mixins/NotificationMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "dismissLabel",
+              "description": "Accessible label for the dismiss button."
+            }
+          ],
+          "status": "draft",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\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": [
+            "stack",
+            "icon"
           ],
-          "tagName": "nord-nav-toggle",
+          "tagName": "nord-notification",
           "customElement": true
         }
       ],
@@ -9884,23 +10135,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavToggle",
-            "module": "src/nav-toggle/NavToggle.ts"
+            "name": "Notification",
+            "module": "src/notification/Notification.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-nav-toggle",
+          "name": "nord-notification",
           "declaration": {
-            "name": "NavToggle",
-            "module": "src/nav-toggle/NavToggle.ts"
+            "name": "Notification",
+            "module": "src/notification/Notification.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-toggle/localization.ts",
+      "path": "src/notification/localization.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -9908,7 +10159,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  label: \"Toggle navigation\",\n}"
+          "default": "{\n  dismissLabel: \"Dismiss notification\",\n}"
         }
       ],
       "exports": [
@@ -9917,99 +10168,7 @@
           "name": "default",
           "declaration": {
             "name": "localization",
-            "module": "src/nav-toggle/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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": "handleActivate",
-              "privacy": "private"
-            }
-          ],
-          "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"
+            "module": "src/notification/localization.ts"
           }
         }
       ]
@@ -10398,147 +10557,12 @@
             "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- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, 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 popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-popout",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-popout",
-          "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification/Notification.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
-          "name": "Notification",
-          "slots": [
-            {
-              "description": "Default slot used for the notification text/message.",
-              "name": ""
-            },
-            {
-              "description": "Slot used for the notification icon.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-notification\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "notificationRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dismissed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dismiss",
-              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "dismiss",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "NotificationMixin",
-              "module": "/src/common/mixins/NotificationMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "dismissLabel",
-              "description": "Accessible label for the dismiss button."
-            }
-          ],
-          "status": "draft",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\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": [
-            "stack",
-            "icon"
-          ],
-          "tagName": "nord-notification",
+          "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- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, 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 popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-popout",
           "customElement": true
         }
       ],
@@ -10547,40 +10571,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Notification",
-            "module": "src/notification/Notification.ts"
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-notification",
-          "declaration": {
-            "name": "Notification",
-            "module": "src/notification/Notification.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  dismissLabel: \"Dismiss notification\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "nord-popout",
           "declaration": {
-            "name": "localization",
-            "module": "src/notification/localization.ts"
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
           }
         }
       ]
@@ -13328,114 +13328,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/spinner/Spinner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
-          "name": "Spinner",
-          "cssProperties": [
-            {
-              "description": "Controls the color the spinner.",
-              "name": "--n-spinner-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-spinner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/stack/Stack.ts",
@@ -13687,6 +13579,114 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/spinner/Spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "cssProperties": [
+            {
+              "description": "Controls the color the spinner.",
+              "name": "--n-spinner-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",