@nordhealth/components 2.6.1 → 2.7.0

package/custom-elements.json

@@ -374,6 +374,14 @@
             "name": "default",
             "module": "\"./drawer/Drawer.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "NavToggle",
+          "declaration": {
+            "name": "default",
+            "module": "\"./nav-toggle/NavToggle.js\""
+          }
         }
       ]
     },
@@ -386,6 +394,11 @@
           "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
           "name": "Avatar",
           "cssProperties": [
+            {
+              "description": "Controls the color of the avatar fallback, using [color tokens](/tokens/#color).",
+              "name": "--n-avatar-color",
+              "default": "var(--n-color-status-highlight)"
+            },
             {
               "description": "Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).",
               "name": "--n-avatar-size",
@@ -406,7 +419,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -433,6 +446,17 @@
               "description": "The name of the person.",
               "attribute": "name"
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"square\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the avatar.",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleSrcChange",
@@ -463,7 +487,7 @@
             {
               "name": "size",
               "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -485,6 +509,15 @@
               "default": "\"\"",
               "description": "The name of the person.",
               "fieldName": "name"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"square\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the avatar.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -521,303 +554,356 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/Button.ts",
+      "path": "src/banner/Banner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
-          "name": "Button",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
           "cssProperties": [
             {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-button-gap",
-              "default": "var(--n-space-s)"
-            },
-            {
-              "description": "Controls the overlayed gradient background on the button.",
-              "name": "--n-button-gradient",
-              "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
-            },
-            {
-              "description": "Controls the background color of the button, using [color tokens](/tokens/#color).",
-              "name": "--n-button-background-color",
-              "default": "var(--n-color-button)"
-            },
-            {
-              "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
-              "name": "--n-button-border-color",
-              "default": "var(--n-color-border-strong)"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
             },
             {
-              "description": "Controls the text alignment for the text in the button.",
-              "name": "--n-button-text-align",
-              "default": "center"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
             }
           ],
           "slots": [
             {
-              "description": "The button content",
+              "description": "default slot",
               "name": ""
-            },
-            {
-              "description": "Used to place content at the start of button text. Typically used for icons.",
-              "name": "start"
-            },
-            {
-              "description": "Used to place content at the end of button text. Typically used for icons.",
-              "name": "end"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "buttonRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "lightDom",
-              "privacy": "private",
-              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
               "attribute": "variant",
               "reflects": true
-            },
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "feedback",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "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/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
               },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
               "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "progress",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\""
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
               },
-              "default": "\"m\"",
-              "description": "The size of the button.\nThis affects font-size and padding.",
-              "attribute": "size",
-              "reflects": true
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "attribute": "progress"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "accessibleExpanded",
+              "name": "progress",
               "type": {
-                "text": "\"true\" | \"false\" | undefined"
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
               },
-              "privacy": "private",
-              "attribute": "aria-expanded"
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "fieldName": "progress"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/Calendar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-calendar-border-radius",
+              "default": "var(--n-border-radius)"
             },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "accessibleHasPopup",
+              "name": "dialogLabelId",
               "type": {
-                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
+                "text": "string"
               },
               "privacy": "private",
-              "attribute": "aria-haspopup"
+              "default": "\"dialog-header\""
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "monthSelectNode",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement"
               },
-              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
-              "attribute": "href",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "focusedDayNode",
               "type": {
-                "text": "boolean"
+                "text": "HTMLButtonElement"
               },
-              "default": "false",
-              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
-              "attribute": "download"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
-              },
-              "default": "\"_self\"",
-              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
-              "attribute": "target",
-              "reflects": true
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the button expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
             },
             {
               "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
-              "attribute": "loading",
-              "reflects": true
+              "name": "shortcuts",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "renderLink",
+              "kind": "field",
+              "name": "localize",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "innards",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
-              "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
+              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
             },
             {
-              "kind": "method",
-              "name": "renderButton",
+              "kind": "field",
+              "name": "dateFormatShort",
+              "type": {
+                "text": "Intl.DateTimeFormat"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "innards",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
             },
             {
-              "kind": "method",
-              "name": "renderLightDom",
+              "kind": "field",
+              "name": "monthNames",
+              "type": {
+                "text": "string[]"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOuterClick",
+              "name": "monthNamesShort",
+              "type": {
+                "text": "string[]"
+              },
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "dayNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleProxyChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
+              "kind": "field",
+              "name": "dayNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "string | undefined"
+                "text": "DaysOfWeek"
               },
-              "description": "The name of the form component.",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "attribute": "firstDayOfWeek"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "min",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element.",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "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",
+              "type": {
+                "text": "DateDisabledPredicate"
+              },
+              "default": "isDateDisabled",
+              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+            },
+            {
+              "kind": "field",
+              "name": "activeFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "focusedDay",
+              "privacy": "private",
+              "default": "new Date()"
             },
             {
               "kind": "method",
@@ -827,169 +913,212 @@
                   "name": "options",
                   "optional": true,
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "FocusOptions & { target: \"day\" | \"month\" }"
                   },
                   "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": "Programmatically move focus to the calendar."
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "handleValueChange",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button.",
-              "fieldName": "variant"
+              "name": "handleFocusedDayChange",
+              "privacy": "protected"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "default": "\"submit\"",
-              "description": "The type of the button.",
-              "fieldName": "type"
+              "kind": "method",
+              "name": "handleLangChange",
+              "privacy": "private"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\" | \"l\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the button.\nThis affects font-size and padding.",
-              "fieldName": "size"
+              "kind": "field",
+              "name": "handleDaySelect",
+              "privacy": "private"
             },
             {
-              "name": "aria-expanded",
-              "type": {
-                "text": "\"true\" | \"false\" | undefined"
-              },
-              "fieldName": "accessibleExpanded"
+              "kind": "method",
+              "name": "addDays",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "days",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "name": "aria-haspopup",
-              "type": {
-                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
-              },
-              "fieldName": "accessibleHasPopup"
+              "kind": "method",
+              "name": "addMonths",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
-              "fieldName": "href"
+              "kind": "method",
+              "name": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "name": "download",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
-              "fieldName": "download"
+              "kind": "method",
+              "name": "startOfWeek",
+              "privacy": "private"
             },
             {
-              "name": "target",
+              "kind": "method",
+              "name": "endOfWeek",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setMonth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setYear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleMonthSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleYearSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleNextMonthClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "enableActiveFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "disableActiveFocus",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "nord-focus-date",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+                "text": "DateSelectEvent"
               },
-              "default": "\"_self\"",
-              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
-              "fieldName": "target"
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "name": "expand",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "default": "false",
-              "description": "Controls whether the button expands to fill the width of its container.",
-              "fieldName": "expand"
-            },
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "loading",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
-              "fieldName": "loading"
+              "default": "\"\"",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "disabled",
+              "name": "firstDayOfWeek",
               "type": {
-                "text": "boolean"
+                "text": "DaysOfWeek"
               },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "fieldName": "firstDayOfWeek"
             },
             {
-              "name": "name",
+              "name": "min",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
+              "default": "\"\"",
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "fieldName": "min"
             },
             {
-              "name": "value",
+              "name": "max",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "InputMixin",
-                "module": "src/common/mixins/InputMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
+              "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"
             },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
           "superclass": {
@@ -997,10 +1126,10 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "action",
+          "category": "list",
           "displayName": null,
           "examples": [],
-          "tagName": "nord-button",
+          "tagName": "nord-calendar",
           "customElement": true
         }
       ],
@@ -1009,169 +1138,275 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "src/button/Button.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-button",
+          "name": "nord-calendar",
           "declaration": {
-            "name": "Button",
-            "module": "src/button/Button.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\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"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/calendar/DateSelectEvent.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            }
-          ],
-          "members": [
+          "description": "",
+          "name": "DateSelectEvent",
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          },
+          "examples": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateSelectEvent",
+          "declaration": {
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.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 the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "calendarLocalization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "calendarLocalization",
+            "module": "src/calendar/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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/month-view.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dayView",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "dialogLabelId",
+              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
               "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"dialog-header\""
-            },
+                "text": "DatePickerDayProps"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "monthView",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "monthSelectNode",
+              "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": "HTMLElement"
-              },
-              "privacy": "private"
+                "text": "MonthViewArgs"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dayView",
+          "declaration": {
+            "name": "dayView",
+            "module": "src/calendar/month-view.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "monthView",
+          "declaration": {
+            "name": "monthView",
+            "module": "src/calendar/month-view.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 the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button/Button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
+          "name": "Button",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
+              "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-button-gap",
+              "default": "var(--n-space-s)"
             },
             {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "description": "Controls the overlayed gradient background on the button.",
+              "name": "--n-button-gradient",
+              "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
             },
             {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
+              "description": "Controls the background color of the button, using [color tokens](/tokens/#color).",
+              "name": "--n-button-background-color",
+              "default": "var(--n-color-button)"
+            },
+            {
+              "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
+              "name": "--n-button-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls the text alignment for the text in the button.",
+              "name": "--n-button-text-align",
+              "default": "center"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button content",
+              "name": ""
+            },
+            {
+              "description": "Used to place content at the start of button text. Typically used for icons.",
+              "name": "start"
             },
+            {
+              "description": "Used to place content at the end of button text. Typically used for icons.",
+              "name": "end"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "shortcuts",
+              "name": "buttonRef",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "events",
               "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
+              "default": "new EventController(this)"
             },
             {
               "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
+              "name": "lightDom",
               "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "default": "new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })"
             },
             {
               "kind": "field",
-              "name": "monthNames",
+              "name": "variant",
               "type": {
-                "text": "string[]"
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
-              "privacy": "private"
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "monthNamesShort",
+              "name": "type",
               "type": {
-                "text": "string[]"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "privacy": "private"
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dayNames",
+              "name": "size",
               "type": {
-                "text": "string[]"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "private"
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dayNamesShort",
+              "name": "accessibleExpanded",
               "type": {
-                "text": "string[]"
+                "text": "\"true\" | \"false\" | undefined"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "attribute": "aria-expanded"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "accessibleHasPopup",
               "type": {
-                "text": "string"
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
+              "privacy": "private",
+              "attribute": "aria-haspopup"
             },
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
+              "name": "href",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "string | undefined"
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "firstDayOfWeek"
+              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
+              "attribute": "href",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "download",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "attribute": "min"
+              "default": "false",
+              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
+              "attribute": "download"
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "target",
               "type": {
-                "text": "string"
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
               },
-              "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.",
-              "attribute": "max"
+              "default": "\"_self\"",
+              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
+              "attribute": "target",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1180,431 +1415,316 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "description": "Controls whether the button expands to fill the width of its container.",
               "attribute": "expand",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "isDateDisabled",
-              "type": {
-                "text": "DateDisabledPredicate"
-              },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
-            },
-            {
-              "kind": "field",
-              "name": "activeFocus",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "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": "handleValueChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "default": "false",
+              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "addMonths",
+              "name": "renderLink",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "months",
+                  "name": "innards",
                   "type": {
-                    "text": "number"
+                    "text": "TemplateResult"
                   }
                 }
-              ]
+              ],
+              "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
             },
             {
               "kind": "method",
-              "name": "addYears",
+              "name": "renderButton",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "years",
+                  "name": "innards",
                   "type": {
-                    "text": "number"
+                    "text": "TemplateResult"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "startOfWeek",
+              "name": "renderLightDom",
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "endOfWeek",
+              "kind": "field",
+              "name": "handleOuterClick",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setYear",
+              "name": "handleClick",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "year",
+                  "name": "e",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "setFocusedDay",
+              "name": "handleProxyChange",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "day",
+                  "name": "e",
                   "type": {
-                    "text": "Date"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
             },
             {
               "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handlePreviousMonthClick",
-              "privacy": "private"
+              "name": "form",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
             {
-              "name": "nord-focus-date",
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when the calendar's focused date changes."
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
-              "default": "\"\"",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
+              "default": "\"default\"",
+              "description": "The style variant of the button.",
+              "fieldName": "variant"
             },
             {
-              "name": "firstDayOfWeek",
+              "name": "type",
               "type": {
-                "text": "DaysOfWeek"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
+              "default": "\"submit\"",
+              "description": "The type of the button.",
+              "fieldName": "type"
             },
             {
-              "name": "min",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "default": "\"\"",
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "fieldName": "min"
+              "default": "\"m\"",
+              "description": "The size of the button.\nThis affects font-size and padding.",
+              "fieldName": "size"
             },
             {
-              "name": "max",
+              "name": "aria-expanded",
               "type": {
-                "text": "string"
+                "text": "\"true\" | \"false\" | undefined"
               },
-              "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"
+              "fieldName": "accessibleExpanded"
             },
             {
-              "name": "expand",
+              "name": "aria-haspopup",
               "type": {
-                "text": "boolean"
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\" | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "list",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-calendar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-calendar",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.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 the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/DateSelectEvent.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "DateSelectEvent",
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          },
-          "examples": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateSelectEvent",
-          "declaration": {
-            "name": "DateSelectEvent",
-            "module": "src/calendar/DateSelectEvent.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 the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "calendarLocalization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  prevMonthLabel: \"Previous month\",\n  nextMonthLabel: \"Next month\",\n  monthSelectLabel: \"Month\",\n  yearSelectLabel: \"Year\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "calendarLocalization",
-            "module": "src/calendar/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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/month-view.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "dayView",
-          "parameters": [
+              "fieldName": "accessibleHasPopup"
+            },
             {
-              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
+              "name": "href",
               "type": {
-                "text": "DatePickerDayProps"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "monthView",
-          "parameters": [
+                "text": "string | undefined"
+              },
+              "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
+              "fieldName": "href"
+            },
             {
-              "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}",
+              "name": "download",
               "type": {
-                "text": "MonthViewArgs"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "dayView",
-          "declaration": {
-            "name": "dayView",
-            "module": "src/calendar/month-view.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "monthView",
-          "declaration": {
-            "name": "monthView",
-            "module": "src/calendar/month-view.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 the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
+              "fieldName": "download"
+            },
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
+              "name": "target",
+              "type": {
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+              },
+              "default": "\"_self\"",
+              "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
+              "fieldName": "target"
             },
             {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the button expands to fill the width of its container.",
+              "fieldName": "expand"
+            },
             {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
+              "fieldName": "loading"
+            },
             {
-              "kind": "field",
-              "name": "variant",
+              "name": "disabled",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "boolean"
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
             {
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "string | undefined"
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -1612,10 +1732,10 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "feedback",
+          "category": "action",
           "displayName": null,
           "examples": [],
-          "tagName": "nord-banner",
+          "tagName": "nord-button",
           "customElement": true
         }
       ],
@@ -1624,20 +1744,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "name": "Button",
+            "module": "src/button/Button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-banner",
+          "name": "nord-button",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "name": "Button",
+            "module": "src/button/Button.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 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"
+      "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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\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",
@@ -1734,97 +1854,10 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "structure",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t 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/badge/Badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "default": "\"neutral\"",
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "progress",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "attribute": "progress"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "default": "\"neutral\"",
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "fieldName": "type"
-            },
-            {
-              "name": "progress",
-              "type": {
-                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
-              },
-              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
-              "fieldName": "progress"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
+          "category": "structure",
           "displayName": null,
           "examples": [],
-          "tagName": "nord-badge",
+          "tagName": "nord-card",
           "customElement": true
         }
       ],
@@ -1833,20 +1866,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-badge",
+          "name": "nord-card",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "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 established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t 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",
@@ -5487,7 +5520,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 for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](/components/layout/).\n"
     },
     {
       "kind": "javascript-module",
@@ -5523,37 +5556,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the dropdown is open or not.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "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",
@@ -5615,34 +5617,54 @@
               "kind": "method",
               "name": "handleClose",
               "privacy": "private"
-            }
-          ],
-          "attributes": [
+            },
             {
+              "kind": "field",
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the dropdown is open or not.",
-              "fieldName": "open"
+              "description": "Controls whether the component is open or not.",
+              "attribute": "open",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
             },
             {
+              "kind": "field",
               "name": "align",
               "type": {
-                "text": "Popout[\"align\"] | undefined"
+                "text": "\"start\" | \"end\""
               },
-              "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"
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "attribute": "align",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
             },
             {
+              "kind": "field",
               "name": "position",
               "type": {
-                "text": "Popout[\"position\"] | undefined"
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
-              "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"
-            },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\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,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
               "name": "expand",
               "type": {
@@ -5660,6 +5682,51 @@
               "default": "\"m\"",
               "description": "The size of the dropdown. This affects the minimum and maximum inline-size\nof the dropdown.",
               "fieldName": "size"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "fieldName": "align",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\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",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FloatingMixin",
+              "module": "/src/common/mixins/FloatingComponentMixin.js"
             }
           ],
           "superclass": {
@@ -7161,6 +7228,10 @@
             {
               "description": "Used to place additional content/details relating to a selected item.",
               "name": "drawer"
+            },
+            {
+              "description": "Used to place a own nav-toggle component, for cases where you might need to add a tooltip.",
+              "name": "nav-toggle"
             }
           ],
           "members": [
@@ -7200,7 +7271,7 @@
               "kind": "field",
               "name": "lightDismiss",
               "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !mediaQuery.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && !this.isNavToggle(node),\n  })"
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })"
             },
             {
               "kind": "field",
@@ -7232,6 +7303,11 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "wideScreen",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "navOpen",
@@ -7248,7 +7324,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "ID reference of element used to toggle the navigation.",
+              "description": "ID reference of element used to toggle the navigation.\nThis is deprecated, the layout component will now render its own nav toggle to simplify usage.",
+              "deprecated": "true",
               "attribute": "nav-toggle"
             },
             {
@@ -7262,6 +7339,11 @@
               "attribute": "padding",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "renderNavToggle",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleNavWidthChange",
@@ -7449,7 +7531,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "ID reference of element used to toggle the navigation.",
+              "description": "ID reference of element used to toggle the navigation.\nThis is deprecated, the layout component will now render its own nav toggle to simplify usage.",
+              "deprecated": "true",
               "fieldName": "navToggle"
             },
             {
@@ -7590,7 +7673,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n}"
+          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n}"
         }
       ],
       "exports": [
@@ -7614,7 +7697,7 @@
           "type": {
             "text": "Translation"
           },
-          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n}"
+          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n}"
         }
       ],
       "exports": [
@@ -8376,12 +8459,169 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "ready",
-          "category": "navigation",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-nav-item",
-          "customElement": true
+          "status": "ready",
+          "category": "navigation",
+          "displayName": null,
+          "examples": [],
+          "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\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/NavToggle.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Nav toggle is meant for hiding and showing the primary navigation.\nThis component is used internally in the Layout component, but can also be\nused separate to further customize the behaviour.",
+          "name": "NavToggle",
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "localization",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-nav-toggle\">(this)"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "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": "action",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-nav-toggle",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-toggle",
+          "declaration": {
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.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 a tooltip with the toggle that’s labelled as `Toggle navigation`.\n- We recommend setting a keyboard shortcut that toggles the navigation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic button or toggle. Use the [Button component](/components/button/) instead.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  label: \"Toggle navigation\",\n}"
         }
       ],
       "exports": [
@@ -8389,20 +8629,12 @@
           "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"
+            "name": "localization",
+            "module": "src/nav-toggle/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- 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\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip with the toggle that’s labelled as `Toggle navigation`.\n- We recommend setting a keyboard shortcut that toggles the navigation.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic button or toggle. Use the [Button component](/components/button/) instead.\n\n</div>\n"
     },
     {
       "kind": "javascript-module",
@@ -8482,6 +8714,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "anchorElement",
+              "type": {
+                "text": "Element"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "cleanupAutoUpdate",
@@ -8538,46 +8778,23 @@
             },
             {
               "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the popout is open or not.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "align",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "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": "position",
+              "name": "id",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "string"
               },
-              "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",
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-controls.",
+              "attribute": "id",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "anchor",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-controls.",
-              "attribute": "id",
+              "description": "Set an optional anchor element to align against, replacing the triggering element.",
+              "attribute": "anchor",
               "reflects": true
             },
             {
@@ -8632,11 +8849,61 @@
               "name": "getToggle",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getAnchor",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleMediaQueryChange",
               "privacy": "private",
               "description": "Update the smallViewport flag to switch between \"sheet\" and \"floating\".\nautoUpdate is needed when a viewport gets larger and the popout is open."
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "attribute": "open",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "attribute": "align",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\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,
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
             }
           ],
           "events": [
@@ -8656,14 +8923,35 @@
             }
           ],
           "attributes": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-controls.",
+              "fieldName": "id"
+            },
+            {
+              "name": "anchor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Set an optional anchor element to align against, replacing the triggering element.",
+              "fieldName": "anchor"
+            },
             {
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the popout is open or not.",
-              "fieldName": "open"
+              "description": "Controls whether the component is open or not.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
             },
             {
               "name": "align",
@@ -8671,8 +8959,12 @@
                 "text": "\"start\" | \"end\""
               },
               "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"
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "fieldName": "align",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
             },
             {
               "name": "position",
@@ -8680,17 +8972,18 @@
                 "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
               },
               "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"
-            },
+              "description": "Set the position in relation to the toggle (or anchor).\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",
+              "inheritedFrom": {
+                "name": "FloatingMixin",
+                "module": "src/common/mixins/FloatingComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
             {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The id for the active element to reference via aria-controls.",
-              "fieldName": "id"
+              "name": "FloatingMixin",
+              "module": "/src/common/mixins/FloatingComponentMixin.js"
             }
           ],
           "superclass": {
@@ -14781,6 +15074,136 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FloatingComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FloatingMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "Alignment"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "LogicalSide"
+              }
+            }
+          ],
+          "examples": []
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "FloatingMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "attribute": "align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\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
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "fieldName": "open"
+            },
+            {
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "fieldName": "align"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-end\"",
+              "description": "Set the position in relation to the toggle (or anchor).\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"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FloatingMixinInterface",
+          "declaration": {
+            "name": "FloatingMixinInterface",
+            "module": "src/common/mixins/FloatingComponentMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FloatingMixin",
+          "declaration": {
+            "name": "FloatingMixin",
+            "module": "src/common/mixins/FloatingComponentMixin.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/mixins/FocusableMixin.ts",