@nordhealth/components 3.20.0 → 3.22.0-alpha.0

package/custom-elements.json

@@ -673,6 +673,123 @@
         }
       ]
     },
+    {
+      "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": ""
+            },
+            {
+              "description": "Used to place an icon at the start of badge.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "default": "\"neutral\"",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "default": "\"neutral\"",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "attribute": "strong",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
+              "default": "\"neutral\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
+              },
+              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
+              "default": "\"neutral\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "strong",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
+              "fieldName": "strong"
+            }
+          ],
+          "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 easy 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- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\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": [],
+          "dependencies": [],
+          "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/Button.ts",
@@ -1369,278 +1486,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": ""
-            },
-            {
-              "description": "Used to place an icon at the start of badge.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "default": "\"neutral\"",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "default": "\"neutral\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "attribute": "strong",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
-              },
-              "description": "The type of badge.\nDetermines the background color of the badge.",
-              "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
-              "default": "\"neutral\"",
-              "fieldName": "type"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
-              },
-              "description": "The style variant of the badge.\nDetermines the background color of the badge.",
-              "default": "\"neutral\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "strong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
-              "fieldName": "strong"
-            }
-          ],
-          "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 easy 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- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\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": [],
-          "dependencies": [],
-          "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dirController",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "attribute": "wrap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"spaced\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the button group.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
-              "fieldName": "wrap"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "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- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -2145,92 +1990,124 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
           "cssProperties": [
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            },
-            {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
+              "description": "Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
             }
           ],
           "slots": [
             {
-              "description": "The card content.",
+              "description": "The button group content",
               "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
+              "name": "defaultSlot",
               "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "default": "new SlotController(this)"
             },
             {
               "kind": "field",
-              "name": "headerEndSlot",
+              "name": "dirController",
               "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "direction",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"vertical\" | \"horizontal\""
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "padding",
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"spaced\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the button group.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "role",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "string"
               },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
             }
           ],
           "superclass": {
@@ -2240,10 +2117,10 @@
           "localization": [],
           "status": "ready",
           "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- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
+          "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 group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name      | Purpose                                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------------------- |\n| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |\n",
           "examples": [],
           "dependencies": [],
-          "tagName": "nord-card",
+          "tagName": "nord-button-group",
           "customElement": true
         }
       ],
@@ -2252,16 +2129,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-button-group",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
           }
         }
       ]
@@ -3004,6 +2881,129 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "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- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -6466,10 +6466,10 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
               },
               "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.",
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
               "attribute": "position",
               "reflects": true,
               "inheritedFrom": {
@@ -6542,10 +6542,10 @@
             {
               "name": "position",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
               },
               "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.",
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
               "fieldName": "position",
               "inheritedFrom": {
                 "name": "FloatingMixin",
@@ -9672,7 +9672,7 @@
               "default": "var(--n-space-m)"
             },
             {
-              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
+              "description": "Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).",
               "name": "--n-modal-padding-block",
               "default": "var(--n-space-m)"
             },
@@ -9691,6 +9691,10 @@
               "description": "Slot which holds the header of the modal, positioned next to the close button.",
               "name": "header"
             },
+            {
+              "description": "Slot for full bleed content like an image.",
+              "name": "feature"
+            },
             {
               "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
               "name": "footer"
@@ -9713,6 +9717,12 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
             {
               "kind": "field",
               "name": "headerSlot",
@@ -10863,63 +10873,6 @@
         }
       ]
     },
-    {
-      "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": [],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "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/popout/Popout.ts",
@@ -11138,10 +11091,10 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
               },
               "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.",
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
               "attribute": "position",
               "reflects": true,
               "inheritedFrom": {
@@ -11211,23 +11164,80 @@
               }
             },
             {
-              "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"
-              }
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
+              },
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
+              "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/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": ""
             }
           ],
-          "mixins": [
+          "members": [],
+          "events": [
             {
-              "name": "FloatingMixin",
-              "module": "/src/common/mixins/FloatingComponentMixin.js"
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
+              "name": "dismiss"
             }
           ],
           "superclass": {
@@ -11236,11 +11246,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 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-popout",
+          "tagName": "nord-notification-group",
           "customElement": true
         }
       ],
@@ -11249,16 +11259,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-popout",
+          "name": "nord-notification-group",
           "declaration": {
-            "name": "Popout",
-            "module": "src/popout/Popout.ts"
+            "name": "NotificationGroup",
+            "module": "src/notification-group/NotificationGroup.ts"
           }
         }
       ]
@@ -11448,7 +11458,7 @@
               "kind": "field",
               "name": "canvas",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLCanvasElement"
               },
               "privacy": "private"
             },
@@ -13730,6 +13740,86 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/skeleton/Skeleton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
+          "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-skeleton-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-color",
+              "default": "var(--n-color-border)"
+            },
+            {
+              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-sheen-color",
+              "default": "var(--n-color-border-strong)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "\"pulse\" | \"sheen\" | undefined"
+              },
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "attribute": "effect",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "\"pulse\" | \"sheen\" | undefined"
+              },
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "fieldName": "effect"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-skeleton",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/skeleton/Skeleton.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/select/Select.ts",
@@ -14454,133 +14544,26 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "SizeMixin",
-              "module": "/src/common/mixins/SizeMixin.js"
-            },
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "AutocompleteMixin",
-              "module": "/src/common/mixins/AutocompleteMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "form",
-          "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 let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using [segmented control](/components/segmented-control/) or [radio components](/components/radio/) instead, if you have enough space to allow it.\n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing select labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
-          "examples": [],
-          "dependencies": [
-            "button",
-            "icon"
-          ],
-          "tagName": "nord-select",
-          "customElement": true,
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-select",
-          "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/skeleton/Skeleton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-skeleton-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-color",
-              "default": "var(--n-color-border)"
-            },
-            {
-              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
-              "name": "--n-skeleton-sheen-color",
-              "default": "var(--n-color-border-strong)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "attribute": "effect",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+          "mixins": [
             {
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | undefined"
-              },
-              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
-              "fieldName": "effect"
+              "name": "SizeMixin",
+              "module": "/src/common/mixins/SizeMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "AutocompleteMixin",
+              "module": "/src/common/mixins/AutocompleteMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -14589,12 +14572,39 @@
           },
           "localization": [],
           "status": "ready",
-          "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 skeleton component for dynamic content only.\n- Use to give the user an indication of what the page layout will be like once loaded.\n- Mimick the actual layout using multiple Skeleton components.\n- Use `aria-busy=\"true\"` to indicate which area on the screen is currently loading and remove it or set it to `false` once loaded.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use Skeleton component for static content.\n- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.\n\n</div>\n",
+          "category": "form",
+          "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 let a user choose one option from an options menu.\n- Use when you have more than 6 options to choose from.\n- Use when you don’t know how many options there will be.\n- Use hint text and placeholder to provide additional, non-critical instructions.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a select if you have less than 6 options to choose from. Consider using [segmented control](/components/segmented-control/) or [radio components](/components/radio/) instead, if you have enough space to allow it.\n\n</div>\n\n---\n\n## Content guidelines\n\nSelect labels act as a title for the select field. Labels should typically be short and in noun&nbsp;form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing select labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nDo not use colons in select labels:\n\n<div class=\"n-usage n-usage-do\">Choose organization</div>\n<div class=\"n-usage n-usage-dont\">Choose organization:</div>\n",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-skeleton",
-          "customElement": true
+          "dependencies": [
+            "button",
+            "icon"
+          ],
+          "tagName": "nord-select",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -14602,16 +14612,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-skeleton",
+          "name": "nord-select",
           "declaration": {
-            "name": "Skeleton",
-            "module": "src/skeleton/Skeleton.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         }
       ]
@@ -17240,93 +17250,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/toast-group/ToastGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
-          "name": "ToastGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place toasts.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "addToast",
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text/message of the toast."
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ToastOptions"
-                  },
-                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
-                }
-              ],
-              "description": "Convenience method for creating and adding a toast to the group.",
-              "return": {
-                "type": {
-                  "text": "Toast"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "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 [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\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 toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast 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\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "toast"
-          ],
-          "tagName": "nord-toast-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast-group",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/toggle/Toggle.ts",
@@ -18051,6 +17974,93 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/toast-group/ToastGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
+          "name": "ToastGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place toasts.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "addToast",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text/message of the toast."
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ToastOptions"
+                  },
+                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
+                }
+              ],
+              "description": "Convenience method for creating and adding a toast to the group.",
+              "return": {
+                "type": {
+                  "text": "Toast"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "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 [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\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 toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast 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\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "toast"
+          ],
+          "tagName": "nord-toast-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast-group",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tooltip/Tooltip.ts",
@@ -18117,6 +18127,9 @@
             {
               "kind": "field",
               "name": "proxy",
+              "type": {
+                "text": "HTMLSpanElement | undefined"
+              },
               "privacy": "private",
               "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
             },
@@ -19079,7 +19092,7 @@
               "kind": "field",
               "name": "renderHook",
               "type": {
-                "text": "Comment"
+                "text": "Comment | undefined"
               },
               "privacy": "private"
             },
@@ -19087,7 +19100,7 @@
               "kind": "field",
               "name": "lightDom",
               "type": {
-                "text": "LightDomController"
+                "text": "LightDomController | undefined"
               },
               "privacy": "private",
               "default": "new LightDomController(host, { render: () => (this.hasContent ? nothing : this.options.render()), renderOptions: { renderBefore: this.renderHook }, })"
@@ -19275,10 +19288,9 @@
               "kind": "field",
               "name": "observer",
               "type": {
-                "text": "ResizeObserver"
+                "text": "ResizeObserver | undefined"
               },
-              "privacy": "private",
-              "default": "new ResizeObserver(([entry]) => { const [borderBoxSize] = entry.borderBoxSize this.borderBoxSize = borderBoxSize host.requestUpdate() })"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -20287,7 +20299,7 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "LogicalSide"
+                "text": "LogicalSide | \"auto\""
               }
             }
           ]
@@ -20323,10 +20335,10 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
               },
               "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.",
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
               "attribute": "position",
               "reflects": true
             }
@@ -20353,10 +20365,10 @@
             {
               "name": "position",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
               },
               "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.",
+              "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.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
               "fieldName": "position"
             }
           ],