@fluentui/web-components 3.0.0-beta.89 → 3.0.0-beta.90

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 09 Apr 2025 04:06:30 GMT and should not be manually modified.
+This log was last generated on Thu, 10 Apr 2025 04:07:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.90](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.90)
+
+Thu, 10 Apr 2025 04:07:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.89..@fluentui/web-components_v3.0.0-beta.90)
+
+### Changes
+
+- feat: remove use of custom states for presentational styling ([PR #34168](https://github.com/microsoft/fluentui/pull/34168) by 13071055+chrisdholt@users.noreply.github.com)
+- fix typo in avatar styles for beige color ([PR #34221](https://github.com/microsoft/fluentui/pull/34221) by 13071055+chrisdholt@users.noreply.github.com)
+
 ## [3.0.0-beta.89](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.89)
 
-Wed, 09 Apr 2025 04:06:30 GMT 
+Wed, 09 Apr 2025 04:06:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.88..@fluentui/web-components_v3.0.0-beta.89)
 
 ### Changes

package/dist/dts/accordion-item/accordion-item.base.d.ts

@@ -36,12 +36,6 @@ export declare class BaseAccordionItem extends FASTElement {
      * HTML attribute: expanded
      */
     expanded: boolean;
-    /**
-     * Handles expanded changes
-     * @param prev - previous value
-     * @param next - next value
-     */
-    expandedChanged(prev: boolean, next: boolean): void;
     /**
      * Disables an accordion item
      *
@@ -50,12 +44,6 @@ export declare class BaseAccordionItem extends FASTElement {
      * HTML attribute: disabled
      */
     disabled: boolean;
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     */
-    disabledChanged(prev: boolean, next: boolean): void;
     /**
      * The item ID
      *

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -26,12 +26,6 @@ export declare class AccordionItem extends BaseAccordionItem {
      * HTML Attribute: size
      */
     size?: AccordionItemSize;
-    /**
-     * Handles changes to size attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    sizeChanged(prev: AccordionItemSize | undefined, next: AccordionItemSize | undefined): void;
     /**
      * Sets expand and collapsed icon position.
      *
@@ -40,12 +34,6 @@ export declare class AccordionItem extends BaseAccordionItem {
      * HTML Attribute: marker-position
      */
     markerPosition?: AccordionItemMarkerPosition;
-    /**
-     * Handles changes to marker-position attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    markerPositionChanged(prev: AccordionItemMarkerPosition | undefined, next: AccordionItemMarkerPosition | undefined): void;
     /**
      * Sets the width of the focus state.
      *
@@ -54,12 +42,6 @@ export declare class AccordionItem extends BaseAccordionItem {
      * HTML Attribute: block
      */
     block: boolean;
-    /**
-     * Handles changes to block attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    blockChanged(prev: boolean, next: boolean): void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

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

@@ -1,5 +1,4 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { type AvatarActive } from './avatar.options.js';
 /**
  * The base class used for constructing a fluent-avatar custom element
  * @public
@@ -27,16 +26,5 @@ export declare class BaseAvatar extends FASTElement {
      * HTML Attribute: name
      */
     initials?: string | undefined;
-    /**
-     * Optional activity indicator
-     * * active: the avatar will be decorated according to activeAppearance
-     * * inactive: the avatar will be reduced in size and partially transparent
-     * * undefined: normal display
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: active
-     */
-    active?: AvatarActive | undefined;
     constructor();
 }

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

@@ -1,5 +1,5 @@
 import { BaseAvatar } from './avatar.base.js';
-import { type AvatarAppearance, AvatarColor, AvatarNamedColor, type AvatarShape, type AvatarSize } from './avatar.options.js';
+import { type AvatarActive, type AvatarAppearance, AvatarColor, AvatarNamedColor, type AvatarShape, type AvatarSize } from './avatar.options.js';
 /**
  * An Avatar Custom HTML Element.
  * Based on BaseAvatar and includes style and layout specific attributes
@@ -7,6 +7,17 @@ import { type AvatarAppearance, AvatarColor, AvatarNamedColor, type AvatarShape,
  * @public
  */
 export declare class Avatar extends BaseAvatar {
+    /**
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * undefined: normal display
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: active
+     */
+    active?: AvatarActive | undefined;
     /**
      * The avatar can have a circular or square shape.
      *
@@ -79,7 +90,7 @@ export declare class Avatar extends BaseAvatar {
     /**
      * An array of the available Avatar named colors
      */
-    static colors: ("anchor" | "beige" | "blue" | "brass" | "brown" | "cornflower" | "cranberry" | "dark-green" | "dark-red" | "forest" | "gold" | "grape" | "lavender" | "light-teal" | "lilac" | "magenta" | "marigold" | "mink" | "navy" | "peach" | "pink" | "platinum" | "plum" | "pumpkin" | "purple" | "red" | "royal-blue" | "seafoam" | "steel" | "teal")[];
+    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")[];
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/dts/badge/badge.d.ts

@@ -6,12 +6,6 @@ import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.opti
  * @public
  */
 export declare class Badge extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *
@@ -20,12 +14,6 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance: BadgeAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: BadgeAppearance | undefined, next: BadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -34,12 +22,6 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: color
      */
     color: BadgeColor;
-    /**
-     * Handles changes to color attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    colorChanged(prev: BadgeColor | undefined, next: BadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -48,12 +30,6 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: BadgeShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: BadgeShape | undefined, next: BadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -62,12 +38,6 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: size
      */
     size?: BadgeSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: BadgeSize | undefined, next: BadgeSize | undefined): void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

package/dist/dts/button/button.d.ts

@@ -16,12 +16,6 @@ export declare class Button extends BaseButton {
      * HTML Attribute: `appearance`
      */
     appearance?: ButtonAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined): void;
     /**
      * The shape of the button.
      *
@@ -30,12 +24,6 @@ export declare class Button extends BaseButton {
      * HTML Attribute: `shape`
      */
     shape?: ButtonShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined): void;
     /**
      * The size of the button.
      *
@@ -44,12 +32,6 @@ export declare class Button extends BaseButton {
      * HTML Attribute: `size`
      */
     size?: ButtonSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined): void;
     /**
      * Indicates that the button should only display as an icon with no text content.
      *
@@ -58,12 +40,6 @@ export declare class Button extends BaseButton {
      * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
-    /**
-     * Handles changes to icon only custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    iconOnlyChanged(prev: boolean, next: boolean): void;
 }
 /**
  * @internal

package/dist/dts/checkbox/checkbox.d.ts

@@ -34,14 +34,6 @@ export declare class Checkbox extends BaseCheckbox {
      * HTML Attribute: `shape`
      */
     shape?: CheckboxShape;
-    /**
-     * Applies shape states when the `shape` property changes.
-     *
-     * @param prev - the previous shape value
-     * @param next - the next shape value
-     * @internal
-     */
-    protected shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     /**
      * Indicates the size of the control.
      *
@@ -50,14 +42,6 @@ export declare class Checkbox extends BaseCheckbox {
      * HTML Attribute: `size`
      */
     size?: CheckboxSize;
-    /**
-     * Applies size states when the `size` property changes.
-     *
-     * @param prev - the previous state
-     * @param next - the next state
-     * @internal
-     */
-    protected sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
     constructor();
     /**
      * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.

package/dist/dts/counter-badge/counter-badge.d.ts

@@ -20,12 +20,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance?: CounterBadgeAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: CounterBadgeAppearance | undefined, next: CounterBadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -34,12 +28,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: color
      */
     color?: CounterBadgeColor;
-    /**
-     * Handles changes to color attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    colorChanged(prev: CounterBadgeColor | undefined, next: CounterBadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -48,12 +36,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: CounterBadgeShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: CounterBadgeShape | undefined, next: CounterBadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -62,12 +44,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: size
      */
     size?: CounterBadgeSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: CounterBadgeSize | undefined, next: CounterBadgeSize | undefined): void;
     /**
      * The count the badge should have.
      *
@@ -102,12 +78,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: dot
      */
     dot: boolean;
-    /**
-     * Handles changes to dot attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    dotChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * @internal
      * Function to set the count

package/dist/dts/divider/divider.d.ts

@@ -13,34 +13,16 @@ export declare class Divider extends BaseDivider {
      * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
      */
     alignContent?: DividerAlignContent;
-    /**
-     * Handles changes to align-content attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    alignContentChanged(prev: DividerAlignContent | undefined, next: DividerAlignContent | undefined): void;
     /**
      * @public
      * @remarks
      * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
      */
     appearance?: DividerAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: DividerAppearance | undefined, next: DividerAppearance | undefined): void;
     /**
      * @public
      * @remarks
      * Adds padding to the beginning and end of the divider.
      */
     inset?: boolean;
-    /**
-     * Handles changes to inset custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    insetChanged(prev: boolean, next: boolean): void;
 }

package/dist/dts/dropdown/dropdown.d.ts

@@ -18,14 +18,6 @@ export declare class Dropdown extends BaseDropdown {
      * HTML Attribute: `appearance`
      */
     appearance: DropdownAppearance;
-    /**
-     * Swaps appearance states when the appearance property changes.
-     *
-     * @param prev - the previous appearance state
-     * @param next - the current appearance state
-     * @internal
-     */
-    appearanceChanged(prev: DropdownAppearance | undefined, next: DropdownAppearance | undefined): void;
     /**
      * The size of the dropdown.
      * @public
@@ -33,12 +25,4 @@ export declare class Dropdown extends BaseDropdown {
      * HTML Attribute: `size`
      */
     size?: DropdownSize;
-    /**
-     * Swaps size states when the size property changes.
-     *
-     * @param prev - the previous size state
-     * @param next - the current size state
-     * @internal
-     */
-    sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void;
 }

package/dist/dts/image/image.d.ts

@@ -5,12 +5,6 @@ import { ImageFit, ImageShape } from './image.options.js';
  * @public
  */
 export declare class Image extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
     /**
      * Image layout
      *
@@ -19,12 +13,6 @@ export declare class Image extends FASTElement {
      * HTML attribute: block.
      */
     block?: boolean;
-    /**
-     * Handles changes to block custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    blockChanged(prev: boolean, next: boolean): void;
     /**
      * Image border
      *
@@ -33,12 +21,6 @@ export declare class Image extends FASTElement {
      * HTML attribute: border.
      */
     bordered?: boolean;
-    /**
-     * Handles changes to bordered custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    borderedChanged(prev: boolean, next: boolean): void;
     /**
      * Image shadow
      *
@@ -47,12 +29,6 @@ export declare class Image extends FASTElement {
      * HTML attribute: shadow.
      */
     shadow?: boolean;
-    /**
-     * Handles changes to shadow custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shadowChanged(prev: boolean, next: boolean): void;
     /**
      * Image fit
      *
@@ -61,12 +37,6 @@ export declare class Image extends FASTElement {
      * HTML attribute: fit.
      */
     fit?: ImageFit;
-    /**
-     * Handles changes to fit attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    fitChanged(prev: ImageFit | undefined, next: ImageFit | undefined): void;
     /**
      * Image shape
      *
@@ -75,10 +45,4 @@ export declare class Image extends FASTElement {
      * HTML attribute: shape.
      */
     shape?: ImageShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: ImageShape | undefined, next: ImageShape | undefined): void;
 }

package/dist/dts/label/label.d.ts

@@ -5,12 +5,6 @@ import { LabelSize, LabelWeight } from './label.options.js';
  * @public
  */
 export declare class Label extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
     /**
      * 	Specifies font size of a label
      *
@@ -19,12 +13,6 @@ export declare class Label extends FASTElement {
      * HTML Attribute: size
      */
     size?: LabelSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: LabelSize | undefined, next: LabelSize | undefined): void;
     /**
      * 	Specifies font weight of a label
      *
@@ -33,12 +21,6 @@ export declare class Label extends FASTElement {
      * HTML Attribute: weight
      */
     weight?: LabelWeight;
-    /**
-     * Handles changes to weight attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    weightChanged(prev: LabelWeight | undefined, next: LabelWeight | undefined): void;
     /**
      * 	Specifies styles for label when associated input is disabled
      *
@@ -47,12 +29,6 @@ export declare class Label extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
-    /**
-     * Handles changes to disabled attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * 	Specifies styles for label when associated input is a required field
      *

package/dist/dts/link/link.d.ts

@@ -19,12 +19,6 @@ export declare class Link extends BaseAnchor {
      * HTML Attribute: `appearance`
      */
     appearance?: LinkAppearance | undefined;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: LinkAppearance | undefined, next: LinkAppearance | undefined): void;
     /**
      * The link is inline with text
      * In chromium browsers, if the link is contained within a semantic
@@ -36,10 +30,4 @@ export declare class Link extends BaseAnchor {
      * HTML Attribute: `inline`
      */
     inline: boolean;
-    /**
-     * Handles changes to inline attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    inlineChanged(prev: boolean, next: boolean): void;
 }

package/dist/dts/message-bar/message-bar.d.ts

@@ -24,12 +24,6 @@ export declare class MessageBar extends FASTElement {
      * HTML Attribute: `shape`
      */
     shape?: MessageBarShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: MessageBarShape | undefined, next: MessageBarShape | undefined): void;
     /**
      * Sets the layout of the control.
      *
@@ -38,12 +32,6 @@ export declare class MessageBar extends FASTElement {
      * HTML Attribute: `layout`
      */
     layout?: MessageBarLayout;
-    /**
-     * Handles changes to the layout attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    layoutChanged(prev: MessageBarLayout | undefined, next: MessageBarLayout | undefined): void;
     /**
      * Sets the intent of the control.
      *
@@ -52,12 +40,6 @@ export declare class MessageBar extends FASTElement {
      * HTML Attribute: `intent`
      */
     intent?: MessageBarIntent;
-    /**
-     * Handles changes to the intent attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    intentChanged(prev: MessageBarIntent | undefined, next: MessageBarIntent | undefined): void;
     /**
      * @public
      * Method to emit a `dismiss` event when the message bar is dismissed

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -14,22 +14,10 @@ export declare class ProgressBar extends BaseProgressBar {
      * HTML Attribute: `thickness`
      */
     thickness?: ProgressBarThickness;
-    /**
-     * Handles changes to thickness attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
     /**
      * The shape of the progress bar
      * @public
      * HTML Attribute: `shape`
      */
     shape?: ProgressBarShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
 }

package/dist/dts/rating-display/rating-display.d.ts

@@ -16,13 +16,6 @@ export declare class RatingDisplay extends BaseRatingDisplay {
      * HTML Attribute: `color`
      */
     color?: RatingDisplayColor;
-    /**
-     * Handles changes to the color attribute.
-     *
-     * @param prev - The previous state
-     * @param next - The next state
-     */
-    colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
     /**
      * The size of the component.
      *
@@ -32,13 +25,6 @@ export declare class RatingDisplay extends BaseRatingDisplay {
      * HTML Attribute: `size`
      */
     size?: RatingDisplaySize;
-    /**
-     * Handles changes to the size attribute.
-     *
-     * @param prev - The previous state
-     * @param next - The next state
-     */
-    sizeChanged(prev: RatingDisplaySize | undefined, next: RatingDisplaySize | undefined): void;
     /**
      * Renders a single filled icon with a label next to it.
      *

package/dist/dts/slider/slider.d.ts

@@ -38,7 +38,6 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      * HTML Attribute: size
      */
     size?: SliderSize;
-    protected sizeChanged(prev: SliderSize | undefined, next: SliderSize | undefined): void;
     handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**