@nordhealth/components 1.0.0-beta.9 → 1.0.0-rc.11

package/custom-elements.json

@@ -222,6 +222,70 @@
             "name": "default",
             "module": "\"./avatar/Avatar.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressBar",
+          "declaration": {
+            "name": "default",
+            "module": "\"./progress-bar/ProgressBar.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Popout",
+          "declaration": {
+            "name": "default",
+            "module": "\"./popout/Popout.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Dropdown",
+          "declaration": {
+            "name": "default",
+            "module": "\"./dropdown/Dropdown.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DropdownItem",
+          "declaration": {
+            "name": "default",
+            "module": "\"./dropdown-item/DropdownItem.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DropdownGroup",
+          "declaration": {
+            "name": "default",
+            "module": "\"./dropdown-group/DropdownGroup.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTranslation",
+          "declaration": {
+            "name": "registerTranslation",
+            "module": "\"./localization/translation.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isTranslationRegistered",
+          "declaration": {
+            "name": "isTranslationRegistered",
+            "module": "\"./localization/translation.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Translation",
+          "declaration": {
+            "name": "Translation",
+            "module": "\"./localization/translation.js\""
+          }
         }
       ]
     },
@@ -238,7 +302,7 @@
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "States"
+                "text": "States<typeof transition>"
               },
               "privacy": "private",
               "default": "\"initial\""
@@ -247,7 +311,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"m\" | \"l\" | \"xl\""
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -281,7 +345,8 @@
             },
             {
               "kind": "method",
-              "name": "renderFallback"
+              "name": "renderFallback",
+              "privacy": "protected"
             },
             {
               "kind": "method",
@@ -292,27 +357,13 @@
               "kind": "method",
               "name": "handleError",
               "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
             {
               "name": "size",
               "type": {
-                "text": "\"m\" | \"l\" | \"xl\""
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -336,17 +387,11 @@
               "fieldName": "name"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "image",
           "tagName": "nord-avatar",
           "customElement": true
@@ -397,20 +442,6 @@
               "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
               "attribute": "type",
               "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": [
@@ -424,17 +455,11 @@
               "fieldName": "type"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "text",
           "tagName": "nord-badge",
           "customElement": true
@@ -485,20 +510,6 @@
               "description": "The style variant of the banner.",
               "attribute": "variant",
               "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": [
@@ -512,17 +523,11 @@
               "fieldName": "variant"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "feedback",
           "tagName": "nord-banner",
           "customElement": true
@@ -548,6 +553,94 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
     },
+    {
+      "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
+            }
+          ],
+          "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"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "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",
@@ -599,6 +692,12 @@
               "name": "shortcuts",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
+            },
             {
               "kind": "field",
               "name": "dateFormatShort",
@@ -610,11 +709,35 @@
             },
             {
               "kind": "field",
-              "name": "localization",
+              "name": "monthNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "monthNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dayNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dayNamesShort",
               "type": {
-                "text": "CalendarLocalizedText"
+                "text": "string[]"
               },
-              "default": "localization"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -655,6 +778,17 @@
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "attribute": "max"
             },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "isDateDisabled",
@@ -688,13 +822,15 @@
                   "optional": true,
                   "type": {
                     "text": "FocusOptions & { target: \"day\" | \"month\" }"
-                  }
+                  },
+                  "description": "An object which controls aspects of the focusing process."
                 }
-              ]
+              ],
+              "description": "Programmatically move focus to the calendar."
             },
             {
               "kind": "method",
-              "name": "createDateFormatter",
+              "name": "handleLangChange",
               "privacy": "private"
             },
             {
@@ -819,20 +955,22 @@
               "kind": "field",
               "name": "disableActiveFocus",
               "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "nord-focus-date",
+              "type": {
+                "text": "DateSelectEvent"
+              },
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "kind": "field",
-              "name": "_warningLogged",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -870,19 +1008,22 @@
               "default": "\"\"",
               "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
               "fieldName": "max"
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "list",
           "tagName": "nord-calendar",
           "customElement": true
@@ -917,15 +1058,6 @@
           "description": "",
           "name": "DateSelectEvent",
           "members": [
-            {
-              "kind": "field",
-              "name": "eventName",
-              "type": {
-                "text": "string"
-              },
-              "static": true,
-              "default": "\"nord-select\""
-            },
             {
               "kind": "field",
               "name": "date",
@@ -955,15 +1087,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/calendar-localization.ts",
+      "path": "src/calendar/localization.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "localization",
+          "name": "calendarLocalization",
           "type": {
-            "text": "CalendarLocalizedText"
+            "text": "object"
           },
-          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n  calendarHeading: \"Choose a date\",\n  dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n  monthNames: [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ],\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  locale: \"en-GB\",\n}"
+          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n}"
         }
       ],
       "exports": [
@@ -971,8 +1103,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "localization",
-            "module": "src/calendar/calendar-localization.ts"
+            "name": "calendarLocalization",
+            "module": "src/calendar/localization.ts"
           }
         }
       ],
@@ -999,7 +1131,7 @@
           "name": "monthView",
           "parameters": [
             {
-              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
+              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  dayNames,\n  dayNamesShort,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
               "type": {
                 "text": "MonthViewArgs"
               }
@@ -1041,12 +1173,12 @@
               "name": ""
             },
             {
-              "description": "Used to place content before button text. Typically used for icons.",
-              "name": "before"
+              "description": "Used to place content at the start of button text. Typically used for icons.",
+              "name": "start"
             },
             {
-              "description": "Used to place content after button text. Typically used for icons.",
-              "name": "after"
+              "description": "Used to place content at the end of button text. Typically used for icons.",
+              "name": "end"
             }
           ],
           "members": [
@@ -1055,6 +1187,12 @@
               "name": "buttonRef",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
             {
               "kind": "field",
               "name": "lightDom",
@@ -1094,6 +1232,24 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "accessibleExpanded",
+              "type": {
+                "text": "\"true\" | \"false\" | undefined"
+              },
+              "privacy": "private",
+              "attribute": "aria-expanded"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleHasPopup",
+              "type": {
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+              },
+              "privacy": "private",
+              "attribute": "aria-haspopup"
+            },
             {
               "kind": "field",
               "name": "href",
@@ -1176,7 +1332,15 @@
             {
               "kind": "method",
               "name": "handleClick",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -1275,20 +1439,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -1319,6 +1469,20 @@
               "description": "The size of the button.\nThis affects font-size and padding.",
               "fieldName": "size"
             },
+            {
+              "name": "aria-expanded",
+              "type": {
+                "text": "\"true\" | \"false\" | undefined"
+              },
+              "fieldName": "accessibleExpanded"
+            },
+            {
+              "name": "aria-haspopup",
+              "type": {
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+              },
+              "fieldName": "accessibleHasPopup"
+            },
             {
               "name": "href",
               "type": {
@@ -1401,17 +1565,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-button",
           "customElement": true
@@ -1437,114 +1597,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 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/checkbox/Checkbox.ts",
@@ -1952,20 +2004,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -2117,17 +2155,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-checkbox",
           "customElement": true,
@@ -2210,6 +2244,12 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-command-menu\">(this)"
+            },
             {
               "kind": "field",
               "name": "dismissController",
@@ -2450,20 +2490,6 @@
               "kind": "method",
               "name": "filterCommands",
               "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "events": [
@@ -2509,17 +2535,11 @@
               "fieldName": "placeholder"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-command-menu",
           "customElement": true
@@ -2554,6 +2574,12 @@
           "description": "Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",
           "name": "CommandMenuAction",
           "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
             {
               "kind": "field",
               "name": "command",
@@ -2577,6 +2603,11 @@
               "privacy": "private",
               "description": "Scroll to show element"
             },
+            {
+              "kind": "method",
+              "name": "getIconName",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderShortcut",
@@ -2746,6 +2777,31 @@
       ],
       "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 global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/command-menu/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "commandMenuLocalization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  instructions: \"Press 'Enter' to confirm your input or 'Escape' to cancel\",\n  inputLabel: \"Type the name of a command to run.\",\n  footerArrowKeys: \"Navigate\",\n  footerEnterKey: \"Select\",\n  footerEscapeKey: \"Esc to dismiss\",\n  footerBackspaceKey: \"Move to parent\",\n  noResults: (searchTerm: string) => `No results for “${searchTerm}”`,\n  tip: \"Search tips: some search terms require exact match. Try typing the entire command name, or use a different word or phrase.\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "commandMenuLocalization",
+            "module": "src/command-menu/localization.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 global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/attribute.ts",
@@ -2898,7 +2954,7 @@
             {
               "name": "mapFn",
               "type": {
-                "text": "(item: T) => U"
+                "text": "(item: T, i: number) => U"
               }
             }
           ],
@@ -3003,12 +3059,48 @@
         },
         {
           "kind": "function",
-          "name": "isEqualMonth",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
+          "name": "getDayNames",
+          "parameters": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weekday",
+              "type": {
+                "text": "Exclude<Intl.DateTimeFormatOptions[\"weekday\"], undefined>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "getMonthNames",
+          "parameters": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "month",
+              "type": {
+                "text": "Exclude<Intl.DateTimeFormatOptions[\"month\"], undefined>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isEqualMonth",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
           "parameters": [
             {
               "name": "a",
@@ -3365,6 +3457,22 @@
             "module": "src/common/dates.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "getDayNames",
+          "declaration": {
+            "name": "getDayNames",
+            "module": "src/common/dates.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getMonthNames",
+          "declaration": {
+            "name": "getMonthNames",
+            "module": "src/common/dates.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isEqualMonth",
@@ -3709,6 +3817,112 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/positioning.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "logicalToPhysical",
+          "return": {
+            "type": {
+              "text": "Side"
+            }
+          },
+          "parameters": [
+            {
+              "name": "logicalSide",
+              "type": {
+                "text": "LogicalSide"
+              }
+            }
+          ],
+          "description": "Converts a single logical position to a physical position"
+        },
+        {
+          "kind": "function",
+          "name": "logicalToPhysical",
+          "return": {
+            "type": {
+              "text": "Placement"
+            }
+          },
+          "parameters": [
+            {
+              "name": "logicalSide",
+              "type": {
+                "text": "LogicalSide"
+              }
+            },
+            {
+              "name": "alignment",
+              "type": {
+                "text": "Alignment"
+              }
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "Direction"
+              }
+            }
+          ],
+          "description": "Converts a logical side and alignment to floating-ui compatible placement"
+        },
+        {
+          "kind": "function",
+          "name": "logicalToPhysical",
+          "parameters": [
+            {
+              "name": "logicalSide",
+              "type": {
+                "text": "LogicalSide"
+              }
+            },
+            {
+              "name": "alignment",
+              "optional": true,
+              "type": {
+                "text": "Alignment"
+              }
+            },
+            {
+              "name": "dir",
+              "optional": true,
+              "type": {
+                "text": "Direction"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "logicalToPhysical",
+          "declaration": {
+            "name": "logicalToPhysical",
+            "module": "src/common/positioning.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "logicalToPhysical",
+          "declaration": {
+            "name": "logicalToPhysical",
+            "module": "src/common/positioning.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "logicalToPhysical",
+          "declaration": {
+            "name": "logicalToPhysical",
+            "module": "src/common/positioning.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/ref.ts",
@@ -3796,6 +4010,12 @@
               "privacy": "private",
               "default": "new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })"
+            },
             {
               "kind": "field",
               "name": "dateFormatLong",
@@ -3883,15 +4103,6 @@
               "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
               "attribute": "first-day-of-week"
             },
-            {
-              "kind": "field",
-              "name": "localization",
-              "type": {
-                "text": "DatePickerLocalizedText"
-              },
-              "default": "localization",
-              "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English."
-            },
             {
               "kind": "field",
               "name": "dateAdapter",
@@ -3921,10 +4132,14 @@
               "parameters": [
                 {
                   "name": "moveFocusToButton",
-                  "default": "true"
+                  "default": "true",
+                  "description": "controls whether focus should be returned to the date picker's button.",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ],
-              "description": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\nreturning to the date picker's button. Default is true."
+              "description": "Hide the calendar modal."
             },
             {
               "kind": "method",
@@ -4335,20 +4550,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "events": [
@@ -4564,17 +4765,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-date-picker",
           "customElement": true
@@ -4627,15 +4824,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/date-picker/date-localization.ts",
+      "path": "src/date-picker/localization.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "localization",
+          "name": "datePickerLocalization",
           "type": {
-            "text": "DatePickerLocalizedText"
+            "text": "object"
           },
-          "default": "{\n  ...calendarLocalization,\n  closeLabel: \"Close window\",\n  buttonLabel: \"Choose date\",\n  selectedDateMessage: \"Selected date is\",\n}"
+          "default": "{\n  modalHeading: \"Choose a date\",\n  closeLabel: \"Close window\",\n  buttonLabel: \"Choose date\",\n  selectedDateMessage: \"Selected date is\",\n}"
         }
       ],
       "exports": [
@@ -4643,8 +4840,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "localization",
-            "module": "src/date-picker/date-localization.ts"
+            "name": "datePickerLocalization",
+            "module": "src/date-picker/localization.ts"
           }
         }
       ],
@@ -4652,19 +4849,89 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/empty-state/EmptyState.ts",
+      "path": "src/dropdown/Dropdown.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",
-          "name": "EmptyState",
+          "description": "Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.",
+          "name": "Dropdown",
           "slots": [
             {
-              "description": "default slot",
+              "description": "The dropdown content.",
               "name": ""
+            },
+            {
+              "description": "Used to place the toggle for dropdown.",
+              "name": "toggle"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "popout",
+              "type": {
+                "text": "Popout"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "Popout[\"align\"] | undefined"
+              },
+              "description": "Set the alignment of the dropdown in relation to the toggle depending on the position.\n`start` will align the left of the dropdown to the left of the toggle.\n`end` will align the right of the dropdown to the right of the toggle.\nA dropdown with a set position of `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom of the dropdown respectively.",
+              "attribute": "align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "Popout[\"position\"] | undefined"
+              },
+              "description": "Set the position of the dropdown in relation to the toggle.\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the toggle slot expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpen",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_warningLogged",
@@ -4680,6 +4947,33 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "align",
+              "type": {
+                "text": "Popout[\"align\"] | undefined"
+              },
+              "description": "Set the alignment of the dropdown in relation to the toggle depending on the position.\n`start` will align the left of the dropdown to the left of the toggle.\n`end` will align the right of the dropdown to the right of the toggle.\nA dropdown with a set position of `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom of the dropdown respectively.",
+              "fieldName": "align"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "Popout[\"position\"] | undefined"
+              },
+              "description": "Set the position of the dropdown in relation to the toggle.\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.",
+              "fieldName": "position"
+            },
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the toggle slot expands to fill the width of its container.",
+              "fieldName": "expand"
+            }
+          ],
           "mixins": [
             {
               "name": "DraftComponentMixin",
@@ -4691,8 +4985,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "feedback",
-          "tagName": "nord-empty-state",
+          "category": "action",
+          "tagName": "nord-dropdown",
           "customElement": true
         }
       ],
@@ -4701,93 +4995,44 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
+            "name": "Dropdown",
+            "module": "src/dropdown/Dropdown.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-empty-state",
+          "name": "nord-dropdown",
           "declaration": {
-            "name": "EmptyState",
-            "module": "src/empty-state/EmptyState.ts"
+            "name": "Dropdown",
+            "module": "src/dropdown/Dropdown.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 when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, 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\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\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\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</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\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</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\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or commands, where an action is initiated based on the selection.\n- When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.\n- Use for a “more” menu, where the control contains an icon.\n- Use for user profiles, where the control is an avatar.\n- Use in conjunction with the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding primary actions since they should be visible by default.\n- Don’t use for selecting an option from a list of options, use the [select component](/components/select/) instead.\n- Don’t nest elements or components other than the [dropdown item](/components/dropdown-item/) and [dropdown group](/components/dropdown-group/) components. Consider using the [popout component](/components/popout/) when creating custom UI.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items 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\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/fieldset/Fieldset.ts",
+      "path": "src/dropdown-group/DropdownGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Fieldset is used for grouping sets of input components.\nIt is necessary to use a fieldset with radio and checkbox components.\nIt can also be useful for logically grouping other types of inputs.",
-          "name": "Fieldset",
+          "description": "Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",
+          "name": "DropdownGroup",
           "slots": [
             {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the fieldset.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the fieldset.",
-              "name": "error"
+              "description": "The dropdown group content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "errorSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"error\")"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"hint\")"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the fieldset.",
-              "attribute": "label"
-            },
-            {
-              "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"
-            },
-            {
-              "kind": "field",
-              "name": "error",
+              "name": "heading",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the fieldset. Alternatively use the error slot.",
-              "attribute": "error"
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "privacy": "protected"
+              "description": "Heading and accessible label for the dropdown group.",
+              "attribute": "heading"
             },
             {
               "kind": "field",
@@ -4806,29 +5051,12 @@
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the fieldset.",
-              "fieldName": "label"
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
-            },
-            {
-              "name": "error",
+              "name": "heading",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the fieldset. Alternatively use the error slot.",
-              "fieldName": "error"
+              "description": "Heading and accessible label for the dropdown group.",
+              "fieldName": "heading"
             }
           ],
           "mixins": [
@@ -4842,8 +5070,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "form",
-          "tagName": "nord-fieldset",
+          "category": "action",
+          "tagName": "nord-dropdown-group",
           "customElement": true
         }
       ],
@@ -4852,45 +5080,99 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Fieldset",
-            "module": "src/fieldset/Fieldset.ts"
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-fieldset",
+          "name": "nord-dropdown-group",
           "declaration": {
-            "name": "Fieldset",
-            "module": "src/fieldset/Fieldset.ts"
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.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 the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset 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\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\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- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\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\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items 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\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/header/Header.ts",
+      "path": "src/dropdown-item/DropdownItem.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
-          "name": "Header",
+          "description": "Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",
+          "name": "DropdownItem",
           "slots": [
             {
-              "description": "The header content.",
+              "description": "The dropdown item content.",
               "name": ""
             },
             {
-              "description": "Optional slot for buttons, toggles, etc.",
-              "name": "action"
+              "description": "Used to place content before dropdown item text. Typically used for icons.",
+              "name": "start"
+            },
+            {
+              "description": "Used to place content after dropdown item text. Typically used for icons.",
+              "name": "end"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "actionSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"action\")"
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the dropdown item should link to.",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "field",
@@ -4907,7 +5189,21 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the dropdown item should link to.",
+              "fieldName": "href"
+            }
+          ],
           "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
             {
               "name": "DraftComponentMixin",
               "module": "/src/common/mixins/DraftComponentMixin.js"
@@ -4918,8 +5214,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "structure",
-          "tagName": "nord-header",
+          "category": "action",
+          "tagName": "nord-dropdown-item",
           "customElement": true
         }
       ],
@@ -4928,67 +5224,325 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
+            "name": "DropdownItem",
+            "module": "src/dropdown-item/DropdownItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-header",
+          "name": "nord-dropdown-item",
           "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
+            "name": "DropdownItem",
+            "module": "src/dropdown-item/DropdownItem.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 the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use dropdown item outside of dropdown group and dropdown components.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, 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 dropdown items 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\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
+      "path": "src/empty-state/EmptyState.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",
+          "description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",
+          "name": "EmptyState",
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "feedback",
+          "tagName": "nord-empty-state",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-empty-state",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.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 when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, 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\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\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\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</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\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</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\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fieldset/Fieldset.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Fieldset is used for grouping sets of input components.\nIt is necessary to use a fieldset with radio and checkbox components.\nIt can also be useful for logically grouping other types of inputs.",
+          "name": "Fieldset",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the fieldset.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the fieldset.",
+              "name": "error"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "resolver",
-              "type": {
-                "text": "IconResolver"
-              },
+              "name": "errorSlot",
               "privacy": "private",
-              "static": true
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "registeredIcons",
+              "name": "hintSlot",
               "privacy": "private",
-              "static": true,
-              "default": "new Map<string, string>()"
-            },
-            {
-              "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."
+              "default": "new SlotController(this, \"hint\")"
             },
             {
-              "kind": "method",
-              "name": "registerIcon",
-              "static": true,
-              "return": {
-                "type": {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the fieldset.",
+              "attribute": "label"
+            },
+            {
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the fieldset. Alternatively use the error slot.",
+              "attribute": "error"
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the fieldset.",
+              "fieldName": "label"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the fieldset. Alternatively use the error slot.",
+              "fieldName": "error"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "form",
+          "tagName": "nord-fieldset",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Fieldset",
+            "module": "src/fieldset/Fieldset.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-fieldset",
+          "declaration": {
+            "name": "Fieldset",
+            "module": "src/fieldset/Fieldset.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 the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset 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\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/header/Header.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
+          "name": "Header",
+          "slots": [
+            {
+              "description": "The header content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for buttons, toggles, etc.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "actionSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"action\")"
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "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": "structure",
+          "tagName": "nord-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.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 the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
+    },
+    {
+      "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": "resolver",
+              "type": {
+                "text": "IconResolver"
+              },
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "registeredIcons",
+              "privacy": "private",
+              "static": true,
+              "default": "new Map<string, string>()"
+            },
+            {
+              "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": "method",
+              "name": "registerIcon",
+              "static": true,
+              "return": {
+                "type": {
                   "text": "void"
                 }
               },
@@ -5039,16 +5593,19 @@
                   "name": "iconOrName",
                   "type": {
                     "text": "string | { title: string; default: string }"
-                  }
+                  },
+                  "description": "The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string."
                 },
                 {
                   "name": "icon",
                   "optional": true,
                   "type": {
                     "text": "string"
-                  }
+                  },
+                  "description": "The SVG string for the icon."
                 }
-              ]
+              ],
+              "description": "Register an individual icon so it can be rendered synchronously, to avoid loading over the network."
             },
             {
               "kind": "field",
@@ -5110,20 +5667,6 @@
                   "text": "string | Promise<string>"
                 }
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -5162,17 +5705,11 @@
               "fieldName": "label"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "image",
           "tagName": "nord-icon",
           "customElement": true
@@ -5220,16 +5757,16 @@
               "name": "error"
             },
             {
-              "description": "Optional slot that holds an icon for the input.",
-              "name": "before"
+              "description": "Optional slot used to place an icon at the start of the input.",
+              "name": "start"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "beforeSlot",
+              "name": "startSlot",
               "privacy": "private",
-              "default": "new SlotController(this, \"before\")"
+              "default": "new SlotController(this, \"start\")"
             },
             {
               "kind": "field",
@@ -5623,23 +6160,9 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
+            }
+          ],
+          "attributes": [
             {
               "name": "type",
               "type": {
@@ -5788,17 +6311,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-input",
           "customElement": true,
@@ -5922,6 +6441,266 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/LocalizeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LocalizeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "unsubscribe",
+              "type": {
+                "text": "ReturnType<typeof subscribe> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedTranslation",
+              "type": {
+                "text": "Translation"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "term",
+              "return": {
+                "type": {
+                  "text": "Result<Translation[TComponentName], Key>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Key"
+                  }
+                },
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "FuncParams<Translation[TComponentName], Key>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleLangChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "default": "options"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LocalizeController",
+          "declaration": {
+            "name": "LocalizeController",
+            "module": "src/localization/LocalizeController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/en-us.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "en",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "en",
+            "module": "src/localization/en-us.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/fi-fi.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "fi",
+          "type": {
+            "text": "Translation"
+          },
+          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "fi",
+            "module": "src/localization/fi-fi.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/translation.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "clearTranslations",
+          "description": "Removes all registered translations"
+        },
+        {
+          "kind": "function",
+          "name": "registerTranslation",
+          "parameters": [
+            {
+              "name": "translation",
+              "type": {
+                "text": "Translation[]"
+              }
+            }
+          ],
+          "description": "Registers one or more translations"
+        },
+        {
+          "kind": "function",
+          "name": "subscribe",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "onChange",
+              "type": {
+                "text": "() => void"
+              },
+              "description": "callback for when either `lang` attr changes, or a new language is registered."
+            }
+          ],
+          "description": "subscribe to language changes"
+        },
+        {
+          "kind": "function",
+          "name": "isTranslationRegistered",
+          "parameters": [
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "the lang code e.g. \"en\" or \"en-GB\""
+            }
+          ],
+          "description": "Check whether there is a translation registered for the given lang"
+        },
+        {
+          "kind": "function",
+          "name": "resolveTranslation",
+          "return": {
+            "type": {
+              "text": "Translation"
+            }
+          },
+          "parameters": [
+            {
+              "name": "langCode",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "clearTranslations",
+          "declaration": {
+            "name": "clearTranslations",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTranslation",
+          "declaration": {
+            "name": "registerTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "subscribe",
+          "declaration": {
+            "name": "subscribe",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isTranslationRegistered",
+          "declaration": {
+            "name": "isTranslationRegistered",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveTranslation",
+          "declaration": {
+            "name": "resolveTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/nav-group/NavGroup.ts",
@@ -6005,32 +6784,396 @@
           }
         }
       ],
-      "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"
+      "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": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "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": "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": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of an icon from Nordicons to display for the nav item.",
+              "fieldName": "icon"
+            },
+            {
+              "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.",
+              "fieldName": "href"
+            },
+            {
+              "name": "badge",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Allows you to add a notification badge with a number next to the nav item.",
+              "fieldName": "badge"
+            },
+            {
+              "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.",
+              "fieldName": "open"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "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": [
+            {
+              "description": "The main section of the sidebar, for holding nav components.",
+              "name": ""
+            },
+            {
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
+            {
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "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": [
+        {
+          "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"
+          }
+        }
+      ],
+      "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",
-      "path": "src/nav-item/NavItem.ts",
+      "path": "src/popout/Popout.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
-          "name": "NavItem",
+          "description": "Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",
+          "name": "Popout",
           "slots": [
             {
-              "description": "The default slot used for the nav item's text.",
+              "description": "The popout content.",
               "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",
+              "name": "targetElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "cleanupAutoUpdate",
+              "type": {
+                "text": "ReturnType<typeof autoUpdate> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dismiss",
               "privacy": "private",
-              "default": "new SlotController(this, \"subnav\")"
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })",
+              "description": "Handle dismissal of the popout, clicking outside the target button and popout."
             },
             {
               "kind": "field",
@@ -6040,141 +7183,90 @@
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "open",
               "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
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "computedPosition",
               "type": {
-                "text": "string | undefined"
+                "text": "Placement | undefined"
               },
-              "description": "The name of an icon from Nordicons to display for the nav item.",
-              "attribute": "icon"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "align",
               "type": {
-                "text": "string | undefined"
+                "text": "\"start\" | \"end\""
               },
-              "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"
+              "default": "\"start\"",
+              "description": "Set the alignment of the popout in relation to the toggle depending on the position.\n`start` will align the left of the popout to the left of the toggle.\n`end` will align the right of the popout to the right of the toggle.\nA popout with a set position of `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom of the popout respectively.",
+              "attribute": "align",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "badge",
+              "name": "position",
               "type": {
-                "text": "string | undefined"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "description": "Allows you to add a notification badge with a number next to the nav item.",
-              "attribute": "badge"
+              "default": "\"block-end\"",
+              "description": "Set the position of the popout in relation to the toggle.\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-controls.",
+              "attribute": "id",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "renderLink",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "innards",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
+              "name": "show",
+              "description": "Show the popout, moving focus to the calendar inside."
             },
             {
               "kind": "method",
-              "name": "renderToggle",
-              "privacy": "private",
+              "name": "hide",
               "parameters": [
                 {
-                  "name": "innards",
+                  "name": "moveFocusToButton",
+                  "default": "true",
+                  "description": "prevent focus returning to the target\nbutton. Default is true.",
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "boolean"
                   }
                 }
-              ]
+              ],
+              "description": "Hide the popout."
             },
             {
-              "kind": "method",
-              "name": "renderButton",
+              "kind": "field",
+              "name": "updatePosition",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "innards",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleOpen",
-              "privacy": "private"
+              "description": "Get the position of the element toggling the popout\nand position the popout underneath it, taking into account the optional placement."
             },
             {
               "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"
-              }
+              "name": "toggleOpen",
+              "privacy": "private",
+              "description": "Toggle the popout open or closed using state.\nUpdating the position to underneath the target button before the popout is opened."
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "getToggle",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -6193,62 +7285,50 @@
           ],
           "events": [
             {
-              "name": "toggle",
+              "name": "open",
               "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": "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"
+              "description": "Dispatched when the popout is opened."
             },
             {
-              "name": "icon",
+              "name": "close",
               "type": {
-                "text": "string | undefined"
+                "text": "NordEvent"
               },
-              "description": "The name of an icon from Nordicons to display for the nav item.",
-              "fieldName": "icon"
-            },
+              "description": "Dispatched when the popout is closed."
+            }
+          ],
+          "attributes": [
             {
-              "name": "href",
+              "name": "align",
               "type": {
-                "text": "string | undefined"
+                "text": "\"start\" | \"end\""
               },
-              "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"
+              "default": "\"start\"",
+              "description": "Set the alignment of the popout in relation to the toggle depending on the position.\n`start` will align the left of the popout to the left of the toggle.\n`end` will align the right of the popout to the right of the toggle.\nA popout with a set position of `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom of the popout respectively.",
+              "fieldName": "align"
             },
             {
-              "name": "badge",
+              "name": "position",
               "type": {
-                "text": "string | undefined"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "description": "Allows you to add a notification badge with a number next to the nav item.",
-              "fieldName": "badge"
+              "default": "\"block-end\"",
+              "description": "Set the position of the popout in relation to the toggle.\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.",
+              "fieldName": "position"
             },
             {
-              "name": "open",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-controls.",
+              "fieldName": "id"
             }
           ],
           "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            },
             {
               "name": "DraftComponentMixin",
               "module": "/src/common/mixins/DraftComponentMixin.js"
@@ -6259,8 +7339,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "navigation",
-          "tagName": "nord-nav-item",
+          "category": "overlay",
+          "tagName": "nord-popout",
           "customElement": true
         }
       ],
@@ -6269,72 +7349,150 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavItem",
-            "module": "src/nav-item/NavItem.ts"
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-nav-item",
+          "name": "nord-popout",
           "declaration": {
-            "name": "NavItem",
-            "module": "src/nav-item/NavItem.ts"
+            "name": "Popout",
+            "module": "src/popout/Popout.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"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoud all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
+      "path": "src/progress-bar/ProgressBar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "slots": [
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
+          "members": [
             {
-              "description": "The main section of the sidebar, for holding nav components.",
-              "name": ""
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "description": "The top section of the sidebar.",
-              "name": "header"
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "_warningLogged",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "fieldName": "value"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
             }
           ],
           "mixins": [
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
-          "category": "navigation",
-          "tagName": "nord-navigation",
+          "status": "new",
+          "category": "feedback",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -6343,20 +7501,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-navigation",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.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 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"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n"
     },
     {
       "kind": "javascript-module",
@@ -6788,20 +7946,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -6953,17 +8097,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-radio",
           "customElement": true,
@@ -7451,20 +8591,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "mixins": [
@@ -7479,17 +8605,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-select",
           "customElement": true,
@@ -7706,20 +8828,6 @@
               "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
               "attribute": "label",
               "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": [
@@ -7749,17 +8857,11 @@
               "fieldName": "label"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "feedback",
           "tagName": "nord-spinner",
           "customElement": true
@@ -7826,7 +8928,7 @@
               "kind": "field",
               "name": "alignItems",
               "type": {
-                "text": "\"center\" | \"start\" | \"end\" | undefined"
+                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
               },
               "description": "How to align the child items inside the stack.",
               "attribute": "align-items",
@@ -7834,17 +8936,35 @@
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "responsive",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true,
               "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "description": "Enable or disable responsive behaviour of the stack component.\nSetting this option \"true\" makes sure that contents are\nstacked vertically on mobile (768px and under).",
+              "attribute": "responsive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "justifyContent",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "attribute": "justify-content",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -7869,23 +8989,43 @@
             {
               "name": "align-items",
               "type": {
-                "text": "\"center\" | \"start\" | \"end\" | undefined"
+                "text": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined"
               },
               "description": "How to align the child items inside the stack.",
               "fieldName": "alignItems"
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
+              "name": "responsive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable or disable responsive behaviour of the stack component.\nSetting this option \"true\" makes sure that contents are\nstacked vertically on mobile (768px and under).",
+              "fieldName": "responsive"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the Stack items are forced in a single line\nor can be flowed into multiple lines.",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "justify-content",
+              "type": {
+                "text": "| \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\" | undefined"
+              },
+              "description": "How to justify the child items inside the stack.",
+              "fieldName": "justifyContent"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "structure",
           "tagName": "nord-stack",
           "customElement": true
@@ -7948,20 +9088,6 @@
               "name": "createRenderRoot",
               "privacy": "protected",
               "description": "opt out of shadow dom"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -7975,17 +9101,11 @@
               "fieldName": "density"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "list",
           "tagName": "nord-table",
           "customElement": true
@@ -8419,20 +9539,6 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -8584,17 +9690,13 @@
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "form",
           "tagName": "nord-textarea",
           "customElement": true,
@@ -8679,9 +9781,23 @@
             },
             {
               "kind": "field",
-              "name": "targetElement",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "currentElement",
+              "type": {
+                "text": "FocusableElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timeoutId",
               "type": {
-                "text": "FocusableElement"
+                "text": "ReturnType<typeof setTimeout> | undefined"
               },
               "privacy": "private"
             },
@@ -8693,20 +9809,30 @@
             },
             {
               "kind": "field",
-              "name": "visible",
+              "name": "state",
               "type": {
-                "text": "boolean"
+                "text": "TooltipStates"
               },
-              "default": "false",
-              "description": "Determines whether the tooltip is visible or not."
+              "privacy": "private",
+              "default": "\"hidden\"",
+              "description": "The current state of the tooltip, dependent on the state machine"
+            },
+            {
+              "kind": "field",
+              "name": "coords",
+              "type": {
+                "text": "[number, number]"
+              },
+              "privacy": "private",
+              "default": "[0, 0]"
             },
             {
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"bottom\" | \"top\" | \"left\" | \"right\" | undefined"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "default": "\"top\"",
+              "default": "\"block-start\"",
               "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
               "attribute": "position",
               "reflects": true
@@ -8739,11 +9865,24 @@
               "type": {
                 "text": "number"
               },
-              "default": "300",
+              "default": "500",
               "description": "The delay in milliseconds before the tooltip is opened.",
               "attribute": "delay",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "handleTransition",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "prevState",
+                  "type": {
+                    "text": "TooltipStates"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "updatePosition",
@@ -8752,57 +9891,47 @@
             },
             {
               "kind": "field",
-              "name": "handleScroll",
+              "name": "hideTooltip",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "showTooltip",
-              "privacy": "private",
-              "description": "Show and hide the tooltip using inline styles"
-            },
-            {
-              "kind": "field",
-              "name": "hideTooltip",
+              "name": "reposition",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hideOnEscape",
+              "name": "handleShow",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "addDescribedBy",
+              "name": "handleHide",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "removeDescribedBy",
+              "name": "hideOnEscape",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
+              "name": "addDescribedBy",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "removeDescribedBy",
+              "privacy": "private"
             }
           ],
           "attributes": [
             {
               "name": "position",
               "type": {
-                "text": "\"bottom\" | \"top\" | \"left\" | \"right\" | undefined"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "default": "\"top\"",
+              "default": "\"block-start\"",
               "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
               "fieldName": "position"
             },
@@ -8829,22 +9958,16 @@
               "type": {
                 "text": "number"
               },
-              "default": "300",
+              "default": "500",
               "description": "The delay in milliseconds before the tooltip is opened.",
               "fieldName": "delay"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "overlay",
           "tagName": "nord-tooltip",
           "customElement": true
@@ -8868,7 +9991,7 @@
           }
         }
       ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessability.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n-------\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n-------\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
     },
     {
       "kind": "javascript-module",
@@ -8884,33 +10007,12 @@
               "name": ""
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "text",
           "tagName": "nord-visually-hidden",
           "customElement": true
@@ -9009,6 +10111,217 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/EventController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "EventController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "listeners",
+              "type": {
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "window",
+                  "type": {
+                    "text": "Window"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "document",
+                  "type": {
+                    "text": "Document"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Window | Document | HTMLElement | ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(ev: any) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EventController",
+          "declaration": {
+            "name": "EventController",
+            "module": "src/common/controllers/EventController.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/FormDataController.ts",
@@ -9019,12 +10332,17 @@
           "name": "FormDataController",
           "members": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
               "kind": "field",
@@ -9074,12 +10392,17 @@
               "default": "new ShortcutController(this.host, { Escape: this.handleEsc })"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
               "kind": "field",
@@ -9200,11 +10523,7 @@
             },
             {
               "kind": "method",
-              "name": "hostDisconnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
-              }
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
@@ -9233,6 +10552,19 @@
               "name": "options",
               "default": "options"
             },
+            {
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "hasContent",
@@ -9449,12 +10781,17 @@
           "name": "SlotController",
           "members": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "events",
+              "type": {
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
               "kind": "field",
@@ -9521,16 +10858,16 @@
           "members": [
             {
               "kind": "field",
-              "name": "host",
+              "name": "events",
               "type": {
-                "text": "ReactiveElement"
+                "text": "EventController"
               },
               "privacy": "private",
-              "default": "host"
+              "default": "new EventController(host)"
             },
             {
               "kind": "field",
-              "name": "attached",
+              "name": "hadFirstUpdate",
               "type": {
                 "text": "boolean"
               },
@@ -9557,26 +10894,12 @@
             },
             {
               "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "() => HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "onSwipeEnd",
+              "name": "options",
               "type": {
-                "text": "SwipeControllerOptions[\"onSwipeEnd\"]"
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "matchesGesture",
-              "type": {
-                "text": "SwipeControllerOptions[\"matchesGesture\"]"
-              }
+              "privacy": "private",
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
               "kind": "method",