@nordhealth/components 1.0.0-alpha.50 → 1.0.0-alpha.53

package/custom-elements.json

@@ -166,6 +166,30 @@
             "name": "default",
             "module": "\"./header/Header.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "NavGroup",
+          "declaration": {
+            "name": "default",
+            "module": "\"./nav-group/NavGroup.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NavItem",
+          "declaration": {
+            "name": "default",
+            "module": "\"./nav-item/NavItem.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Navigation",
+          "declaration": {
+            "name": "default",
+            "module": "\"./navigation/Navigation.js\""
+          }
         }
       ]
     },
@@ -366,6 +390,33 @@
               "attribute": "expand",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ],
+              "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
+            },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderLightDom",
@@ -635,6 +686,114 @@
       ],
       "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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\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\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -1114,114 +1273,6 @@
       ],
       "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -2416,11 +2467,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/collection.ts",
+      "path": "src/common/attribute.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "groupBy",
+          "name": "add",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "attr",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "token",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Carefully adds a token to a space-separated attribute\nSimilar to classList, but for any attribute."
+        },
+        {
+          "kind": "function",
+          "name": "remove",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "attr",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "token",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Carefully removes a token from a space-separated attribute.\nSimilar to classList, but for any attribute."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "add",
+          "declaration": {
+            "name": "add",
+            "module": "src/common/attribute.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "remove",
+          "declaration": {
+            "name": "remove",
+            "module": "src/common/attribute.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/collection.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "groupBy",
           "parameters": [
             {
               "name": "array",
@@ -3240,6 +3365,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/portal.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createPortal",
+          "parameters": [
+            {
+              "name": "src",
+              "type": {
+                "text": "Node"
+              }
+            },
+            {
+              "name": "dest",
+              "type": {
+                "text": "Node"
+              }
+            }
+          ],
+          "description": "Creates a \"portal\" for transporting an element from one location to another.\nThe element gets moved to its destination on open(),\nand restored to its original location on close()."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createPortal",
+          "declaration": {
+            "name": "createPortal",
+            "module": "src/common/portal.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/ref.ts",
@@ -5149,91 +5309,477 @@
               }
             },
             {
-              "name": "error",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "form",
+          "tagName": "nord-input",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/Input.ts"
+          }
+        }
+      ],
+      "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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-group/NavGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
+          "slots": [
+            {
+              "description": "The default slot used for the nav items.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "navigation",
+          "tagName": "nord-nav-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoud 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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-item/NavItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
+          "name": "NavItem",
+          "slots": [
+            {
+              "description": "The default slot used for the nav item's text.",
+              "name": ""
+            },
+            {
+              "description": "Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.",
+              "name": "subnav"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "subnavSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"subnav\")"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used for indicating the current page. This gives a prominent background to the nav item,\nand marks the item as the current page for assistive technology.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of an icon from Nordicons to display for the nav item.",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the nav item should link to.\nNote: this is not used if you have nested navigation using the \"subnav\" slot.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Allows you to add a notification badge with a number next to the nav item.",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When the nav items contains a subnav, controls whether the section is expanded or not.\nNote: this is only used if you have nested navigation using the \"subnav\" slot.",
+              "attribute": "open"
+            },
+            {
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "innards",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error",
+              "privacy": "private",
+              "static": true,
+              "default": "false",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "name": "required",
+              "name": "toggle",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Dispatched whenever a nav item's state changes between open and closed."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "Used for indicating the current page. This gives a prominent background to the nav item,\nand marks the item as the current page for assistive technology.",
+              "fieldName": "active"
             },
             {
-              "name": "expand",
+              "name": "icon",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The name of an icon from Nordicons to display for the nav item.",
+              "fieldName": "icon"
             },
             {
-              "name": "disabled",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "The url the nav item should link to.\nNote: this is not used if you have nested navigation using the \"subnav\" slot.",
+              "fieldName": "href"
             },
             {
-              "name": "name",
+              "name": "badge",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Allows you to add a notification badge with a number next to the nav item.",
+              "fieldName": "badge"
             },
             {
-              "name": "value",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "false",
+              "description": "When the nav items contains a subnav, controls whether the section is expanded or not.\nNote: this is only used if you have nested navigation using the \"subnav\" slot.",
+              "fieldName": "open"
             }
           ],
           "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
@@ -5248,33 +5794,83 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "form",
-          "tagName": "nord-input",
-          "customElement": true,
-          "events": [
+          "category": "navigation",
+          "tagName": "nord-nav-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavItem",
+            "module": "src/nav-item/NavItem.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-item",
+          "declaration": {
+            "name": "NavItem",
+            "module": "src/nav-item/NavItem.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use navigation item outside of navigation group and navigation components.\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\nAvoud 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"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/Navigation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
+          "slots": [
             {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "description": "The main section of the sidebar, for holding nav components.",
+              "name": ""
             },
             {
-              "name": "change",
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
+            {
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
               "type": {
-                "text": "NordEvent"
+                "text": "boolean"
               },
-              "description": "Fired whenever the input's value is changed via user interaction.",
+              "privacy": "private",
+              "static": true,
+              "default": "false",
               "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "navigation",
+          "tagName": "nord-navigation",
+          "customElement": true
         }
       ],
       "exports": [
@@ -5282,20 +5878,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-input",
+          "name": "nord-navigation",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
           }
         }
       ],
-      "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"
+      "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\nAvoud 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"
     },
     {
       "kind": "javascript-module",
@@ -7586,6 +8182,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "lastOpened",
+              "type": {
+                "text": "Tooltip | undefined"
+              },
+              "static": true
+            },
             {
               "kind": "field",
               "name": "shortcutSlot",
@@ -7596,10 +8200,16 @@
               "kind": "field",
               "name": "targetElement",
               "type": {
-                "text": "HTMLElement"
+                "text": "FocusableElement"
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "proxy",
+              "privacy": "private",
+              "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
+            },
             {
               "kind": "field",
               "name": "visible",
@@ -7675,6 +8285,21 @@
               "name": "hideTooltip",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "hideOnEscape",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "addDescribedBy",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "removeDescribedBy",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_warningLogged",
@@ -8018,10 +8643,22 @@
           "description": "",
           "name": "LightDomController",
           "members": [
+            {
+              "kind": "field",
+              "name": "container",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "hostUpdated"
             },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
             {
               "kind": "field",
               "name": "host",
@@ -8059,7 +8696,7 @@
               "kind": "field",
               "name": "renderHook",
               "type": {
-                "text": "HTMLElement"
+                "text": "Comment"
               },
               "privacy": "private"
             },
@@ -8115,10 +8752,6 @@
               "name": "options",
               "default": "options"
             },
-            {
-              "kind": "field",
-              "name": "slot"
-            },
             {
               "kind": "field",
               "name": "hasContent",
@@ -8190,6 +8823,68 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/PortalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PortalController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "renderHook",
+              "type": {
+                "text": "Comment"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lightDom",
+              "type": {
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PortalController",
+          "declaration": {
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/ShortcutController.ts",