@nordhealth/components 2.14.0 → 2.14.1

package/custom-elements.json

@@ -568,6 +568,93 @@
         }
       ]
     },
+    {
+      "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"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "text",
+          "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",
+          "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"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/banner/Banner.ts",
@@ -1190,93 +1277,6 @@
         }
       ]
     },
-    {
-      "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"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "text",
-          "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",
-          "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"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/button-group/ButtonGroup.ts",
@@ -4128,6 +4128,36 @@
             "name": "Event",
             "module": "src/common/events.ts"
           }
+        },
+        {
+          "kind": "function",
+          "name": "oneEvent",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "K"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "transition",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -4138,6 +4168,22 @@
             "name": "NordEvent",
             "module": "src/common/events.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "oneEvent",
+          "declaration": {
+            "name": "oneEvent",
+            "module": "src/common/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "transition",
+          "declaration": {
+            "name": "transition",
+            "module": "src/common/events.ts"
+          }
         }
       ]
     },
@@ -5796,73 +5842,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": [],
-          "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/Dropdown.ts",
@@ -5945,6 +5924,11 @@
             {
               "kind": "method",
               "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<TransitionEvent | void>"
+                }
+              },
               "parameters": [
                 {
                   "name": "moveFocusToButton",
@@ -5955,12 +5939,17 @@
                   "description": "A boolean option to move the focus to the original button that opens the dropdown."
                 }
               ],
-              "description": "Hide the dropdown programmatically."
+              "description": "Hide the dropdown programmatically.\nThis method delegates to the Dropdown's internal Popout component.\nSee [Popout's hide() method](/components/popout#methods-hide) for more details."
             },
             {
               "kind": "method",
               "name": "show",
-              "description": "Show the dropdown programmatically."
+              "return": {
+                "type": {
+                  "text": "Promise<TransitionEvent | void>"
+                }
+              },
+              "description": "Show the dropdown programmatically.\nThis method delegates to the Dropdown's internal Popout component.\nSee [Popout's show() method](/components/popout#methods-hide) for more details."
             },
             {
               "kind": "field",
@@ -6105,6 +6094,73 @@
         }
       ]
     },
+    {
+      "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": [],
+          "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",
@@ -7830,6 +7886,14 @@
               "attribute": "sticky",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "isNarrow",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\nA narrow viewport is considered to be less than 768px wide."
+            },
             {
               "kind": "method",
               "name": "renderNavToggle",
@@ -8826,7 +8890,118 @@
           "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- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
           "examples": [],
-          "tagName": "nord-nav-group",
+          "tagName": "nord-nav-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [
+            {
+              "name": "label",
+              "description": "Accessible label for the nav toggle button."
+            }
+          ],
+          "status": "new",
+          "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- 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",
+          "examples": [],
+          "tagName": "nord-nav-toggle",
           "customElement": true
         }
       ],
@@ -8835,16 +9010,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-nav-group",
+          "name": "nord-nav-toggle",
           "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
+            "name": "NavToggle",
+            "module": "src/nav-toggle/NavToggle.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-toggle/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  label: \"Toggle navigation\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/nav-toggle/localization.ts"
           }
         }
       ]
@@ -9110,141 +9309,6 @@
         }
       ]
     },
-    {
-      "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"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [
-            {
-              "name": "label",
-              "description": "Accessible label for the nav toggle button."
-            }
-          ],
-          "status": "new",
-          "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- 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",
-          "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"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/nav-toggle/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "localization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  label: \"Toggle navigation\",\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "localization",
-            "module": "src/nav-toggle/localization.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/navigation/Navigation.ts",
@@ -9409,22 +9473,32 @@
             {
               "kind": "method",
               "name": "show",
-              "description": "Show the popout, moving focus to the calendar inside."
+              "return": {
+                "type": {
+                  "text": "Promise<TransitionEvent | void>"
+                }
+              },
+              "description": "Show the popout.\nA promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\nIf the popout is already open, the promise resolves immediately with `undefined`."
             },
             {
               "kind": "method",
               "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<TransitionEvent | void>"
+                }
+              },
               "parameters": [
                 {
                   "name": "moveFocusToButton",
                   "default": "true",
-                  "description": "prevent focus returning to the target\nbutton. Default is true.",
                   "type": {
                     "text": "boolean"
-                  }
+                  },
+                  "description": "prevent focus returning to the target button. Default is true."
                 }
               ],
-              "description": "Hide the popout."
+              "description": "Hide the popout.\nReturns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\nIf the popout is already closed, the promise resolves immediately with `undefined`."
             },
             {
               "kind": "method",
@@ -15081,41 +15155,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
-            {
-              "name": "propertyName",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "lifecycle",
-              "default": "\"update\"",
-              "type": {
-                "text": "ObserveLifecycle"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "observe",
-          "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/common/controllers/DirectionController.ts",
@@ -16173,6 +16212,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/decorators/observe.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
+            {
+              "name": "propertyName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "observe",
+          "declaration": {
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/directives/cond.ts",