@vaadin/avatar 25.0.0-alpha9 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -38,22 +35,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/tooltip": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/tooltip": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

package/src/styles/vaadin-avatar-base-styles.js

@@ -3,7 +3,8 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
+import '@vaadin/component-base/src/styles/user-colors.js';
 import { css } from 'lit';
 
 export const avatarStyles = css`
@@ -12,11 +13,11 @@ export const avatarStyles = css`
     flex: none;
     border-radius: 50%;
     cursor: default;
-    color: var(--vaadin-avatar-color, var(--vaadin-color-subtle));
-    line-height: 0;
+    color: var(--vaadin-avatar-text-color, var(--vaadin-text-color-secondary));
     overflow: hidden;
-    height: var(--vaadin-avatar-size, 32px);
-    width: var(--vaadin-avatar-size, 32px);
+    --_size: var(--vaadin-avatar-size, calc(1lh + var(--vaadin-padding-xs) * 2));
+    height: var(--_size);
+    width: var(--_size);
     border: var(--vaadin-focus-ring-width) solid transparent;
     margin: calc(var(--vaadin-focus-ring-width) * -1);
     background: var(--vaadin-avatar-background, var(--vaadin-background-container-strong));
@@ -26,6 +27,17 @@ export const avatarStyles = css`
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     position: relative;
+    font-weight: var(--vaadin-avatar-font-weight, 400);
+    font-size: var(--vaadin-avatar-font-size, inherit);
+  }
+
+  /* Overlay border on top of image and icon as well */
+  :host::before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    border-radius: inherit;
+    border: var(--vaadin-avatar-border-width, 1px) solid var(--vaadin-avatar-border-color, transparent);
   }
 
   :host([role='button']) {
@@ -60,15 +72,22 @@ export const avatarStyles = css`
   }
 
   :host([has-color-index])::before {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border-radius: inherit;
-    border: 2px solid var(--vaadin-avatar-user-color);
+    --vaadin-avatar-border-width: 2px;
+    --vaadin-avatar-border-color: var(--vaadin-avatar-user-color);
   }
 
   :host([focus-ring]) {
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
     outline-offset: calc((var(--vaadin-focus-ring-width)) * -1);
   }
+
+  @media (forced-colors: active) {
+    :host {
+      border-color: Canvas !important;
+    }
+
+    [part='icon'] {
+      background: CanvasText !important;
+    }
+  }
 `;

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

@@ -48,7 +48,7 @@ export declare class AvatarMixinClass {
    * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   * ```
+   * ```js
    * {
    *   // Translation of the anonymous user avatar tooltip.
    *   anonymous: 'anonymous'

package/src/vaadin-avatar-mixin.js

@@ -96,7 +96,7 @@ export const AvatarMixin = (superClass) =>
      * just the individual properties you want to change.
      *
      * The object has the following JSON structure and default values:
-     * ```
+     * ```js
      * {
      *   // Translation of the anonymous user avatar tooltip.
      *   anonymous: 'anonymous'
@@ -124,10 +124,6 @@ export const AvatarMixin = (superClass) =>
         this.setAttribute('role', 'img');
       }
 
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', '0');
-      }
-
       // Should set `anonymous` if name / abbr is not provided
       if (!this.name && !this.abbr) {
         this.__setTooltip();
@@ -137,20 +133,11 @@ export const AvatarMixin = (superClass) =>
     /** @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`);
-        }
+        this.setAttribute('has-color-index', '');
+        this.style.setProperty('--vaadin-avatar-user-color', `var(--vaadin-user-color-${index})`);
       } else {
         this.removeAttribute('has-color-index');
+        this.style.removeProperty('--vaadin-avatar-user-color');
       }
     }
 
@@ -198,6 +185,8 @@ export const AvatarMixin = (superClass) =>
 
     /** @private */
     __withTooltipChanged(withTooltip, oldWithTooltip) {
+      this.toggleAttribute('has-tooltip', withTooltip);
+
       if (withTooltip) {
         // Create and attach tooltip
         const tooltipNode = document.createElement('vaadin-tooltip');

package/src/vaadin-avatar.d.ts

@@ -32,6 +32,7 @@ export { AvatarI18n } from './vaadin-avatar-mixin.js';
  * `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.
+ * `has-tooltip`     | Set when the element has a slotted tooltip.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */

package/src/vaadin-avatar.js

@@ -12,7 +12,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { avatarStyles } from './styles/vaadin-avatar-core-styles.js';
+import { avatarStyles } from './styles/vaadin-avatar-base-styles.js';
 import { AvatarMixin } from './vaadin-avatar-mixin.js';
 
 /**
@@ -38,6 +38,7 @@ import { AvatarMixin } from './vaadin-avatar-mixin.js';
  * `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.
+ * `has-tooltip`     | Set when the element has a slotted tooltip.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/vaadin-avatar.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-avatar.js';
+import './src/vaadin-avatar.js';
 export * from './src/vaadin-avatar.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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.",
+          "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`has-tooltip`     | Set when the element has a slotted tooltip.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "img",
@@ -81,7 +81,7 @@
             "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```",
+                "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```js\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
                 "value": {
                   "type": [
                     "AvatarI18n"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "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.",
+          "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`has-tooltip`     | Set when the element has a slotted tooltip.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -28,7 +28,7 @@
             },
             {
               "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```",
+              "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```js\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
               "value": {
                 "kind": "expression"
               }

package/src/styles/vaadin-avatar-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const avatarStyles: CSSResult;

package/src/styles/vaadin-avatar-core-styles.js

@@ -1,58 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const avatarStyles = css`
-  :host {
-    position: relative;
-    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: var(--vaadin-focus-ring-width, 2px);
-  }
-
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  [part='icon'] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    font-size: var(--vaadin-avatar-size, 64px);
-    line-height: 1;
-  }
-
-  [part='abbr'] {
-    font-size: 2.2em;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
-  }
-
-  :host([has-color-index]) {
-    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/theme/lumo/vaadin-avatar-styles.d.ts

@@ -1,7 +0,0 @@
-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/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/user-colors.js';

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

@@ -1,83 +0,0 @@
-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/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/user-colors.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const globalStyle = document.createElement('style');
-globalStyle.textContent = 'html { --vaadin-avatar-size: var(--lumo-size-m); }';
-document.head.appendChild(globalStyle);
-
-registerStyles(
-  'vaadin-avatar',
-  css`
-    :host {
-      color: var(--lumo-secondary-text-color);
-      background-color: var(--lumo-contrast-10pct);
-      border-radius: 50%;
-      outline: none;
-      cursor: default;
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    :host([has-color-index]) {
-      color: var(--lumo-base-color);
-    }
-
-    :host([focus-ring]) {
-      border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-    }
-
-    [part='icon']::before {
-      content: var(--lumo-icons-user);
-      font-family: lumo-icons;
-      font-size: 0.9em;
-    }
-
-    [part='abbr'] {
-      font-family: var(--lumo-font-family);
-      font-size: 2.4375em;
-      font-weight: 500;
-      fill: currentColor;
-    }
-
-    :host([theme~='xlarge']) [part='abbr'] {
-      font-size: 2.5em;
-    }
-
-    :host([theme~='large']) [part='abbr'] {
-      font-size: 2.375em;
-    }
-
-    :host([theme~='small']) [part='abbr'] {
-      font-size: 2.75em;
-    }
-
-    :host([theme~='xsmall']) [part='abbr'] {
-      font-size: 3em;
-    }
-
-    :host([theme~='xlarge']) {
-      --vaadin-avatar-size: var(--lumo-size-xl);
-    }
-
-    :host([theme~='large']) {
-      --vaadin-avatar-size: var(--lumo-size-l);
-    }
-
-    :host([theme~='small']) {
-      --vaadin-avatar-size: var(--lumo-size-s);
-    }
-
-    :host([theme~='xsmall']) {
-      --vaadin-avatar-size: var(--lumo-size-xs);
-    }
-  `,
-  { moduleId: 'lumo-avatar' },
-);

package/theme/lumo/vaadin-avatar.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
-import './vaadin-avatar-styles.js';
-import '../../src/vaadin-avatar.js';

package/theme/lumo/vaadin-avatar.js

@@ -1,3 +0,0 @@
-import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
-import './vaadin-avatar-styles.js';
-import '../../src/vaadin-avatar.js';