@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

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

@@ -1,78 +1,363 @@
-import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
-import { FormAssociatedCheckbox } from './checkbox.form-associated.js';
-import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 /**
- * Checkbox configuration options
+ * The base class for a component with a toggleable checked state.
+ *
  * @public
  */
-export declare type CheckboxOptions = {
-    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
-    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
-};
+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;
+}
 /**
  * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
  *
  * @slot checked-indicator - The checked indicator
  * @slot indeterminate-indicator - The indeterminate indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual checkbox control
- * @csspart label - The label
  * @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 FormAssociatedCheckbox {
+export declare class Checkbox extends BaseCheckbox {
     /**
-     * Sets shape of the checkbox.
+     * Indicates that the element is in an indeterminate or mixed state.
      *
      * @public
-     * @default 'square'
-     * @remarks
-     * HTML Attribute: shape
      */
-    shape?: CheckboxShape;
+    indeterminate?: boolean;
     /**
-     * Sets size of the checkbox.
+     * Updates the indeterminate state when the `indeterminate` property changes.
      *
-     * @public
-     * @default 'medium'
-     * @remarks
-     * HTML Attribute: size
+     * @param prev - the indeterminate state
+     * @param next - the current indeterminate state
+     * @internal
      */
-    size?: CheckboxSize;
+    protected indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Sets position of the label relative to the input
+     * Indicates the shape of the checkbox.
      *
      * @public
-     * @default 'after'
      * @remarks
-     * HTML Attribute: label-position
+     * HTML Attribute: `shape`
      */
-    labelPosition?: CheckboxLabelPosition;
+    shape?: CheckboxShape;
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
+     * Applies shape states when the `shape` property changes.
      *
+     * @param prev - the previous shape value
+     * @param next - the next shape value
      * @internal
      */
-    initialValue: string;
+    protected shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     /**
-     * @internal
+     * Indicates the size of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
      */
-    defaultSlottedNodes: Node[];
+    size?: CheckboxSize;
     /**
-     * The indeterminate state of the control
+     * Applies size states when the `size` property changes.
+     *
+     * @param prev - the previous state
+     * @param next - the next state
+     * @internal
      */
-    indeterminate: boolean;
+    protected sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
     constructor();
-    private toggleChecked;
     /**
+     * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.
+     *
      * @internal
+     * @override
      */
-    keypressHandler: (e: KeyboardEvent) => void;
+    protected setAriaChecked(value?: boolean): void;
     /**
-     * @internal
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
      */
-    clickHandler: (e: MouseEvent) => void;
+    toggleChecked(force?: boolean): void;
 }

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

@@ -1,4 +1,14 @@
-import type { ValuesOf } from '../utils/index.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,6 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { Checkbox, CheckboxOptions } from './checkbox.js';
+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

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 { BaseCheckbox, 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.options.d.ts

@@ -8,18 +8,13 @@ export declare const CompoundButtonAppearance: {
     readonly primary: "primary";
     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
@@ -33,7 +28,7 @@ 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
@@ -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 { ButtonOptions as CompoundButtonOptions };
+export type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+export type { ButtonOptions as CompoundButtonOptions };

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { CompoundButton } from './compound-button.js';
 import type { CompoundButtonOptions } from './compound-button.options.js';
 /**

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

@@ -6,6 +6,12 @@ import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBa
  * @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

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

@@ -1,10 +1,10 @@
-import { BadgeOptions } from '../badge/badge.options.js';
+import type { 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/counter-badge.template.d.ts

@@ -1,5 +1,5 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { CounterBadge } from './counter-badge.js';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { CounterBadge } from './counter-badge.js';
 /**
  * The template for the Counter Badge component.
  * @public

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/dialog.bench.d.ts

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