@nysds/nys-avatar 1.12.0 → 1.13.1

package/dist/nys-avatar.js

@@ -12,8 +12,10 @@ const d = class d extends g {
   constructor() {
     super(...arguments), this.id = "", this.ariaLabel = "", this.image = "", this.initials = "", this.icon = "", this.color = "", this.interactive = !1, this.disabled = !1, this.lazy = !1, this._slotHasContent = !1;
   }
-  // Functions
-  // Generate a unique ID if one is not provided
+  /**
+   * Lifecycle methods
+   * --------------------------------------------------------------------------
+   */
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = `nys-avatar-${Date.now()}-${k++}`);
   }
@@ -29,7 +31,16 @@ const d = class d extends g {
     );
     this._slotHasContent = s.length > 0;
   }
-  // This function accounts for user set "color" prop and return the appropriate foreground contrast.
+  /**
+   * Functions
+   * --------------------------------------------------------------------------
+   */
+  /**
+   * Computes the appropriate foreground color (icon or initials)
+   * based on the avatar's background color for sufficient contrast.
+   *
+   * @returns CSS color string for foreground
+   */
   getContrastForeground() {
     const n = "var(--nys-color-ink, #000)", s = "var(--nys-color-ink-reverse, #fff)", i = "var(--nys-color-text, #000)", r = "var(--nys-color-text-reverse, #fff)";
     if (!this.color) return;

package/dist/nys-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-avatar.js","sources":["../src/nys-avatar.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-avatar.scss?inline\";\n\nlet avatarIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysAvatar extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  // Properties\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String }) ariaLabel = \"\";\n  @property({ type: String }) image = \"\";\n  @property({ type: String }) initials = \"\";\n  @property({ type: String }) icon = \"\";\n  @property({ type: String }) color = \"\";\n  @property({ type: Boolean, reflect: true }) interactive = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) lazy = false;\n  @state() private _slotHasContent = false;\n\n  // Functions\n  // Generate a unique ID if one is not provided\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-avatar-${Date.now()}-${avatarIdCounter++}`;\n    }\n  }\n\n  private async _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n    if (!slot) {\n      this._slotHasContent = false;\n      return;\n    }\n\n    // Wait a tick to ensure slot assignment settled\n    await Promise.resolve();\n\n    const assignedNodes = slot\n      .assignedNodes({ flatten: true })\n      .filter(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE ||\n          (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n      );\n\n    this._slotHasContent = assignedNodes.length > 0;\n  }\n\n  // This function accounts for user set \"color\" prop and return the appropriate foreground contrast.\n  private getContrastForeground() {\n    // Default NYSDS CSS vars for foreground.\n    // Contrast must return =>\n    // IF icon: \"--nys-color-ink-reverse\" or \"--nys-color-ink\"\n    // If initials: \"--nys-color-text-reverse\" or \"--nys-color-text\"\n    const fgIconDark = \"var(--nys-color-ink, #000)\";\n    const fgIconLight = \"var(--nys-color-ink-reverse, #fff)\";\n    const fgInitialDark = \"var(--nys-color-text, #000)\";\n    const fgInitialLight = \"var(--nys-color-text-reverse, #fff)\";\n\n    if (!this.color) return;\n\n    // Create a temporary element to compute luminance (this is in case user pass in \"var(--nys-color-stuff)\")\n    const div = document.createElement(\"div\");\n    div.style.color = this.color;\n    document.body.appendChild(div);\n    const computedColor = getComputedStyle(div).color;\n    document.body.removeChild(div);\n\n    // Parse RGB\n    const match = computedColor.match(/\\d+/g);\n    if (!match) return;\n\n    const r = Number(match[0]);\n    const g = Number(match[1]);\n    const b = Number(match[2]);\n\n    // Calculate relative luminance\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n    const isDark = luminance < 0.5;\n    if (this.initials?.length > 0) {\n      return isDark ? fgInitialLight : fgInitialDark;\n    } else {\n      return isDark ? fgIconLight : fgIconDark;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-avatar\">\n        <div class=\"nys-avatar__content\">\n          <div\n            part=\"nys-avatar\"\n            class=\"nys-avatar__component\"\n            style=${this.color\n              ? `--_nys-avatar-background-color: ${this.color}; color: ${this.getContrastForeground()}`\n              : \"\"}\n            role=${ifDefined(\n              this.interactive ? \"button\" : this.image ? undefined : \"img\",\n            )}\n            aria-label=${ifDefined(\n              this.image\n                ? undefined\n                : this.ariaLabel\n                  ? this.ariaLabel\n                  : \"avatar\",\n            )}\n            tabindex=${ifDefined(\n              this.interactive && !this.disabled ? 0 : undefined,\n            )}\n          >\n            ${this.image?.length > 0\n              ? html`<img\n                  part=\"nys-avatar__image\"\n                  class=\"nys-avatar__image\"\n                  src=${this.image}\n                  alt=${this.ariaLabel || \"avatar\"}\n                  loading=${this.lazy ? \"lazy\" : \"eager\"}\n                />`\n              : this.initials?.length > 0\n                ? html`<span\n                    part=\"nys-avatar__initials\"\n                    class=\"nys-avatar__initials\"\n                    aria-hidden=\"true\"\n                    >${this.initials}</span\n                  >`\n                : html`<div part=\"nys-avatar__icon\">\n                    <slot @slotchange=${this._handleSlotChange}></slot>\n                    ${!this._slotHasContent\n                      ? html`<nys-icon\n                          label=\"nys-avatar__icon\"\n                          name=${this.icon?.length > 0\n                            ? this.icon\n                            : \"account_circle\"}\n                        ></nys-icon>`\n                      : null}\n                  </div>`}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-avatar\")) {\n  customElements.define(\"nys-avatar\", NysAvatar);\n}\n"],"names":["avatarIdCounter","_NysAvatar","LitElement","slot","assignedNodes","node","fgIconDark","fgIconLight","fgInitialDark","fgInitialLight","div","computedColor","match","r","g","b","isDark","html","ifDefined","unsafeCSS","styles","NysAvatar","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"nys-avatar.js","sources":["../src/nys-avatar.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-avatar.scss?inline\";\n\nlet avatarIdCounter = 0;\n\n/**\n * Displays a user representation as image, initials, or icon with automatic fallback chain.\n *\n * Priority: `image` > `initials` > `icon` > default icon. Set `color` to customize background;\n * foreground auto-adjusts for contrast. Use `interactive` for clickable avatars (e.g., profile menus).\n *\n * @summary User avatar with image, initials, or icon fallback and contrast-aware colors.\n * @element nys-avatar\n *\n * @slot - Custom icon content. Overrides default icon when no image or initials.\n *\n * @example Image avatar\n * ```html\n * <nys-avatar image=\"/path/to/photo.jpg\" ariaLabel=\"Jane Smith\"></nys-avatar>\n * ```\n *\n * @example Initials avatar with custom color\n * ```html\n * <nys-avatar initials=\"JS\" color=\"var(--nys-color-theme)\" ariaLabel=\"Jane Smith\"></nys-avatar>\n * ```\n */\n\nexport class NysAvatar extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. Auto-generated if not provided. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Accessible label for screen readers. Required when no image `alt` is available. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /** Image URL. Takes priority over initials and icon. */\n  @property({ type: String }) image = \"\";\n\n  /** 1-2 character initials. Used when no image is provided. */\n  @property({ type: String }) initials = \"\";\n\n  /** Custom icon name. Falls back to `account_circle` if not set. */\n  @property({ type: String }) icon = \"\";\n\n  /** Background color. Foreground auto-adjusts for contrast. Accepts CSS values or variables. */\n  @property({ type: String }) color = \"\";\n\n  /** Makes avatar clickable with button role and focus ring. */\n  @property({ type: Boolean, reflect: true }) interactive = false;\n\n  /** Prevents interaction when `interactive` is true. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Enables lazy loading for the image. */\n  @property({ type: Boolean, reflect: true }) lazy = false;\n  @state() private _slotHasContent = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-avatar-${Date.now()}-${avatarIdCounter++}`;\n    }\n  }\n\n  private async _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n    if (!slot) {\n      this._slotHasContent = false;\n      return;\n    }\n\n    await Promise.resolve();\n\n    const assignedNodes = slot\n      .assignedNodes({ flatten: true })\n      .filter(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE ||\n          (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n      );\n\n    this._slotHasContent = assignedNodes.length > 0;\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  /**\n   * Computes the appropriate foreground color (icon or initials)\n   * based on the avatar's background color for sufficient contrast.\n   *\n   * @returns CSS color string for foreground\n   */\n  private getContrastForeground() {\n    // Default NYSDS CSS vars for foreground.\n    // Contrast must return =>\n    // IF icon: \"--nys-color-ink-reverse\" or \"--nys-color-ink\"\n    // If initials: \"--nys-color-text-reverse\" or \"--nys-color-text\"\n    const fgIconDark = \"var(--nys-color-ink, #000)\";\n    const fgIconLight = \"var(--nys-color-ink-reverse, #fff)\";\n    const fgInitialDark = \"var(--nys-color-text, #000)\";\n    const fgInitialLight = \"var(--nys-color-text-reverse, #fff)\";\n\n    if (!this.color) return;\n\n    // Create a temporary element to compute luminance (this is in case user pass in \"var(--nys-color-stuff)\")\n    const div = document.createElement(\"div\");\n    div.style.color = this.color;\n    document.body.appendChild(div);\n    const computedColor = getComputedStyle(div).color;\n    document.body.removeChild(div);\n\n    // Parse RGB\n    const match = computedColor.match(/\\d+/g);\n    if (!match) return;\n\n    const r = Number(match[0]);\n    const g = Number(match[1]);\n    const b = Number(match[2]);\n\n    // Calculate relative luminance\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n    const isDark = luminance < 0.5;\n    if (this.initials?.length > 0) {\n      return isDark ? fgInitialLight : fgInitialDark;\n    } else {\n      return isDark ? fgIconLight : fgIconDark;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-avatar\">\n        <div class=\"nys-avatar__content\">\n          <div\n            part=\"nys-avatar\"\n            class=\"nys-avatar__component\"\n            style=${this.color\n              ? `--_nys-avatar-background-color: ${this.color}; color: ${this.getContrastForeground()}`\n              : \"\"}\n            role=${ifDefined(\n              this.interactive ? \"button\" : this.image ? undefined : \"img\",\n            )}\n            aria-label=${ifDefined(\n              this.image\n                ? undefined\n                : this.ariaLabel\n                  ? this.ariaLabel\n                  : \"avatar\",\n            )}\n            tabindex=${ifDefined(\n              this.interactive && !this.disabled ? 0 : undefined,\n            )}\n          >\n            ${this.image?.length > 0\n              ? html`<img\n                  part=\"nys-avatar__image\"\n                  class=\"nys-avatar__image\"\n                  src=${this.image}\n                  alt=${this.ariaLabel || \"avatar\"}\n                  loading=${this.lazy ? \"lazy\" : \"eager\"}\n                />`\n              : this.initials?.length > 0\n                ? html`<span\n                    part=\"nys-avatar__initials\"\n                    class=\"nys-avatar__initials\"\n                    aria-hidden=\"true\"\n                    >${this.initials}</span\n                  >`\n                : html`<div part=\"nys-avatar__icon\">\n                    <slot @slotchange=${this._handleSlotChange}></slot>\n                    ${!this._slotHasContent\n                      ? html`<nys-icon\n                          label=\"nys-avatar__icon\"\n                          name=${this.icon?.length > 0\n                            ? this.icon\n                            : \"account_circle\"}\n                        ></nys-icon>`\n                      : null}\n                  </div>`}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-avatar\")) {\n  customElements.define(\"nys-avatar\", NysAvatar);\n}\n"],"names":["avatarIdCounter","_NysAvatar","LitElement","slot","assignedNodes","node","fgIconDark","fgIconLight","fgInitialDark","fgInitialLight","div","computedColor","match","r","g","b","isDark","html","ifDefined","unsafeCSS","styles","NysAvatar","__decorateClass","property","state"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-avatar",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "The Avatar component from the NYS Design System.",
   "module": "dist/nys-avatar.js",
   "exports": {
@@ -22,7 +22,7 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.12.0"
+    "@nysds/nys-icon": "^1.13.1"
   },
   "devDependencies": {
     "lit": "^3.3.1",