@vaadin/avatar 24.2.0-alpha4 → 24.2.0-dev.385a0a5b2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-dev.385a0a5b2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-avatar.d.ts",
+    "!src/vaadin-lit-avatar.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,24 +39,24 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha4",
-    "@vaadin/component-base": "24.2.0-alpha4",
-    "@vaadin/item": "24.2.0-alpha4",
-    "@vaadin/list-box": "24.2.0-alpha4",
-    "@vaadin/overlay": "24.2.0-alpha4",
-    "@vaadin/tooltip": "24.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
+    "@vaadin/a11y-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/component-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/item": "24.2.0-dev.385a0a5b2",
+    "@vaadin/list-box": "24.2.0-dev.385a0a5b2",
+    "@vaadin/overlay": "24.2.0-dev.385a0a5b2",
+    "@vaadin/tooltip": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-material-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.385a0a5b2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "9d84e4049890430a33e91ff64a6e751a1ba9b9d9"
 }

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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';
+
+export interface AvatarI18n {
+  anonymous: string;
+}
+
+/**
+ * A mixin providing common avatar functionality.
+ */
+export declare function AvatarMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<AvatarMixinClass> & Constructor<FocusMixinClass> & T;
+
+export declare class AvatarMixinClass {
+  /**
+   * The path to the image
+   */
+  img: string | null | undefined;
+
+  /**
+   * A shortened form of name that is displayed
+   * in the avatar when `img` is not provided.
+   */
+  abbr: string | null | undefined;
+
+  /**
+   * Full name of the user
+   * used for the tooltip of the avatar.
+   */
+  name: string | null | undefined;
+
+  /**
+   * Color index used for avatar background.
+   * @attr {number} color-index
+   */
+  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 has the following JSON structure and default values:
+   *
+   * ```
+   * {
+   *   // Translation of the anonymous user avatar tooltip.
+   *   anonymous: 'anonymous'
+   * }
+   * ```
+   */
+  i18n: AvatarI18n;
+
+  /**
+   * When true, the avatar has tooltip shown on hover and focus.
+   * The tooltip text is based on the `name` and `abbr` properties.
+   * When neither is provided, `i18n.anonymous` is used instead.
+   * @attr {boolean} with-tooltip
+   */
+  withTooltip: boolean;
+}

package/src/vaadin-avatar-mixin.js

@@ -0,0 +1,240 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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';
+
+/**
+ * A mixin providing common avatar functionality.
+ *
+ * @polymerMixin
+ * @mixes FocusMixin
+ */
+export const AvatarMixin = (superClass) =>
+  class AvatarMixinClass extends FocusMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The path to the image
+         */
+        img: {
+          type: String,
+          reflectToAttribute: true,
+          observer: '__imgChanged',
+        },
+
+        /**
+         * A shortened form of name that is displayed
+         * in the avatar when `img` is not provided.
+         */
+        abbr: {
+          type: String,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Full name of the user
+         * used for the tooltip of the avatar.
+         */
+        name: {
+          type: String,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Color index used for avatar background.
+         * @attr {number} color-index
+         */
+        colorIndex: {
+          type: Number,
+          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.
+         * When neither is provided, `i18n.anonymous` is used instead.
+         * @attr {boolean} with-tooltip
+         */
+        withTooltip: {
+          type: Boolean,
+          value: false,
+          observer: '__withTooltipChanged',
+        },
+
+        /** @protected */
+        __imgVisible: Boolean,
+
+        /** @protected */
+        __iconVisible: Boolean,
+
+        /** @protected */
+        __abbrVisible: Boolean,
+
+        /** @private */
+        __tooltipNode: Object,
+      };
+    }
+
+    static get observers() {
+      return [
+        '__imgOrAbbrOrNameChanged(img, abbr, name)',
+        '__i18nChanged(i18n)',
+        '__tooltipChanged(__tooltipNode, name, abbr)',
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.__updateVisibility();
+
+      // By default, if the user hasn't provided a custom role,
+      // the role attribute is set to "button".
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'button');
+      }
+
+      if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0');
+      }
+
+      // Should set `anonymous` if name / abbr is not provided
+      if (!this.name && !this.abbr) {
+        this.__setTooltip();
+      }
+    }
+
+    /** @private */
+    __colorIndexChanged(index) {
+      if (index != null) {
+        const prop = `--vaadin-user-color-${index}`;
+
+        // Check if custom CSS property is defined
+        const isValid = Boolean(getComputedStyle(document.documentElement).getPropertyValue(prop));
+
+        if (isValid) {
+          this.setAttribute('has-color-index', '');
+          this.style.setProperty('--vaadin-avatar-user-color', `var(${prop})`);
+        } else {
+          this.removeAttribute('has-color-index');
+          console.warn(`The CSS property --vaadin-user-color-${index} is not defined`);
+        }
+      } else {
+        this.removeAttribute('has-color-index');
+      }
+    }
+
+    /** @private */
+    __imgChanged() {
+      this.__imgFailedToLoad = false;
+    }
+
+    /** @private */
+    __imgOrAbbrOrNameChanged(img, abbr, name) {
+      this.__updateVisibility();
+
+      if (abbr && abbr !== this.__generatedAbbr) {
+        return;
+      }
+
+      if (name) {
+        this.abbr = this.__generatedAbbr = name
+          .split(' ')
+          .map((word) => word.charAt(0))
+          .join('');
+      } else {
+        this.abbr = undefined;
+      }
+    }
+
+    /** @private */
+    __tooltipChanged(tooltipNode, name, abbr) {
+      if (tooltipNode) {
+        if (abbr && abbr !== this.__generatedAbbr) {
+          this.__setTooltip(name ? `${name} (${abbr})` : abbr);
+        } else {
+          this.__setTooltip(name);
+        }
+      }
+    }
+
+    /** @private */
+    __withTooltipChanged(withTooltip, oldWithTooltip) {
+      if (withTooltip) {
+        // Create and attach tooltip
+        const tooltipNode = document.createElement('vaadin-tooltip');
+        tooltipNode.setAttribute('slot', 'tooltip');
+        this.appendChild(tooltipNode);
+        this.__tooltipNode = tooltipNode;
+      } else if (oldWithTooltip) {
+        // Cleanup and detach tooltip
+        this.__tooltipNode.target = null;
+        this.__tooltipNode.remove();
+        this.__tooltipNode = null;
+      }
+    }
+
+    /** @private */
+    __i18nChanged(i18n) {
+      if (i18n && i18n.anonymous) {
+        if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
+          this.__setTooltip();
+        }
+
+        this.__oldAnonymous = i18n.anonymous;
+      }
+    }
+
+    /** @private */
+    __updateVisibility() {
+      this.__imgVisible = !!this.img && !this.__imgFailedToLoad;
+      this.__abbrVisible = !this.__imgVisible && !!this.abbr;
+      this.__iconVisible = !this.__imgVisible && !this.abbr;
+    }
+
+    /** @private */
+    __setTooltip(tooltip) {
+      const tooltipNode = this.__tooltipNode;
+      if (tooltipNode) {
+        tooltipNode.text = tooltip || this.i18n.anonymous;
+      }
+    }
+
+    /** @protected */
+    __onImageLoadError() {
+      if (this.img) {
+        console.warn(`<vaadin-avatar> The specified image could not be loaded: ${this.img}`);
+        this.__imgFailedToLoad = true;
+        this.__updateVisibility();
+      }
+    }
+  };

package/src/vaadin-avatar-styles.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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';
+
+export const avatarStyles = css`
+  :host {
+    display: inline-block;
+    flex: none;
+    border-radius: 50%;
+    overflow: hidden;
+    height: var(--vaadin-avatar-size, 64px);
+    width: var(--vaadin-avatar-size, 64px);
+    border: var(--vaadin-avatar-outline-width) solid transparent;
+    margin: calc(var(--vaadin-avatar-outline-width) * -1);
+    background-clip: content-box;
+    --vaadin-avatar-outline-width: 2px;
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  [part='icon'] {
+    font-size: 5.6em;
+  }
+
+  [part='abbr'] {
+    font-size: 2.2em;
+  }
+
+  [part='icon'] > text {
+    font-family: 'vaadin-avatar-icons';
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  svg[hidden] {
+    display: none !important;
+  }
+
+  :host([has-color-index]) {
+    position: relative;
+    background-color: var(--vaadin-avatar-user-color);
+  }
+
+  :host([has-color-index])::before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
+  }
+`;

package/src/vaadin-avatar.d.ts

@@ -3,14 +3,12 @@
  * Copyright (c) 2020 - 2023 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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AvatarMixin } from './vaadin-avatar-mixin.js';
 
-export interface AvatarI18n {
-  anonymous: string;
-}
+export { AvatarI18n } from './vaadin-avatar-mixin.js';
 
 /**
  * `<vaadin-avatar>` is a Web Component providing avatar displaying functionality.
@@ -38,54 +36,7 @@ export interface AvatarI18n {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
-  /**
-   * The path to the image
-   */
-  img: string | null | undefined;
-
-  /**
-   * A shortened form of name that is displayed
-   * in the avatar when `img` is not provided.
-   */
-  abbr: string | null | undefined;
-
-  /**
-   * Full name of the user
-   * used for the tooltip of the avatar.
-   */
-  name: string | null | undefined;
-
-  /**
-   * Color index used for avatar background.
-   * @attr {number} color-index
-   */
-  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 has the following JSON structure and default values:
-   *
-   * ```
-   * {
-   *   // Translation of the anonymous user avatar tooltip.
-   *   anonymous: 'anonymous'
-   * }
-   * ```
-   */
-  i18n: AvatarI18n;
-
-  /**
-   * When true, the avatar has tooltip shown on hover and focus.
-   * The tooltip text is based on the `name` and `abbr` properties.
-   * When neither is provided, `i18n.anonymous` is used instead.
-   * @attr {boolean} with-tooltip
-   */
-  withTooltip: boolean;
-}
+declare class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-avatar.js

@@ -5,11 +5,14 @@
  */
 import './vaadin-avatar-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AvatarMixin } from './vaadin-avatar-mixin.js';
+import { avatarStyles } from './vaadin-avatar-styles.js';
+
+registerStyles('vaadin-avatar', avatarStyles, { moduleId: 'vaadin-avatar-styles' });
 
 /**
  * `<vaadin-avatar>` is a Web Component providing avatar displaying functionality.
@@ -38,70 +41,14 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @extends HTMLElement
+ * @mixes AvatarMixin
  * @mixes ControllerMixin
- * @mixes FocusMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
+class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-          flex: none;
-          border-radius: 50%;
-          overflow: hidden;
-          height: var(--vaadin-avatar-size, 64px);
-          width: var(--vaadin-avatar-size, 64px);
-          border: var(--vaadin-avatar-outline-width) solid transparent;
-          margin: calc(var(--vaadin-avatar-outline-width) * -1);
-          background-clip: content-box;
-          --vaadin-avatar-outline-width: 2px;
-        }
-
-        img {
-          height: 100%;
-          width: 100%;
-          object-fit: cover;
-        }
-
-        [part='icon'] {
-          font-size: 5.6em;
-        }
-
-        [part='abbr'] {
-          font-size: 2.2em;
-        }
-
-        [part='icon'] > text {
-          font-family: 'vaadin-avatar-icons';
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        svg[hidden] {
-          display: none !important;
-        }
-
-        :host([has-color-index]) {
-          position: relative;
-          background-color: var(--vaadin-avatar-user-color);
-        }
-
-        :host([has-color-index])::before {
-          position: absolute;
-          content: '';
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          border-radius: inherit;
-          box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
-        }
-      </style>
       <img hidden$="[[!__imgVisible]]" src$="[[img]]" aria-hidden="true" on-error="__onImageLoadError" />
       <svg
         part="icon"
@@ -132,232 +79,12 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(Polym
     return 'vaadin-avatar';
   }
 
-  static get properties() {
-    return {
-      /**
-       * The path to the image
-       */
-      img: {
-        type: String,
-        reflectToAttribute: true,
-        observer: '__imgChanged',
-      },
-
-      /**
-       * A shortened form of name that is displayed
-       * in the avatar when `img` is not provided.
-       */
-      abbr: {
-        type: String,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Full name of the user
-       * used for the tooltip of the avatar.
-       */
-      name: {
-        type: String,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Color index used for avatar background.
-       * @attr {number} color-index
-       */
-      colorIndex: {
-        type: Number,
-        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.
-       * When neither is provided, `i18n.anonymous` is used instead.
-       * @attr {boolean} with-tooltip
-       */
-      withTooltip: {
-        type: Boolean,
-        value: false,
-        observer: '__withTooltipChanged',
-      },
-
-      /** @private */
-      __imgVisible: Boolean,
-
-      /** @private */
-      __iconVisible: Boolean,
-
-      /** @private */
-      __abbrVisible: Boolean,
-
-      /** @private */
-      __tooltipNode: Object,
-    };
-  }
-
-  static get observers() {
-    return [
-      '__imgOrAbbrOrNameChanged(img, abbr, name)',
-      '__i18nChanged(i18n.*)',
-      '__tooltipChanged(__tooltipNode, name, abbr)',
-    ];
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
-    this.__updateVisibility();
-
-    // By default, if the user hasn't provided a custom role,
-    // the role attribute is set to "button".
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
-
-    if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0');
-    }
-
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
-
-    // Should set `anonymous` if name / abbr is not provided
-    if (!this.name && !this.abbr) {
-      this.__setTooltip();
-    }
-  }
-
-  /** @private */
-  __colorIndexChanged(index) {
-    if (index != null) {
-      const prop = `--vaadin-user-color-${index}`;
-
-      // Check if custom CSS property is defined
-      const isValid = Boolean(getComputedStyle(document.documentElement).getPropertyValue(prop));
-
-      if (isValid) {
-        this.setAttribute('has-color-index', '');
-        this.style.setProperty('--vaadin-avatar-user-color', `var(${prop})`);
-      } else {
-        this.removeAttribute('has-color-index');
-        console.warn(`The CSS property --vaadin-user-color-${index} is not defined`);
-      }
-    } else {
-      this.removeAttribute('has-color-index');
-    }
-  }
-
-  /** @private */
-  __imgChanged() {
-    this.__imgFailedToLoad = false;
-  }
-
-  /** @private */
-  __imgOrAbbrOrNameChanged(img, abbr, name) {
-    this.__updateVisibility();
-
-    if (abbr && abbr !== this.__generatedAbbr) {
-      return;
-    }
-
-    if (name) {
-      this.abbr = this.__generatedAbbr = name
-        .split(' ')
-        .map((word) => word.charAt(0))
-        .join('');
-    } else {
-      this.abbr = undefined;
-    }
-  }
-
-  /** @private */
-  __tooltipChanged(tooltipNode, name, abbr) {
-    if (tooltipNode) {
-      if (abbr && abbr !== this.__generatedAbbr) {
-        this.__setTooltip(name ? `${name} (${abbr})` : abbr);
-      } else {
-        this.__setTooltip(name);
-      }
-    }
-  }
-
-  /** @private */
-  __withTooltipChanged(withTooltip, oldWithTooltip) {
-    if (withTooltip) {
-      // Create and attach tooltip
-      const tooltipNode = document.createElement('vaadin-tooltip');
-      tooltipNode.setAttribute('slot', 'tooltip');
-      this.appendChild(tooltipNode);
-      this.__tooltipNode = tooltipNode;
-    } else if (oldWithTooltip) {
-      // Cleanup and detach tooltip
-      this.__tooltipNode.target = null;
-      this.__tooltipNode.remove();
-      this.__tooltipNode = null;
-    }
-  }
-
-  /** @private */
-  __i18nChanged(i18n) {
-    if (i18n.base && i18n.base.anonymous) {
-      if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
-        this.__setTooltip();
-      }
-
-      this.__oldAnonymous = i18n.base.anonymous;
-    }
-  }
-
-  /** @private */
-  __updateVisibility() {
-    this.__imgVisible = !!this.img && !this.__imgFailedToLoad;
-    this.__abbrVisible = !this.__imgVisible && !!this.abbr;
-    this.__iconVisible = !this.__imgVisible && !this.abbr;
-  }
-
-  /** @private */
-  __setTooltip(tooltip) {
-    const tooltipNode = this.__tooltipNode;
-    if (tooltipNode) {
-      tooltipNode.text = tooltip || this.i18n.anonymous;
-    }
-  }
-
-  /** @private */
-  __onImageLoadError() {
-    if (this.img) {
-      console.warn(`<vaadin-avatar> The specified image could not be loaded: ${this.img}`);
-      this.__imgFailedToLoad = true;
-      this.__updateVisibility();
-    }
   }
 }
 

package/web-types.json

@@ -1,153 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-types",
-  "name": "@vaadin/avatar",
-  "version": "24.2.0-alpha4",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "elements": [
-        {
-          "name": "vaadin-avatar",
-          "description": "`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin-avatar img=\"avatars/avatar-1.jpg\"></vaadin-avatar>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`abbr`    | The abbreviation element\n`icon`    | The icon element\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`focus-ring`      | Set when the avatar is focused using the keyboard.\n`focused`         | Set when the avatar is focused.\n`has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
-          "attributes": [
-            {
-              "name": "img",
-              "description": "The path to the image",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "abbr",
-              "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "name",
-              "description": "Full name of the user\nused for the tooltip of the avatar.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "color-index",
-              "description": "Color index used for avatar background.",
-              "value": {
-                "type": [
-                  "number",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "with-tooltip",
-              "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.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "theme",
-              "description": "The theme variants to apply to the component.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "img",
-                "description": "The path to the image",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "abbr",
-                "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "name",
-                "description": "Full name of the user\nused for the tooltip of the avatar.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "colorIndex",
-                "description": "Color index used for avatar background.",
-                "value": {
-                  "type": [
-                    "number",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "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.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              }
-            ],
-            "events": []
-          }
-        }
-      ]
-    }
-  }
-}

package/web-types.lit.json

@@ -1,69 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-types",
-  "name": "@vaadin/avatar",
-  "version": "24.2.0-alpha4",
-  "description-markup": "markdown",
-  "framework": "lit",
-  "framework-config": {
-    "enable-when": {
-      "node-packages": [
-        "lit"
-      ]
-    }
-  },
-  "contributions": {
-    "html": {
-      "elements": [
-        {
-          "name": "vaadin-avatar",
-          "description": "`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin-avatar img=\"avatars/avatar-1.jpg\"></vaadin-avatar>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`abbr`    | The abbreviation element\n`icon`    | The icon element\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`focus-ring`      | Set when the avatar is focused using the keyboard.\n`focused`         | Set when the avatar is focused.\n`has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
-          "extension": true,
-          "attributes": [
-            {
-              "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.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".img",
-              "description": "The path to the image",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".abbr",
-              "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".name",
-              "description": "Full name of the user\nused for the tooltip of the avatar.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".colorIndex",
-              "description": "Color index used for avatar background.",
-              "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"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  }
-}