@fluentui/web-components 3.0.0-beta.11 → 3.0.0-beta.12

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 15 Apr 2024 04:09:25 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Apr 2024 04:08:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.12)
+
+Tue, 23 Apr 2024 04:08:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.11..@fluentui/web-components_v3.0.0-beta.12)
+
+### Changes
+
+- Use ElementInternals for Button components ([PR #30999](https://github.com/microsoft/fluentui/pull/30999) by 863023+radium-v@users.noreply.github.com)
+
 ## [3.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.11)
 
-Mon, 15 Apr 2024 04:09:25 GMT 
+Mon, 15 Apr 2024 04:09:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.10..@fluentui/web-components_v3.0.0-beta.11)
 
 ### Changes

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

@@ -1,193 +1,276 @@
-import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
-import { FormAssociatedButton } from './button.form-associated.js';
-import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/index.js';
+import type { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize } from './button.options.js';
+import { ButtonType } from './button.options.js';
 /**
  * A Button Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> 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 control - The button element
- * @csspart content - The element wrapping button content
+ * @csspart content - The button content container
  *
  * @public
  */
-export declare class Button extends FormAssociatedButton {
+export declare class Button extends FASTElement {
     /**
-     * Determines if the element should receive document focus on page load.
+     * Indicates the styled appearance of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: autofocus
+     * HTML Attribute: `appearance`
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * 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;
     /**
-     * The id of a form to associate the element to.
+     * 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: form
+     * HTML Attribute: `disabled`
      */
-    formId: string;
+    disabled?: boolean;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * Indicates that the button is focusable while disabled.
      *
      * @public
      * @remarks
-     * HTML Attribute: formaction
+     * HTML Attribute: `disabled-focusable`
+     */
+    disabledFocusable: boolean;
+    /**
+     * 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
+     */
+    protected elementInternals: ElementInternals;
+    /**
+     * The associated form element.
+     *
+     * @public
      */
-    formaction: string;
-    protected formactionChanged(): void;
+    get form(): HTMLFormElement | null;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * 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: formenctype
+     * HTML Attribute: `formaction`
      */
-    formenctype: string;
-    protected formenctypeChanged(): void;
+    formAction?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * 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: formmethod
+     * HTML Attribute: `form`
      */
-    formmethod: string;
-    protected formmethodChanged(): void;
+    formAttribute?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * 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: formnovalidate
+     * HTML Attribute: `formenctype`
      */
-    formnovalidate: boolean;
-    protected formnovalidateChanged(): void;
+    formEnctype?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * 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: formtarget
+     * HTML Attribute: `formmethod`
      */
-    formtarget: '_self' | '_blank' | '_parent' | '_top';
-    protected formtargetChanged(): void;
+    formMethod?: string;
     /**
-     * The button type.
+     * 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: type
+     * HTML Attribute: `formnovalidate`
      */
-    type: ButtonType;
-    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
+    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;
     /**
-     * The appearance the button should have.
+     * Indicates that the button should only display as an icon with no text content.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: `icon-only`
+     */
+    iconOnly: boolean;
+    /**
+     * A reference to all associated label elements.
+     *
+     * @public
      */
-    appearance?: ButtonAppearance | undefined;
+    get labels(): ReadonlyArray<Node>;
     /**
-     * The shape the button should have.
+     * 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: shape
+     * HTML Attribute: `name`
      */
-    shape?: ButtonShape | undefined;
+    name?: string;
     /**
-     * The size the button should have.
+     * The shape of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `shape`
      */
-    size?: ButtonSize;
+    shape?: ButtonShape;
     /**
-     * The button has an icon only, no text content
+     * The size of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `size`
      */
-    iconOnly: boolean;
+    size?: ButtonSize;
     /**
-     * The button is disabled but focusable
+     * The button type.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: disabled-focusable
+     * HTML Attribute: `type`
      */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    type: ButtonType;
     /**
-     * Prevents disabledFocusable click events
+     * Removes the form submission fallback control when the type changes.
+     *
+     * @param previous - the previous type value
+     * @param next - the new type value
+     * @internal
      */
-    private handleDisabledFocusableClick;
+    typeChanged(previous: ButtonType, next: ButtonType): void;
     /**
+     * The value attribute.
      *
-     * Default slotted content
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
      *
      * @public
      * @remarks
+     * HTML Attribute: `value`
      */
-    defaultSlottedContent: HTMLElement[];
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate(): void;
+    value?: string;
     /**
+     * Handles the button click event.
+     *
+     * @param e - The event object
      * @internal
      */
+    clickHandler(e: Event): boolean | void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    constructor();
     /**
-     * Submits the parent form
+     * 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 handleSubmission;
+    private createAndInsertFormSubmissionFallbackControl;
     /**
-     * Resets the parent form
+     * Invoked when a connected component's form or fieldset has its disabled state changed.
+     *
+     * @param disabled - the disabled value of the form / fieldset
+     *
+     * @internal
      */
-    private handleFormReset;
-    control: HTMLButtonElement;
-}
-/**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-export declare class DelegatesARIAButton {
+    formDisabledCallback(disabled: boolean): void;
     /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * Handles keypress events for the button.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
      * @public
-     * @remarks
-     * HTML Attribute: aria-expanded
      */
-    ariaExpanded: 'true' | 'false' | string | null;
+    keypressHandler(e: KeyboardEvent): boolean | void;
     /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * Presses the button.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: aria-pressed
      */
-    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
+    protected press(): void;
+    /**
+     * Resets the associated form.
+     *
+     * @public
+     */
+    resetForm(): void;
+    /**
+     * Submits the associated form.
+     *
+     * @internal
+     */
+    private submitForm;
 }
 /**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
- */
-export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
-}
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name confuses API documenter.
  * TODO: https://github.com/microsoft/fast/issues/3317
- * @internal
  */
-export interface Button extends StartEnd, DelegatesARIAButton {
+export interface Button extends StartEnd {
 }

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

@@ -1,7 +1,9 @@
 import { Button } from './button.js';
 /**
+ * The definition for the Fluent Button component.
+ *
  * @public
  * @remarks
- * HTML Element: \<fluent-button\>
+ * HTML Element: `<fluent-button>`
  */
 export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Button>;

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

@@ -62,7 +62,22 @@ export declare const ButtonType: {
  */
 export declare type ButtonType = ValuesOf<typeof ButtonType>;
 /**
- * Button configuration options
+ * Button configuration options.
  * @public
  */
 export declare type ButtonOptions = StartEndOptions<Button>;
+/**
+ * Button `formtarget` attribute values.
+ * @public
+ */
+export declare const ButtonFormTarget: {
+    readonly blank: "_blank";
+    readonly self: "_self";
+    readonly parent: "_parent";
+    readonly top: "_top";
+};
+/**
+ * Types for the `formtarget` attribute values.
+ * @public
+ */
+export declare type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;

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

@@ -1 +1,6 @@
+/**
+ * The styles for the Button component.
+ *
+ * @public
+ */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -2,8 +2,14 @@ import { ElementViewTemplate } from '@microsoft/fast-element';
 import type { Button } from './button.js';
 import { ButtonOptions } from './button.options.js';
 /**
- * The template for the Button component.
+ * Generates a template for the Button component.
+ *
  * @public
  */
 export declare function buttonTemplate<T extends Button>(options?: ButtonOptions): ElementViewTemplate<T>;
+/**
+ * The template for the Button component.
+ *
+ * @public
+ */
 export declare const template: ElementViewTemplate<Button>;

package/dist/dts/form-associated/form-associated.d.ts

@@ -1,77 +1,4 @@
 import type { Constructable, FASTElement } from '@microsoft/fast-element';
-/**
- * This file enables typing support for ElementInternals APIs.
- * It is largely taken from https://github.com/microsoft/TSJS-lib-generator/pull/818/files.
- *
- * When TypeScript adds support for these APIs we can delete this file.
- */
-interface ValidityStateFlags {
-    badInput?: boolean;
-    customError?: boolean;
-    patternMismatch?: boolean;
-    rangeOverflow?: boolean;
-    rangeUnderflow?: boolean;
-    stepMismatch?: boolean;
-    tooLong?: boolean;
-    tooShort?: boolean;
-    typeMismatch?: boolean;
-    valueMissing?: boolean;
-}
-/**
- * Source:
- * https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals
- */
-interface ElementInternals {
-    /**
-     * Returns the form owner of internals target element.
-     */
-    readonly form: HTMLFormElement | null;
-    /**
-     * Returns a NodeList of all the label elements that internals target element is associated with.
-     */
-    readonly labels: NodeList;
-    /**
-     * Returns the error message that would be shown to the user if internals target element was to be checked for validity.
-     */
-    readonly validationMessage: string;
-    /**
-     * Returns the ValidityState object for internals target element.
-     */
-    readonly validity: ValidityState;
-    /**
-     * Returns true if internals target element will be validated when the form is submitted; false otherwise.
-     */
-    readonly willValidate: boolean;
-    /**
-     * Returns true if internals target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
-     */
-    checkValidity(): boolean;
-    /**
-     * Returns true if internals target element has no validity problems; otherwise,
-     * returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
-     */
-    reportValidity(): boolean;
-    /**
-     * Sets both the state and submission value of internals target element to value.
-     *
-     * While "null" isn't enumerated as a argument type (here)[https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface],
-     * In practice it appears to remove the value from the form data on submission. Adding it as a valid type here
-     * becuase that capability is required for checkbox and radio types
-     */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
-    /**
-     * Marks internals target element as suffering from the constraints indicated by the flags argument,
-     * and sets the element's validation message to message.
-     * If anchor is specified, the user agent might use
-     * it to indicate problems with the constraints of internals target
-     * element when the form owner is validated interactively or reportValidity() is called.
-     */
-    setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
-}
-declare let ElementInternals: {
-    prototype: ElementInternals;
-    new (): ElementInternals;
-};
 /**
  * @alpha
  */
@@ -175,4 +102,3 @@ export declare function FormAssociated<T extends ConstructableFormAssociated>(Ba
  * @beta
  */
 export declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
-export {};

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

@@ -1,48 +1,51 @@
 import { Button } from '../button/button.js';
 /**
- * The base class used for constructing a fluent-toggle-button custom element
+ * The base class used for constructing a `<fluent-toggle-button>` custom element.
+ *
  * @public
  */
 export declare class ToggleButton extends Button {
     /**
-     * Tracks whether the "checked" property has been changed.
-     * This is necessary to provide consistent behavior with
-     * normal input checkboxes
+     * Indicates the pressed state of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `pressed`
      */
-    protected dirtyChecked: boolean;
+    pressed: boolean;
     /**
-     * Provides the default checkedness of the input element
-     * Passed down to proxy
+     * Updates the pressed state when the `pressed` property changes.
+     *
+     * @internal
+     */
+    protected pressedChanged(): void;
+    /**
+     * Indicates the mixed state of the control. This property takes precedence over `pressed`.
      *
      * @public
      * @remarks
-     * HTML Attribute: checked
+     * HTML Attribute: `mixed`
      */
-    checkedAttribute: boolean;
-    protected checkedAttributeChanged(): void;
-    defaultChecked: boolean;
-    protected defaultCheckedChanged(): void;
+    mixed?: boolean;
     /**
-     * The checked state of the control.
+     * Updates the pressed state when the `mixed` property changes.
      *
-     * @public
+     * @param previous - the previous mixed state
+     * @param next - the current mixed state
+     * @internal
      */
-    checked: boolean;
-    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
+    protected mixedChanged(): void;
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * Toggles the pressed state of the button.
+     *
+     * @override
      */
-    currentChecked: boolean;
-    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
-    constructor();
+    protected press(): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
+     * Sets the `aria-pressed` attribute based on the `pressed` and `mixed` properties.
+     *
      * @internal
      */
-    protected handleToggleButtonClick: (e: MouseEvent) => void;
+    private setPressedState;
 }

package/dist/dts/toggle-button/toggle-button.styles.d.ts

@@ -1 +1,8 @@
+/**
+ * The styles for the ToggleButton component.
+ *
+ * @public
+ * @privateRemarks
+ * TODO: Need to support icon hover styles
+ */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;