@nordhealth/components 3.7.0 → 3.9.0

package/custom-elements.json

@@ -430,6 +430,14 @@
             "name": "default",
             "module": "\"./top-bar/TopBar.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Footer",
+          "declaration": {
+            "name": "default",
+            "module": "\"./footer/Footer.js\""
+          }
         }
       ]
     },
@@ -456,6 +464,11 @@
               "description": "Controls the box shadow for the avatar.",
               "name": "--n-avatar-box-shadow",
               "default": "none"
+            },
+            {
+              "description": "Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).",
+              "name": "--n-avatar-text-color",
+              "default": "var(--n-color-text-on-accent)"
             }
           ],
           "members": [
@@ -628,6 +641,91 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.ts",
@@ -1330,91 +1428,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -6024,7 +6037,9 @@
           "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 for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t put cards inside the drawer. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](/components/layout/).\n",
           "examples": [],
-          "dependencies": [],
+          "dependencies": [
+            "footer"
+          ],
           "tagName": "nord-drawer",
           "customElement": true
         }
@@ -6793,6 +6808,94 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/footer/Footer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The footer is a block of designated space for providing additional information or actions that are positioned below the main content.",
+          "name": "Footer",
+          "cssProperties": [
+            {
+              "description": "Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).",
+              "name": "--n-footer-padding-inline",
+              "default": "var(--n-space-l)"
+            },
+            {
+              "description": "Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-footer-box-shadow",
+              "default": "var(--n-box-shadow-header)"
+            },
+            {
+              "description": "Controls the background color of the footer, using [color tokens](/tokens/#color).",
+              "name": "--n-footer-background-color",
+              "default": "var(--n-color-surface)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The footer content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the size of the footer component.",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the size of the footer component.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "draft",
+          "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 footer component to show actions for a stepped workflow.\n- Use the footer component to provide additional information or actions that are positioned below the main content.\n- The footer component can also be used within Nord to provide a layer of actions or information at the bottom of a component. It’s currently used internally in the [modal](/components/modal/) and [drawer components](/components/drawer/).\n- When using the footer component within the [layout component](/components/layout/?example=footer), you can make the footer sticky by using the provided `stickyFooter` property of the layout component. [View an example](/components/layout/?example=footer).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the footer with too many actions or information.\n- Don’t nest the footer deeply and restrict its available space.\n- Don’t add large amounts of content or long paragraphs. Aim for actions that are short and concise.\n\n</div>\n\n---\n\n## Content guidelines\n\nFooter action labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Create client</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-footer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Footer",
+            "module": "src/footer/Footer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-footer",
+          "declaration": {
+            "name": "Footer",
+            "module": "src/footer/Footer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/header/Header.ts",
@@ -6876,1147 +6979,1096 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
+      "path": "src/input/Input.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": "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": "The default slot used for placing a custom SVG icon.",
-              "name": ""
+              "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)"
+            },
+            {
+              "description": "Controls the alignment of text within the input itself.",
+              "name": "--n-input-text-align",
+              "default": "start"
+            }
+          ],
+          "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": "manager",
+              "name": "startSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "endSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "startObserver",
               "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "default": "new ResizeController(this, () => this.startSlot)"
             },
             {
-              "kind": "method",
-              "name": "registerResolver",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "resolver",
-                  "type": {
-                    "text": "IconResolver"
-                  },
-                  "description": "The resolver function to register."
-                }
-              ],
-              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
+              "kind": "field",
+              "name": "endObserver",
+              "privacy": "private",
+              "default": "new ResizeController(this, () => this.endSlot)"
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\""
               },
-              "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": "\"text\"",
+              "description": "The type of the input.",
+              "attribute": "type",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
               },
-              "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": "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": "registerIcon",
-              "static": true,
+              "name": "handleKeydown",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "iconOrName",
-                  "type": {
-                    "text": "string | { title: string; default: string }"
-                  },
-                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
-                },
-                {
-                  "name": "icon",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The SVG string for the icon."
+                    "text": "KeyboardEvent"
+                  }
                 }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              ]
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              "name": "handleInputChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "description": "The size of the icon.",
+              "default": "\"m\"",
+              "description": "The size of the component.",
               "attribute": "size",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "color",
+              "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",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "errorId",
               "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.",
-              "attribute": "label",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "svg",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
+              "description": "Label for the input.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size of the icon.",
-              "fieldName": "size"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "color",
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "error",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "image",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/IconManager.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IconManager",
-          "members": [
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
               "kind": "field",
-              "name": "cache",
-              "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "resolver",
+              "name": "hideRequired",
               "type": {
-                "text": "IconResolver"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "attribute": "hide-required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
               "kind": "method",
-              "name": "resolve",
+              "name": "handleInput",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "name",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "Event"
                   }
-                },
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
                 {
-                  "name": "onResolved",
+                  "name": "e",
                   "type": {
-                    "text": "(svg: string) => void"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "registerIcon",
+              "name": "renderLabel",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "iconOrName",
-                  "type": {
-                    "text": "string | { title: string; default: string }"
-                  }
-                },
-                {
-                  "name": "icon",
+                  "name": "additionalContent",
                   "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "TemplateResult"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "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)"
-            },
-            {
-              "description": "Controls the alignment of text within the input itself.",
-              "name": "--n-input-text-align",
-              "default": "start"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "description": "Optional slot used to place an icon or prefix at the start of the input.",
-              "name": "start"
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
-            {
-              "description": "Optional slot used to place an icon or suffix at the end of the input.",
-              "name": "end"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "startSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
+              "name": "hasError",
+              "privacy": "protected",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "endSlot",
+              "name": "autocomplete",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "AutocompleteAttribute"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "startObserver",
-              "privacy": "private",
-              "default": "new ResizeController(this, () => this.startSlot)"
-            },
-            {
-              "kind": "field",
-              "name": "endObserver",
-              "privacy": "private",
-              "default": "new ResizeController(this, () => this.endSlot)"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "readonly",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\""
+                "text": "boolean"
               },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "attribute": "type",
-              "reflects": true
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "disallowPattern",
+              "name": "name",
               "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
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "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": "handleInputChange",
-              "privacy": "private"
+              "name": "formAncestor",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "_formId",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string | undefined"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "attribute": "form",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "focusableRef",
               "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "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": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\""
+              },
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "inputId",
+              "name": "expand",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
             },
             {
-              "kind": "field",
-              "name": "errorId",
+              "name": "disallow-pattern",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "field",
-              "name": "hintId",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Label for the input.",
-              "attribute": "label",
+              "fieldName": "label",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
+              "fieldName": "hint",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "hide-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
+              "fieldName": "hideLabel",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
+              "fieldName": "placeholder",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "error",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error",
+              "fieldName": "error",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideRequired",
+              "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.",
-              "attribute": "hide-required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "additionalContent",
-                  "optional": true,
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
+              "fieldName": "hideRequired",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "autocomplete",
               "type": {
                 "text": "AutocompleteAttribute"
               },
               "default": "\"off\"",
               "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
+              "fieldName": "autocomplete",
               "inheritedFrom": {
                 "name": "AutocompleteMixin",
                 "module": "src/common/mixins/AutocompleteMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true,
+              "fieldName": "readonly",
               "inheritedFrom": {
                 "name": "ReadonlyMixin",
                 "module": "src/common/mixins/ReadonlyMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the form component.",
-              "attribute": "name",
+              "fieldName": "name",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The value of the form component.",
-              "attribute": "value",
+              "fieldName": "value",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formAncestor",
+              "name": "form",
               "type": {
                 "text": "HTMLFormElement | null"
               },
-              "privacy": "private",
-              "default": "null",
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "kind": "field",
-              "name": "_formId",
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-input",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
               "type": {
-                "text": "string | undefined"
+                "text": "NordEvent"
               },
-              "privacy": "protected",
+              "description": "Fired as the user types into the input.",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "form",
+              "name": "change",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "NordEvent"
               },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "attribute": "form",
+              "description": "Fired whenever the input's value is changed via user interaction.",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
-            },
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "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": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "manager",
+              "privacy": "private",
+              "static": true,
+              "default": "new IconManager()"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "registerResolver",
+              "static": true,
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "resolver",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "IconResolver"
                   },
-                  "description": "An object which controls aspects of the focusing process."
+                  "description": "The resolver function to register."
                 }
               ],
-              "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"
-              }
+              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
             },
             {
               "kind": "method",
-              "name": "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\" | \"unit\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "fieldName": "type"
-            },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
+              "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."
             },
             {
-              "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"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "fieldName": "disallowPattern"
+              "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."
             },
             {
-              "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"
-              }
+              "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": "label",
+              "kind": "field",
+              "name": "name",
               "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"
-              }
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "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"
-              }
+              "description": "The size of the icon.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "color",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
             },
             {
-              "name": "error",
+              "kind": "field",
+              "name": "label",
               "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"
-              }
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "name": "hide-required",
+              "kind": "field",
+              "name": "svg",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
-              }
+              "privacy": "private",
+              "default": "\"\""
             },
             {
-              "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"
-              }
-            },
+              "kind": "method",
+              "name": "handleNameChange",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
             {
-              "name": "readonly",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "name": "disabled",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The size of the icon.",
+              "fieldName": "size"
             },
             {
-              "name": "name",
+              "name": "color",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "name": "form",
+              "name": "label",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "string | undefined"
               },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
@@ -8025,36 +8077,95 @@
           },
           "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",
+          "category": "image",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
           "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-input",
-          "customElement": true,
-          "events": [
+          "dependencies": [],
+          "tagName": "nord-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/IconManager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconManager",
+          "members": [
             {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "kind": "field",
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
             },
             {
-              "name": "change",
+              "kind": "field",
+              "name": "resolver",
               "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "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"
             }
           ]
         }
@@ -8062,18 +8173,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-input",
+          "name": "IconManager",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "IconManager",
+            "module": "src/icon/IconManager.ts"
           }
         }
       ]
@@ -8117,9 +8220,13 @@
               "name": "top-bar"
             },
             {
-              "description": "Used to place content inside the header section.",
+              "description": "Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.",
               "name": "header"
             },
+            {
+              "description": "Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.",
+              "name": "footer"
+            },
             {
               "description": "Used to place additional content/details relating to a selected item.",
               "name": "drawer"
@@ -8162,6 +8269,12 @@
               "privacy": "private",
               "default": "new SlotController(this, \"header\")"
             },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
             {
               "kind": "field",
               "name": "direction",
@@ -8274,6 +8387,17 @@
               "attribute": "sticky",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "stickyFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the layout's footer has sticky positioning.",
+              "attribute": "sticky-footer",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "isNarrow",
@@ -8518,6 +8642,15 @@
               "default": "false",
               "description": "Controls whether the layout's header has sticky positioning.",
               "fieldName": "sticky"
+            },
+            {
+              "name": "sticky-footer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the layout's footer has sticky positioning.",
+              "fieldName": "stickyFooter"
             }
           ],
           "superclass": {
@@ -8962,7 +9095,7 @@
               "description": "Label for the unread messages."
             }
           ],
-          "status": "draft",
+          "status": "new",
           "category": "action",
           "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the message content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
           "examples": [],
@@ -9258,7 +9391,8 @@
           "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": [],
           "dependencies": [
-            "icon"
+            "icon",
+            "footer"
           ],
           "tagName": "nord-modal",
           "customElement": true
@@ -9928,98 +10062,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "cssProperties": [
-            {
-              "description": "Controls the background color of the navigation element.",
-              "name": "--n-navigation-background-color",
-              "default": "var(--n-color-nav-surface)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The main section of the sidebar, for holding nav components.",
-              "name": ""
-            },
-            {
-              "description": "The top section of the sidebar.",
-              "name": "header"
-            },
-            {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "allowItemsToRemainOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "handleActivate",
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "nav-item"
-          ],
-          "tagName": "nord-navigation",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-navigation",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/notification/Notification.ts",
@@ -10075,20 +10117,6 @@
                 "name": "NotificationMixin",
                 "module": "src/common/mixins/NotificationMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "events": [
@@ -10108,10 +10136,6 @@
             {
               "name": "NotificationMixin",
               "module": "/src/common/mixins/NotificationMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
@@ -10124,7 +10148,7 @@
               "description": "Accessible label for the dismiss button."
             }
           ],
-          "status": "draft",
+          "status": "new",
           "category": "feedback",
           "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
           "examples": [],
@@ -10181,38 +10205,59 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/notification-group/NotificationGroup.ts",
+      "path": "src/navigation/Navigation.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Notification group is used to position and style a group of notifications.",
-          "name": "NotificationGroup",
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
+          "cssProperties": [
+            {
+              "description": "Controls the background color of the navigation element.",
+              "name": "--n-navigation-background-color",
+              "default": "var(--n-color-nav-surface)"
+            }
+          ],
           "slots": [
             {
-              "description": "Default slot in which to place notifications.",
+              "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": "_warningLogged",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "allowItemsToRemainOpen",
               "type": {
                 "text": "boolean"
               },
               "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "default": "false"
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "kind": "field",
+              "name": "handleActivate",
+              "privacy": "private"
             }
           ],
           "superclass": {
@@ -10220,12 +10265,14 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "draft",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-notification-group",
+          "dependencies": [
+            "nav-item"
+          ],
+          "tagName": "nord-navigation",
           "customElement": true
         }
       ],
@@ -10234,16 +10281,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-notification-group",
+          "name": "nord-navigation",
           "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         }
       ]
@@ -10591,6 +10638,54 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification-group/NotificationGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notification group is used to position and style a group of notifications.",
+          "name": "NotificationGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place notifications.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-notification-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-notification-group",
+          "declaration": {
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/progress-bar/ProgressBar.ts",
@@ -10706,214 +10801,28 @@
               "fieldName": "value"
             },
             {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-progress-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/qrcode/Qrcode.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
-          "name": "Qrcode",
-          "members": [
-            {
-              "kind": "field",
-              "name": "canvas",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "computed",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "background",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "attribute": "correction",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "generate",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "fieldName": "value"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "background",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "background"
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
             },
             {
-              "name": "correction",
+              "name": "label",
               "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+                "text": "string"
               },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "fieldName": "correction"
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -10922,12 +10831,11 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "image",
-          "displayName": "QR Code",
-          "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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-qrcode",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -10936,51 +10844,63 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-qrcode",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/select/Select.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
+          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
+          "name": "Select",
+          "cssProperties": [
+            {
+              "description": "Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).",
+              "name": "--n-select-block-size",
+              "default": "var(--n-space-xl)"
+            }
+          ],
           "slots": [
+            {
+              "description": "Default slot for holding <option> elements.",
+              "name": ""
+            },
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
+              "description": "Use when a hint requires more than plain text.",
               "name": "hint"
             },
             {
               "description": "Optional slot that holds error text for the input.",
               "name": "error"
+            },
+            {
+              "description": "Used to place an icon at the start of select.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
+              "name": "formValue",
               "privacy": "protected",
-              "default": "\"input\"",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -10988,12 +10908,18 @@
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
                 "text": "string"
               },
               "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "\"select\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11001,33 +10927,72 @@
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "expand",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the select expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
-              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
+              "name": "options",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getButtonText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "HTMLOptionElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "HTMLOptionElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
               "kind": "field",
               "name": "labelSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11037,7 +11002,7 @@
               "kind": "field",
               "name": "errorSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11045,15 +11010,19 @@
             },
             {
               "kind": "field",
-              "name": "inputSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })"
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "formData",
               "privacy": "protected",
-              "readonly": true,
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11061,50 +11030,12 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleCheckedChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "previousChecked",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "default": "\"error\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11112,19 +11043,12 @@
             },
             {
               "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -11242,6 +11166,23 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -11303,8 +11244,22 @@
               "privacy": "protected",
               "readonly": true,
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutocompleteAttribute"
+              },
+              "default": "\"off\"",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "AutocompleteMixin",
+                "module": "src/common/mixins/AutocompleteMixin.ts"
               }
             },
             {
@@ -11436,13 +11391,26 @@
           ],
           "attributes": [
             {
-              "name": "checked",
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "description": "Controls whether the select expands to fill the width of its container.",
+              "fieldName": "expand"
+            },
+            {
+              "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",
@@ -11532,6 +11500,19 @@
                 "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": "disabled",
               "type": {
@@ -11550,51 +11531,272 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using radio components instead, if you have enough space to allow it. \n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;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 select 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\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
+          "examples": [],
+          "dependencies": [
+            "button",
+            "icon"
+          ],
+          "tagName": "nord-select",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Select",
+            "module": "src/select/Select.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-select",
+          "declaration": {
+            "name": "Select",
+            "module": "src/select/Select.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/qrcode/Qrcode.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
+          "name": "Qrcode",
+          "members": [
+            {
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "computed",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "background",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "attribute": "correction",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "generate",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "fieldName": "value"
             },
             {
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "fieldName": "label"
             },
             {
-              "name": "form",
+              "name": "size",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "number"
               },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "fieldName": "form",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "fieldName": "size"
+            },
             {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "background"
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "fieldName": "correction"
             }
           ],
           "superclass": {
@@ -11603,36 +11805,13 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
+          "category": "image",
+          "displayName": "QR Code",
+          "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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-radio",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
+          "tagName": "nord-qrcode",
+          "customElement": true
         }
       ],
       "exports": [
@@ -11640,16 +11819,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-radio",
+          "name": "nord-qrcode",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         }
       ]
@@ -12468,47 +12647,35 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/Select.ts",
+      "path": "src/radio/Radio.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
-          "name": "Select",
-          "cssProperties": [
-            {
-              "description": "Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).",
-              "name": "--n-select-block-size",
-              "default": "var(--n-space-xl)"
-            }
-          ],
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
           "slots": [
-            {
-              "description": "Default slot for holding <option> elements.",
-              "name": ""
-            },
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Use when a hint requires more than plain text.",
+              "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": "Used to place an icon at the start of select.",
-              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "readonly": true,
+              "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12516,18 +12683,12 @@
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
               "privacy": "protected",
-              "default": "\"select\"",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12535,92 +12696,110 @@
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "options",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getButtonText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "HTMLOptionElement[]"
-                  }
-                }
-              ]
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "renderOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "HTMLOptionElement"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "attribute": "size",
-              "reflects": true,
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "inputSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
               "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": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "previousChecked",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "uncheckSiblings",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
+              "kind": "method",
+              "name": "handleChange",
               "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12628,35 +12807,19 @@
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
+              "name": "formData",
               "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -12774,23 +12937,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -12856,20 +13002,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -12999,26 +13131,13 @@
           ],
           "attributes": [
             {
-              "name": "expand",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
-            {
-              "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"
-              }
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
             {
               "name": "label",
@@ -13108,19 +13227,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "\"off\"",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "AutocompleteMixin",
-                "module": "src/common/mixins/AutocompleteMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -13173,18 +13279,10 @@
             }
           ],
           "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": "InputMixin",
               "module": "/src/common/mixins/InputMixin.js"
@@ -13201,13 +13299,10 @@
           "localization": [],
           "status": "ready",
           "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using radio components instead, if you have enough space to allow it. \n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;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 select 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\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n",
           "examples": [],
-          "dependencies": [
-            "button",
-            "icon"
-          ],
-          "tagName": "nord-select",
+          "dependencies": [],
+          "tagName": "nord-radio",
           "customElement": true,
           "events": [
             {
@@ -13240,16 +13335,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-select",
+          "name": "nord-radio",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         }
       ]
@@ -13344,69 +13439,164 @@
           "name": "Spinner",
           "cssProperties": [
             {
-              "description": "Controls the color the spinner.",
-              "name": "--n-spinner-color",
-              "default": "var(--n-color-accent)"
+              "description": "Controls the color the spinner.",
+              "name": "--n-spinner-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab/Tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The interactive tab button for use within the tab group component.",
+          "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
+              "name": "--n-tab-color",
+              "default": "var(--n-color-text-weak)"
+            },
+            {
+              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
+              "name": "--n-tab-font-weight",
+              "default": "var(--n-font-weight)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab button content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
-              "reflects": true
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "selected",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "attribute": "color",
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "attribute": "selected",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
+              "kind": "method",
+              "name": "handleSelectionChange",
+              "privacy": "protected",
+              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
             }
           ],
           "attributes": [
             {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
+              "name": "selected",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "fieldName": "selected"
             }
           ],
           "superclass": {
@@ -13415,11 +13605,11 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
+          "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 component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\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 section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-spinner",
+          "tagName": "nord-tab",
           "customElement": true
         }
       ],
@@ -13428,16 +13618,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-spinner",
+          "name": "nord-tab",
           "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
           }
         }
       ]
@@ -13598,101 +13788,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab/Tab.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The interactive tab button for use within the tab group component.",
-          "name": "Tab",
-          "cssProperties": [
-            {
-              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
-              "name": "--n-tab-color",
-              "default": "var(--n-color-text-weak)"
-            },
-            {
-              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
-              "name": "--n-tab-font-weight",
-              "default": "var(--n-font-weight)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tab button content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSelectionChange",
-              "privacy": "protected",
-              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "fieldName": "selected"
-            }
-          ],
-          "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 component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\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 section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tab",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",
@@ -16346,6 +16441,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/decorators/observe.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
+            {
+              "name": "propertyName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "observe",
+          "declaration": {
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/BroadcastChannelController.ts",
@@ -17622,41 +17752,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
-            {
-              "name": "propertyName",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "lifecycle",
-              "default": "\"update\"",
-              "type": {
-                "text": "ObserveLifecycle"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "observe",
-          "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/common/directives/cond.ts",