@fluentui/web-components 3.0.0-beta.44 → 3.0.0-beta.46

package/dist/web-components.d.ts

@@ -290,6 +290,12 @@ export declare const accordionStyles: ElementStyles;
 
 export declare const accordionTemplate: ElementViewTemplate<Accordion>;
 
+/**
+ * An Anchor Custom HTML Element.
+ * Based on BaseAnchor and includes style and layout specific attributes
+ *
+ * @public
+ */
 export declare class AnchorButton extends BaseAnchor {
     /**
      * The appearance the anchor button should have.
@@ -1033,6 +1039,247 @@ declare class BaseAnchor extends FASTElement {
     private createProxyElement;
 }
 
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | `<button>`} element.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart content - The button content container
+ *
+ * @public
+ */
+declare class BaseButton extends FASTElement {
+    /**
+     * 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
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
+     */
+    autofocus: boolean;
+    /**
+     * Default slotted content.
+     *
+     * @public
+     */
+    defaultSlottedContent: HTMLElement[];
+    /**
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that the button is focusable while disabled.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled-focusable`
+     */
+    disabledFocusable: boolean;
+    /**
+     * Sets that the button tabindex attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `tabindex`
+     */
+    tabIndex: number;
+    /**
+     * Sets the element's internal disabled state when the element is focusable while disabled.
+     *
+     * @param previous - the previous disabledFocusable value
+     * @param next - the current disabledFocusable value
+     * @internal
+     */
+    disabledFocusableChanged(previous: boolean, next: boolean): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The associated form element.
+     *
+     * @public
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The URL that processes the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction | `formaction`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formaction`
+     */
+    formAction?: string;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static readonly formAssociated = true;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * The encoding type for the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype | `formenctype`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formenctype`
+     */
+    formEnctype?: string;
+    /**
+     * The HTTP method that the browser uses to submit the form.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod | `formmethod`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formmethod`
+     */
+    formMethod?: string;
+    /**
+     * Indicates that the form will not be validated when submitted.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formnovalidate | `formnovalidate`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formnovalidate`
+     */
+    formNoValidate?: boolean;
+    /**
+     * The internal form submission fallback control.
+     *
+     * @internal
+     */
+    private formSubmissionFallbackControl?;
+    /**
+     * The internal slot for the form submission fallback control.
+     *
+     * @internal
+     */
+    private formSubmissionFallbackControlSlot?;
+    /**
+     * The target frame or window to open the form submission in.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formtarget | `formtarget`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formtarget`
+     */
+    formTarget?: ButtonFormTarget;
+    /**
+     * A reference to all associated label elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<Node>;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name | `name`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name?: string;
+    /**
+     * The button type.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    type: ButtonType;
+    /**
+     * Removes the form submission fallback control when the type changes.
+     *
+     * @param previous - the previous type value
+     * @param next - the new type value
+     * @internal
+     */
+    typeChanged(previous: ButtonType, next: ButtonType): void;
+    /**
+     * The value attribute.
+     *
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: string;
+    /**
+     * Handles the button click event.
+     *
+     * @param e - The event object
+     * @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    connectedCallback(): void;
+    constructor();
+    /**
+     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
+     * properties. The submit button is then appended to the slot and the form is submitted.
+     *
+     * @internal
+     * @privateRemarks
+     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
+     */
+    private createAndInsertFormSubmissionFallbackControl;
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled state changed.
+     *
+     * @param disabled - the disabled value of the form / fieldset
+     *
+     * @internal
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Handles keypress events for the button.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
+     */
+    keypressHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Presses the button.
+     *
+     * @public
+     */
+    protected press(): void;
+    /**
+     * Resets the associated form.
+     *
+     * @public
+     */
+    resetForm(): void;
+    /**
+     * Submits the associated form.
+     *
+     * @internal
+     */
+    private submitForm;
+}
+
 /**
  * The base class for a component with a toggleable checked state.
  *
@@ -1448,16 +1695,11 @@ export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
 /**
  * A Button Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | `<button>`} element.
- *
- * @slot start - Content which can be provided before the button content
- * @slot end - Content which can be provided after the button content
- * @slot - The default slot for button content
- * @csspart content - The button content container
+ * Based on BaseButton and includes style and layout specific attributes
  *
  * @public
  */
-export declare class Button extends FASTElement {
+export declare class Button extends BaseButton {
     /**
      * Indicates the styled appearance of the button.
      *
@@ -1472,168 +1714,6 @@ export declare class Button extends FASTElement {
      * @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
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
-    /**
-     * Default slotted content.
-     *
-     * @public
-     */
-    defaultSlottedContent: HTMLElement[];
-    /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
-     */
-    disabled?: boolean;
-    /**
-     * Indicates that the button is focusable while disabled.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled-focusable`
-     */
-    disabledFocusable: boolean;
-    /**
-     * Sets that the button tabindex attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `tabindex`
-     */
-    tabIndex: number;
-    /**
-     * Sets the element's internal disabled state when the element is focusable while disabled.
-     *
-     * @param previous - the previous disabledFocusable value
-     * @param next - the current disabledFocusable value
-     * @internal
-     */
-    disabledFocusableChanged(previous: boolean, next: boolean): void;
-    /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * The associated form element.
-     *
-     * @public
-     */
-    get form(): HTMLFormElement | null;
-    /**
-     * The URL that processes the form submission.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction | `formaction`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formaction`
-     */
-    formAction?: string;
-    /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
-     *
-     * @public
-     */
-    static readonly formAssociated = true;
-    /**
-     * The id of a form to associate the element to.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form | `form`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
-     */
-    formAttribute?: string;
-    /**
-     * The encoding type for the form submission.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype | `formenctype`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formenctype`
-     */
-    formEnctype?: string;
-    /**
-     * The HTTP method that the browser uses to submit the form.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod | `formmethod`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formmethod`
-     */
-    formMethod?: string;
-    /**
-     * Indicates that the form will not be validated when submitted.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formnovalidate | `formnovalidate`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formnovalidate`
-     */
-    formNoValidate?: boolean;
-    /**
-     * The internal form submission fallback control.
-     *
-     * @internal
-     */
-    private formSubmissionFallbackControl?;
-    /**
-     * The internal slot for the form submission fallback control.
-     *
-     * @internal
-     */
-    private formSubmissionFallbackControlSlot?;
-    /**
-     * The target frame or window to open the form submission in.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formtarget | `formtarget`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formtarget`
-     */
-    formTarget?: ButtonFormTarget;
-    /**
-     * Indicates that the button should only display as an icon with no text content.
-     *
-     * @public
-     * @remarks
-     * 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.
-     *
-     * @public
-     */
-    get labels(): ReadonlyArray<Node>;
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name | `name`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `name`
-     */
-    name?: string;
     /**
      * The shape of the button.
      *
@@ -1663,84 +1743,19 @@ export declare class Button extends FASTElement {
      */
     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
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `type`
-     */
-    type: ButtonType;
-    /**
-     * Removes the form submission fallback control when the type changes.
-     *
-     * @param previous - the previous type value
-     * @param next - the new type value
-     * @internal
-     */
-    typeChanged(previous: ButtonType, next: ButtonType): void;
-    /**
-     * The value attribute.
-     *
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
+     * Indicates that the button should only display as an icon with no text content.
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
-     */
-    value?: string;
-    /**
-     * Handles the button click event.
-     *
-     * @param e - The event object
-     * @internal
-     */
-    clickHandler(e: Event): boolean | void;
-    connectedCallback(): void;
-    constructor();
-    /**
-     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
-     * properties. The submit button is then appended to the slot and the form is submitted.
-     *
-     * @internal
-     * @privateRemarks
-     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
-     */
-    private createAndInsertFormSubmissionFallbackControl;
-    /**
-     * Invoked when a connected component's form or fieldset has its disabled state changed.
-     *
-     * @param disabled - the disabled value of the form / fieldset
-     *
-     * @internal
-     */
-    formDisabledCallback(disabled: boolean): void;
-    /**
-     * Handles keypress events for the button.
-     *
-     * @param e - the keyboard event
-     * @returns - the return value of the click handler
-     * @public
-     */
-    keypressHandler(e: KeyboardEvent): boolean | void;
-    /**
-     * Presses the button.
-     *
-     * @public
-     */
-    protected press(): void;
-    /**
-     * Resets the associated form.
-     *
-     * @public
+     * HTML Attribute: `icon-only`
      */
-    resetForm(): void;
+    iconOnly: boolean;
     /**
-     * Submits the associated form.
-     *
-     * @internal
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    private submitForm;
+    iconOnlyChanged(prev: boolean, next: boolean): void;
 }
 
 /**