@nordhealth/components 2.4.0 → 2.6.0

package/custom-elements.json

@@ -366,6 +366,14 @@
             "name": "default",
             "module": "\"./qrcode/Qrcode.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Drawer",
+          "declaration": {
+            "name": "default",
+            "module": "\"./drawer/Drawer.js\""
+          }
         }
       ]
     },
@@ -511,88 +519,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "feedback",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -1150,6 +1076,11 @@
               "name": "--n-button-gradient",
               "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
             },
+            {
+              "description": "Controls the background color of the button, using [color tokens](/tokens/#color).",
+              "name": "--n-button-background-color",
+              "default": "var(--n-color-button)"
+            },
             {
               "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
               "name": "--n-button-border-color",
@@ -1626,6 +1557,88 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Only use one primary button per section, as a main call-to-action.\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use a primary button in every row of a table.\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "feedback",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.ts",
@@ -5365,6 +5378,117 @@
       ],
       "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 represent thematic breaks between elements.\n- Use when you need to divide sections of content from each other.\n- Use to separate content into clear groups.\n- Use dividers sparingly, to create groupings or to separate items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using for presentational purposes only.\n- Don’t use strong colors in dividers.\n- Don’t use dividers for replacing card components.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Divider uses a role called `separator` which indicates that the element is a divider that separates and distinguishes sections of content or groups of menu items. The implicit ARIA role of the native thematic break (`<hr>` element) is a separator.\n- Dividers have an implicit aria-orientation value of `horizontal` which can be changed using the `direction` property.\n- For more details, please see [ARIA: separator role on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role).\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/drawer/Drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",
+          "name": "Drawer",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-drawer-padding",
+              "default": "var(--n-space-l)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Optional slot that holds a header for the drawer.",
+              "name": "header"
+            },
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds footer content for the drawer.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the drawer component.",
+              "attribute": "padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the drawer component.",
+              "fieldName": "padding"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-drawer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Drawer",
+            "module": "src/drawer/Drawer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-drawer",
+          "declaration": {
+            "name": "Drawer",
+            "module": "src/drawer/Drawer.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for displaying contextual actions or information. For example, when clicking on a table row.\n- Use when you don’t want to block users from completing their task in the main view of an application.\n- Always include a header that summarizes the actions and information in the drawer.\n- Should be closeable through actions like “Done” and “Close”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.\n- Don’t open from within another drawer. Only one drawer can be open at a time.\n- Don’t use for presenting a small amount of content or an actions menu, use the [popout](/components/popout/) or [dropdown](/components/dropdown/) component instead.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/dropdown/Dropdown.ts",
@@ -5399,6 +5523,17 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the dropdown is open or not.",
+              "attribute": "open",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "align",
@@ -5475,9 +5610,23 @@
               "kind": "method",
               "name": "handleOpen",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClose",
+              "privacy": "private"
             }
           ],
           "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the dropdown is open or not.",
+              "fieldName": "open"
+            },
             {
               "name": "align",
               "type": {
@@ -6989,6 +7138,11 @@
               "description": "Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).",
               "name": "--n-layout-padding",
               "default": "var(--n-space-l)"
+            },
+            {
+              "description": "Controls the width of the drawer area, when used.",
+              "name": "--n-layout-drawer-inline-size",
+              "default": "320px"
             }
           ],
           "slots": [
@@ -7003,6 +7157,10 @@
             {
               "description": "Used to place content inside the header section.",
               "name": "header"
+            },
+            {
+              "description": "Used to place additional content/details relating to a selected item.",
+              "name": "drawer"
             }
           ],
           "members": [
@@ -7014,6 +7172,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "navSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"nav\")"
+            },
+            {
+              "kind": "field",
+              "name": "drawerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"drawer\")"
+            },
             {
               "kind": "field",
               "name": "direction",
@@ -8320,11 +8490,25 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "popout",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "scrollBar",
+              "privacy": "private",
+              "default": "new ScrollbarController(this)"
+            },
             {
               "kind": "field",
               "name": "dismiss",
               "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })",
               "description": "Handle dismissal of the popout, clicking outside the target button and popout."
             },
             {
@@ -8339,15 +8523,6 @@
               "privacy": "private",
               "default": "new DirectionController(this)"
             },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "computedPosition",
@@ -8361,6 +8536,17 @@
               "name": "smallViewport",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the popout is open or not.",
+              "attribute": "open",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "align",
@@ -8424,6 +8610,11 @@
               "name": "handleOpenChange",
               "privacy": "protected"
             },
+            {
+              "kind": "field",
+              "name": "enableScroll",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "updatePosition",
@@ -8465,6 +8656,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the popout is open or not.",
+              "fieldName": "open"
+            },
             {
               "name": "align",
               "type": {
@@ -9504,86 +9704,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio 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 ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patient</div>\n<div class=\"n-usage n-usage-dont\">Patient;</div>\n\n---\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.\n"
     },
-    {
-      "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\" | \"none\""
-              },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
-              "attribute": "effect"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "effect",
-              "type": {
-                "text": "\"pulse\" | \"sheen\" | \"none\""
-              },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
-              "fieldName": "effect"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "new",
-          "category": "feedback",
-          "displayName": null,
-          "examples": [],
-          "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"
-          }
-        }
-      ],
-      "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"
-    },
     {
       "kind": "javascript-module",
       "path": "src/select/Select.ts",
@@ -10276,6 +10396,86 @@
       ],
       "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 radio components 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"
     },
+    {
+      "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\" | \"none\""
+              },
+              "default": "\"none\"",
+              "description": "Determines which animation effect the skeleton will use.",
+              "attribute": "effect"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "\"pulse\" | \"sheen\" | \"none\""
+              },
+              "default": "\"none\"",
+              "description": "Determines which animation effect the skeleton will use.",
+              "fieldName": "effect"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "new",
+          "category": "feedback",
+          "displayName": null,
+          "examples": [],
+          "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"
+          }
+        }
+      ],
+      "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"
+    },
     {
       "kind": "javascript-module",
       "path": "src/spinner/Spinner.ts",