@nordhealth/components 2.15.2 → 2.16.0

package/custom-elements.json

@@ -407,7 +407,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
+          "description": "Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.",
           "name": "Avatar",
           "cssProperties": [
             {
@@ -435,7 +435,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -459,9 +459,19 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name of the person.",
+              "description": "The name of the person or entity.",
               "attribute": "name"
             },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The fallback icon.",
+              "attribute": "icon"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -503,7 +513,7 @@
             {
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\""
               },
               "default": "\"m\"",
               "description": "The size of the avatar.",
@@ -523,9 +533,18 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name of the person.",
+              "description": "The name of the person or entity.",
               "fieldName": "name"
             },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The fallback icon.",
+              "fieldName": "icon"
+            },
             {
               "name": "variant",
               "type": {
@@ -543,7 +562,7 @@
           "localization": [],
           "status": "ready",
           "category": "image",
-          "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",
+          "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- Use the avatar to represent a single user, pet or entity.\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- Don't use an avatar when an icon is more suitable, for example when denoting groups or \"things\".\n\n</div>\n",
           "examples": [],
           "tagName": "nord-avatar",
           "customElement": true
@@ -8846,73 +8865,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-item/NavItem.ts",
@@ -9174,6 +9126,73 @@
         }
       ]
     },
+    {
+      "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",
@@ -9706,177 +9725,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/progress-bar/ProgressBar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
-          "name": "ProgressBar",
-          "cssProperties": [
-            {
-              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-progress-size",
-              "default": "var(--n-space-s)"
-            },
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-progress-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
-              "name": "--n-progress-color",
-              "default": "var(--n-color-accent)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component.",
-              "inheritedFrom": {
-                "name": "FocusableMixin",
-                "module": "src/common/mixins/FocusableMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
-              "fieldName": "value"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
-              "fieldName": "max"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Current progress\"",
-              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            }
-          ],
-          "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 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-progress-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-progress-bar",
-          "declaration": {
-            "name": "ProgressBar",
-            "module": "src/progress-bar/ProgressBar.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/qrcode/Qrcode.ts",
@@ -10063,6 +9911,177 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/progress-bar/ProgressBar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
+          "name": "ProgressBar",
+          "cssProperties": [
+            {
+              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-progress-size",
+              "default": "var(--n-space-s)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-progress-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
+              "name": "--n-progress-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Specifies how much of the task has been completed. Must be a valid floating\npoint number between 0 and max, or between 0 and 100 if max is omitted. If\nthere is no value, the progress bar is indeterminate; this indicates that\nan activity is ongoing with no indication of how long it’s expected to take.",
+              "fieldName": "value"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Describes how much work the task indicated by the progress element requires.\nThe max attribute, if present, must have a value greater than 0 and be a\nvalid floating point number.",
+              "fieldName": "max"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Current progress\"",
+              "description": "Accessible label for the progress indicator. Visually hidden, but shown\nfor assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            }
+          ],
+          "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 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-progress-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-progress-bar",
+          "declaration": {
+            "name": "ProgressBar",
+            "module": "src/progress-bar/ProgressBar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/radio/Radio.ts",

package/lib/Avatar.js

@@ -1,2 +1,2 @@
-import{i as a,_ as r,s as t,y as e,b as s,e as i}from"./query-assigned-elements-cf502539.js";import{e as n}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{s as l}from"./Component-449e40fb.js";import{f as v}from"./fsm-50373df9.js";import{o as c}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-status-highlight));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);--_n-avatar-box-shadow:none;display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--n-color-text-on-accent);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-m) * 1.25));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) * 1.5));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-border-radius:var(--n-border-radius);--_n-avatar-box-shadow:var(--n-box-shadow)}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let f=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return e`<div class="n-avatar">${"initial"!==this.state?this.renderImage():s} ${"loaded"!==this.state?this.renderFallback():s}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?e`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:s}renderFallback(){return e`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".5"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};f.styles=[l,d],r([o()],f.prototype,"state",void 0),r([n({reflect:!0})],f.prototype,"size",void 0),r([n({reflect:!0})],f.prototype,"src",void 0),r([n()],f.prototype,"name",void 0),r([n({reflect:!0})],f.prototype,"variant",void 0),r([c("src")],f.prototype,"handleSrcChange",null),f=r([i("nord-avatar")],f);var z=f;export{z as default};
+import{i as a,_ as r,s as t,y as e,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as n}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{s as l}from"./Component-449e40fb.js";import{f as c}from"./fsm-50373df9.js";import{o as v}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);--_n-avatar-box-shadow:none;--_n-avatar-text-color:var(--n-color-text-on-accent);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:calc(var(--_n-avatar-size) / 1.6)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-xl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-border-radius:var(--n-border-radius);--_n-avatar-box-shadow:var(--n-box-shadow)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-status-neutral-weak));--_n-avatar-text-color:var(--n-color-text)}`,{transition:h}=c({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.icon="",this.variant="default"}render(){return e`<div class="n-avatar">${"initial"!==this.state?this.renderImage():i} ${"loaded"!==this.state?this.renderFallback():i}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?e`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:i}renderFallback(){return e`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?e`<nord-icon name="${this.icon}"></nord-icon>`:e`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[l,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n()],z.prototype,"name",void 0),r([n()],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([v("src")],z.prototype,"handleSrcChange",null),z=r([o("nord-avatar")],z);var f=z;export{f as default};
 //# sourceMappingURL=Avatar.js.map

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nconst { transition } = fsm({\n  initial: {\n    \"src-set\": \"loading\",\n  },\n  loading: {\n    load: \"loaded\",\n    error: \"initial\",\n    \"src-clear\": \"initial\",\n  },\n  loaded: {\n    \"src-set\": \"loading\",\n    \"src-clear\": \"initial\",\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = \"initial\"\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person.\n   */\n  @property() name: string = \"\"\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== \"initial\" ? this.renderImage() : nothing}\n        ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe(\"src\")\n  protected handleSrcChange() {\n    const event = this.src ? \"src-set\" : \"src-clear\"\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || \"\"}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n        <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n        <g fill=\"#fff\" opacity=\".5\">\n          <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n          <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n        </g>\n      </svg>\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, \"load\")\n  }\n\n  private handleError() {\n    this.state = transition(this.state, \"error\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-avatar\": Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"o1DASMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAgBjB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAGmBC,KAAKC,MAA8B,UAKvBD,KAAIE,KAAmC,IAUxDF,KAAIG,KAAW,GAKEH,KAAOI,QAAyB,SAuD9D,CArDCC,SACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAESJ,cACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeN,KAAKG,6XAYhC,CAEOU,aACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOa,cACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GA5EMJ,EAAAkB,OAAS,CAACC,EAAgBC,GAExBC,EAAA,CAARjB,KAA4DJ,EAAAsB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAkDxB,EAAAsB,UAAA,YAAA,GAK1CD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBxB,EAAAsB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BvB,EAAAsB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDxB,EAAAsB,UAAA,eAAA,GAYtED,EAAA,CADCI,EAAQ,QAIRzB,EAAAsB,UAAA,kBAAA,MAtCkBtB,EAAMqB,EAAA,CAD1BK,EAAc,gBACM1B,SAAAA"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n  initial: {\n    \"src-set\": \"loading\",\n  },\n  loading: {\n    load: \"loaded\",\n    error: \"initial\",\n    \"src-clear\": \"initial\",\n  },\n  loaded: {\n    \"src-set\": \"loading\",\n    \"src-clear\": \"initial\",\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = \"initial\"\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person or entity.\n   */\n  @property() name: string = \"\"\n\n  /**\n   * The fallback icon.\n   */\n  @property() icon: string = \"\"\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== \"initial\" ? this.renderImage() : nothing}\n        ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe(\"src\")\n  protected handleSrcChange() {\n    const event = this.src ? \"src-set\" : \"src-clear\"\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || \"\"}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      ${this.icon\n        ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n        : html`\n            <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n              <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n              <g fill=\"#fff\" opacity=\".7\">\n                <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n                <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n              </g>\n            </svg>\n          `}\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, \"load\")\n  }\n\n  private handleError() {\n    this.state = transition(this.state, \"error\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-avatar\": Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"+7EAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAgBjB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAGmBC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUjEF,KAAIG,KAAW,GAKfH,KAAII,KAAW,GAKEJ,KAAOK,QAAyB,SA2D9D,CAzDCC,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKC,MAAsBD,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKC,MAAqBD,KAAKU,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQZ,KAAKa,IAAM,UAAY,YACrCb,KAAKC,MAAQX,EAAWU,KAAKC,MAAOW,EACrC,CAESJ,cACR,OAAOR,KAAKa,IACRN,CAAI,qCAGWP,KAAKC,eACVD,KAAKa,eACHb,KAAKc,uBACJd,KAAKe,qBACRf,KAAKG,MAAQ,OAGvBM,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeP,KAAKG,gGAI3BH,KAAKI,KACHG,CAAI,oBAAoBP,KAAKI,qBAC7BG,CAAI,kSAUX,CAEOO,aACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOc,cACNf,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAExBC,EAAA,CAARlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAYtED,EAAA,CADCI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}