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

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
@@ -9,13 +9,17 @@ export declare const CompoundButtonAppearance: {
     readonly outline: "outline";
     readonly subtle: "subtle";
     readonly secondary: "secondary";
+    /**
+     * A Compound Button can be secondary, primary, outline, subtle, transparent
+     * @public
+     */
     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 +33,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 +47,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,5 +1,5 @@
 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

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

@@ -1,9 +1,5 @@
 import { CounterBadge } from './counter-badge.js';
 /**
- * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-counter-badge\>

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

@@ -1,10 +1,10 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { BadgeOptions } from '../badge/badge.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * CounterBadge options
  * @public
  */
-export declare type CounterBadgeOptions = BadgeOptions;
+export type CounterBadgeOptions = BadgeOptions;
 /**
  * CounterBadgeAppearance constants
  * @public
@@ -17,7 +17,7 @@ export declare const CounterBadgeAppearance: {
  * A CounterBadge can have an appearance of filled or ghost
  * @public
  */
-export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+export type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 /**
  * CounterBadgeColor constants
  * @public
@@ -36,7 +36,7 @@ export declare const CounterBadgeColor: {
  * A CounterBadge can be one of preset colors
  * @public
  */
-export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 /**
  * A CounterBadge shape can be circular or rounded.
  * @public
@@ -49,7 +49,7 @@ export declare const CounterBadgeShape: {
  * A CounterBadge can be one of preset colors
  * @public
  */
-export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+export type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 /**
  * A CounterBadge can be square, circular or rounded.
  * @public
@@ -66,4 +66,4 @@ export declare const CounterBadgeSize: {
  * A CounterBadge can be on of several preset sizes.
  * @public
  */
-export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
+export type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;

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

@@ -1,5 +1,5 @@
-export * from './counter-badge.js';
-export * from './counter-badge.options.js';
+export { CounterBadge } from './counter-badge.js';
+export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
 export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
 export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';

package/dist/dts/dialog/define.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/dts/dialog/dialog.d.ts

@@ -0,0 +1,58 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { DialogType } from './dialog.options.js';
+/**
+ * A Dialog Custom HTML Element.
+ *
+ * @public
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @public
+     * The dialog element
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The type of the dialog modal
+     */
+    type: DialogType;
+    /**
+     * @public
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitBeforeToggle: () => void;
+    /**
+     * @public
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitToggle: () => void;
+    /**
+     * @public
+     * Method to show the dialog
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the dialog
+     */
+    hide(): void;
+    /**
+     * @public
+     * Handles click events on the dialog overlay for light-dismiss
+     * @param event - The click event
+     * @returns boolean
+     */
+    clickHandler(event: Event): boolean;
+}

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

@@ -0,0 +1,9 @@
+import { Dialog } from './dialog.js';
+/**
+ * The Fluent Dialog Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-dialog\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Dialog>;

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

@@ -0,0 +1,11 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+export type DialogType = ValuesOf<typeof DialogType>;

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

@@ -0,0 +1,4 @@
+/** Dialog styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Dialog } from './dialog.js';
+/**
+ * Template for the Dialog component
+ * @public
+ */
+export declare const template: ElementViewTemplate<Dialog>;

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

@@ -0,0 +1,5 @@
+export { Dialog } from './dialog.js';
+export { DialogType } from './dialog.options.js';
+export { definition as DialogDefinition } from './dialog.definition.js';
+export { template as DialogTemplate } from './dialog.template.js';
+export { styles as DialogStyles } from './dialog.styles.js';

package/dist/dts/dialog-body/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/dialog-body/dialog-body.bench.d.ts

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

package/dist/dts/dialog-body/dialog-body.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * Dialog Body component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class DialogBody extends FASTElement {
+    /**
+     * @public
+     * Indicates whether the dialog has a title action
+     */
+    noTitleAction: boolean;
+}