@momentum-design/components 0.120.30 → 0.120.31

package/dist/components/avatar/avatar.component.d.ts

@@ -37,7 +37,6 @@ declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  *
- * @csspart content - The main content of the avatar.
  * @csspart photo - The photo of the avatar.
  * @csspart presence - The presence indicator of the avatar.
  * @csspart loading-wrapper - The wrapper for the loading indicator.
@@ -48,6 +47,7 @@ declare class Avatar extends Avatar_base {
      * @internal
      */
     private isPhotoLoaded;
+    connectedCallback(): void;
     /**
      * @internal
      * The avatar presence will be hidden if the avatar type is COUNTER.

package/dist/components/avatar/avatar.component.js

@@ -51,7 +51,6 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  *
- * @csspart content - The main content of the avatar.
  * @csspart photo - The photo of the avatar.
  * @csspart presence - The presence indicator of the avatar.
  * @csspart loading-wrapper - The wrapper for the loading indicator.
@@ -65,6 +64,10 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
          */
         this.isPhotoLoaded = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-hidden', 'true');
+    }
     /**
      * @internal
      * The avatar presence will be hidden if the avatar type is COUNTER.
@@ -292,10 +295,8 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     render() {
         const type = this.getTypeBasedOnInputs();
         return html `
-      <div part="content" aria-hidden="true">
-        ${this.getPhotoPlaceHolderContent(type)} ${this.getTemplateBasedOnType(type)} ${this.getLoadingContent()}
-        ${this.getPresenceTemplateBasedOnType(type)}
-      </div>
+      ${this.getPhotoPlaceHolderContent(type)} ${this.getTemplateBasedOnType(type)} ${this.getLoadingContent()}
+      ${this.getPresenceTemplateBasedOnType(type)}
     `;
     }
 }

package/dist/components/avatar/avatar.styles.js

@@ -10,31 +10,31 @@ const styles = [
       --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
       --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
     }
-    :host([size='124'])::part(content) {
+    :host([size='124']) {
       width: 7.75rem;
       height: 7.75rem;
     }
-    :host([size='88'])::part(content) {
+    :host([size='88']) {
       width: 5.5rem;
       height: 5.5rem;
     }
-    :host([size='72'])::part(content) {
+    :host([size='72']) {
       width: 4.5rem;
       height: 4.5rem;
     }
-    :host([size='64'])::part(content) {
+    :host([size='64']) {
       width: 4rem;
       height: 4rem;
     }
-    :host([size='48'])::part(content) {
+    :host([size='48']) {
       width: 3rem;
       height: 3rem;
     }
-    :host([size='32'])::part(content) {
+    :host([size='32']) {
       width: 2rem;
       height: 2rem;
     }
-    :host([size='24'])::part(content) {
+    :host([size='24']) {
       width: 1.5rem;
       height: 1.5rem;
     }
@@ -57,7 +57,7 @@ const styles = [
     :host([size='24'])::part(loader) {
       transform: scale(0.3);
     }
-    :host::part(content) {
+    :host {
       width: 2rem;
       height: 2rem;
       background-color: var(--mdc-avatar-default-background-color);
@@ -153,7 +153,7 @@ const styles = [
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
-      :host::part(content) {
+      :host {
         outline: 0.125rem solid;
       }
     }