@vaadin/avatar 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,13 +1,10 @@
-# <vaadin-avatar>
+# @vaadin/avatar
 
-[<vaadin-avatar>](https://vaadin.com/components/vaadin-avatar) is a Web Component providing avatar displaying functionality.
+A web component for graphical representation of an object or entity, for example a person or an organization.
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-avatar/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-avatar/html-api)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/avatar)](https://www.npmjs.com/package/@vaadin/avatar)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-avatar)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -16,41 +13,44 @@
 <vaadin-avatar abbr="SK"></vaadin-avatar>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="200" alt="Screenshot of vaadin-avatar">](https://vaadin.com/components/vaadin-avatar)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="132" alt="Screenshot of vaadin-avatar">](https://vaadin.com/docs/latest/ds/components/avatar)
 
 ## Installation
 
-Install `vaadin-avatar`:
+Install the component:
 
 ```sh
-npm i @vaadin/avatar --save
+npm i @vaadin/avatar
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/avatar/vaadin-avatar.js';
+import '@vaadin/avatar';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar/vaadin-avatar.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The components with the Lumo theme:
-
-  `theme/lumo/vaadin-avatar.js`
+```js
+import '@vaadin/avatar/theme/material/vaadin-avatar.js';
+```
 
-- The components with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-avatar.js`
+```js
+import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
+```
 
-- Alias for `theme/lumo/vaadin-avatar.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-avatar.js`
+```js
+import '@vaadin/avatar/src/vaadin-avatar.js';
+```
 
 ## Contributing
 
@@ -60,4 +60,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -36,18 +36,18 @@
     "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/item": "22.0.0-alpha9",
-    "@vaadin/list-box": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-overlay": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/component-base": "^22.0.0",
+    "@vaadin/item": "^22.0.0",
+    "@vaadin/list-box": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-material-styles": "^22.0.0",
+    "@vaadin/vaadin-overlay": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

package/src/vaadin-avatar.d.ts

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export interface AvatarI18n {
@@ -26,15 +27,17 @@ export interface AvatarI18n {
  * `abbr`    | The abbreviation element
  * `icon`    | The icon element
  *
- * The following attributes are exposed for styling:
+ * The following state attributes are available for styling:
  *
- * Attribute | Description
- * --------- | -----------
+ * Attribute         | Description
+ * ------------------|-------------
+ * `focus-ring`      | Set when the avatar is focused using the keyboard.
+ * `focused`         | Set when the avatar is focused.
  * `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  */
-declare class Avatar extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   /**
    * The path to the image
    */

package/src/vaadin-avatar.js

@@ -3,32 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import './vaadin-avatar-icons.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-avatar-icons.js';
-
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level Tab keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  (e) => {
-    keyboardActive = e.keyCode === 9;
-  },
-  true
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  true
-);
 
 /**
  * `<vaadin-avatar>` is a Web Component providing avatar displaying functionality.
@@ -46,19 +25,22 @@ window.addEventListener(
  * `abbr`    | The abbreviation element
  * `icon`    | The icon element
  *
- * The following attributes are exposed for styling:
+ * The following state attributes are available for styling:
  *
- * Attribute | Description
- * --------- | -----------
+ * Attribute         | Description
+ * ------------------|-------------
+ * `focus-ring`      | Set when the avatar is focused using the keyboard.
+ * `focused`         | Set when the avatar is focused.
  * `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @extends HTMLElement
+ * @mixes FocusMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -236,28 +218,6 @@ class Avatar extends ElementMixin(ThemableMixin(PolymerElement)) {
     if (!this.hasAttribute('tabindex')) {
       this.setAttribute('tabindex', '0');
     }
-
-    this.addEventListener('focusin', () => {
-      this.__setFocused(true);
-    });
-
-    this.addEventListener('focusout', () => {
-      this.__setFocused(false);
-    });
-  }
-
-  /** @private */
-  __setFocused(focused) {
-    if (focused) {
-      this.setAttribute('focused', '');
-
-      if (keyboardActive) {
-        this.setAttribute('focus-ring', '');
-      }
-    } else {
-      this.removeAttribute('focused');
-      this.removeAttribute('focus-ring');
-    }
   }
 
   /** @private */

package/theme/lumo/vaadin-avatar-styles.js

@@ -1,9 +1,9 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-avatar',

package/theme/material/vaadin-avatar-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-avatar',