@nordhealth/components 3.5.0 → 3.6.1

package/custom-elements.json

@@ -433,119 +433,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            },
-            {
-              "description": "Used to place an icon at the start of badge.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "attribute": "strong",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "fieldName": "type"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "fieldName": "strong"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "text",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/avatar/Avatar.ts",
@@ -1330,6 +1217,119 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place an icon at the start of badge.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "attribute": "strong",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "fieldName": "type"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "fieldName": "strong"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "text",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/banner/Banner.ts",
@@ -1417,133 +1417,30 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroup.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
           "cssProperties": [
             {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-calendar-border-radius",
+              "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "direction",
+              "name": "monthSelectNode",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "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 group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
@@ -2021,129 +1918,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            },
-            {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -2867,40 +2641,266 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "cssProperties": [
             {
-              "description": "Controls the max inline size, or width, of the command menu.",
-              "name": "--n-command-menu-inline-size",
-              "default": "640px"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
             },
             {
-              "description": "Controls the max block size, or height, of the command menu.",
-              "name": "--n-command-menu-block-size",
-              "default": "290px"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             },
             {
-              "description": "Controls the command menu offset from the block start, or top, of the screen.",
-              "name": "--n-command-menu-block-start",
-              "default": "16%"
-            }
-          ],
-          "slots": [
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
             {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "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 group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/command-menu/CommandMenu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
+          "name": "CommandMenu",
+          "cssProperties": [
+            {
+              "description": "Controls the max inline size, or width, of the command menu.",
+              "name": "--n-command-menu-inline-size",
+              "default": "640px"
+            },
+            {
+              "description": "Controls the max block size, or height, of the command menu.",
+              "name": "--n-command-menu-block-size",
+              "default": "290px"
+            },
+            {
+              "description": "Controls the command menu offset from the block start, or top, of the screen.",
+              "name": "--n-command-menu-block-start",
+              "default": "16%"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Used to replace the default footer contents.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -4833,102 +4833,20 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/divider/Divider.ts",
+      "path": "src/date-picker/DatePicker.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"
-            }
-          ],
+          "description": "\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",
+          "name": "DatePicker",
           "members": [
             {
               "kind": "field",
-              "name": "direction",
+              "name": "toggleButton",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "Button"
               },
-              "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",
-          "name": "DatePicker",
-          "members": [
-            {
-              "kind": "field",
-              "name": "toggleButton",
-              "type": {
-                "text": "Button"
-              },
-              "privacy": "private"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -5950,6 +5868,88 @@
         }
       ]
     },
+    {
+      "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/drawer/Drawer.ts",
@@ -6870,478 +6870,308 @@
     },
     {
       "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": "Controls the background color of the layout, using [color tokens](/tokens/#color).",
-              "name": "--n-layout-background-color",
-              "default": "var(--n-color-background)"
-            }
-          ],
+          "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 main section content.",
+              "description": "The default slot used for placing a custom SVG icon.",
               "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",
+              "name": "manager",
               "privacy": "private",
-              "default": "new SlotController(this, \"drawer\")"
+              "static": true,
+              "default": "new IconManager()"
             },
             {
-              "kind": "field",
-              "name": "topBarSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"top-bar\")"
+              "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."
             },
             {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "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."
             },
             {
-              "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": "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."
             },
             {
-              "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": "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."
             },
             {
               "kind": "field",
-              "name": "navEl",
+              "name": "name",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "string"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "navWidth",
-              "privacy": "private"
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isDragging",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "The size of the icon.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "navState",
+              "name": "color",
               "type": {
-                "text": "NavState"
+                "text": "string | undefined"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "wideScreen",
-              "privacy": "private"
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "navOpen",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
-              "attribute": "nav-open",
+              "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": "persistNavState",
+              "name": "svg",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
+              "privacy": "private",
+              "default": "\"\""
             },
             {
-              "kind": "field",
-              "name": "syncNavState",
+              "kind": "method",
+              "name": "handleNameChange",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "padding",
+              "name": "size",
               "type": {
-                "text": "\"m\" | \"none\""
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | 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": "The size of the icon.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "sticky",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the layout's header has sticky positioning.",
-              "attribute": "sticky",
-              "reflects": true
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "isNarrow",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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"
-            },
+              "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": "method",
-              "name": "renderNavCollapse",
-              "privacy": "private"
+              "kind": "field",
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
             },
             {
-              "kind": "method",
-              "name": "handleNavWidthChange",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "resolver",
+              "type": {
+                "text": "IconResolver"
+              }
             },
             {
               "kind": "method",
-              "name": "handleNavStateChange",
-              "privacy": "protected",
+              "name": "resolve",
               "parameters": [
                 {
-                  "name": "prev",
+                  "name": "name",
                   "type": {
-                    "text": "NavState"
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "onResolved",
+                  "type": {
+                    "text": "(svg: string) => void"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleOpenChange",
-              "privacy": "protected",
+              "name": "registerIcon",
               "parameters": [
                 {
-                  "name": "prev",
+                  "name": "iconOrName",
                   "type": {
-                    "text": "boolean"
+                    "text": "string | { title: string; default: string }"
+                  }
+                },
+                {
+                  "name": "icon",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "navTransition",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "NavEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleNavClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "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"
+              "name": "clear"
             }
-          ],
-          "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",
+          "name": "IconManager",
           "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
+            "name": "IconManager",
+            "module": "src/icon/IconManager.ts"
           }
         }
       ]
@@ -8244,308 +8074,478 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
+      "path": "src/layout/Layout.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": "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": "The default slot used for placing a custom SVG icon.",
-              "name": ""
+              "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)"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "manager",
-              "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "description": "The default main section content.",
+              "name": ""
             },
             {
-              "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 content inside the navigation sidebar.",
+              "name": "nav"
             },
             {
-              "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 the [Top Bar](../top-bar/) component.",
+              "name": "top-bar"
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "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"
               },
-              "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."
+              "privacy": "private"
             },
             {
-              "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."
+              "kind": "field",
+              "name": "navSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"nav\")"
             },
             {
               "kind": "field",
-              "name": "name",
+              "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": "string"
+                "text": "HTMLDivElement"
               },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "navWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDragging",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "boolean"
               },
-              "description": "The size of the icon.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "navState",
               "type": {
-                "text": "string | undefined"
+                "text": "NavState"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "wideScreen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navOpen",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "attribute": "label",
+              "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
             },
             {
               "kind": "field",
-              "name": "svg",
+              "name": "persistNavState",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "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"
             },
             {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "syncNavState",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
+              "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
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "padding",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "\"m\" | \"none\""
               },
-              "description": "The size of the icon.",
-              "fieldName": "size"
+              "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": "color",
+              "kind": "field",
+              "name": "sticky",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "default": "false",
+              "description": "Controls whether the layout's header has sticky positioning.",
+              "attribute": "sticky",
+              "reflects": true
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "isNarrow",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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": [
+              "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": "field",
-              "name": "cache",
+              "kind": "method",
+              "name": "renderNavToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderNavCollapse",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleNavWidthChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleNavStateChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "NavState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "navTransition",
               "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "NavEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleNavClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "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": "resolver",
-              "type": {
-                "text": "IconResolver"
-              }
+              "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": "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"
             },
             {
-              "kind": "method",
-              "name": "clear"
+              "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": "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"
           }
         }
       ]
@@ -8733,74 +8733,279 @@
             {
               "name": "lang",
               "type": {
-                "text": "string"
+                "text": "string"
+              },
+              "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": [
+            {
+              "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": "the lang code e.g. \"en\" or \"en-GB\""
+              "description": "Mark the message as unread. By default messages are read.",
+              "fieldName": "unread"
             }
           ],
-          "description": "Check whether there is a translation registered for the given lang"
-        },
-        {
-          "kind": "function",
-          "name": "resolveTranslation",
-          "parameters": [
+          "mixins": [
             {
-              "name": "langCode",
-              "type": {
-                "text": "string"
-              }
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
-          "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."
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "unreadLabel",
+              "description": "Label for the unread messages."
+            }
+          ],
+          "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"
           }
         }
       ]
@@ -9098,326 +9303,121 @@
               "default": "new ScrollbarController(host)"
             },
             {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "FocusTrapController"
-              },
-              "privacy": "private",
-              "default": "new FocusTrapController(host, options.dialog)"
-            },
-            {
-              "kind": "field",
-              "name": "lightDismiss",
-              "type": {
-                "text": "LightDismissController"
-              },
-              "privacy": "private",
-              "default": "new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "type": {
-                "text": "ModalControllerOptions"
-              },
-              "privacy": "private",
-              "default": "options"
-            },
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lastButton",
-              "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": "focusTrap",
+              "type": {
+                "text": "FocusTrapController"
+              },
+              "privacy": "private",
+              "default": "new FocusTrapController(host, options.dialog)"
+            },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "lightDismiss",
+              "type": {
+                "text": "LightDismissController"
+              },
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-message\">(this)"
+              "default": "new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "events",
               "type": {
-                "text": "string | undefined"
+                "text": "EventController"
               },
-              "description": "The url the message should link to.",
-              "attribute": "href",
-              "reflects": true
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
               "kind": "field",
-              "name": "highlight",
+              "name": "options",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ModalControllerOptions"
               },
-              "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
+              "privacy": "private",
+              "default": "options"
             },
             {
               "kind": "field",
-              "name": "unread",
+              "name": "trigger",
               "type": {
-                "text": "boolean | undefined"
+                "text": "HTMLElement | undefined"
               },
-              "description": "Mark the message as unread. By default messages are read.",
-              "attribute": "unread",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "lastButton",
+              "type": {
+                "text": "HTMLButtonElement | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+              "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,7 +9434,7 @@
           "name": "default",
           "declaration": {
             "name": "localization",
-            "module": "src/message/localization.ts"
+            "module": "src/modal/localization.ts"
           }
         }
       ]
@@ -9954,44 +9954,179 @@
           "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
+              "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 SlotController(this, \"header\")"
+              "default": "new LocalizeController<\"nord-notification\">(this)"
             },
             {
               "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
+              "name": "notificationRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "allowItemsToRemainOpen",
+              "name": "dismissed",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "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": "handleActivate",
-              "privacy": "private"
+              "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": [],
-          "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",
+          "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": [
-            "nav-item"
+            "stack",
+            "icon"
           ],
-          "tagName": "nord-navigation",
+          "tagName": "nord-notification",
           "customElement": true
         }
       ],
@@ -10000,16 +10135,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "Notification",
+            "module": "src/notification/Notification.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-navigation",
+          "name": "nord-notification",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "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",
+          "declaration": {
+            "name": "localization",
+            "module": "src/notification/localization.ts"
           }
         }
       ]
@@ -10400,145 +10559,10 @@
           "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",
+          "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": [
-            "stack",
-            "icon"
-          ],
-          "tagName": "nord-notification",
+          "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"
           }
         }
       ]
@@ -10946,34 +10946,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/range/Range.ts",
+      "path": "src/radio/Radio.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
-          "name": "Range",
-          "cssProperties": [
-            {
-              "description": "Controls the size of the thumb.",
-              "name": "--n-range-thumb-size",
-              "default": "20px"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the current value.",
-              "name": "--n-range-track-color-active",
-              "default": "var(--n-color-accent)"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the remaining value.",
-              "name": "--n-range-track-color-inactive",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls the height of the track.",
-              "name": "--n-range-track-size",
-              "default": "3px"
-            }
-          ],
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
           "slots": [
             {
               "description": "Use when a label requires more than plain text.",
@@ -10991,63 +10969,38 @@
           "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Minimum value for the range slider.",
-              "attribute": "min"
-            },
-            {
-              "kind": "field",
-              "name": "max",
+              "name": "inputId",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "10",
-              "description": "Maximum value for the range slider.",
-              "attribute": "max"
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "hintId",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Step amount for the range slider.",
-              "attribute": "step"
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "default": "\"error\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11055,9 +11008,10 @@
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11065,9 +11019,9 @@
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "labelSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11075,9 +11029,9 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "errorSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11085,13 +11039,9 @@
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "inputSlot",
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })"
             },
             {
               "kind": "field",
@@ -11105,25 +11055,50 @@
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange",
               "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "parameters": [
+                {
+                  "name": "previousChecked",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "uncheckSiblings",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
               "privacy": "protected",
-              "default": "\"error\"",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11131,12 +11106,19 @@
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "formData",
               "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11239,7 +11221,7 @@
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "handleInput",
               "privacy": "protected",
               "parameters": [
                 {
@@ -11296,56 +11278,27 @@
               "privacy": "protected",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true,
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
@@ -11475,66 +11428,15 @@
               }
             }
           ],
-          "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"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Minimum value for the range slider.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "10",
-              "description": "Maximum value for the range slider.",
-              "fieldName": "max"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Step amount for the range slider.",
-              "fieldName": "step"
-            },
-            {
-              "name": "expand",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
               "name": "label",
@@ -11624,32 +11526,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -11706,14 +11582,6 @@
               "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"
@@ -11728,13 +11596,37 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "new",
+          "status": "ready",
           "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to let user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-range",
-          "customElement": true
+          "tagName": "nord-radio",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -11742,28 +11634,50 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-range",
+          "name": "nord-radio",
           "declaration": {
-            "name": "Range",
-            "module": "src/range/Range.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/range/Range.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
+          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
+          "name": "Range",
+          "cssProperties": [
+            {
+              "description": "Controls the size of the thumb.",
+              "name": "--n-range-thumb-size",
+              "default": "20px"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the current value.",
+              "name": "--n-range-track-color-active",
+              "default": "var(--n-color-accent)"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the remaining value.",
+              "name": "--n-range-track-color-inactive",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls the height of the track.",
+              "name": "--n-range-track-size",
+              "default": "3px"
+            }
+          ],
           "slots": [
             {
               "description": "Use when a label requires more than plain text.",
@@ -11781,38 +11695,63 @@
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "0",
+              "description": "Minimum value for the range slider.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "10",
+              "description": "Maximum value for the range slider.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "step",
               "type": {
-                "text": "string"
+                "text": "number"
               },
+              "default": "1",
+              "description": "Step amount for the range slider.",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
               "privacy": "protected",
-              "default": "\"error\"",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11820,10 +11759,9 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "labelSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
-              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11831,9 +11769,9 @@
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "errorSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11841,9 +11779,9 @@
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "default": "new SlotController(this, \"hint\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11851,9 +11789,13 @@
             },
             {
               "kind": "field",
-              "name": "inputSlot",
+              "name": "formData",
               "privacy": "protected",
-              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })"
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
@@ -11867,50 +11809,12 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "inputId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleCheckedChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "previousChecked",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11918,19 +11822,25 @@
             },
             {
               "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
+              "name": "errorId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12033,7 +11943,7 @@
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleChange",
               "privacy": "protected",
               "parameters": [
                 {
@@ -12113,6 +12023,35 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -12240,15 +12179,66 @@
               }
             }
           ],
+          "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"
+              }
+            }
+          ],
           "attributes": [
             {
-              "name": "checked",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Minimum value for the range slider.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "Maximum value for the range slider.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Step amount for the range slider.",
+              "fieldName": "step"
+            },
+            {
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
               "name": "label",
@@ -12338,6 +12328,32 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -12394,6 +12410,14 @@
               "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"
@@ -12408,37 +12432,13 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "ready",
+          "status": "new",
           "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to let user specify a numeric value using a slider.\n- Use when the accuracy of the numeric value entered isn’t important.\n- Always use with a label, even if that label is hidden.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the accuracy of the numeric value entered is important.\n- For entering arbitrary numeric values. Use [input component](/components/input/) instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRange labels act as a title for the range input. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Lightness percentage</div>\n<div class=\"n-usage n-usage-dont\">What is the lightness percentage?</div>\n\nWhen writing range labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Item price</div>\n<div class=\"n-usage n-usage-dont\">Item Price</div>\n\nDo not use colons in range label:\n\n<div class=\"n-usage n-usage-do\">Color depth</div>\n<div class=\"n-usage n-usage-dont\">Color depth:</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-radio",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
+          "tagName": "nord-range",
+          "customElement": true
         }
       ],
       "exports": [
@@ -12446,16 +12446,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Range",
+            "module": "src/range/Range.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-radio",
+          "name": "nord-range",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Range",
+            "module": "src/range/Range.ts"
           }
         }
       ]
@@ -16991,10 +16991,6 @@
             {
               "kind": "method",
               "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
             }
           ]
         }
@@ -17044,10 +17040,6 @@
                 "module": "src/common/controllers/SlotController.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
             {
               "kind": "field",
               "name": "onChange",