@vaadin/avatar 24.7.0-alpha1 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,22 +38,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/tooltip": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/tooltip": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/vaadin-avatar-icons.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 const template = document.createElement('template');

package/src/vaadin-avatar-mixin.d.ts

@@ -1,21 +1,22 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface AvatarI18n {
+export type AvatarI18n = PartialI18n<{
   anonymous: string;
-}
+}>;
 
 /**
  * A mixin providing common avatar functionality.
  */
 export declare function AvatarMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<AvatarMixinClass> & Constructor<FocusMixinClass> & T;
+): Constructor<AvatarMixinClass> & Constructor<I18nMixinClass<AvatarI18n>> & Constructor<FocusMixinClass> & T;
 
 export declare class AvatarMixinClass {
   /**
@@ -42,12 +43,11 @@ export declare class AvatarMixinClass {
   colorIndex: number | null | undefined;
 
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   *
    * ```
    * {
    *   // Translation of the anonymous user avatar tooltip.

package/src/vaadin-avatar-mixin.js

@@ -1,9 +1,14 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
+
+const DEFAULT_I18N = {
+  anonymous: 'anonymous',
+};
 
 /**
  * A mixin providing common avatar functionality.
@@ -12,7 +17,7 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
  * @mixes FocusMixin
  */
 export const AvatarMixin = (superClass) =>
-  class AvatarMixinClass extends FocusMixin(superClass) {
+  class AvatarMixinClass extends I18nMixin(DEFAULT_I18N, FocusMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -51,32 +56,6 @@ export const AvatarMixin = (superClass) =>
           observer: '__colorIndexChanged',
         },
 
-        /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * _i18n_ object or just the property you want to modify.
-         *
-         * The object has the following JSON structure and default values:
-         *
-         * ```
-         * {
-         *   // Translation of the anonymous user avatar tooltip.
-         *   anonymous: 'anonymous'
-         * }
-         * ```
-         *
-         * @type {!AvatarI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              anonymous: 'anonymous',
-            };
-          },
-        },
-
         /**
          * When true, the avatar has tooltip shown on hover and focus.
          * The tooltip text is based on the `name` and `abbr` properties.
@@ -106,11 +85,33 @@ export const AvatarMixin = (superClass) =>
     static get observers() {
       return [
         '__imgOrAbbrOrNameChanged(img, abbr, name)',
-        '__i18nChanged(i18n)',
+        '__i18nChanged(__effectiveI18n)',
         '__tooltipChanged(__tooltipNode, name, abbr)',
       ];
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure and default values:
+     * ```
+     * {
+     *   // Translation of the anonymous user avatar tooltip.
+     *   anonymous: 'anonymous'
+     * }
+     * ```
+     * @return {!AvatarI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -118,9 +119,9 @@ export const AvatarMixin = (superClass) =>
       this.__updateVisibility();
 
       // By default, if the user hasn't provided a custom role,
-      // the role attribute is set to "button".
+      // the role attribute is set to "img".
       if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'button');
+        this.setAttribute('role', 'img');
       }
 
       if (!this.hasAttribute('tabindex')) {
@@ -185,6 +186,14 @@ export const AvatarMixin = (superClass) =>
           this.__setTooltip(name);
         }
       }
+
+      if (abbr) {
+        // By default, generate aria-label attribute containing the abbr value.
+        // When no tooltip is set, prefix the aria-label with the name value.
+        this.setAttribute('aria-label', !tooltipNode && name ? `${name} (${abbr})` : abbr);
+      } else {
+        this.removeAttribute('aria-label');
+      }
     }
 
     /** @private */
@@ -204,13 +213,13 @@ export const AvatarMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(i18n) {
-      if (i18n && i18n.anonymous) {
+    __i18nChanged(effectiveI18n) {
+      if (effectiveI18n && effectiveI18n.anonymous) {
         if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
           this.__setTooltip();
         }
 
-        this.__oldAnonymous = i18n.anonymous;
+        this.__oldAnonymous = effectiveI18n.anonymous;
       }
     }
 
@@ -225,7 +234,7 @@ export const AvatarMixin = (superClass) =>
     __setTooltip(tooltip) {
       const tooltipNode = this.__tooltipNode;
       if (tooltipNode) {
-        tooltipNode.text = tooltip || this.i18n.anonymous;
+        tooltipNode.text = tooltip || this.__effectiveI18n.anonymous;
       }
     }
 

package/src/vaadin-avatar-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/src/vaadin-avatar.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';

package/src/vaadin-avatar.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-avatar-icons.js';

package/src/vaadin-lit-avatar.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export * from './vaadin-avatar.js';

package/src/vaadin-lit-avatar.js

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-avatar-icons.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -44,7 +45,7 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
     return html`
       <img
         ?hidden="${!this.__imgVisible}"
-        src="${this.img}"
+        src="${ifDefined(this.img)}"
         aria-hidden="true"
         @error="${this.__onImageLoadError}"
         draggable="false"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -79,6 +79,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
+                "value": {
+                  "type": [
+                    "AvatarI18n"
+                  ]
+                }
+              },
               {
                 "name": "img",
                 "description": "The path to the image",
@@ -123,15 +132,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
-                "value": {
-                  "type": [
-                    "AvatarI18n"
-                  ]
-                }
-              },
               {
                 "name": "withTooltip",
                 "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -26,6 +26,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".img",
               "description": "The path to the image",
@@ -53,13 +60,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }