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

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 14 Jun 2024 04:06:00 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Jun 2024 04:07:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.32](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.32)
+
+Wed, 19 Jun 2024 04:07:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.31..@fluentui/web-components_v3.0.0-beta.32)
+
+### Changes
+
+- feat: update progress bar to use element internals custom states for visual states ([PR #31739](https://github.com/microsoft/fluentui/pull/31739) by 13071055+chrisdholt@users.noreply.github.com)
+- feat: update divider to use custom states ([PR #31735](https://github.com/microsoft/fluentui/pull/31735) by 13071055+chrisdholt@users.noreply.github.com)
+- feat: update link to use Element Internals custom states for presentational attributes ([PR #31752](https://github.com/microsoft/fluentui/pull/31752) by 13071055+chrisdholt@users.noreply.github.com)
+- feat: update checkbox to use Element Internals custom states for presentational attributes ([PR #31756](https://github.com/microsoft/fluentui/pull/31756) by 13071055+chrisdholt@users.noreply.github.com)
+- feat: update text input to use Element Internals custom states for presentational attributes ([PR #31753](https://github.com/microsoft/fluentui/pull/31753) by 13071055+chrisdholt@users.noreply.github.com)
+- update image to use element internals custom states for visual states ([PR #31737](https://github.com/microsoft/fluentui/pull/31737) by 13071055+chrisdholt@users.noreply.github.com)
+- feat: update spinner to use Element Internals for presentational styling ([PR #31741](https://github.com/microsoft/fluentui/pull/31741) by 13071055+chrisdholt@users.noreply.github.com)
+- update label to use element internals custom states for styling ([PR #31738](https://github.com/microsoft/fluentui/pull/31738) by 13071055+chrisdholt@users.noreply.github.com)
+
+## [3.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.31)
+
+Tue, 18 Jun 2024 04:05:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.30..@fluentui/web-components_v3.0.0-beta.31)
+
+### Changes
+
+- feat: update button and anchor button to leverage custom states for variants ([PR #31718](https://github.com/microsoft/fluentui/pull/31718) by 13071055+chrisdholt@users.noreply.github.com)
+- update badge to use element internals custom states ([PR #31733](https://github.com/microsoft/fluentui/pull/31733) by 13071055+chrisdholt@users.noreply.github.com)
+
 ## [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 
+Fri, 14 Jun 2024 04:06:06 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

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

@@ -20,12 +20,17 @@ export type AnchorOptions = StartEndOptions<AnchorButton>;
  * @public
  */
 export declare class BaseAnchor extends FASTElement {
+    /**
+     * Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
+     * @internal
+     */
+    private readonly isMac;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The proxy anchor element
      * @internal
@@ -120,15 +125,21 @@ export declare class BaseAnchor extends FASTElement {
      * @param e - The event object
      * @internal
      */
-    clickHandler(): boolean;
+    clickHandler(e: PointerEvent): boolean;
     /**
-     * Handles keypress events for the anchor.
+     * Handles keydown events for the anchor.
      *
      * @param e - the keyboard event
      * @returns - the return value of the click handler
      * @public
      */
-    keypressHandler(e: KeyboardEvent): boolean | void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handles navigation based on input
+     * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+     * @internal
+     */
+    private handleNavigation;
     /**
      * A method for updating proxy attributes when attributes have changed
      * @internal
@@ -147,6 +158,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `appearance`
      */
     appearance?: AnchorButtonAppearance | undefined;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: AnchorButtonAppearance | undefined, next: AnchorButtonAppearance | undefined): void;
     /**
      * The shape the anchor button should have.
      *
@@ -155,6 +172,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `shape`
      */
     shape?: AnchorButtonShape | undefined;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined): void;
     /**
      * The size the anchor button should have.
      *
@@ -163,6 +186,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `size`
      */
     size?: AnchorButtonSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined): void;
     /**
      * The anchor button has an icon only, no text content
      *
@@ -171,6 +200,12 @@ export declare class AnchorButton extends BaseAnchor {
      * 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;
 }
 /**
  * Mark internal because exporting class and interface of the same name

package/dist/dts/anchor-button/anchor-button.options.d.ts

@@ -8,7 +8,6 @@ export declare const AnchorButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

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

@@ -6,6 +6,12 @@ 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.
      *
@@ -14,6 +20,12 @@ 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.
      *
@@ -22,6 +34,12 @@ 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.
      *
@@ -30,6 +48,12 @@ 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.
      *
@@ -38,6 +62,12 @@ 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

@@ -22,6 +22,12 @@ export declare class Button extends FASTElement {
      * 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;
     /**
      * Indicates the button should be focused when the page is loaded.
      * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
@@ -67,7 +73,7 @@ export declare class Button extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The associated form element.
      *
@@ -155,6 +161,12 @@ export declare class Button extends FASTElement {
      * 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;
     /**
      * A reference to all associated label elements.
      *
@@ -178,6 +190,12 @@ export declare class Button extends FASTElement {
      * 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.
      *
@@ -186,6 +204,12 @@ export declare class Button extends FASTElement {
      * 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;
     /**
      * The button type.
      * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute

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

@@ -9,7 +9,6 @@ export declare const ButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

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

@@ -289,7 +289,13 @@ export declare class Checkbox extends BaseCheckbox {
      * @remarks
      * HTML Attribute: `shape`
      */
-    shape: CheckboxShape;
+    shape?: CheckboxShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     /**
      * Indicates the size of the checkbox.
      *
@@ -298,4 +304,10 @@ export declare class Checkbox extends BaseCheckbox {
      * HTML Attribute: `size`
      */
     size?: CheckboxSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
 }

package/dist/dts/compound-button/compound-button.options.d.ts

@@ -8,11 +8,6 @@ export declare const CompoundButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
-    /**
-     * A Compound Button can be secondary, primary, outline, subtle, transparent
-     * @public
-     */
     readonly transparent: "transparent";
 };
 /**

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

@@ -6,6 +6,12 @@ import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBa
  * @public
  */
 export declare class CounterBadge 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.
      *
@@ -14,6 +20,12 @@ 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.
      *
@@ -22,6 +34,12 @@ 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.
      *
@@ -30,6 +48,12 @@ 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.
      *
@@ -38,6 +62,12 @@ 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.
      *
@@ -72,6 +102,12 @@ 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

@@ -35,18 +35,36 @@ export declare class Divider extends FASTElement {
      * 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;
     connectedCallback(): void;
     /**
      * Sets the element's internal role when the role attribute changes.

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

@@ -5,6 +5,12 @@ 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
      *
@@ -13,6 +19,12 @@ 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
      *
@@ -21,6 +33,12 @@ 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
      *
@@ -29,6 +47,12 @@ 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
      *
@@ -37,6 +61,12 @@ 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
      *
@@ -45,4 +75,10 @@ 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,6 +5,12 @@ 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
      *
@@ -13,6 +19,12 @@ 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
      *
@@ -21,6 +33,12 @@ 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
      *
@@ -29,6 +47,12 @@ 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,6 +19,12 @@ 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
@@ -30,4 +36,10 @@ 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/menu-button/menu-button.options.d.ts

@@ -8,7 +8,6 @@ export declare const MenuButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

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

@@ -20,18 +20,36 @@ export declare class ProgressBar extends FASTElement {
      * 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;
     /**
      * The validation state of the progress bar
      * @public
      * HTML Attribute: `validation-state`
      */
     validationState: ProgressBarValidationState | null;
+    /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
     /**
      * The value of the progress
      * @internal

package/dist/dts/spinner/spinner.d.ts

@@ -10,7 +10,7 @@ export declare class Spinner extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The size of the spinner
      *
@@ -19,6 +19,12 @@ export declare class Spinner extends FASTElement {
      * HTML Attribute: size
      */
     size?: SpinnerSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
     /**
      * The appearance of the spinner
      * @public
@@ -26,5 +32,11 @@ export declare class Spinner extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance?: SpinnerAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
     constructor();
 }