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

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 { 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 { Button } from './button.js';
+import { 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,6 @@
-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 { 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.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,301 @@
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
-import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+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://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA 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 BaseCheckbox extends FASTElement {
     /**
-     * Sets shape of the checkbox.
+     * 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
-     * @default 'square'
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `autofocus`
      */
-    shape?: CheckboxShape;
+    autofocus: boolean;
     /**
-     * Sets size of the checkbox.
+     * The element's current checked state.
      *
      * @public
-     * @default 'medium'
+     */
+    get checked(): boolean;
+    set checked(state: boolean);
+    /**
+     * The element's disabled state.
+     * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `disabled`
      */
-    size?: CheckboxSize;
+    disabled: boolean;
+    /**
+     * 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;
+    /**
+     * Indicates that the element is in an indeterminate or mixed state.
+     *
+     * @public
+     */
+    indeterminate?: boolean;
+    /**
+     * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+     *
+     * @internal
+     */
+    indeterminateChanged(prev: boolean, next: boolean): void;
+    /**
+     * The element's checked state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    initialChecked?: boolean;
+    /**
+     * Updates the form value when the checked state changes.
+     *
+     * @internal
+     */
+    initialCheckedChanged(prev: boolean | undefined, next: boolean): 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 value
+     * @param next - The current value
+     * @internal
+     */
+    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
+     */
+    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<Node>;
+    /**
+     * 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;
     /**
-     * Sets position of the label relative to the input
+     * Sets the `elementInternals.ariaChecked` value based on the checked state.
+     *
+     * @internal
+     */
+    private setAriaChecked;
+    /**
+     * Checks the validity of the element and returns the result.
      *
      * @public
-     * @default 'after'
      * @remarks
-     * HTML Attribute: label-position
+     * 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;
+    constructor();
+    /**
+     * Updates the form value when a user changes the `checked` state.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    inputHandler(e: Event): 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
      */
-    labelPosition?: CheckboxLabelPosition;
+    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;
+    /**
+     * 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.
+     *
+     * @public
+     */
+    private toggleChecked;
+}
+export declare class Checkbox extends BaseCheckbox {
+    /**
+     * Indicates the shape of the checkbox.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape: CheckboxShape;
+    /**
+     * Indicates the size of the checkbox.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: CheckboxSize;
 }

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,6 @@
-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 { 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.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\>

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

@@ -1,5 +1,5 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ButtonOptions } from '../button/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Compound Button Appearance constants
  * @public
@@ -8,14 +8,13 @@ export declare const CompoundButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * A Compound Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
+export type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
 /**
  * A Compound Button can be square, circular or rounded.
  * @public
@@ -29,17 +28,13 @@ export declare const CompoundButtonShape: {
  * A Compound Button can be square, circular or rounded
  * @public
  */
-export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
+export type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
 /**
  * A Compound Button can be a size of small, medium or large.
  * @public
  */
 export declare const CompoundButtonSize: {
     readonly small: "small";
-    /**
-     * A Compound Button can be on of several preset sizes.
-     * @public
-     */
     readonly medium: "medium";
     readonly large: "large";
 };
@@ -47,5 +42,5 @@ export declare const CompoundButtonSize: {
  * A Compound Button can be on of several preset sizes.
  * @public
  */
-export declare type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+export type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
 export { ButtonOptions as CompoundButtonOptions };

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

@@ -1,5 +1,5 @@
-export * from './compound-button.js';
-export * from './compound-button.options.js';
+export { CompoundButton } from './compound-button.js';
+export { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 export { template as CompoundButtonTemplate } from './compound-button.template.js';
 export { styles as CompoundButtonStyles } from './compound-button.styles.js';
 export { definition as CompoundButtonDefinition } from './compound-button.definition.js';

package/dist/dts/counter-badge/counter-badge.bench.d.ts

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

package/dist/dts/counter-badge/counter-badge.d.ts

@@ -1,11 +1,17 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
+import { StartEnd } from '../patterns/index.js';
 import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
  */
 export declare class CounterBadge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *
@@ -14,6 +20,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance?: CounterBadgeAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: CounterBadgeAppearance | undefined, next: CounterBadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -22,6 +34,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: color
      */
     color?: CounterBadgeColor;
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev: CounterBadgeColor | undefined, next: CounterBadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -30,6 +48,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: CounterBadgeShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: CounterBadgeShape | undefined, next: CounterBadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -38,6 +62,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: size
      */
     size?: CounterBadgeSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: CounterBadgeSize | undefined, next: CounterBadgeSize | undefined): void;
     /**
      * The count the badge should have.
      *
@@ -72,6 +102,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: dot
      */
     dot: boolean;
+    /**
+     * Handles changes to dot attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    dotChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * @internal
      * Function to set the count