[Avatar] Simplify HTML & CSS, drop base (rel #207)

docs/docs/components/avatar.md

@@ -97,7 +97,7 @@ You can group avatars with a few lines of CSS.
     margin-left: calc(-1 * var(--wa-space-m));
   }
 
-  .avatar-group wa-avatar::part(base) {
+  .avatar-group wa-avatar {
     border: solid 2px var(--wa-color-surface-default);
   }
 </style>

src/components/avatar/avatar.css

@@ -3,10 +3,6 @@
   --content-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
-  display: inline-block;
-}
-
-.avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -20,19 +16,15 @@
   user-select: none;
   -webkit-user-select: none;
   vertical-align: middle;
-}
-
-:host([shape='circle']) {
   border-radius: var(--wa-border-radius-circle);
 }
 
-.rounded,
-.rounded .image {
-  border-radius: var(--wa-border-radius-s);
+:host([shape='square']) {
+  border-radius: 0;
 }
 
-.square {
-  border-radius: 0;
+:host([shape='rounded']) {
+  border-radius: var(--wa-border-radius-s);
 }
 
 .icon {
@@ -59,4 +51,5 @@
   height: 100%;
   object-fit: cover;
   overflow: hidden;
+  border-radius: inherit;
 }

src/components/avatar/avatar.ts

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -69,6 +68,7 @@ export default class WaAvatar extends WebAwesomeElement {
         src="${this.image}"
         loading="${this.loading}"
         alt=""
+        aria-label=${this.label}
         @error="${this.handleImageLoadError}"
       />
     `;
@@ -76,32 +76,18 @@ export default class WaAvatar extends WebAwesomeElement {
     let avatarWithoutImage = html``;
 
     if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="initials">${this.initials}</div>`;
+      avatarWithoutImage = html`<div part="initials" class="initials" role="img" aria-label=${this.label}>
+        ${this.initials}
+      </div>`;
     } else {
       avatarWithoutImage = html`
-        <div part="icon" class="icon" aria-hidden="true">
-          <slot name="icon">
-            <wa-icon name="user" library="system" variant="solid"></wa-icon>
-          </slot>
-        </div>
+        <slot name="icon" part="icon" class="icon" role="img" aria-label=${this.label}>
+          <wa-icon name="user" library="system" variant="solid"></wa-icon>
+        </slot>
       `;
     }
 
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          avatar: true,
-          circle: this.shape === 'circle',
-          rounded: this.shape === 'rounded',
-          square: this.shape === 'square',
-        })}
-        role="img"
-        aria-label=${this.label}
-      >
-        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
-      </div>
-    `;
+    return html` ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage} `;
   }
 }