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

package/dist/web-components.d.ts

@@ -247,6 +247,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.
      *
@@ -255,6 +261,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.
      *
@@ -263,6 +275,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
      *
@@ -271,6 +289,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;
 }
 
 /**
@@ -290,7 +314,6 @@ export declare const AnchorButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -654,6 +677,12 @@ export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
  * @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.
      *
@@ -662,6 +691,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.
      *
@@ -670,6 +705,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.
      *
@@ -678,6 +719,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.
      *
@@ -686,6 +733,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;
 }
 
 /**
@@ -798,12 +851,17 @@ export declare const BadgeTemplate: ElementViewTemplate<Badge>;
  * @public
  */
 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
@@ -898,15 +956,21 @@ 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
@@ -1344,6 +1408,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
@@ -1389,7 +1459,7 @@ export declare class Button extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The associated form element.
      *
@@ -1477,6 +1547,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.
      *
@@ -1500,6 +1576,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.
      *
@@ -1508,6 +1590,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
@@ -1606,7 +1694,6 @@ export declare const ButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -1737,7 +1824,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.
      *
@@ -1746,6 +1839,12 @@ 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;
 }
 
 /**
@@ -3905,11 +4004,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";
 };
 
@@ -3978,6 +4072,12 @@ declare type ConstructableFormAssociated = Constructable<HTMLElement & FASTEleme
  * @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.
      *
@@ -3986,6 +4086,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.
      *
@@ -3994,6 +4100,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.
      *
@@ -4002,6 +4114,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.
      *
@@ -4010,6 +4128,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.
      *
@@ -4044,6 +4168,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
@@ -4382,18 +4512,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.
@@ -4883,6 +5031,12 @@ export declare const getDirection: (rootNode: HTMLElement) => Direction;
  * @public
  */
 declare class Image_2 extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * Image layout
      *
@@ -4891,6 +5045,12 @@ declare class Image_2 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
      *
@@ -4899,6 +5059,12 @@ declare class Image_2 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
      *
@@ -4907,6 +5073,12 @@ declare class Image_2 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
      *
@@ -4915,6 +5087,12 @@ declare class Image_2 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
      *
@@ -4923,6 +5101,12 @@ declare class Image_2 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;
 }
 export { Image_2 as Image }
 
@@ -4982,6 +5166,12 @@ export declare const ImageTemplate: ElementViewTemplate<Image_2>;
  * @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
      *
@@ -4990,6 +5180,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
      *
@@ -4998,6 +5194,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
      *
@@ -5006,6 +5208,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
      *
@@ -5147,6 +5355,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
@@ -5158,6 +5372,12 @@ 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;
 }
 
 /**
@@ -5527,7 +5747,6 @@ export declare const MenuButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -5911,18 +6130,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
@@ -6793,7 +7030,7 @@ export declare class Spinner extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The size of the spinner
      *
@@ -6802,6 +7039,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
@@ -6809,6 +7052,12 @@ 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();
 }
 
@@ -7285,6 +7534,12 @@ export declare class TextInput extends FASTElement {
      * HTML Attribute: `appearance`
      */
     appearance?: TextInputAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
     /**
      * Indicates the element's autocomplete state.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
@@ -7311,6 +7566,12 @@ export declare class TextInput extends FASTElement {
      * HTML Attribute: `control-size`
      */
     controlSize?: TextInputControlSize;
+    /**
+     * Handles changes to `control-size` attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
     /**
      * The default slotted content. This is the content that appears in the text field label.
      *
@@ -7852,7 +8113,6 @@ export declare const ToggleButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };