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

package/dist/web-components.d.ts

@@ -861,7 +861,7 @@ declare class BaseAnchor extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The proxy anchor element
      * @internal
@@ -1824,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.
      *
@@ -1833,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;
 }
 
 /**
@@ -4500,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.
@@ -5001,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
      *
@@ -5009,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
      *
@@ -5017,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
      *
@@ -5025,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
      *
@@ -5033,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
      *
@@ -5041,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 }
 
@@ -5100,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
      *
@@ -5108,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
      *
@@ -5116,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
      *
@@ -5124,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
      *
@@ -5265,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
@@ -5276,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;
 }
 
 /**
@@ -6028,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
@@ -6910,7 +7030,7 @@ export declare class Spinner extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The size of the spinner
      *
@@ -6919,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
@@ -6926,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();
 }
 
@@ -7402,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
@@ -7428,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.
      *