@nysds/nys-avatar 1.19.1 → 1.19.3

package/dist/nys-avatar.js

@@ -6,7 +6,7 @@ import { ifDefined as c } from "lit/directives/if-defined.js";
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Avatar Component v1.19.1
+   * Avatar Component v1.19.3
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT

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;\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  private get _cleanAriaLabel(): string {\n    return (this.ariaLabel ?? \"\").replace(/[\\s\\u00a0]+/g, \" \").trim();\n  }\n\n  private _colorStyle(): string {\n    if (!this.color) return \"\";\n    const fg = this.getContrastForeground() ?? \"\";\n    return `--_nys-avatar-background-color: ${this.color}; --_nys-avatar-color: ${fg}; color: ${fg}`;\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    const label = this._cleanAriaLabel;\n    const colorStyle = this._colorStyle();\n\n    const avatarContent =\n      this.image?.length > 0\n        ? html`<img\n            part=\"nys-avatar__image\"\n            class=\"nys-avatar__image\"\n            src=${this.image}\n            alt=${label || \"\"}\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 ? this.icon : \"account_circle\"}\n                  ></nys-icon>`\n                : null}\n            </div>`;\n\n    const container = this.interactive\n      ? html`<button\n          part=\"nys-avatar\"\n          class=\"nys-avatar__component\"\n          style=${ifDefined(colorStyle || undefined)}\n          aria-label=${ifDefined(label || undefined)}\n          ?disabled=${this.disabled}\n        >\n          ${avatarContent}\n        </button>`\n      : html`<div\n          part=\"nys-avatar\"\n          class=\"nys-avatar__component\"\n          style=${ifDefined(colorStyle || undefined)}\n          role=${ifDefined(this.image ? undefined : label ? \"img\" : undefined)}\n          aria-label=${ifDefined(this.image ? undefined : label || undefined)}\n          aria-hidden=${ifDefined(this.image || label ? undefined : \"true\")}\n        >\n          ${avatarContent}\n        </div>`;\n\n    return html`\n      <div class=\"nys-avatar\">\n        <div class=\"nys-avatar__content\">${container}</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","fg","fgIconDark","fgIconLight","fgInitialDark","fgInitialLight","div","computedColor","match","r","g","b","isDark","label","colorStyle","avatarContent","html","container","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 Basic\n * ```html\n * <nys-avatar ariaLabel=\"User avatar\"></nys-avatar>\n * ```\n *\n * @example Image\n * ```html\n * <nys-avatar\n *  image=\"path/to/img.png\"\n *  ariaLabel=\"Jane Smith\"\n * ></nys-avatar>\n * ```\n * @render Image\n * ```html\n * <nys-avatar\n *  image=\"https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n *  ariaLabel=\"Jane Smith\"\n * ></nys-avatar>\n * ```\n *\n * @example Initials\n * ```html\n * <nys-avatar initials=\"JS\" ariaLabel=\"Jane Smith\"></nys-avatar>\n * ```\n *\n * @example Icon\n * ```html\n * <nys-avatar icon=\"account_circle\"></nys-avatar>\n * ```\n *\n * @example Interactive\n * ```html\n * <nys-avatar interactive></nys-avatar>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-avatar disabled></nys-avatar>\n * ```\n *\n * @example Custom Background Color\n * ```html\n * <nys-avatar color=\"var(--nys-color-red-500)\" interactive></nys-avatar>\n * ```\n *\n * @example Lazy Loading\n * ```html\n * <nys-avatar lazy></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  private get _cleanAriaLabel(): string {\n    return (this.ariaLabel ?? \"\").replace(/[\\s\\u00a0]+/g, \" \").trim();\n  }\n\n  private _colorStyle(): string {\n    if (!this.color) return \"\";\n    const fg = this.getContrastForeground() ?? \"\";\n    return `--_nys-avatar-background-color: ${this.color}; --_nys-avatar-color: ${fg}; color: ${fg}`;\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    const label = this._cleanAriaLabel;\n    const colorStyle = this._colorStyle();\n\n    const avatarContent =\n      this.image?.length > 0\n        ? html`<img\n            part=\"nys-avatar__image\"\n            class=\"nys-avatar__image\"\n            src=${this.image}\n            alt=${label || \"\"}\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 ? this.icon : \"account_circle\"}\n                  ></nys-icon>`\n                : null}\n            </div>`;\n\n    const container = this.interactive\n      ? html`<button\n          part=\"nys-avatar\"\n          class=\"nys-avatar__component\"\n          style=${ifDefined(colorStyle || undefined)}\n          aria-label=${ifDefined(label || undefined)}\n          ?disabled=${this.disabled}\n        >\n          ${avatarContent}\n        </button>`\n      : html`<div\n          part=\"nys-avatar\"\n          class=\"nys-avatar__component\"\n          style=${ifDefined(colorStyle || undefined)}\n          role=${ifDefined(this.image ? undefined : label ? \"img\" : undefined)}\n          aria-label=${ifDefined(this.image ? undefined : label || undefined)}\n          aria-hidden=${ifDefined(this.image || label ? undefined : \"true\")}\n        >\n          ${avatarContent}\n        </div>`;\n\n    return html`\n      <div class=\"nys-avatar\">\n        <div class=\"nys-avatar__content\">${container}</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","fg","fgIconDark","fgIconLight","fgInitialDark","fgInitialLight","div","computedColor","match","r","g","b","isDark","label","colorStyle","avatarContent","html","container","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.19.1",
+  "version": "1.19.3",
   "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.19.1"
+    "@nysds/nys-icon": "^1.19.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",
@@ -40,5 +40,9 @@
     "forms"
   ],
   "author": "New York State Design System Team",
-  "license": "MIT"
+  "license": "MIT",
+  "sideEffects": true,
+  "peerDependencies": {
+    "lit": "^3.3.1"
+  }
 }