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

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

@@ -1,55 +1,53 @@
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
+import { StartEnd } from '../patterns/index.js';
+import { BaseButton } from './button.base.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
 /**
- * The base class used for constructing a fluent-button custom element
+ * A Button Custom HTML Element.
+ * Based on BaseButton and includes style and layout specific attributes
+ *
+ * @tag fluent-button
+ *
  * @public
  */
-export declare class Button extends FASTButton {
+export declare class Button extends BaseButton {
     /**
-     * The appearance the button should have.
+     * Indicates the styled appearance of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: `appearance`
      */
-    appearance?: ButtonAppearance | undefined;
+    appearance?: ButtonAppearance;
     /**
-     * The shape the button should have.
+     * The shape of the button.
      *
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
-    shape?: ButtonShape | undefined;
+    shape?: ButtonShape;
     /**
-     * The size the button should have.
+     * The size of the button.
      *
      * @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;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+}
+/**
+ * @internal
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ */
+export interface Button extends StartEnd {
 }

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

@@ -1,10 +1,9 @@
 import { Button } from './button.js';
 /**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
+ * 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,5 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { Button } from './button.js';
 /**
  * ButtonAppearance constants
  * @public
@@ -8,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
@@ -29,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
@@ -43,5 +43,40 @@ export declare const ButtonSize: {
  * A Button can be on of several preset sizes.
  * @public
  */
-export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
-export { ButtonOptions };
+export type ButtonSize = ValuesOf<typeof ButtonSize>;
+/**
+ * Button type values.
+ *
+ * @public
+ */
+export declare const ButtonType: {
+    readonly submit: "submit";
+    readonly reset: "reset";
+    readonly button: "button";
+};
+/**
+ * Type for button type values.
+ *
+ * @public
+ */
+export type ButtonType = ValuesOf<typeof ButtonType>;
+/**
+ * Button configuration options.
+ * @public
+ */
+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,7 +1,15 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Button } from './button.js';
+import type { ButtonOptions } from './button.options.js';
+/**
+ * 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';

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

@@ -0,0 +1,288 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class for a component with a toggleable checked state.
+ *
+ * @public
+ */
+export declare class BaseCheckbox extends FASTElement {
+    /**
+     * Indicates that the element should get focus after the page finishes loading.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
+     */
+    autofocus: boolean;
+    /**
+     * The element's current checked state.
+     *
+     * @public
+     */
+    get checked(): boolean;
+    set checked(next: boolean);
+    /**
+     * The disabled state of the control.
+     *
+     * @public
+     */
+    disabled?: boolean;
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial disabled state of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabledAttribute?: boolean;
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * The initial checked state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    initialChecked?: boolean;
+    /**
+     * Updates the checked state when the `checked` attribute is changed, unless the checked state has been changed by the user.
+     *
+     * @param prev - The previous initial checked state
+     * @param next - The current initial checked state
+     * @internal
+     */
+    protected initialCheckedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the input when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * The element's required state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    required: boolean;
+    /**
+     * Sets the validity of the control when the required state changes.
+     *
+     * @param prev - The previous required state
+     * @param next - The current required state
+     * @internal
+     */
+    protected requiredChanged(prev: boolean, next: boolean): void;
+    /**
+     * The internal checked state of the control.
+     *
+     * @internal
+     */
+    private _checked?;
+    /**
+     * Indicates that the checked state has been changed by the user.
+     *
+     * @internal
+     */
+    private dirtyChecked;
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * 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 formAssociated: boolean;
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<HTMLLabelElement>;
+    /**
+     * The fallback validation message, taken from a native checkbox `<input>` element.
+     *
+     * @internal
+     */
+    private _validationFallbackMessage;
+    /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The internal value of the input.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the input.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Toggles the checked state when the user clicks the element.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    /**
+     * Updates the form value when a user changes the `checked` state.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Prevents scrolling when the user presses the space key.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Toggles the checked state when the user releases the space key.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keyupHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets the ARIA checked state.
+     *
+     * @param value - The checked state
+     * @internal
+     */
+    protected setAriaChecked(value?: boolean): void;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Sets a custom validity message.
+     *
+     * @param message - The message to set
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleChecked(force?: boolean): void;
+}

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

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

package/dist/dts/checkbox/checkbox.d.ts

@@ -1,35 +1,62 @@
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
-import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
+import { BaseCheckbox } from './checkbox.base.js';
+import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 /**
- * The base class used for constucting a fluent checkbox custom element
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
+ *
+ * @tag fluent-checkbox
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
  * @public
  */
-export declare class Checkbox extends FASTCheckbox {
+export declare class Checkbox extends BaseCheckbox {
     /**
-     * Sets shape of the checkbox.
+     * Indicates that the element is in an indeterminate or mixed state.
+     *
+     * @public
+     */
+    indeterminate?: boolean;
+    /**
+     * Updates the indeterminate state when the `indeterminate` property changes.
+     *
+     * @param prev - the indeterminate state
+     * @param next - the current indeterminate state
+     * @internal
+     */
+    protected indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * Indicates the shape of the checkbox.
      *
      * @public
-     * @default 'square'
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: CheckboxShape;
     /**
-     * Sets size of the checkbox.
+     * Indicates the size of the control.
      *
      * @public
-     * @default 'medium'
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `size`
      */
     size?: CheckboxSize;
+    constructor();
     /**
-     * Sets position of the label relative to the input
+     * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.
      *
+     * @internal
+     * @override
+     */
+    protected setAriaChecked(value?: boolean): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
      * @public
-     * @default 'after'
-     * @remarks
-     * HTML Attribute: label-position
      */
-    labelPosition?: CheckboxLabelPosition;
+    toggleChecked(force?: boolean): void;
 }

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

@@ -1,4 +1,14 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { ValuesOf } from '../utils/typings.js';
+import type { Checkbox } from './checkbox.js';
+/**
+ * Checkbox configuration options
+ * @public
+ */
+export type CheckboxOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
+    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
+};
 /**
  * Checkbox shape
  * @public
@@ -7,7 +17,8 @@ export declare const CheckboxShape: {
     readonly circular: "circular";
     readonly square: "square";
 };
-export declare type CheckboxShape = ValuesOf<typeof CheckboxShape>;
+/** @public */
+export type CheckboxShape = ValuesOf<typeof CheckboxShape>;
 /**
  * Checkbox size
  * @public
@@ -16,13 +27,5 @@ export declare const CheckboxSize: {
     readonly medium: "medium";
     readonly large: "large";
 };
-export declare type CheckboxSize = ValuesOf<typeof CheckboxSize>;
-/**
- * Checkbox label position
- * @public
- */
-export declare const CheckboxLabelPosition: {
-    readonly before: "before";
-    readonly after: "after";
-};
-export declare type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
+/** @public */
+export type CheckboxSize = ValuesOf<typeof CheckboxSize>;

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

@@ -1,5 +1,11 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { ElementViewTemplate } from '@microsoft/fast-element';
 import type { Checkbox } from './checkbox.js';
+import type { CheckboxOptions } from './checkbox.options.js';
+/**
+ * Template for the Checkbox component
+ * @public
+ */
+export declare function checkboxTemplate<T extends Checkbox>(options?: CheckboxOptions): ElementViewTemplate<T>;
 /**
  * Template for the Checkbox component
  * @public

package/dist/dts/checkbox/index.d.ts

@@ -1,5 +1,7 @@
-export * from './checkbox.js';
-export * from './checkbox.options.js';
 export { definition as CheckboxDefinition } from './checkbox.definition.js';
-export { template as CheckboxTemplate } from './checkbox.template.js';
+export { BaseCheckbox } from './checkbox.base.js';
+export { Checkbox } from './checkbox.js';
+export { CheckboxShape, CheckboxSize } from './checkbox.options.js';
+export type { CheckboxOptions } from './checkbox.options.js';
 export { styles as CheckboxStyles } from './checkbox.styles.js';
+export { template as CheckboxTemplate } from './checkbox.template.js';

package/dist/dts/compound-button/compound-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/compound-button/compound-button.d.ts

@@ -1,6 +1,9 @@
 import { Button } from '../button/button.js';
 /**
  * The base class used for constructing a fluent-compound-button custom element
+ *
+ * @tag fluent-compound-button
+ *
  * @public
  */
 export declare class CompoundButton extends Button {

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

@@ -1,8 +1,5 @@
 import { CompoundButton } from './compound-button.js';
 /**
- * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-comopund-button\>