@nordhealth/components 2.16.1-alpha.5 → 2.16.1

package/custom-elements.json

@@ -587,6 +587,93 @@
         }
       ]
     },
+    {
+      "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": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "progress",
+              "type": {
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
+              },
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "attribute": "progress"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "fieldName": "type"
+            },
+            {
+              "name": "progress",
+              "type": {
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
+              },
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "fieldName": "progress"
+            }
+          ],
+          "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": [],
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -1127,93 +1214,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": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "default": "\"neutral\"",
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "progress",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "attribute": "progress"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "default": "\"neutral\"",
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "fieldName": "type"
-            },
-            {
-              "name": "progress",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "fieldName": "progress"
-            }
-          ],
-          "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": [],
-          "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",
@@ -1918,66 +1918,188 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
+          "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": "Use when a label requires more than plain text.",
-              "name": "label"
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "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": "formValue",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate"
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
             },
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked"
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
+              "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": [],
+          "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",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
                 }
               ],
               "return": {
@@ -2590,128 +2712,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": [],
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -6559,7 +6559,7 @@
           "localization": [],
           "status": "ready",
           "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n- Utilise the [`n-truncate`](/css/#miscellaneous-utilities) CSS helper to prevent long headings from wrapping.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.\n\n</div>\n\n---\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n",
           "examples": [],
           "tagName": "nord-header",
           "customElement": true
@@ -6586,190 +6586,497 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/input/Input.ts",
+      "path": "src/icon/Icon.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
-          "cssProperties": [
+          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
+          "name": "Icon",
+          "slots": [
             {
-              "description": "Controls the inline size, or width, of the input.",
-              "name": "--n-input-inline-size",
-              "default": "240px"
-            },
+              "description": "The default slot used for placing a custom SVG icon.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-background",
-              "default": "var(--n-color-active)"
-            },
-            {
-              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-color",
-              "default": "var(--n-color-text)"
-            },
-            {
-              "description": "Controls the border color of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-border-color",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-input-border-radius",
-              "default": "var(--n-border-radius-s)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "kind": "field",
+              "name": "manager",
+              "privacy": "private",
+              "static": true,
+              "default": "new IconManager()"
             },
             {
-              "description": "Optional slot used to place an icon or prefix at the start of the input.",
-              "name": "start"
+              "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": "Optional slot used to place an icon or suffix at the end of the input.",
-              "name": "end"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "startSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"start\")"
+              "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": "endSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"end\")"
+              "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": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "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": "type",
+              "name": "name",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
+                "text": "string"
               },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "attribute": "type",
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
+              "description": "The size of the icon.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disallowPattern",
+              "name": "color",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "undefined",
-              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
-              "attribute": "disallow-pattern",
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
-              "name": "handleInputChange",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "svg",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
+              "privacy": "private",
+              "default": "\"\""
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
+              "kind": "method",
+              "name": "handleNameChange",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "size",
+              "type": {
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+              },
+              "description": "The size of the icon.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "image",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
+          "examples": [],
+          "tagName": "nord-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/IconManager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconManager",
+          "members": [
+            {
+              "kind": "field",
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
+            },
+            {
+              "kind": "field",
+              "name": "resolver",
+              "type": {
+                "text": "IconResolver"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolve",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "onResolved",
+                  "type": {
+                    "text": "(svg: string) => void"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "registerIcon",
+              "parameters": [
+                {
+                  "name": "iconOrName",
+                  "type": {
+                    "text": "string | { title: string; default: string }"
+                  }
+                },
+                {
+                  "name": "icon",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clear"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconManager",
+          "declaration": {
+            "name": "IconManager",
+            "module": "src/icon/IconManager.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/input/Input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the input.",
+              "name": "--n-input-inline-size",
+              "default": "240px"
+            },
+            {
+              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-background",
+              "default": "var(--n-color-active)"
+            },
+            {
+              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-color",
+              "default": "var(--n-color-text)"
+            },
+            {
+              "description": "Controls the border color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-input-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            },
+            {
+              "description": "Optional slot used to place an icon or prefix at the start of the input.",
+              "name": "start"
+            },
+            {
+              "description": "Optional slot used to place an icon or suffix at the end of the input.",
+              "name": "end"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "startSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"start\")"
+            },
+            {
+              "kind": "field",
+              "name": "endSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"end\")"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
+              },
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disallowPattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "attribute": "disallow-pattern",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleInputChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -7064,550 +7371,296 @@
               }
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "fieldName": "type"
-            },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
-            {
-              "name": "disallow-pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
-              "resolveInitializer": {
-                "module": "src/input/Input.ts"
-              },
-              "fieldName": "disallowPattern"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "hide-required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
-              "inheritedFrom": {
-                "name": "ReadonlyMixin",
-                "module": "src/common/mixins/ReadonlyMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The value of the form component.",
-              "fieldName": "value",
+              "attribute": "value",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
+              "kind": "field",
+              "name": "form",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
+              "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"
+              }
             },
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
-          "examples": [],
-          "tagName": "nord-input",
-          "customElement": true,
-          "events": [
+          "attributes": [
             {
-              "name": "input",
+              "name": "type",
               "type": {
-                "text": "NordEvent"
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
               },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "fieldName": "type"
             },
             {
-              "name": "change",
+              "name": "expand",
               "type": {
-                "text": "NordEvent"
+                "text": "boolean"
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-input",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
-          "name": "Icon",
-          "slots": [
-            {
-              "description": "The default slot used for placing a custom SVG icon.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "manager",
-              "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
-              "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."
+              "name": "disallow-pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "resolveInitializer": {
+                "module": "src/input/Input.ts"
+              },
+              "fieldName": "disallowPattern"
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "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."
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "label",
+              "type": {
+                "text": "string"
               },
-              "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."
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "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."
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "hide-label",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "placeholder",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size of the icon.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "color",
+              "name": "error",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "required",
               "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",
-              "reflects": true
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "svg",
+              "name": "hide-required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
+              "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": "name",
+              "name": "readonly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
+              "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": "size",
+              "name": "disabled",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "boolean"
               },
-              "description": "The size of the icon.",
-              "fieldName": "size"
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "color",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "fieldName": "label"
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -7616,94 +7669,33 @@
           },
           "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",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
           "examples": [],
-          "tagName": "nord-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/IconManager.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IconManager",
-          "members": [
-            {
-              "kind": "field",
-              "name": "cache",
-              "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
-            },
+          "tagName": "nord-input",
+          "customElement": true,
+          "events": [
             {
-              "kind": "field",
-              "name": "resolver",
+              "name": "input",
               "type": {
-                "text": "IconResolver"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resolve",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "onResolved",
-                  "type": {
-                    "text": "(svg: string) => void"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "registerIcon",
-              "parameters": [
-                {
-                  "name": "iconOrName",
-                  "type": {
-                    "text": "string | { title: string; default: string }"
-                  }
-                },
-                {
-                  "name": "icon",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "clear"
+              "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"
+              }
             }
           ]
         }
@@ -7711,10 +7703,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconManager",
+          "name": "default",
           "declaration": {
-            "name": "IconManager",
-            "module": "src/icon/IconManager.ts"
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
           }
         }
       ]
@@ -8188,679 +8188,746 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/localization/LocalizeController.ts",
+      "path": "src/modal/Modal.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "LocalizeController",
+          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
+          "name": "Modal",
+          "cssProperties": [
+            {
+              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-inline",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-block",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the width of the modal.",
+              "name": "--n-modal-max-inline-size",
+              "default": "620px"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            },
+            {
+              "description": "Slot which holds the header of the modal, positioned next to the close button.",
+              "name": "header"
+            },
+            {
+              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "unsubscribe",
+              "name": "modal",
               "type": {
-                "text": "ReturnType<typeof subscribe> | undefined"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "resolvedTranslation",
+              "name": "backdrop",
               "type": {
-                "text": "Translation"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence"
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+              "name": "featureSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"feature\")"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-modal\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "modalController",
+              "privacy": "private",
+              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the modal is open or not.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the max-width of the modal when open.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "returnValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
+            },
+            {
+              "kind": "field",
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
+              "attribute": "scrollable",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "showModal",
+              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
             },
             {
               "kind": "method",
-              "name": "term",
-              "return": {
-                "type": {
-                  "text": "Result<Translation[TComponentName], Key>"
-                }
-              },
+              "name": "close",
               "parameters": [
                 {
-                  "name": "key",
-                  "type": {
-                    "text": "Key"
-                  }
-                },
-                {
-                  "name": "args",
+                  "name": "returnValue",
+                  "optional": true,
                   "type": {
-                    "text": "FuncParams<Translation[TComponentName], Key>"
-                  }
+                    "text": "string"
+                  },
+                  "description": "An optional value to indicate why the modal was closed."
                 }
-              ]
+              ],
+              "description": "Programmatically close the modal."
             },
             {
-              "kind": "field",
-              "name": "handleLangChange",
-              "privacy": "private"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LocalizeController",
-          "declaration": {
-            "name": "LocalizeController",
-            "module": "src/localization/LocalizeController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/en-us.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "en",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "en",
-            "module": "src/localization/en-us.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/fi-fi.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "fi",
-          "type": {
-            "text": "Translation"
-          },
-          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "fi",
-            "module": "src/localization/fi-fi.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/translation.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "clearTranslations",
-          "description": "Removes all registered translations"
-        },
-        {
-          "kind": "function",
-          "name": "registerTranslation",
-          "parameters": [
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically focus the modal."
+            },
             {
-              "name": "translation",
-              "type": {
-                "text": "Translation[]"
-              }
+              "kind": "method",
+              "name": "handleOpenUpdated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDismiss",
+              "privacy": "private"
             }
           ],
-          "description": "Registers one or more translations"
-        },
-        {
-          "kind": "function",
-          "name": "subscribe",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+          "events": [
             {
-              "name": "onChange",
+              "name": "close",
               "type": {
-                "text": "() => void"
+                "text": "NordEvent"
               },
-              "description": "callback for when either `lang` attr changes, or a new language is registered."
+              "description": "Dispatched when a modal is closed for any reason."
+            },
+            {
+              "name": "cancel",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing."
             }
           ],
-          "description": "subscribe to language changes"
-        },
-        {
-          "kind": "function",
-          "name": "isTranslationRegistered",
-          "parameters": [
+          "attributes": [
             {
-              "name": "lang",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "the lang code e.g. \"en\" or \"en-GB\""
+              "default": "false",
+              "description": "Controls whether the modal is open or not.",
+              "fieldName": "open"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the max-width of the modal when open.",
+              "fieldName": "size"
+            },
+            {
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
+              "fieldName": "scrollable"
             }
           ],
-          "description": "Check whether there is a translation registered for the given lang"
-        },
-        {
-          "kind": "function",
-          "name": "resolveTranslation",
-          "parameters": [
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
             {
-              "name": "langCode",
-              "type": {
-                "text": "string"
-              }
+              "name": "closeLabel",
+              "description": "Accessible label for the close button."
             }
           ],
-          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+          "status": "ready",
+          "category": "overlay",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n",
+          "examples": [],
+          "tagName": "nord-modal",
+          "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",
-          "declaration": {
-            "name": "subscribe",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isTranslationRegistered",
-          "declaration": {
-            "name": "isTranslationRegistered",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "resolveTranslation",
+          "name": "default",
           "declaration": {
-            "name": "resolveTranslation",
-            "module": "src/localization/translation.ts"
+            "name": "Modal",
+            "module": "src/modal/Modal.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "fallback",
+          "kind": "custom-element-definition",
+          "name": "nord-modal",
           "declaration": {
-            "name": "en",
-            "module": "src/localization/translation.ts"
+            "name": "Modal",
+            "module": "src/modal/Modal.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modal/Modal.ts",
+      "path": "src/modal/ModalController.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
-          "name": "Modal",
-          "cssProperties": [
+          "description": "",
+          "name": "ModalController",
+          "members": [
             {
-              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-inline",
-              "default": "var(--n-space-m)"
+              "kind": "field",
+              "name": "openModals",
+              "privacy": "private",
+              "static": true,
+              "default": "new Stack<ModalController>()"
             },
             {
-              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-block",
-              "default": "var(--n-space-m)"
+              "kind": "field",
+              "name": "scrollBar",
+              "type": {
+                "text": "ScrollbarController"
+              },
+              "privacy": "private",
+              "default": "new ScrollbarController(host)"
             },
             {
-              "description": "Controls the width of the modal.",
-              "name": "--n-modal-max-inline-size",
-              "default": "620px"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "focusTrap",
+              "type": {
+                "text": "FocusTrapController"
+              },
+              "privacy": "private",
+              "default": "new FocusTrapController(host, options.dialog)"
+            },
             {
-              "description": "Default slot",
-              "name": ""
+              "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    })"
             },
             {
-              "description": "Slot which holds the header of the modal, positioned next to the close button.",
-              "name": "header"
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+              "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": "field",
-              "name": "modal",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "block"
             },
             {
-              "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "unblock"
             },
             {
               "kind": "field",
-              "name": "headerSlot",
+              "name": "trackLastButton",
               "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "description": "capture the last button clicked, so that we can polyfill `submitter` property in submit event"
             },
             {
               "kind": "field",
-              "name": "featureSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"feature\")"
+              "name": "polyfillSubmitter",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "name": "handleTransitionEnd",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-modal\">(this)"
+              "name": "handleLightDismiss",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "modalController",
-              "privacy": "private",
-              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
-            },
+              "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/localization/LocalizeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LocalizeController",
+          "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "unsubscribe",
               "type": {
-                "text": "boolean"
+                "text": "ReturnType<typeof subscribe> | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the modal is open or not.",
-              "attribute": "open",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "resolvedTranslation",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "Translation"
               },
-              "default": "\"m\"",
-              "description": "Controls the max-width of the modal when open.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "returnValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The reason why the modal was closed. This typically indicates\nwhich button the user pressed to close the modal, though any value\ncan be supplied if the modal is programmatically closed."
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence"
             },
             {
               "kind": "field",
-              "name": "scrollable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
-              "attribute": "scrollable",
-              "reflects": true
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
             },
             {
               "kind": "method",
-              "name": "showModal",
-              "description": "Show the modal, automatically moving focus to the modal or a child\nelement with an `autofocus` attribute."
+              "name": "hostConnected"
             },
             {
               "kind": "method",
-              "name": "close",
-              "parameters": [
-                {
-                  "name": "returnValue",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "An optional value to indicate why the modal was closed."
-                }
-              ],
-              "description": "Programmatically close the modal."
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "term",
+              "return": {
+                "type": {
+                  "text": "Result<Translation[TComponentName], Key>"
+                }
+              },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "key",
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically focus the modal."
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenUpdated",
-              "privacy": "protected",
-              "parameters": [
+                    "text": "Key"
+                  }
+                },
                 {
-                  "name": "prev",
+                  "name": "args",
                   "type": {
-                    "text": "boolean"
+                    "text": "FuncParams<Translation[TComponentName], Key>"
                   }
                 }
               ]
             },
             {
-              "kind": "method",
-              "name": "handleDismiss",
+              "kind": "field",
+              "name": "handleLangChange",
               "privacy": "private"
             }
-          ],
-          "events": [
-            {
-              "name": "close",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched when a modal is closed for any reason."
-            },
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LocalizeController",
+          "declaration": {
+            "name": "LocalizeController",
+            "module": "src/localization/LocalizeController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/en-us.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "en",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "en",
+            "module": "src/localization/en-us.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/fi-fi.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "fi",
+          "type": {
+            "text": "Translation"
+          },
+          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "fi",
+            "module": "src/localization/fi-fi.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/translation.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "clearTranslations",
+          "description": "Removes all registered translations"
+        },
+        {
+          "kind": "function",
+          "name": "registerTranslation",
+          "parameters": [
             {
-              "name": "cancel",
+              "name": "translation",
               "type": {
-                "text": "NordEvent"
-              },
-              "description": "Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing."
+                "text": "Translation[]"
+              }
             }
           ],
-          "attributes": [
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the modal is open or not.",
-              "fieldName": "open"
-            },
+          "description": "Registers one or more translations"
+        },
+        {
+          "kind": "function",
+          "name": "subscribe",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "size",
+              "name": "onChange",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "() => void"
               },
-              "default": "\"m\"",
-              "description": "Controls the max-width of the modal when open.",
-              "fieldName": "size"
-            },
+              "description": "callback for when either `lang` attr changes, or a new language is registered."
+            }
+          ],
+          "description": "subscribe to language changes"
+        },
+        {
+          "kind": "function",
+          "name": "isTranslationRegistered",
+          "parameters": [
             {
-              "name": "scrollable",
+              "name": "lang",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "By default if a modal is too big for the browser window,\nthe entire modal will scroll. This setting changes that behavior\nso that the body of the modal scrolls instead, with the modal\nitself remaining fixed.",
-              "fieldName": "scrollable"
+              "description": "the lang code e.g. \"en\" or \"en-GB\""
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
+          "description": "Check whether there is a translation registered for the given lang"
+        },
+        {
+          "kind": "function",
+          "name": "resolveTranslation",
+          "parameters": [
             {
-              "name": "closeLabel",
-              "description": "Accessible label for the close button."
+              "name": "langCode",
+              "type": {
+                "text": "string"
+              }
             }
           ],
-          "status": "ready",
-          "category": "overlay",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for confirmations and conditional changes.\n- Use when the user is required to take an action.\n- Use when you need to display content that temporarily blocks interactions with the main view of an application.\n- Use when you need to ask a confirmation from a user before proceeding.\n- Use for important warnings, as a way to prevent or correct critical errors.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for nonessential information that is not related to the current userflow.\n- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.\n- Don’t open a modal window on top of another modal.\n\n</div>\n\n---\n\n## Content guidelines\n\nModal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit the patient called John Doe</div>\n<div class=\"n-usage n-usage-do\">Discard changes?</div>\n<div class=\"n-usage n-usage-dont\">Discard?</div>\n<div class=\"n-usage n-usage-do\">Delete patient?</div>\n<div class=\"n-usage n-usage-dont\">Are you sure you want to delete this patent?</div>\n\nWhen writing modal titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in modal titles, 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 in punctuation:\n\n<div class=\"n-usage n-usage-do\">Edit patient</div>\n<div class=\"n-usage n-usage-dont\">Edit patient.</div>\n\n---\n\n## Focus behaviour\n\n- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.\n- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.\n- If the modal contains a form, use `autofocus` in the first form field.\n- Focus remains trapped inside the modal dialog until it is closed.\n- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html).\n",
-          "examples": [],
-          "tagName": "nord-modal",
-          "customElement": true
+          "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": "default",
+          "name": "clearTranslations",
           "declaration": {
-            "name": "Modal",
-            "module": "src/modal/Modal.ts"
+            "name": "clearTranslations",
+            "module": "src/localization/translation.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "nord-modal",
+          "kind": "js",
+          "name": "registerTranslation",
           "declaration": {
-            "name": "Modal",
-            "module": "src/modal/Modal.ts"
+            "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/modal/ModalController.ts",
+      "path": "src/nav-group/NavGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "ModalController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "openModals",
-              "privacy": "private",
-              "static": true,
-              "default": "new Stack<ModalController>()"
-            },
-            {
-              "kind": "field",
-              "name": "scrollBar",
-              "type": {
-                "text": "ScrollbarController"
-              },
-              "privacy": "private",
-              "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"
-            },
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
+          "slots": [
             {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
+              "description": "The default slot used for the nav items.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "lastButton",
+              "name": "heading",
               "type": {
-                "text": "HTMLButtonElement | undefined"
+                "text": "string | 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"
-            },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "handleSubmit",
-              "privacy": "private"
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "tagName": "nord-nav-group",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ModalController",
+          "name": "default",
           "declaration": {
-            "name": "ModalController",
-            "module": "src/modal/ModalController.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.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",
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
           "declaration": {
-            "name": "localization",
-            "module": "src/modal/localization.ts"
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
           }
         }
       ]
@@ -9128,39 +9195,27 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-group/NavGroup.ts",
+      "path": "src/navigation/Navigation.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
-          "name": "NavGroup",
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
           "slots": [
             {
-              "description": "The default slot used for the nav items.",
+              "description": "The main section of the sidebar, for holding nav components.",
               "name": ""
-            }
-          ],
-          "members": [
+            },
             {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "attribute": "heading"
-            }
-          ],
-          "attributes": [
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
             {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "fieldName": "heading"
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
             }
           ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -9168,9 +9223,9 @@
           "localization": [],
           "status": "ready",
           "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "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": [],
-          "tagName": "nord-nav-group",
+          "tagName": "nord-navigation",
           "customElement": true
         }
       ],
@@ -9179,16 +9234,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-nav-group",
+          "name": "nord-navigation",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         }
       ]
@@ -9328,68 +9383,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "slots": [
-            {
-              "description": "The main section of the sidebar, for holding nav components.",
-              "name": ""
-            },
-            {
-              "description": "The top section of the sidebar.",
-              "name": "header"
-            },
-            {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            }
-          ],
-          "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": [],
-          "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/popout/Popout.ts",
@@ -12280,21 +12273,20 @@
               "kind": "field",
               "name": "effect",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | \"none\""
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
-              "attribute": "effect"
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "attribute": "effect",
+              "reflects": true
             }
           ],
           "attributes": [
             {
               "name": "effect",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | \"none\""
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
               "fieldName": "effect"
             }
           ],
@@ -12943,6 +12935,53 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab-panel/TabPanel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
+          "name": "TabPanel",
+          "slots": [
+            {
+              "description": "The tab panel content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "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 the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab 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 tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "tagName": "nord-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-panel",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/table/Table.ts",
@@ -13094,53 +13133,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab-panel/TabPanel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
-          "name": "TabPanel",
-          "slots": [
-            {
-              "description": "The tab panel content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "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 the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab 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 tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "tagName": "nord-tab-panel",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-panel",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/textarea/Textarea.ts",