[chore]: create base class for avatar and remove style and layout specific api

change/@fluentui-web-components-8019914d-618b-49e1-88de-c5249d5206f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: create avatar base class to abstract style specfic api",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -199,29 +199,9 @@ export const AnchorTarget: {
 export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 
 // @public
-export class Avatar extends FASTElement {
-    constructor();
-    active?: AvatarActive | undefined;
+export class Avatar extends BaseAvatar {
     appearance?: AvatarAppearance | undefined;
-    color?: AvatarColor | undefined;
-    colorId?: AvatarNamedColor | undefined;
-    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
-    // (undocumented)
-    connectedCallback(): void;
-    // (undocumented)
-    disconnectedCallback(): void;
-    // @internal
-    elementInternals: ElementInternals;
-    // @internal
-    generateColor(): void;
-    // @internal
-    generateInitials(): string | void;
-    // @internal
-    handleChange(source: any, propertyName: string): void;
-    initials?: string | undefined;
-    name?: string | undefined;
     shape?: AvatarShape | undefined;
-    size?: AvatarSize | undefined;
 }
 
 // Warning: (ae-missing-release-tag) "AvatarActive" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -456,6 +436,30 @@ export const BadgeStyles: ElementStyles;
 // @public (undocumented)
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
+// @public
+export class BaseAvatar extends FASTElement {
+    constructor();
+    active?: AvatarActive | undefined;
+    color?: AvatarColor | undefined;
+    colorId?: AvatarNamedColor | undefined;
+    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    // @internal
+    generateColor(): void;
+    // @internal
+    generateInitials(): string | void;
+    // @internal
+    handleChange(source: any, propertyName: string): void;
+    initials?: string | undefined;
+    name?: string | undefined;
+    size?: AvatarSize | undefined;
+}
+
 // @public
 export class BaseButton extends FASTElement {
     constructor();

packages/web-components/src/avatar/avatar.ts

@@ -14,7 +14,7 @@ import {
  * The base class used for constructing a fluent-avatar custom element
  * @public
  */
-export class Avatar extends FASTElement {
+export class BaseAvatar extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -59,16 +59,6 @@ export class Avatar extends FASTElement {
   @attr({ converter: nullableNumberConverter })
   public size?: AvatarSize | undefined;
 
-  /**
-   * The avatar can have a circular or square shape.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: shape
-   */
-  @attr
-  public shape?: AvatarShape | undefined;
-
   /**
    * Optional activity indicator
    * * active: the avatar will be decorated according to activeAppearance
@@ -82,16 +72,6 @@ export class Avatar extends FASTElement {
   @attr
   public active?: AvatarActive | undefined;
 
-  /**
-   * The appearance when `active="active"`
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: appearance
-   */
-  @attr
-  public appearance?: AvatarAppearance | undefined;
-
   /**
    * The color when displaying either an icon or initials.
    * * neutral (default): gray
@@ -201,6 +181,34 @@ export class Avatar extends FASTElement {
   public static colors = Object.values(AvatarNamedColor);
 }
 
+/**
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Avatar extends BaseAvatar {
+  /**
+   * The avatar can have a circular or square shape.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: shape
+   */
+  @attr
+  public shape?: AvatarShape | undefined;
+
+  /**
+   * The appearance when `active="active"`
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr
+  public appearance?: AvatarAppearance | undefined;
+}
+
 // copied from React avatar
 const getHashCode = (str: string): number => {
   let hashCode = 0;

packages/web-components/src/avatar/index.ts

@@ -1,4 +1,4 @@
-export { Avatar } from './avatar.js';
+export { BaseAvatar, Avatar } from './avatar.js';
 export {
   AvatarActive,
   AvatarAppearance,

packages/web-components/src/index.ts

@@ -26,6 +26,7 @@ export {
   AvatarSize,
   AvatarStyles,
   AvatarTemplate,
+  BaseAvatar,
 } from './avatar/index.js';
 export {
   Badge,