@vaadin/avatar 25.0.0-alpha2 → 25.0.0-alpha20

package/package.json

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

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

@@ -0,0 +1,8 @@
+/**
+ * @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-base-styles.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * 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/styles/style-props.js';
+import '@vaadin/component-base/src/styles/user-colors.js';
+import { css } from 'lit';
+
+export const avatarStyles = css`
+  :host {
+    display: inline-block;
+    flex: none;
+    border-radius: 50%;
+    cursor: default;
+    color: var(--vaadin-avatar-color, var(--vaadin-text-color-secondary));
+    overflow: hidden;
+    --_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));
+    background-clip: content-box;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    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']) {
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  [part='icon'] {
+    height: 100%;
+    mask: var(--_vaadin-icon-user) no-repeat center / 74%;
+    background: currentColor;
+  }
+
+  [part='abbr'] {
+    font-size: 2.75em;
+    fill: currentColor;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([has-color-index]) {
+    background-color: var(--vaadin-avatar-user-color);
+    color: oklch(from var(--vaadin-avatar-user-color) clamp(0, (0.62 - l) * 1000, 1) 0 0);
+  }
+
+  :host([has-color-index])::before {
+    --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();
@@ -198,6 +194,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

@@ -4,16 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/tooltip/src/vaadin-tooltip.js';
-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';
 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-base-styles.js';
 import { AvatarMixin } from './vaadin-avatar-mixin.js';
-import { avatarStyles } from './vaadin-avatar-styles.js';
 
 /**
  * `<vaadin-avatar>` is a Web Component providing avatar displaying functionality.
@@ -38,6 +38,7 @@ import { avatarStyles } from './vaadin-avatar-styles.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.
  *
@@ -47,7 +48,7 @@ import { avatarStyles } from './vaadin-avatar-styles.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar';
   }
@@ -56,6 +57,12 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
     return avatarStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`
@@ -66,20 +73,10 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
         @error="${this.__onImageLoadError}"
         draggable="false"
       />
-      <svg
-        part="icon"
-        ?hidden="${!this.__iconVisible}"
-        id="avatar-icon"
-        viewBox="-50 -50 100 100"
-        preserveAspectRatio="xMidYMid meet"
-        aria-hidden="true"
-      >
-        <text dy=".35em" text-anchor="middle">&#xea01;</text>
-      </svg>
+      <div part="icon" ?hidden="${!this.__iconVisible}" aria-hidden="true"></div>
       <svg
         part="abbr"
         ?hidden="${!this.__abbrVisible}"
-        id="avatar-abbr"
         viewBox="-50 -50 100 100"
         preserveAspectRatio="xMidYMid meet"
         aria-hidden="true"

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-alpha2",
+  "version": "25.0.0-alpha20",
   "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-alpha2",
+  "version": "25.0.0-alpha20",
   "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/vaadin-avatar-icons.js

@@ -1,19 +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/
- */
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: 'vaadin-avatar-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQAAAsAAAAABnwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAQwAAAFZAIUmEY21hcAAAAYgAAABLAAABcOspwa1nbHlmAAAB1AAAAEUAAABMYO4o1WhlYWQAAAIcAAAALgAAADYYaAmGaGhlYQAAAkwAAAAdAAAAJAZsA1VobXR4AAACbAAAAAgAAAAIA+gAAGxvY2EAAAJ0AAAABgAAAAYAJgAAbWF4cAAAAnwAAAAeAAAAIAEOACFuYW1lAAACnAAAAUIAAAKavFDYrHBvc3QAAAPgAAAAHQAAAC52hGZ4eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT8wjiBgZWBgamKaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcXjG+YmQO+p/FEMUcxDANKMwIkgMADiUMJQB4nGNgYGBlYGBgBmIdIGZhYGAMYWBkAAE/oCgjWJyZgQsszsKgBFbDAhJ/xfj/P4wE8lnAJAMjG8Mo4AGTMlAeOKwgmIERADU0CX0AeJxjYGIAAmYJpkgGHgYRBgZGJT1GEztGIzlGET5GKEuU8YuSpZKSpQuI+LfLv21emz9jHJQPJP7dsUywsEiwBACG8g9CAAAAeJxjYGRgYADicIOnh+P5bb4ycDO/AIow3JZ4rIJMM0swRQIpDgYmEA8AKwgJOwAAeJxjYGRgYA76nwUkXzAAAbMEAyMDKmACAE2GAskAAAAAAAAAA+gAAAAAAAAAJgAAeJxjYGRgYGBiEAViBjCLgYELCBkY/oP5DAAKuwEwAAB4nI2Qu07DMBSG//SGaCWEhMSAGDx1QU0vYyemdmDrUDEhuamTpkriyHEj9RF4B56Bh2Bg5mmY+8d4Qh3qo9jf+c45thQAt/hGgGYFuHN7s1q4YvbHbdKD5w555LmLAZ499+hfPPfxhDfPA/p33hB0rmmG+PDcwg2+PLfpfzx3yL+eu7gPHj33MAxmnvtYB6+eB/SftZTbtBjJWlppRmmki2qlkkMmzZnKGbVWpkp1Iabh5Ex1qQplpFVbsTmKqk5m1sYiNjoXC11YlWValEbvVWTDnbXlfDyOvQ8jnaOGZGyRouCfky63/AyzFBE0fYUVFBIckLnKZTOXda15s+GZulxgihCTC2eXnC3cfFNV7BfY4Mi9eT3BjNYiZh6zRyMnLdxs050xNE3panuaiD7Ezk2VmGPMiP/1h+71/ATcWYAhAAB4nGNgYoAALgbsgImRiZGZgaW0OLWIgQEACl4B2QAAAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);

package/src/vaadin-avatar-styles.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * 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';
-
-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: var(--vaadin-focus-ring-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/theme/lumo/vaadin-avatar-styles.d.ts

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

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

@@ -1,80 +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/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'],
-    [part='abbr'] {
-      fill: currentColor;
-    }
-
-    [part='abbr'] {
-      font-family: var(--lumo-font-family);
-      font-size: 2.4375em;
-      font-weight: 500;
-    }
-
-    :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';