@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 03 Jul 2024 04:07:52 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Jul 2024 04:08:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.40](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.40)
+
+Thu, 04 Jul 2024 04:08:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.39..@fluentui/web-components_v3.0.0-beta.40)
+
+### Changes
+
+- feat: update radio and radio-group to use ElementInternals for form association ([PR #31783](https://github.com/microsoft/fluentui/pull/31783) by 863023+radium-v@users.noreply.github.com)
+- fix for setTheme in Firefox ([PR #31911](https://github.com/microsoft/fluentui/pull/31911) by rupertdavid@microsoft.com)
+- refactor(web-components): cleanup accordion and convert to element internals for states ([PR #31866](https://github.com/microsoft/fluentui/pull/31866) by rupertdavid@microsoft.com)
+
 ## [3.0.0-beta.39](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.39)
 
-Wed, 03 Jul 2024 04:07:52 GMT 
+Wed, 03 Jul 2024 04:08:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.38..@fluentui/web-components_v3.0.0-beta.39)
 
 ### Changes

package/dist/dts/accordion/accordion.d.ts

@@ -4,8 +4,9 @@ import { AccordionExpandMode } from './accordion.options.js';
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @slot - The default slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
+ *
  * @public
  */
 export declare class Accordion extends FASTElement {
@@ -23,29 +24,51 @@ export declare class Accordion extends FASTElement {
      * @internal
      */
     slottedAccordionItems: HTMLElement[];
+    /**
+     * @internal
+     */
     protected accordionItems: Element[];
     /**
      * @internal
      */
     slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     /**
+     * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
      * @internal
      */
     handleChange(source: any, propertyName: string): void;
-    private activeid;
     private activeItemIndex;
-    private accordionIds;
-    private change;
+    /**
+     * Find the first expanded item in the accordion
+     * @returns {void}
+     */
     private findExpandedItem;
+    /**
+     * Resets event listeners and sets the `accordionItems` property
+     * then rebinds event listeners to each non-disabled item
+     * @returns {void}
+     */
     private setItems;
+    /**
+     * Checks if the accordion is in single expand mode
+     * @returns {boolean}
+     */
+    private isSingleExpandMode;
+    /**
+     * Controls the behavior of the accordion in single expand mode
+     * @param expandedItem The item to expand in single expand mode
+     * @returns {void}
+     */
     private setSingleExpandMode;
+    /**
+     * Removes event listeners from the previous accordion items
+     * @param oldValue An array of the previous accordion items
+     */
     private removeItemListeners;
-    private activeItemChange;
-    private handleExpandedChange;
-    private getItemIds;
-    private isSingleExpandMode;
-    private handleItemKeyDown;
-    private handleItemFocus;
-    private adjust;
-    private focusItem;
+    /**
+     * Changes the expanded state of the accordion item
+     * @param evt Click event
+     * @returns
+     */
+    private expandedChangedHandler;
 }

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -2,7 +2,7 @@ import { FASTElement } from '@microsoft/fast-element';
 import type { StaticallyComposableHTML } from '../utils/index.js';
 import { StartEnd } from '../patterns/index.js';
 import type { StartEndOptions } from '../patterns/index.js';
-import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 /**
  * Accordion Item configuration options
  * @public
@@ -13,22 +13,24 @@ export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
 };
 /**
  *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
+ * @slot start - Content positioned before heading in the collapsed state
  * @slot heading - Content which serves as the accordion item heading and text of the expand button
  * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
+ * @slot marker-expanded - The expanded icon
+ * @slot marker-collapsed - The collapsed icon
  * @csspart heading - Wraps the button
  * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * @csspart content - The wrapper for the accordion item content
  *
  * @public
  */
 export declare class AccordionItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
      * heading element.
@@ -46,6 +48,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML attribute: expanded
      */
     expanded: boolean;
+    /**
+     * Handles expanded changes
+     * @param prev - previous value
+     * @param next - next value
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
     /**
      * Disables an accordion item
      *
@@ -54,6 +62,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML attribute: disabled
      */
     disabled: boolean;
+    /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     */
+    disabledChanged(prev: boolean, next: boolean): void;
     /**
      * The item ID
      *
@@ -70,6 +84,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML Attribute: size
      */
     size?: AccordionItemSize;
+    /**
+     * Handles changes to size attribute
+     * @param prev - previous value
+     * @param next - next value
+     */
+    sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
     /**
      * Sets the width of the focus state.
      *
@@ -78,22 +98,30 @@ export declare class AccordionItem extends FASTElement {
      * HTML Attribute: block
      */
     block: boolean;
+    /**
+     * Handles changes to block attribute
+     * @param prev - previous value
+     * @param next - next value
+     */
+    blockChanged(prev: boolean, next: boolean): void;
     /**
      * Sets expand and collapsed icon position.
      *
      * @public
      * @remarks
-     * HTML Attribute: expand-icon-position
+     * HTML Attribute: marker-position
      */
-    expandIconPosition?: AccordionItemExpandIconPosition;
+    markerPosition?: AccordionItemMarkerPosition;
     /**
-     * @internal
+     * Handles changes to marker-position attribute
+     * @param prev - previous value
+     * @param next - next value
      */
-    expandbutton: HTMLElement;
+    markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
     /**
      * @internal
      */
-    clickHandler: (e: MouseEvent) => void;
+    expandbutton: HTMLElement;
 }
 /**
  * Mark internal because exporting class and interface of the same name

package/dist/dts/accordion-item/accordion-item.options.d.ts

@@ -16,7 +16,7 @@ export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export declare const AccordionItemExpandIconPosition: {
+export declare const AccordionItemMarkerPosition: {
     readonly start: "start";
     readonly end: "end";
 };
@@ -24,4 +24,4 @@ export declare const AccordionItemExpandIconPosition: {
  * Applies expand/collapse icon position
  * @public
  */
-export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;

package/dist/dts/accordion-item/index.d.ts

@@ -1,6 +1,6 @@
 export { AccordionItem } from './accordion-item.js';
 export type { AccordionItemOptions } from './accordion-item.js';
-export { AccordionItemSize, AccordionItemExpandIconPosition } from './accordion-item.options.js';
+export { AccordionItemSize, AccordionItemMarkerPosition } from './accordion-item.options.js';
 export { styles as accordionItemStyles } from './accordion-item.styles.js';
 export { definition as accordionItemDefinition } from './accordion-item.definition.js';
 export { template as accordionItemTemplate } from './accordion-item.template.js';

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

@@ -1,13 +1,7 @@
 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
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * The base class for a component with a toggleable checked state.
  *
  * @public
  */
@@ -27,37 +21,46 @@ export declare class BaseCheckbox extends FASTElement {
      * @public
      */
     get checked(): boolean;
-    set checked(state: boolean);
+    set checked(next: boolean);
     /**
-     * The element's disabled state.
+     * The disabled state of the control.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: `disabled`
      */
-    disabled: boolean;
+    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
+     * Toggles the disabled state when the user changes the `disabled` property.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
+     * @internal
      */
-    formAttribute?: string;
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Indicates that the element is in an indeterminate or mixed state.
+     * The initial disabled state of the control.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    indeterminate?: boolean;
+    disabledAttribute?: boolean;
     /**
-     * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+     * Sets the disabled state when the `disabled` attribute changes.
      *
+     * @param prev - the previous value
+     * @param next - the current value
      * @internal
      */
-    indeterminateChanged(prev: boolean, next: boolean): void;
+    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 element's checked state.
+     * The initial checked state of the element.
      *
      * @public
      * @remarks
@@ -65,11 +68,13 @@ export declare class BaseCheckbox extends FASTElement {
      */
     initialChecked?: boolean;
     /**
-     * Updates the form value when the checked state changes.
+     * 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
      */
-    initialCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    protected initialCheckedChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * The initial value of the input.
      *
@@ -79,13 +84,13 @@ export declare class BaseCheckbox extends FASTElement {
      */
     initialValue: string;
     /**
-     * Sets the value of the input when the value attribute changes.
+     * Sets the value of the input when the `value` attribute changes.
      *
-     * @param prev - The previous value
-     * @param next - The current value
+     * @param prev - The previous initial value
+     * @param next - The current initial value
      * @internal
      */
-    initialValueChanged(prev: string, next: string): void;
+    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.
      *
@@ -109,13 +114,13 @@ export declare class BaseCheckbox extends FASTElement {
      * @param next - The current required state
      * @internal
      */
-    requiredChanged(prev: boolean, next: boolean): void;
+    protected requiredChanged(prev: boolean, next: boolean): void;
     /**
      * The internal checked state of the control.
      *
      * @internal
      */
-    private _checked;
+    private _checked?;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -148,7 +153,7 @@ export declare class BaseCheckbox extends FASTElement {
      *
      * @public
      */
-    get labels(): ReadonlyArray<Node>;
+    get labels(): ReadonlyArray<HTMLLabelElement>;
     /**
      * The fallback validation message, taken from a native checkbox `<input>` element.
      *
@@ -193,12 +198,6 @@ export declare class BaseCheckbox extends FASTElement {
      * 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.
      *
@@ -215,14 +214,13 @@ export declare class BaseCheckbox extends FASTElement {
      */
     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;
+    inputHandler(e: InputEvent): boolean | void;
     /**
      * Prevents scrolling when the user presses the space key.
      *
@@ -251,6 +249,13 @@ export declare class BaseCheckbox extends FASTElement {
      * 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.
      *
@@ -277,11 +282,37 @@ export declare class BaseCheckbox extends FASTElement {
     /**
      * Toggles the checked state of the control.
      *
+     * @param force - Forces the element to be checked or unchecked
      * @public
      */
-    private toggleChecked;
+    toggleChecked(force?: boolean): void;
 }
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#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 BaseCheckbox {
+    /**
+     * Indicates that the element is in an indeterminate or mixed state.
+     *
+     * @public
+     */
+    indeterminate?: boolean;
+    /**
+     * Updates the indeterminate state when the `indeterminate` property changes.
+     *
+     * @param prev - the indeterminate state
+     * @param next - the current indeterminate state
+     * @internal
+     */
+    protected indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * Indicates the shape of the checkbox.
      *
@@ -291,13 +322,15 @@ export declare class Checkbox extends BaseCheckbox {
      */
     shape?: CheckboxShape;
     /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * Applies shape states when the `shape` property changes.
+     *
+     * @param prev - the previous shape value
+     * @param next - the next shape value
+     * @internal
      */
-    shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
+    protected shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     /**
-     * Indicates the size of the checkbox.
+     * Indicates the size of the control.
      *
      * @public
      * @remarks
@@ -305,9 +338,26 @@ export declare class Checkbox extends BaseCheckbox {
      */
     size?: CheckboxSize;
     /**
-     * Handles changes to size attribute custom states
+     * Applies size states when the `size` property changes.
+     *
      * @param prev - the previous state
      * @param next - the next state
+     * @internal
+     */
+    protected sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
+    constructor();
+    /**
+     * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.
+     *
+     * @internal
+     * @override
+     */
+    protected setAriaChecked(value?: boolean): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
      */
-    sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
+    toggleChecked(force?: boolean): void;
 }

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

@@ -14,6 +14,19 @@ export declare class Field extends FASTElement {
      * HTML Attribute: `label-position`
      */
     labelPosition: LabelPosition;
+    /**
+     * The slotted label elements.
+     *
+     * @internal
+     */
+    labelSlot: Node[];
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
     /**
      * The slotted message elements. Filtered to only include elements with a `flag` attribute.
      *
@@ -56,19 +69,28 @@ export declare class Field extends FASTElement {
      * @public
      */
     input: SlottableInput;
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
     /**
      * Calls the `setStates` method when a `change` event is emitted from the slotted input.
      *
      * @param e - the event object
      * @internal
      */
-    changeHandler(e: Event): void;
+    changeHandler(e: Event): boolean | void;
     /**
      * Redirects `click` events to the slotted input.
      *
+     * @param e - the event object
      * @internal
      */
     clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
      * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
      *
@@ -90,10 +112,17 @@ export declare class Field extends FASTElement {
      * @internal
      */
     invalidHandler(e: Event): boolean | void;
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    private setLabelProperties;
     /**
      * Toggles the field's states based on the slotted input.
      *
      * @internal
      */
     setStates(): void;
+    setValidationStates(): void;
 }

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

@@ -19,6 +19,8 @@ export type SlottableInput = HTMLElement & ElementInternals & {
     required: boolean;
     disabled: boolean;
     readOnly: boolean;
+    checked?: boolean;
+    value?: string;
 };
 /**
  * Synthetic type for slotted message elements

package/dist/dts/index.d.ts

@@ -1,4 +1,4 @@
-export { AccordionItem, accordionItemDefinition, AccordionItemExpandIconPosition, AccordionItemSize, accordionItemStyles, accordionItemTemplate, } from './accordion-item/index.js';
+export { AccordionItem, accordionItemDefinition, AccordionItemMarkerPosition, AccordionItemSize, accordionItemStyles, accordionItemTemplate, } from './accordion-item/index.js';
 export type { AccordionItemOptions } from './accordion-item/index.js';
 export { Accordion, accordionDefinition, AccordionExpandMode, accordionStyles, accordionTemplate, } from './accordion/index.js';
 export { Link, LinkAppearance, LinkDefinition, LinkTemplate, LinkTarget } from './link/index.js';

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

@@ -1,5 +1,5 @@
 export { definition as RadioDefinition } from './radio.definition.js';
 export { Radio } from './radio.js';
-export type { RadioControl, RadioOptions } from './radio.js';
+export type { RadioControl, RadioOptions } from './radio.options.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';