@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.100

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

@@ -0,0 +1,242 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ButtonFormTarget, 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.
+ *
+ * @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
+ */
+export 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;
+}

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

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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

@@ -1,193 +1,53 @@
-import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
-import { FormAssociatedButton } from './button.form-associated.js';
-import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
+import { StartEnd } from '../patterns/index.js';
+import { BaseButton } from './button.base.js';
+import { ButtonAppearance, ButtonShape, ButtonSize } 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 on BaseButton and includes style and layout specific attributes
  *
- * @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
+ * @tag fluent-button
  *
  * @public
  */
-export declare class Button extends FormAssociatedButton {
+export declare class Button extends BaseButton {
     /**
-     * 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`
      */
-    autofocus: boolean;
+    appearance?: ButtonAppearance;
     /**
-     * The id of a form to associate the element to.
+     * The shape of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: form
+     * HTML Attribute: `shape`
      */
-    formId: string;
+    shape?: ButtonShape;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     * The size of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: formaction
-     */
-    formaction: string;
-    protected formactionChanged(): void;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: formenctype
-     */
-    formenctype: string;
-    protected formenctypeChanged(): void;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: formmethod
-     */
-    formmethod: string;
-    protected formmethodChanged(): void;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: formnovalidate
-     */
-    formnovalidate: boolean;
-    protected formnovalidateChanged(): void;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: formtarget
-     */
-    formtarget: '_self' | '_blank' | '_parent' | '_top';
-    protected formtargetChanged(): void;
-    /**
-     * The button type.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: type
-     */
-    type: ButtonType;
-    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
-    /**
-     * The appearance the button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance?: ButtonAppearance | undefined;
-    /**
-     * The shape the button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: shape
-     */
-    shape?: ButtonShape | undefined;
-    /**
-     * The size the button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `size`
      */
     size?: ButtonSize;
     /**
-     * The button has an icon only, no text content
+     * Indicates that the button should only display as an icon with no text content.
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
-    /**
-     * The button is disabled but focusable
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
-     */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
-    /**
-     * Prevents disabledFocusable click events
-     */
-    private handleDisabledFocusableClick;
-    /**
-     *
-     * Default slotted content
-     *
-     * @public
-     * @remarks
-     */
-    defaultSlottedContent: HTMLElement[];
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate(): void;
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Submits the parent form
-     */
-    private handleSubmission;
-    /**
-     * Resets the parent form
-     */
-    private handleFormReset;
-    control: HTMLButtonElement;
 }
 /**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-export declare class DelegatesARIAButton {
-    /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-expanded
-     */
-    ariaExpanded: 'true' | 'false' | string | null;
-    /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-pressed
-     */
-    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
-}
-/**
- * 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

@@ -1,4 +1,4 @@
-import { StartEndOptions } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
 import type { ValuesOf } from '../utils/index.js';
 import type { Button } from './button.js';
 /**
@@ -9,14 +9,13 @@ export declare const ButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * A Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 /**
  * A Button can be square, circular or rounded.
  * @public
@@ -30,7 +29,7 @@ export declare const ButtonShape: {
  * A Button can be square, circular or rounded
  * @public
  */
-export declare type ButtonShape = ValuesOf<typeof ButtonShape>;
+export type ButtonShape = ValuesOf<typeof ButtonShape>;
 /**
  * A Button can be a size of small, medium or large.
  * @public
@@ -44,7 +43,7 @@ export declare const ButtonSize: {
  * A Button can be on of several preset sizes.
  * @public
  */
-export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
+export type ButtonSize = ValuesOf<typeof ButtonSize>;
 /**
  * Button type values.
  *
@@ -60,9 +59,24 @@ export declare const ButtonType: {
  *
  * @public
  */
-export declare type ButtonType = ValuesOf<typeof ButtonType>;
+export type ButtonType = ValuesOf<typeof ButtonType>;
 /**
- * Button configuration options
+ * Button configuration options.
  * @public
  */
-export declare type ButtonOptions = StartEndOptions<Button>;
+export 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 type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;

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

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

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

@@ -1,9 +1,15 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Button } from './button.js';
-import { ButtonOptions } from './button.options.js';
+import type { 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/button/index.d.ts

@@ -1,5 +1,7 @@
-export * from './button.js';
-export * from './button.options.js';
-export { template as ButtonTemplate } from './button.template.js';
-export { styles as ButtonStyles } from './button.styles.js';
 export { definition as ButtonDefinition } from './button.definition.js';
+export { BaseButton } from './button.base.js';
+export { Button } from './button.js';
+export { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
+export type { ButtonOptions } from './button.options.js';
+export { styles as ButtonStyles } from './button.styles.js';
+export { template as ButtonTemplate } from './button.template.js';