@nordhealth/components 3.2.0 → 3.3.0

package/custom-elements.json

@@ -1415,109 +1415,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "new",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -2021,6 +1918,109 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "new",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -6636,7 +6636,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the fieldset.",
+              "description": "Label for the fieldset. Rendered as a `<legend>` element.",
               "attribute": "label"
             },
             {
@@ -6677,6 +6677,16 @@
               "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
               "attribute": "hide-required"
             },
+            {
+              "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"
+            },
             {
               "kind": "field",
               "name": "hasHint",
@@ -6697,7 +6707,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the fieldset.",
+              "description": "Label for the fieldset. Rendered as a `<legend>` element.",
               "fieldName": "label"
             },
             {
@@ -6733,6 +6743,15 @@
               "default": "false",
               "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
               "fieldName": "hideRequired"
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel"
             }
           ],
           "superclass": {
@@ -6851,1096 +6870,1147 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/input/Input.ts",
+      "path": "src/icon/Icon.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
-          "cssProperties": [
-            {
-              "description": "Controls the inline size, or width, of the input.",
-              "name": "--n-input-inline-size",
-              "default": "240px"
-            },
+          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
+          "name": "Icon",
+          "slots": [
             {
-              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-background",
-              "default": "var(--n-color-active)"
-            },
+              "description": "The default slot used for placing a custom SVG icon.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
-              "name": "--n-input-color",
-              "default": "var(--n-color-text)"
+              "kind": "field",
+              "name": "manager",
+              "privacy": "private",
+              "static": true,
+              "default": "new IconManager()"
             },
             {
-              "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": "startSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "endSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "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)"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "attribute": "type",
-              "reflects": true
+              "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": "expand",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "parameters": [
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "{ title: string; default: string }"
+                  },
+                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
-              "kind": "field",
-              "name": "disallowPattern",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "undefined",
-              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
-              "attribute": "disallow-pattern",
-              "reflects": true
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the icon to be registered."
+                },
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The SVG string for the icon."
+                }
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
+              "name": "registerIcon",
+              "static": true,
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "iconOrName",
                   "type": {
-                    "text": "KeyboardEvent"
-                  }
+                    "text": "string | { title: string; default: string }"
+                  },
+                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
+                },
+                {
+                  "name": "icon",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The SVG string for the icon."
                 }
-              ]
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "field",
-              "name": "handleInputChange",
-              "privacy": "private"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
+              "description": "The size of the icon.",
               "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "inputId",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "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
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "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
             },
             {
               "kind": "field",
-              "name": "hintId",
+              "name": "svg",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "privacy": "private",
+              "default": "\"\""
             },
             {
-              "kind": "field",
-              "name": "label",
+              "kind": "method",
+              "name": "handleNameChange",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "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",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "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.",
-              "attribute": "hide-label",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The size of the icon.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "color",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "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.",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "error",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "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"
-              }
-            },
+              "description": "An accessible label for the icon.\nIf no label is supplied, the icon is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "image",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/IconManager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconManager",
+          "members": [
             {
               "kind": "field",
-              "name": "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"
-              }
+              "name": "cache",
+              "privacy": "private",
+              "default": "new Map<string, string | Promise<string>>()"
             },
             {
               "kind": "field",
-              "name": "hideRequired",
-              "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"
+              "name": "resolver",
+              "type": {
+                "text": "IconResolver"
               }
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
+              "name": "resolve",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "name",
                   "type": {
-                    "text": "Event"
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "onResolved",
+                  "type": {
+                    "text": "(svg: string) => void"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
+              "name": "registerIcon",
               "parameters": [
                 {
-                  "name": "additionalContent",
+                  "name": "iconOrName",
+                  "type": {
+                    "text": "string | { title: string; default: string }"
+                  }
+                },
+                {
+                  "name": "icon",
                   "optional": true,
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "string"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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"
             },
             {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-background",
+              "default": "var(--n-color-active)"
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-color",
+              "default": "var(--n-color-text)"
             },
             {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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)"
             },
             {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "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": "autocomplete",
+              "name": "startSlot",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "HTMLSlotElement"
               },
-              "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"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "endSlot",
               "type": {
-                "text": "boolean"
+                "text": "HTMLSlotElement"
               },
-              "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"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "startObserver",
+              "privacy": "private",
+              "default": "new ResizeController(this, () => this.startSlot)"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "endObserver",
+              "privacy": "private",
+              "default": "new ResizeController(this, () => this.endSlot)"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\""
               },
-              "description": "The name of the form component.",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "expand",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formAncestor",
+              "name": "disallowPattern",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "string | undefined"
               },
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "attribute": "disallow-pattern",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
               "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleInputChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_formId",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "protected",
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
-              "attribute": "form",
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "focusableRef",
+              "name": "errorSlot",
               "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
+              "kind": "field",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.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",
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "disallow-pattern",
+              "kind": "field",
+              "name": "errorId",
               "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"
+                "text": "string"
               },
-              "fieldName": "disallowPattern"
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "The size of the component.",
-              "fieldName": "size",
+              "privacy": "protected",
+              "default": "\"hint\"",
               "inheritedFrom": {
-                "name": "SizeMixin",
-                "module": "src/common/mixins/SizeMixin.ts"
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Label for the input.",
-              "fieldName": "label",
+              "attribute": "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.",
-              "fieldName": "hint",
+              "attribute": "hint",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel",
+              "attribute": "hide-label",
               "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.",
-              "fieldName": "placeholder",
+              "attribute": "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.",
-              "fieldName": "error",
+              "attribute": "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.",
-              "fieldName": "required",
+              "attribute": "required",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "hide-required",
+              "kind": "field",
+              "name": "hideRequired",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
-              "fieldName": "hideRequired",
+              "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,
               "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.",
-              "fieldName": "autocomplete",
+              "attribute": "autocomplete",
               "inheritedFrom": {
                 "name": "AutocompleteMixin",
                 "module": "src/common/mixins/AutocompleteMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly",
+              "attribute": "readonly",
+              "reflects": true,
               "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.",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the form component.",
-              "fieldName": "name",
+              "attribute": "name",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The value of the form component.",
-              "fieldName": "value",
+              "attribute": "value",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "name": "form",
+              "kind": "field",
+              "name": "formAncestor",
               "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",
+              "privacy": "private",
+              "default": "null",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "module": "src/common/mixins/InputMixin.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
             },
             {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "ReadonlyMixin",
-              "module": "/src/common/mixins/ReadonlyMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "form",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-input",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
+              "kind": "field",
+              "name": "_formId",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired as the user types into the input.",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
               }
             },
             {
-              "name": "change",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "NordEvent"
+                "text": "HTMLFormElement | null"
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
+              "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"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-input",
-          "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
-          "name": "Icon",
-          "slots": [
-            {
-              "description": "The default slot used for placing a custom SVG icon.",
-              "name": ""
-            }
-          ],
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "manager",
-              "privacy": "private",
-              "static": true,
-              "default": "new IconManager()"
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "registerResolver",
-              "static": true,
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "resolver",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "IconResolver"
+                    "text": "FocusOptions"
                   },
-                  "description": "The resolver function to register."
+                  "description": "An object which controls aspects of the focusing process."
                 }
               ],
-              "description": "Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\nCan return a string synchronously, or a promise of a string.\nBy default, will load icons from the Nord CDN."
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "icon",
-                  "type": {
-                    "text": "{ title: string; default: string }"
-                  },
-                  "description": "An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\nThis is intended to be used in cases where you import an icon's entire ES module and register it directly."
-                }
-              ],
-              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "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\""
               },
-              "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": "\"text\"",
+              "description": "The type of the input.",
+              "fieldName": "type"
             },
             {
-              "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": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
+            },
+            {
+              "name": "disallow-pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
+              "resolveInitializer": {
+                "module": "src/input/Input.ts"
+              },
+              "fieldName": "disallowPattern"
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the component.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "SizeMixin",
+                "module": "src/common/mixins/SizeMixin.ts"
+              }
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "attribute": "name",
-              "reflects": true
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "hint",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size of the icon.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "color",
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "label",
+              "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.",
-              "attribute": "label",
-              "reflects": true
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "svg",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleNameChange",
-              "privacy": "protected"
-            }
-          ],
-          "attributes": [
+              "name": "hide-required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the required indicator, but still show\nrequired attribute to assistive technologies like screen readers.",
+              "fieldName": "hideRequired",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "name": "name",
+              "name": "autocomplete",
               "type": {
-                "text": "string"
+                "text": "AutocompleteAttribute"
               },
-              "default": "\"\"",
-              "description": "The name of the icon to display, as defined by [nordicons](/nordicons/).",
-              "fieldName": "name"
+              "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": "size",
+              "name": "readonly",
               "type": {
-                "text": "\"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | undefined"
+                "text": "boolean"
               },
-              "description": "The size of the icon.",
-              "fieldName": "size"
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "ReadonlyMixin",
+                "module": "src/common/mixins/ReadonlyMixin.ts"
+              }
             },
             {
-              "name": "color",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The color of the icon.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "name": "name",
               "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"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
+              "fieldName": "form",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "ReadonlyMixin",
+              "module": "/src/common/mixins/ReadonlyMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -7949,95 +8019,36 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "image",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<nord-button href=\"/nordicons/\" variant=\"primary\">View Nordicons</nord-button>\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n",
+          "category": "form",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon/IconManager.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IconManager",
-          "members": [
-            {
-              "kind": "field",
-              "name": "cache",
-              "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
-            },
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-input",
+          "customElement": true,
+          "events": [
             {
-              "kind": "field",
-              "name": "resolver",
+              "name": "input",
               "type": {
-                "text": "IconResolver"
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "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"
+              "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"
+              }
             }
           ]
         }
@@ -8045,10 +8056,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconManager",
+          "name": "default",
           "declaration": {
-            "name": "IconManager",
-            "module": "src/icon/IconManager.ts"
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
           }
         }
       ]
@@ -9897,188 +9916,21 @@
               "name": "handleActivate",
               "privacy": "private"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "nav-item"
-          ],
-          "tagName": "nord-navigation",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-navigation",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification/Notification.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
-          "name": "Notification",
-          "slots": [
-            {
-              "description": "Default slot used for the notification text/message.",
-              "name": ""
-            },
-            {
-              "description": "Slot used for the notification icon.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-notification\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "notificationRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dismissed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dismiss",
-              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "dismiss",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "NotificationMixin",
-              "module": "/src/common/mixins/NotificationMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "dismissLabel",
-              "description": "Accessible label for the dismiss button."
-            }
-          ],
-          "status": "draft",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [
-            "stack",
-            "icon"
-          ],
-          "tagName": "nord-notification",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Notification",
-            "module": "src/notification/Notification.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-notification",
-          "declaration": {
-            "name": "Notification",
-            "module": "src/notification/Notification.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
           },
-          "default": "{\n  dismissLabel: \"Dismiss notification\",\n}"
+          "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": [
@@ -10086,8 +9938,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "localization",
-            "module": "src/notification/localization.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-navigation",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         }
       ]
@@ -15105,6 +14965,165 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification/Notification.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
+          "name": "Notification",
+          "slots": [
+            {
+              "description": "Default slot used for the notification text/message.",
+              "name": ""
+            },
+            {
+              "description": "Slot used for the notification icon.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-notification\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "notificationRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dismissed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NotificationMixin",
+              "module": "/src/common/mixins/NotificationMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "dismissLabel",
+              "description": "Accessible label for the dismiss button."
+            }
+          ],
+          "status": "draft",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
+          "examples": [],
+          "dependencies": [
+            "stack",
+            "icon"
+          ],
+          "tagName": "nord-notification",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Notification",
+            "module": "src/notification/Notification.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-notification",
+          "declaration": {
+            "name": "Notification",
+            "module": "src/notification/Notification.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  dismissLabel: \"Dismiss notification\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/notification/localization.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toast-group/ToastGroup.ts",
@@ -17476,6 +17495,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/directives/cond.ts",
@@ -17910,41 +17964,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/mixins/AutocompleteMixin.ts",