@nordhealth/components 2.16.0 → 2.16.1-alpha.0

package/custom-elements.json

@@ -674,6 +674,128 @@
         }
       ]
     },
+    {
+      "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, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button group content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
+              "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": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "draft",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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 group labels should be accurate and predictable.\n",
+          "examples": [],
+          "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/banner/Banner.ts",
@@ -824,6 +946,11 @@
               "description": "Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).",
               "name": "--n-button-min-block-size",
               "default": "var(--n-space-xl)"
+            },
+            {
+              "description": "Controls the color of the dropdown icon, using our [color tokens](/tokens/#color).",
+              "name": "--n-button-dropdown-icon-color",
+              "default": "var(--n-color-icon)"
             }
           ],
           "slots": [
@@ -1296,128 +1423,6 @@
         }
       ]
     },
-    {
-      "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, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "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": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "draft",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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 group labels should be accurate and predictable.\n",
-          "examples": [],
-          "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",
@@ -8867,18 +8872,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/nav-item/NavItem.ts",
+      "path": "src/nav-group/NavGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
-          "name": "NavItem",
+          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
+          "name": "NavGroup",
           "slots": [
             {
-              "description": "The default slot used for the nav item's text.",
+              "description": "The default slot used for the nav items.",
               "name": ""
-            },
-            {
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "attribute": "heading"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Heading and accessible label for the nav group",
+              "fieldName": "heading"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "tagName": "nord-nav-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-nav-group",
+          "declaration": {
+            "name": "NavGroup",
+            "module": "src/nav-group/NavGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/nav-item/NavItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",
+          "name": "NavItem",
+          "slots": [
+            {
+              "description": "The default slot used for the nav item's text.",
+              "name": ""
+            },
+            {
               "description": "Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.",
               "name": "subnav"
             }
@@ -9126,73 +9198,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/nav-group/NavGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",
-          "name": "NavGroup",
-          "slots": [
-            {
-              "description": "The default slot used for the nav items.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "attribute": "heading"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Heading and accessible label for the nav group",
-              "fieldName": "heading"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "tagName": "nord-nav-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-nav-group",
-          "declaration": {
-            "name": "NavGroup",
-            "module": "src/nav-group/NavGroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/nav-toggle/NavToggle.ts",
@@ -9350,7 +9355,14 @@
               "name": "footer"
             }
           ],
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -9727,155 +9739,141 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/qrcode/Qrcode.ts",
+      "path": "src/progress-bar/ProgressBar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
-          "name": "Qrcode",
-          "members": [
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "canvas",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-progress-size",
+              "default": "var(--n-space-s)"
             },
             {
-              "kind": "field",
-              "name": "computed",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-progress-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
+            {
+              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
+              "name": "--n-progress-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
               "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
+              "name": "max",
               "type": {
                 "text": "number"
               },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "attribute": "size",
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "background",
-              "reflects": true
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "attribute": "correction",
-              "reflects": true
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "generate",
-              "privacy": "private"
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
               "fieldName": "value"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "size",
+              "name": "max",
               "type": {
                 "text": "number"
               },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
             },
             {
-              "name": "background",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "background"
-            },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
             {
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "fieldName": "correction"
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
           "superclass": {
@@ -9884,11 +9882,10 @@
           },
           "localization": [],
           "status": "ready",
-          "category": "image",
-          "displayName": "QR Code",
-          "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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
           "examples": [],
-          "tagName": "nord-qrcode",
+          "tagName": "nord-progress-bar",
           "customElement": true
         }
       ],
@@ -9897,157 +9894,171 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-qrcode",
+          "name": "nord-progress-bar",
           "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/progress-bar/ProgressBar.ts",
+      "path": "src/qrcode/Qrcode.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
-          "name": "ProgressBar",
-          "cssProperties": [
+          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
+          "name": "Qrcode",
+          "members": [
             {
-              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-progress-size",
-              "default": "var(--n-space-s)"
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-progress-border-radius",
-              "default": "var(--n-border-radius-s)"
+              "kind": "field",
+              "name": "computed",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
-            {
-              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
-              "name": "--n-progress-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
               "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "attribute": "max",
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "attribute": "label",
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "background",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "kind": "field",
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "attribute": "correction",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
+              "name": "generate",
+              "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "fieldName": "value"
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "fieldName": "label"
             },
             {
-              "name": "max",
+              "name": "size",
               "type": {
                 "text": "number"
               },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "fieldName": "size"
             },
             {
-              "name": "label",
+              "name": "color",
               "type": {
                 "text": "string"
               },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "background"
+            },
+            {
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "fieldName": "correction"
             }
           ],
           "superclass": {
@@ -10056,10 +10067,11 @@
           },
           "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 to show the completion status of an ongoing task.\n- Use progress bar when you can determine the percentage of the completed task at any time.\n- Always provide an accessible label when using Progress Bar.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use in constrained spaces indicating indeterminate loading state, see [Spinner](/components/spinner/) instead.\n\n</div>\n",
+          "category": "image",
+          "displayName": "QR Code",
+          "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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n",
           "examples": [],
-          "tagName": "nord-progress-bar",
+          "tagName": "nord-qrcode",
           "customElement": true
         }
       ],
@@ -10068,16 +10080,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
+          "name": "nord-qrcode",
           "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
           }
         }
       ]
@@ -12600,100 +12612,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab/Tab.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The interactive tab button for use within the tab group component.",
-          "name": "Tab",
-          "cssProperties": [
-            {
-              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
-              "name": "--n-tab-color",
-              "default": "var(--n-color-text-weak)"
-            },
-            {
-              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
-              "name": "--n-tab-font-weight",
-              "default": "var(--n-font-weight)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tab button content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSelectionChange",
-              "privacy": "protected",
-              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "fieldName": "selected"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "tagName": "nord-tab",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",
@@ -12936,6 +12854,100 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab/Tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The interactive tab button for use within the tab group component.",
+          "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
+              "name": "--n-tab-color",
+              "default": "var(--n-color-text-weak)"
+            },
+            {
+              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
+              "name": "--n-tab-font-weight",
+              "default": "var(--n-font-weight)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab button content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSelectionChange",
+              "privacy": "protected",
+              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "fieldName": "selected"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "tagName": "nord-tab",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab",
+          "declaration": {
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab-panel/TabPanel.ts",