@fluentui/web-components 3.0.0-beta.24 → 3.0.0-beta.26

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 06 Jun 2024 04:06:09 GMT and should not be manually modified.
+This log was last generated on Mon, 10 Jun 2024 04:07:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.26)
+
+Mon, 10 Jun 2024 04:07:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.25..@fluentui/web-components_v3.0.0-beta.26)
+
+### Changes
+
+- feat: refactor Switch to use ElementInternals by extending BaseCheckbox ([PR #31613](https://github.com/microsoft/fluentui/pull/31613) by 13071055+chrisdholt@users.noreply.github.com)
+- fixes the border-color for switch when in the checked state on rest ([PR #31628](https://github.com/microsoft/fluentui/pull/31628) by 13071055+chrisdholt@users.noreply.github.com)
+- add try-catch block to ensure that registered properties can be updated dynamically ([PR #31629](https://github.com/microsoft/fluentui/pull/31629) by 13071055+chrisdholt@users.noreply.github.com)
+
+## [3.0.0-beta.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.25)
+
+Fri, 07 Jun 2024 04:06:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.24..@fluentui/web-components_v3.0.0-beta.25)
+
+### Changes
+
+- Use ElementInternals for Checkbox component ([PR #31468](https://github.com/microsoft/fluentui/pull/31468) by 863023+radium-v@users.noreply.github.com)
+- Move dialog border styles to forcedColors mode ([PR #31609](https://github.com/microsoft/fluentui/pull/31609) by rupertdavid@microsoft.com)
+
 ## [3.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.24)
 
-Thu, 06 Jun 2024 04:06:09 GMT 
+Thu, 06 Jun 2024 04:06:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.23..@fluentui/web-components_v3.0.0-beta.24)
 
 ### Changes

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

@@ -1,75 +1,301 @@
-import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
-import { FormAssociatedCheckbox } from './checkbox.form-associated.js';
-import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
-/**
- * Checkbox configuration options
- * @public
- */
-export type CheckboxOptions = {
-    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
-    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
-};
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 /**
  * 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
- * @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 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
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `autofocus`
      */
-    shape?: CheckboxShape;
+    autofocus: boolean;
     /**
-     * Sets size of the checkbox.
+     * The element's current checked state.
      *
      * @public
+     */
+    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;
     /**
-     * Sets position of the label relative to the input
+     * The element's checked state.
      *
      * @public
      * @remarks
-     * HTML Attribute: label-position
+     * HTML Attribute: `checked`
      */
-    labelPosition?: CheckboxLabelPosition;
+    initialChecked?: boolean;
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
+     * 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
      */
-    defaultSlottedNodes: Node[];
+    initialValueChanged(prev: string, next: string): void;
     /**
-     * The indeterminate state of the control
+     * 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
      */
-    indeterminate: boolean;
+    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 the `elementInternals.ariaChecked` value based on the checked state.
+     *
+     * @internal
+     */
+    private setAriaChecked;
+    /**
+     * 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;
     constructor();
-    private toggleChecked;
     /**
+     * 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
      */
-    keypressHandler: (e: KeyboardEvent) => void;
+    keyupHandler(e: KeyboardEvent): boolean | void;
     /**
+     * Resets the form value to its initial value when the form is reset.
+     *
      * @internal
      */
-    clickHandler: (e: MouseEvent) => void;
+    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 '../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,6 +17,7 @@ export declare const CheckboxShape: {
     readonly circular: "circular";
     readonly square: "square";
 };
+/** @public */
 export type CheckboxShape = ValuesOf<typeof CheckboxShape>;
 /**
  * Checkbox size
@@ -16,13 +27,5 @@ export declare const CheckboxSize: {
     readonly medium: "medium";
     readonly large: "large";
 };
+/** @public */
 export type CheckboxSize = ValuesOf<typeof CheckboxSize>;
-/**
- * Checkbox label position
- * @public
- */
-export declare const CheckboxLabelPosition: {
-    readonly before: "before";
-    readonly after: "after";
-};
-export type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;

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,6 +1,6 @@
 export { definition as CheckboxDefinition } from './checkbox.definition.js';
 export { Checkbox } from './checkbox.js';
-export type { CheckboxOptions } from './checkbox.js';
-export { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.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/field/define.d.ts

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

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

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

package/dist/dts/field/field.d.ts

@@ -0,0 +1,99 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { LabelPosition, SlottableInput } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ *
+ * @public
+ */
+export declare class Field extends FASTElement {
+    /**
+     * The position of the label relative to the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `label-position`
+     */
+    labelPosition: LabelPosition;
+    /**
+     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
+     *
+     * @internal
+     */
+    messageSlot: Element[];
+    /**
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
+     * @internal
+     */
+    messageSlotChanged(prev: Element[], next: Element[]): void;
+    /**
+     * The slotted inputs.
+     *
+     * @internal
+     * @privateRemarks
+     * This field is populated with the `children` directive in the template rather than `slotted`.
+     */
+    slottedInputs: SlottableInput[];
+    /**
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
+     * @internal
+     */
+    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Reference to the first slotted input.
+     *
+     * @public
+     */
+    input: SlottableInput;
+    /**
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    changeHandler(e: Event): void;
+    /**
+     * Redirects `click` events to the slotted input.
+     *
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    /**
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     *
+     * @param e - the event object
+     * @internal
+     */
+    invalidHandler(e: Event): boolean | void;
+    /**
+     * Toggles the field's states based on the slotted input.
+     *
+     * @internal
+     */
+    setStates(): void;
+}

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

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

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

@@ -0,0 +1,41 @@
+import type { ValuesOf } from '../utils/typings.js';
+/**
+ * Label position values
+ * @public
+ */
+export declare const LabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+/** @public */
+export type LabelPosition = ValuesOf<typeof LabelPosition>;
+/**
+ * Synthetic type for slotted input elements
+ * @public
+ */
+export type SlottableInput = HTMLElement & ElementInternals & {
+    elementInternals?: ElementInternals;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+};
+/**
+ * Synthetic type for slotted message elements
+ * @public
+ */
+export declare const ValidationFlags: {
+    readonly badInput: "bad-input";
+    readonly customError: "custom-error";
+    readonly patternMismatch: "pattern-mismatch";
+    readonly rangeOverflow: "range-overflow";
+    readonly rangeUnderflow: "range-underflow";
+    readonly stepMismatch: "step-mismatch";
+    readonly tooLong: "too-long";
+    readonly tooShort: "too-short";
+    readonly typeMismatch: "type-mismatch";
+    readonly valueMissing: "value-missing";
+    readonly valid: "valid";
+};
+/** @public */
+export type ValidationFlags = ValuesOf<typeof ValidationFlags>;

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

@@ -0,0 +1,6 @@
+/**
+ * The styles for the {@link Field} component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,6 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+/**
+ * Template for the Field component
+ * @public
+ */
+export declare const template: ElementViewTemplate;

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

@@ -0,0 +1,6 @@
+export { Field } from './field.js';
+export { LabelPosition as FieldLabelPosition, ValidationFlags } from './field.options.js';
+export type { SlottableInput } from './field.options.js';
+export { definition as FieldDefinition } from './field.definition.js';
+export { styles as FieldStyles } from './field.styles.js';
+export { template as FieldTemplate } from './field.template.js';

package/dist/dts/index-rollup.d.ts

@@ -10,6 +10,7 @@ import './counter-badge/define.js';
 import './dialog/define.js';
 import './dialog-body/define.js';
 import './divider/define.js';
+import './field/define.js';
 import './image/define.js';
 import './label/define.js';
 import './menu-button/define.js';

package/dist/dts/index.d.ts

@@ -14,6 +14,8 @@ export { CounterBadge, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeDe
 export { Dialog, DialogType, DialogDefinition, DialogTemplate, DialogStyles } from './dialog/index.js';
 export { DialogBody, DialogBodyDefinition, DialogBodyTemplate, DialogBodyStyles } from './dialog-body/index.js';
 export { Divider, DividerAlignContent, DividerAppearance, DividerDefinition, DividerOrientation, DividerRole, DividerStyles, DividerTemplate, } from './divider/index.js';
+export { Field, FieldLabelPosition, ValidationFlags, FieldDefinition, FieldStyles, FieldTemplate, } from './field/index.js';
+export type { SlottableInput } from './field/index.js';
 export { FluentDesignSystem } from './fluent-design-system.js';
 export { Image, ImageDefinition, ImageFit, ImageShape, ImageStyles, ImageTemplate } from './image/index.js';
 export { Label, LabelDefinition, LabelSize, LabelStyles, LabelTemplate, LabelWeight } from './label/index.js';

package/dist/dts/switch/switch.d.ts

@@ -1,44 +1,7 @@
 import type { StaticallyComposableHTML } from '../utils/index.js';
-import { SwitchLabelPosition } from './switch.options.js';
-import { FormAssociatedSwitch } from './switch.form-associated.js';
+import { BaseCheckbox } from '../checkbox/checkbox.js';
 export type SwitchOptions = {
     switch?: StaticallyComposableHTML<Switch>;
 };
-export declare class Switch extends FormAssociatedSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: labelposition
-     */
-    labelPosition: SwitchLabelPosition | undefined;
-    /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: readonly
-     */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
-     *
-     * @internal
-     */
-    initialValue: string;
-    /**
-     * @internal
-     */
-    defaultSlottedNodes: Node[];
-    constructor();
-    /**
-     * @internal
-     */
-    keypressHandler: (e: KeyboardEvent) => void;
-    /**
-     * @internal
-     */
-    clickHandler: (e: MouseEvent) => void;
+export declare class Switch extends BaseCheckbox {
 }