@nordhealth/components 3.4.0-alpha.1 → 3.4.0

package/custom-elements.json

@@ -6330,6 +6330,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown-group/DropdownGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",
+          "name": "DropdownGroup",
+          "slots": [
+            {
+              "description": "The dropdown group content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the dropdown group.",
+              "attribute": "heading"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the dropdown group.",
+              "fieldName": "heading"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-dropdown-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-dropdown-group",
+          "declaration": {
+            "name": "DropdownGroup",
+            "module": "src/dropdown-group/DropdownGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/dropdown-item/DropdownItem.ts",
@@ -6478,74 +6546,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/dropdown-group/DropdownGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",
-          "name": "DropdownGroup",
-          "slots": [
-            {
-              "description": "The dropdown group content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the dropdown group.",
-              "attribute": "heading"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the dropdown group.",
-              "fieldName": "heading"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-dropdown-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "DropdownGroup",
-            "module": "src/dropdown-group/DropdownGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-dropdown-group",
-          "declaration": {
-            "name": "DropdownGroup",
-            "module": "src/dropdown-group/DropdownGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/empty-state/EmptyState.ts",
@@ -8174,6 +8174,12 @@
               "privacy": "private",
               "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",
+              "name": "broadcast",
+              "privacy": "private",
+              "default": "new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })"
+            },
             {
               "kind": "field",
               "name": "navEl",
@@ -8229,6 +8235,17 @@
               "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
               "attribute": "persist-nav-state"
             },
+            {
+              "kind": "field",
+              "name": "syncNavState",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
+              "attribute": "sync-nav-state",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "padding",
@@ -8273,7 +8290,15 @@
             {
               "kind": "method",
               "name": "handleNavWidthChange",
-              "privacy": "protected"
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -8291,7 +8316,15 @@
             {
               "kind": "method",
               "name": "handleOpenChange",
-              "privacy": "protected"
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -8461,6 +8494,15 @@
               "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
               "fieldName": "persistNavState"
             },
+            {
+              "name": "sync-nav-state",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\nThis is useful for long-lived app sessions where you may have multiple tabs/windows open at once.",
+              "fieldName": "syncNavState"
+            },
             {
               "name": "padding",
               "type": {
@@ -8518,249 +8560,44 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/message/Message.ts",
+      "path": "src/localization/LocalizeController.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
-          "name": "Message",
-          "cssProperties": [
-            {
-              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
-              "name": "--n-message-border-color",
-              "default": "var(--n-color-border)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The message content.",
-              "name": ""
-            },
-            {
-              "description": "Used to place content after the message. Typically used for a timestamp.",
-              "name": "footer"
-            }
-          ],
+          "description": "",
+          "name": "LocalizeController",
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-message\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "href",
+              "name": "unsubscribe",
               "type": {
-                "text": "string | undefined"
+                "text": "ReturnType<typeof subscribe> | undefined"
               },
-              "description": "The url the message should link to.",
-              "attribute": "href",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "highlight",
+              "name": "resolvedTranslation",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Translation"
               },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "attribute": "highlight",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "attribute": "unread",
-              "reflects": true
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation",
+              "readonly": true
             },
             {
               "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The url the message should link to.",
-              "fieldName": "href"
-            },
-            {
-              "name": "highlight",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
-              "fieldName": "highlight"
-            },
-            {
-              "name": "unread",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Mark the message as unread. By default messages are read.",
-              "fieldName": "unread"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "unreadLabel",
-              "description": "Label for the unread messages."
-            }
-          ],
-          "status": "draft",
-          "category": "action",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the message content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
-          "examples": [],
-          "dependencies": [
-            "dropdown-item"
-          ],
-          "tagName": "nord-message",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-message",
-          "declaration": {
-            "name": "Message",
-            "module": "src/message/Message.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/message/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  unreadLabel: \"Unread\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/message/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/LocalizeController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LocalizeController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "unsubscribe",
-              "type": {
-                "text": "ReturnType<typeof subscribe> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "resolvedTranslation",
-              "type": {
-                "text": "Translation"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
+              "name": "hostConnected"
             },
             {
               "kind": "method",
@@ -8916,62 +8753,267 @@
           "name": "resolveTranslation",
           "parameters": [
             {
-              "name": "langCode",
-              "type": {
-                "text": "string"
-              }
+              "name": "langCode",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "clearTranslations",
+          "declaration": {
+            "name": "clearTranslations",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTranslation",
+          "declaration": {
+            "name": "registerTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "subscribe",
+          "declaration": {
+            "name": "subscribe",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isTranslationRegistered",
+          "declaration": {
+            "name": "isTranslationRegistered",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveTranslation",
+          "declaration": {
+            "name": "resolveTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fallback",
+          "declaration": {
+            "name": "en",
+            "module": "src/localization/translation.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/message/Message.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",
+          "name": "Message",
+          "cssProperties": [
+            {
+              "description": "Controls the border color of the message, using our [color tokens](/tokens/#color).",
+              "name": "--n-message-border-color",
+              "default": "var(--n-color-border)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The message content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place content after the message. Typically used for a timestamp.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-message\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "attribute": "highlight",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "unread",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Mark the message as unread. By default messages are read.",
+              "attribute": "unread",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The url the message should link to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "highlight",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Highlight the message visually. This is meant for highlighting\na new message that just appeared. Highlight style should be removed\nafter the user has seen the message and there’s been a timeout of\ne.g. 30 seconds.",
+              "fieldName": "highlight"
+            },
+            {
+              "name": "unread",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Mark the message as unread. By default messages are read.",
+              "fieldName": "unread"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
-          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "unreadLabel",
+              "description": "Label for the unread messages."
+            }
+          ],
+          "status": "draft",
+          "category": "action",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Messages should always perform an action when clicked.\n- The click action should navigate to a new page or provide more detail about the message.\n- Mark unread messages as read on user interaction.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t slot other components inside a message.\n\n</div>\n\n---\n\n## Content guidelines\n\nMessage content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the message content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAvoid all caps for messages:\n\n<div class=\"n-usage n-usage-do\">Nina Williams arrived to clinic with Norfryd</div>\n<div class=\"n-usage n-usage-dont\">NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD</div>\n",
+          "examples": [],
+          "dependencies": [
+            "dropdown-item"
+          ],
+          "tagName": "nord-message",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "clearTranslations",
-          "declaration": {
-            "name": "clearTranslations",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerTranslation",
-          "declaration": {
-            "name": "registerTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "subscribe",
+          "name": "default",
           "declaration": {
-            "name": "subscribe",
-            "module": "src/localization/translation.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "isTranslationRegistered",
+          "kind": "custom-element-definition",
+          "name": "nord-message",
           "declaration": {
-            "name": "isTranslationRegistered",
-            "module": "src/localization/translation.ts"
+            "name": "Message",
+            "module": "src/message/Message.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/message/localization.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "resolveTranslation",
-          "declaration": {
-            "name": "resolveTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  unreadLabel: \"Unread\",\n}"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "fallback",
+          "name": "default",
           "declaration": {
-            "name": "en",
-            "module": "src/localization/translation.ts"
+            "name": "localization",
+            "module": "src/message/localization.ts"
           }
         }
       ]
@@ -10124,218 +10166,46 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "localization",
-            "module": "src/notification/localization.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/notification-group/NotificationGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Notification group is used to position and style a group of notifications.",
-          "name": "NotificationGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place notifications.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "draft",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-notification-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-notification-group",
-          "declaration": {
-            "name": "NotificationGroup",
-            "module": "src/notification-group/NotificationGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/progress-bar/ProgressBar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
-          "name": "ProgressBar",
-          "cssProperties": [
-            {
-              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-progress-size",
-              "default": "var(--n-space-s)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-progress-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
-              "name": "--n-progress-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
+            "name": "localization",
+            "module": "src/notification/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/notification-group/NotificationGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Notification group is used to position and style a group of notifications.",
+          "name": "NotificationGroup",
+          "slots": [
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "description": "Default slot in which to place notifications.",
+              "name": ""
             }
           ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "fieldName": "value"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
-            },
+          "members": [
             {
-              "name": "label",
+              "kind": "field",
+              "name": "_warningLogged",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
+              "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": {
@@ -10343,12 +10213,12 @@
             "package": "lit"
           },
           "localization": [],
-          "status": "ready",
+          "status": "draft",
           "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use in combination with [Notification](/components/notification/) so that notifications get styled and positioned correctly.\n- Add as close to the start of your main content area as possible.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than notification components\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-progress-bar",
+          "tagName": "nord-notification-group",
           "customElement": true
         }
       ],
@@ -10357,16 +10227,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
+          "name": "nord-notification-group",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         }
       ]
@@ -10636,49 +10506,221 @@
               "fieldName": "anchor"
             },
             {
-              "name": "open",
+              "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": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "overlay",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-popout",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-popout",
+          "declaration": {
+            "name": "Popout",
+            "module": "src/popout/Popout.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/progress-bar/ProgressBar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
+          "cssProperties": [
+            {
+              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-progress-size",
+              "default": "var(--n-space-s)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-progress-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
+              "name": "--n-progress-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "fieldName": "open",
-              "inheritedFrom": {
-                "name": "FloatingMixin",
-                "module": "src/common/mixins/FloatingComponentMixin.ts"
-              }
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "fieldName": "value"
             },
             {
-              "name": "align",
+              "name": "max",
               "type": {
-                "text": "\"start\" | \"end\""
+                "text": "number"
               },
-              "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"
-              }
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
             },
             {
-              "name": "position",
+              "name": "label",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "string"
               },
-              "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"
-              }
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
             }
           ],
           "mixins": [
             {
-              "name": "FloatingMixin",
-              "module": "/src/common/mixins/FloatingComponentMixin.js"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -10687,11 +10729,11 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "overlay",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always position popout next to the button or other interface element that toggles it.\n- Use a popout to contain controls or information that doesn’t need to be shown immediately.\n- Use a popout to contain items that will most likely not fit into the current view.\n- Use a clearly labelled button to reveal the popout.\n- Use the appropriate `aria-haspopup` and `role` attributes for both the toggle button and containing items. Please refer to the [MDN documentation on both role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles).\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide information inside a popout that is imperative to using the current view.\n- Don’t obscure other controls that are important with the popout.\n- Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.\n</div>\n\n---\n\n## Content guidelines\n\nIf a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nPopout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending popout actions in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoid all caps for popout actions:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\n---\n\n## Additional considerations\n\n- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.\n",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-popout",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -10700,16 +10742,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-popout",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         }
       ]
@@ -13637,54 +13679,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab-panel/TabPanel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
-          "name": "TabPanel",
-          "slots": [
-            {
-              "description": "The tab panel content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tab-panel",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab-panel",
-          "declaration": {
-            "name": "TabPanel",
-            "module": "src/tab-panel/TabPanel.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",
@@ -13931,6 +13925,54 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab-panel/TabPanel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
+          "name": "TabPanel",
+          "slots": [
+            {
+              "description": "The tab panel content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab-panel",
+          "declaration": {
+            "name": "TabPanel",
+            "module": "src/tab-panel/TabPanel.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/table/Table.ts",
@@ -16209,34 +16251,12 @@
               "name": "end"
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
           "localization": [],
-          "status": "draft",
           "category": "structure",
           "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. [View an example](/components/top-bar/?example=color).\n- If your application allows it, include search to help users find resources and navigate.\n- Include a user menu in the end slot of the top bar.\n- Use the [layout component](/components/layout/?example=top-bar) to provide structure for the top bar component. We’ve also created [an example which shows full theming capabilities](/components/layout/?example=theming).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for global navigation. Use the [navigation component](/components/navigation/) instead.\n- Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.\n- Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. [View an example](/components/top-bar/?example=color).\n\n</div>\n\n---\n\n## Theming\n\nPlease see the [Top Bar theming](/themes/#top-bar-theming) section in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#top-bar-theming\">Theming Guidelines</nord-button>\n",
           "examples": [],
@@ -16312,6 +16332,88 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/BroadcastChannelController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BroadcastChannelController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "channel",
+              "type": {
+                "text": "BroadcastChannel | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "Required<Options<T>>"
+              },
+              "privacy": "private",
+              "default": "{ enabled: defaultEnabled, ...options }"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleEvent",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MessageEvent<T>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "post",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BroadcastChannelController",
+          "declaration": {
+            "name": "BroadcastChannelController",
+            "module": "src/common/controllers/BroadcastChannelController.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/DirectionController.ts",