@fluentui/web-components 3.0.0-beta.29 → 3.0.0-beta.30

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 13 Jun 2024 04:06:30 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jun 2024 04:06:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.30)
+
+Fri, 14 Jun 2024 04:06:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.29..@fluentui/web-components_v3.0.0-beta.30)
+
+### Changes
+
+- update avatar to use ElementInternals for role and states for color ([PR #31693](https://github.com/microsoft/fluentui/pull/31693) by 13071055+chrisdholt@users.noreply.github.com)
+
 ## [3.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.29)
 
-Thu, 13 Jun 2024 04:06:30 GMT 
+Thu, 13 Jun 2024 04:06:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.28..@fluentui/web-components_v3.0.0-beta.29)
 
 ### Changes

package/dist/dts/avatar/avatar.d.ts

@@ -5,6 +5,12 @@ import { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarSh
  * @public
  */
 export declare class Avatar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
      *
@@ -74,17 +80,31 @@ export declare class Avatar extends FASTElement {
      * @remarks
      * HTML Attribute: color
      */
-    color?: AvatarColor;
+    color?: AvatarColor | undefined;
     /**
      * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
      * Use this when a name is not available, but there is another unique identifier that can be used instead.
      */
     colorId?: AvatarNamedColor | undefined;
+    /**
+     * Holds the current color state
+     */
+    private currentColor;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
     /**
      * Sets the data-color attribute used for the visual presentation
      * @internal
      */
-    generateColor(): AvatarColor | void;
+    generateColor(): void;
     /**
      * Generates and sets the initials for the template
      * @internal

package/dist/esm/avatar/avatar.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { getInitials } from '../utils/get-initials.js';
+import { toggleState } from '../utils/element-internals.js';
 import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
 /**
  * The base class used for constructing a fluent-avatar custom element
@@ -8,19 +9,39 @@ import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
  */
 export class Avatar extends FASTElement {
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * The color when displaying either an icon or initials.
-         * * neutral (default): gray
-         * * brand: color from the brand palette
-         * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
-         * * [AvatarNamedColor]: a specific color from the theme
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
-         * @public
-         * @remarks
-         * HTML Attribute: color
+         * @internal
          */
-        this.color = 'neutral';
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'img';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        Observable.getNotifier(this).subscribe(this);
+        this.generateColor();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Observable.getNotifier(this).unsubscribe(this);
+    }
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source, propertyName) {
+        switch (propertyName) {
+            case 'color':
+            case 'colorId':
+                this.generateColor();
+                break;
+            default:
+                break;
+        }
     }
     /**
      * Sets the data-color attribute used for the visual presentation
@@ -28,12 +49,16 @@ export class Avatar extends FASTElement {
      */
     generateColor() {
         var _a, _b;
-        if (!this.color) {
-            return;
-        }
-        return this.color === AvatarColor.colorful
-            ? Avatar.colors[getHashCode((_b = (_a = this.colorId) !== null && _a !== void 0 ? _a : this.name) !== null && _b !== void 0 ? _b : '') % Avatar.colors.length]
-            : this.color;
+        const colorful = this.color === AvatarColor.colorful;
+        const prev = this.currentColor;
+        toggleState(this.elementInternals, `${prev}`, false);
+        this.currentColor =
+            colorful && this.colorId
+                ? this.colorId
+                : colorful
+                    ? Avatar.colors[getHashCode((_a = this.name) !== null && _a !== void 0 ? _a : '') % Avatar.colors.length]
+                    : (_b = this.color) !== null && _b !== void 0 ? _b : AvatarColor.neutral;
+        toggleState(this.elementInternals, `${this.currentColor}`, true);
     }
     /**
      * Generates and sets the initials for the template

package/dist/esm/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAGL,WAAW,EACX,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAuEE;;;;;;;;;;WAUG;QAEI,UAAK,GAAiB,SAAS,CAAC;IA+CzC,CAAC;IAtCC;;;OAGG;IACI,aAAa;;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QAED,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,QAAQ;YACxC,CAAC,CAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAiB;YACrG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjB,CAAC;IAED;;;OAGG;IACI,gBAAgB;;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChC,OAAO;SACR;QAED,wDAAwD;QACxD,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAE7B,OAAO,CACL,MAAA,IAAI,CAAC,QAAQ,mCACb,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAA8B,CAAC,CAAC,SAAS,KAAK,KAAK,EAAE;YAClG,gBAAgB,EAAE,IAAI,IAAI,EAAE;SAC7B,CAAC,CACH,CAAC;IACJ,CAAC;;AAED;;GAEG;AACW,aAAM,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAxHvD;IADC,IAAI;oCAC4B;AAUjC;IADC,IAAI;wCACgC;AAiBrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;oCACR;AAUrC;IADC,IAAI;qCACkC;AAavC;IADC,IAAI;sCACoC;AAUzC;IADC,IAAI;0CAC4C;AAcjD;IADC,IAAI;qCACkC;AAOvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;uCACc;AA0ChD,2BAA2B;AAC3B,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE;QACtD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;QACtB,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,iCAAiC;KACnF;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":"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"}

package/dist/esm/avatar/avatar.styles.js

@@ -220,157 +220,157 @@ export const styles = css `
     border-radius: ${borderRadiusXLarge};
   }
 
-  :host([data-color='brand']) {
+  :host(:is([state--brand], :state(brand))) {
     color: ${colorNeutralForegroundStaticInverted};
     background-color: ${colorBrandBackgroundStatic};
   }
 
-  :host([data-color='dark-red']) {
+  :host(:is([state--dark-red], :state(dark-red))) {
     color: ${colorPaletteDarkRedForeground2};
     background-color: ${colorPaletteDarkRedBackground2};
   }
 
-  :host([data-color='cranberry']) {
+  :host(:is([state--cranberry], :state(cranberry))) {
     color: ${colorPaletteCranberryForeground2};
     background-color: ${colorPaletteCranberryBackground2};
   }
 
-  :host([data-color='red']) {
+  :host(:is([state--red], :state(red))) {
     color: ${colorPaletteRedForeground2};
     background-color: ${colorPaletteRedBackground2};
   }
 
-  :host([data-color='pumpkin']) {
+  :host(:is([state--pumpkin], :state(pumpkin))) {
     color: ${colorPalettePumpkinForeground2};
     background-color: ${colorPalettePumpkinBackground2};
   }
 
-  :host([data-color='peach']) {
+  :host(:is([state--peach], :state(peach))) {
     color: ${colorPalettePeachForeground2};
     background-color: ${colorPalettePeachBackground2};
   }
 
-  :host([data-color='marigold']) {
+  :host(:is([state--marigold], :state(marigold))) {
     color: ${colorPaletteMarigoldForeground2};
     background-color: ${colorPaletteMarigoldBackground2};
   }
 
-  :host([data-color='gold']) {
+  :host(:is([state--gold], :state(gold))) {
     color: ${colorPaletteGoldForeground2};
     background-color: ${colorPaletteGoldBackground2};
   }
 
-  :host([data-color='brass']) {
+  :host(:is([state--brass], :state(brass))) {
     color: ${colorPaletteBrassForeground2};
     background-color: ${colorPaletteBrassBackground2};
   }
 
-  :host([data-color='brown']) {
+  :host(:is([state--brown], :state(brown))) {
     color: ${colorPaletteBrownForeground2};
     background-color: ${colorPaletteBrownBackground2};
   }
 
-  :host([data-color='forest']) {
+  :host(:is([state--forest], :state(forest))) {
     color: ${colorPaletteForestForeground2};
     background-color: ${colorPaletteForestBackground2};
   }
 
-  :host([data-color='seafoam']) {
+  :host(:is([state--seafoam], :state(seafoam))) {
     color: ${colorPaletteSeafoamForeground2};
     background-color: ${colorPaletteSeafoamBackground2};
   }
 
-  :host([data-color='dark-green']) {
+  :host(:is([state--dark-green], :state(dark-green))) {
     color: ${colorPaletteDarkGreenForeground2};
     background-color: ${colorPaletteDarkGreenBackground2};
   }
 
-  :host([data-color='light-teal']) {
+  :host(:is([state--light-teal], :state(light-teal))) {
     color: ${colorPaletteLightTealForeground2};
     background-color: ${colorPaletteLightTealBackground2};
   }
 
-  :host([data-color='teal']) {
+  :host(:is([state--teal], :state(teal))) {
     color: ${colorPaletteTealForeground2};
     background-color: ${colorPaletteTealBackground2};
   }
 
-  :host([data-color='steel']) {
+  :host(:is([state--steel], :state(steel))) {
     color: ${colorPaletteSteelForeground2};
     background-color: ${colorPaletteSteelBackground2};
   }
 
-  :host([data-color='blue']) {
+  :host(:is([state--blue], :state(blue))) {
     color: ${colorPaletteBlueForeground2};
     background-color: ${colorPaletteBlueBackground2};
   }
 
-  :host([data-color='royal-blue']) {
+  :host(:is([state--royal-blue], :state(royal-blue))) {
     color: ${colorPaletteRoyalBlueForeground2};
     background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
-  :host([data-color='cornflower']) {
+  :host(:is([state--cornflower], :state(cornflower))) {
     color: ${colorPaletteCornflowerForeground2};
     background-color: ${colorPaletteCornflowerBackground2};
   }
 
-  :host([data-color='navy']) {
+  :host(:is([state--navy], :state(navy))) {
     color: ${colorPaletteNavyForeground2};
     background-color: ${colorPaletteNavyBackground2};
   }
 
-  :host([data-color='lavender']) {
+  :host(:is([state--lavender], :state(lavender))) {
     color: ${colorPaletteLavenderForeground2};
     background-color: ${colorPaletteLavenderBackground2};
   }
 
-  :host([data-color='purple']) {
+  :host(:is([state--purple], :state(purple))) {
     color: ${colorPalettePurpleForeground2};
     background-color: ${colorPalettePurpleBackground2};
   }
 
-  :host([data-color='grape']) {
+  :host(:is([state--grape], :state(grape))) {
     color: ${colorPaletteGrapeForeground2};
     background-color: ${colorPaletteGrapeBackground2};
   }
 
-  :host([data-color='lilac']) {
+  :host(:is([state--lilac], :state(lilac))) {
     color: ${colorPaletteLilacForeground2};
     background-color: ${colorPaletteLilacBackground2};
   }
 
-  :host([data-color='pink']) {
+  :host(:is([state--pink], :state(pink))) {
     color: ${colorPalettePinkForeground2};
     background-color: ${colorPalettePinkBackground2};
   }
 
-  :host([data-color='magenta']) {
+  :host(:is([state--magenta], :state(magenta))) {
     color: ${colorPaletteMagentaForeground2};
     background-color: ${colorPaletteMagentaBackground2};
   }
 
-  :host([data-color='plum']) {
+  :host(:is([state--plum], :state(plum))) {
     color: ${colorPalettePlumForeground2};
     background-color: ${colorPalettePlumBackground2};
   }
 
-  :host([data-color='beige']) {
+  :host(:is([state--beige], :state(beige))) {
     color: ${colorPaletteBeigeForeground2};
     background-color: ${colorPaletteBeigeBackground2};
   }
 
-  :host([data-color='mink']) {
+  :host(:is([state--mink], :state(mink))) {
     color: ${colorPaletteMinkForeground2};
     background-color: ${colorPaletteMinkBackground2};
   }
 
-  :host([data-color='platinum']) {
+  :host(:is([state--platinum], :state(platinum))) {
     color: ${colorPalettePlatinumForeground2};
     background-color: ${colorPalettePlatinumBackground2};
   }
 
-  :host([data-color='anchor']) {
+  :host(:is([state--anchor], :state(anchor))) {
     color: ${colorPaletteAnchorForeground2};
     background-color: ${colorPaletteAnchorBackground2};
   }

package/dist/esm/avatar/avatar.template.js

@@ -18,10 +18,8 @@ const defaultIconTemplate = html `<svg
  */
 export function avatarTemplate() {
     return html `
-    <template role="img" data-color=${x => x.generateColor()}>
-      <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
-      <slot name="badge"></slot>
-    </template>
+    <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
+    <slot name="badge"></slot>
   `;
 }
 export const template = avatarTemplate();

package/dist/esm/avatar/avatar.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;OAYzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;sCACsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;cAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;GAGnF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;OAYzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;YACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;;GAEjF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

package/dist/web-components.d.ts

@@ -369,6 +369,12 @@ export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
  * @public
  */
 export declare class Avatar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
      *
@@ -438,17 +444,31 @@ export declare class Avatar extends FASTElement {
      * @remarks
      * HTML Attribute: color
      */
-    color?: AvatarColor;
+    color?: AvatarColor | undefined;
     /**
      * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
      * Use this when a name is not available, but there is another unique identifier that can be used instead.
      */
     colorId?: AvatarNamedColor | undefined;
+    /**
+     * Holds the current color state
+     */
+    private currentColor;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
     /**
      * Sets the data-color attribute used for the visual presentation
      * @internal
      */
-    generateColor(): AvatarColor | void;
+    generateColor(): void;
     /**
      * Generates and sets the initials for the template
      * @internal

package/dist/web-components.js

@@ -4377,6 +4377,20 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
+const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
+function toggleState(elementInternals, state, force) {
+  if (!CustomStatesSetSupported) {
+    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
+    return;
+  }
+  force = force ?? !elementInternals.states.has(state);
+  if (force) {
+    elementInternals.states.add(state);
+    return;
+  }
+  elementInternals.states.delete(state);
+}
+
 const AvatarNamedColor = {
   darkRed: "dark-red",
   cranberry: "cranberry",
@@ -4426,18 +4440,48 @@ var __decorateClass$o = (decorators, target, key, kind) => {
 };
 const _Avatar = class _Avatar extends FASTElement {
   constructor() {
-    super(...arguments);
-    this.color = "neutral";
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "img";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this).subscribe(this);
+    this.generateColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this).unsubscribe(this);
+  }
+  /**
+   * Handles changes to observable properties
+   * @internal
+   * @param source - the source of the change
+   * @param propertyName - the property name being changed
+   */
+  handleChange(source, propertyName) {
+    switch (propertyName) {
+      case "color":
+      case "colorId":
+        this.generateColor();
+        break;
+    }
   }
   /**
    * Sets the data-color attribute used for the visual presentation
    * @internal
    */
   generateColor() {
-    if (!this.color) {
-      return;
-    }
-    return this.color === AvatarColor.colorful ? _Avatar.colors[getHashCode(this.colorId ?? this.name ?? "") % _Avatar.colors.length] : this.color;
+    const colorful = this.color === AvatarColor.colorful;
+    const prev = this.currentColor;
+    toggleState(this.elementInternals, `${prev}`, false);
+    this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
+    toggleState(this.elementInternals, `${this.currentColor}`, true);
   }
   /**
    * Generates and sets the initials for the template
@@ -4492,11 +4536,11 @@ const animations = {
   nullEasing: curveLinear
 };
 const styles$q = css`
-  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
+  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host(:is([state--brand],:state(brand))){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(:is([state--dark-red],:state(dark-red))){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(:is([state--cranberry],:state(cranberry))){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(:is([state--red],:state(red))){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(:is([state--pumpkin],:state(pumpkin))){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(:is([state--peach],:state(peach))){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(:is([state--marigold],:state(marigold))){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(:is([state--gold],:state(gold))){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(:is([state--brass],:state(brass))){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(:is([state--brown],:state(brown))){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(:is([state--forest],:state(forest))){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(:is([state--seafoam],:state(seafoam))){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(:is([state--dark-green],:state(dark-green))){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(:is([state--light-teal],:state(light-teal))){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(:is([state--teal],:state(teal))){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(:is([state--steel],:state(steel))){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(:is([state--blue],:state(blue))){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(:is([state--royal-blue],:state(royal-blue))){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(:is([state--cornflower],:state(cornflower))){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(:is([state--navy],:state(navy))){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(:is([state--lavender],:state(lavender))){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(:is([state--purple],:state(purple))){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(:is([state--grape],:state(grape))){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(:is([state--lilac],:state(lilac))){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(:is([state--pink],:state(pink))){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(:is([state--magenta],:state(magenta))){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(:is([state--plum],:state(plum))){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(:is([state--beige],:state(beige))){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(:is([state--mink],:state(mink))){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(:is([state--platinum],:state(platinum))){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(:is([state--anchor],:state(anchor))){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
-  return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
+  return html`<slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
 }
 const template$s = avatarTemplate();
 
@@ -5185,20 +5229,6 @@ const definition$q = Button.compose({
 
 definition$q.define(FluentDesignSystem.registry);
 
-const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
-function toggleState(elementInternals, state, force) {
-  if (!CustomStatesSetSupported) {
-    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
-    return;
-  }
-  force = force ?? !elementInternals.states.has(state);
-  if (force) {
-    elementInternals.states.add(state);
-    return;
-  }
-  elementInternals.states.delete(state);
-}
-
 var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
 var __decorateClass$l = (decorators, target, key, kind) => {