@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.100

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -1,30 +1,25 @@
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+import { BaseProgressBar } from './progress-bar.base.js';
+import { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
+ *
+ * @tag fluent-progress-bar
+ *
  * @public
  */
-export declare class ProgressBar extends FASTProgress {
+export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
      * @public
-     * @remarks
-     * HTML Attribute: thickness
+     * HTML Attribute: `thickness`
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: ProgressBarShape;
-    /**
-     * The validation state of the progress bar
-     * @public
-     * @remarks
-     * HTML Attribute: validation-state
-     */
-    validationState: ProgressBarValidationState | null;
 }

package/dist/dts/progress-bar/progress-bar.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * ProgressBarThickness Constants
  * @public
@@ -11,7 +11,7 @@ export declare const ProgressBarThickness: {
  * Applies bar thickness to the content
  * @public
  */
-export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+export type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
 /**
  * ProgressBarShape Constants
  * @public
@@ -24,7 +24,7 @@ export declare const ProgressBarShape: {
  * Applies bar shape to the content
  * @public
  */
-export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 /**
  * ProgressBarValidationState Constants
  * @public
@@ -38,4 +38,4 @@ export declare const ProgressBarValidationState: {
  * Applies validation state to the content
  * @public
  */
-export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;

package/dist/dts/progress-bar/progress-bar.template.d.ts

@@ -1,3 +1,4 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
 import type { ProgressBar } from './progress-bar.js';
+export declare function progressTemplate<T extends ProgressBar>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<ProgressBar>;

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

@@ -1,4 +1,5 @@
-export * from './radio.js';
 export { definition as RadioDefinition } from './radio.definition.js';
+export { Radio } 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';

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

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

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

@@ -1,7 +1,63 @@
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { BaseCheckbox } from '../checkbox/checkbox.base.js';
 /**
- * The base class used for constructing a fluent-radio custom element
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
+ *
+ * @tag fluent-radio
+ *
+ * @slot checked-indicator - The checked indicator slot
+ * @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 Radio extends FASTRadio {
+export declare class Radio extends BaseCheckbox {
+    connectedCallback(): void;
+    constructor();
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
+     * @internal
+     * @override
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
+     */
+    protected requiredChanged(): void;
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
+     */
+    setFormValue(): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+     */
+    setValidity(): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
+     */
+    toggleChecked(force?: boolean): void;
 }

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

@@ -0,0 +1,14 @@
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { Radio } from './radio.js';
+/**
+ * @public
+ */
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+/**
+ * Radio configuration options
+ * @public
+ */
+export type RadioOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+export type { CheckboxSize as RadioSize } from '../checkbox/checkbox.options.js';

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

@@ -1,4 +1,6 @@
-/** Radio styles
+/**
+ * Styles for the Radio component
+ *
  * @public
  */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -1,3 +1,16 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Radio } from './radio.js';
+import type { RadioOptions } from './radio.options.js';
+/**
+ * Generates a template for the {@link (Radio:class)} component.
+ *
+ * @param options - Radio configuration options
+ * @public
+ */
+export declare function radioTemplate<T extends Radio>(options?: RadioOptions): ElementViewTemplate<T>;
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
 export declare const template: ElementViewTemplate<Radio>;

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

@@ -1,5 +1,5 @@
-export * from './radio-group.js';
+export { RadioGroup } from './radio-group.js';
+export { RadioGroupOrientation } from './radio-group.options.js';
 export { definition as RadioGroupDefinition } from './radio-group.definition.js';
 export { styles as RadioGroupStyles } from './radio-group.styles.js';
 export { template as RadioGroupTemplate } from './radio-group.template.js';
-export { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';

package/dist/dts/radio-group/radio-group.bench.d.ts

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

package/dist/dts/radio-group/radio-group.d.ts

@@ -1,15 +1,268 @@
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { Radio } from '../radio/radio.js';
+import { RadioGroupOrientation } from './radio-group.options.js';
 /**
- * The base class used for constructing a fluent-radio-group custom element
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
+ * @tag fluent-radio-group
+ *
  * @public
+ *
+ * @slot - The default slot for the radio group
  */
-export declare class RadioGroup extends FASTRadioGroup {
+export declare class RadioGroup extends FASTElement {
     /**
-     * sets radio layout styles
+     * The index of the checked radio, scoped to the enabled radios.
+     *
+     * @internal
+     */
+    protected checkedIndex: number;
+    /**
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+     *
+     * @param prev - the previous index
+     * @param next - the current index
+     * @internal
+     */
+    protected checkedIndexChanged(prev: number | undefined, next: number): void;
+    /**
+     * Indicates that the value has been changed by the user.
+     */
+    private dirtyState;
+    /**
+     * Disables the radio group and child radios.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled: boolean;
+    /**
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
+     *
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
+     */
+    protected disabledChanged(prev?: boolean, next?: boolean): void;
+    /**
+     * The value of the checked radio.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue?: string;
+    /**
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     */
+    initialValueChanged(prev: string | undefined, next: string | undefined): void;
+    /**
+     * The name of the radio group.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * Sets the `name` attribute on all child radios when the `name` property changes.
+     *
+     * @internal
+     */
+    protected nameChanged(prev: string | undefined, next: string | undefined): void;
+    /**
+     * The orientation of the group.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `orientation`
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Sets the ariaOrientation attribute when the orientation changes.
+     *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
+     * @internal
+     */
+    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
+    /**
+     * The collection of all child radios.
+     *
+     * @public
+     */
+    radios: Radio[];
+    /**
+     * Updates the enabled radios collection when properties on the child radios change.
+     *
+     * @param prev - the previous radios
+     * @param next - the current radios
+     */
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
+    /**
+     * Indicates whether the radio group is required.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    required: boolean;
+    /**
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
+     */
+    requiredChanged(prev: boolean, next: boolean): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * A collection of child radios that are not disabled.
+     *
+     * @internal
+     */
+    get enabledRadios(): Radio[];
+    /**
+     * 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;
+    /**
+     * 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`).
+     *
+     * @internal
+     */
+    get validationMessage(): string;
+    /**
+     * The element's validity state.
      *
      * @public
      * @remarks
-     * HTML Attribute: stacked
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The current value of the checked radio.
+     *
+     * @public
+     */
+    get value(): string | null;
+    set value(next: string | null);
+    /**
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
+     * @internal
+     */
+    checkRadio(index?: number, shouldEmit?: boolean): void;
+    /**
+     * 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;
+    /**
+     * Handles click events for the radio group.
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
+    /**
+     * Focuses the checked radio or the first enabled radio.
+     *
+     * @internal
+     */
+    focus(): void;
+    /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     *
+     * @param e - the focusout event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    formResetCallback(): void;
+    private getEnabledIndexInBounds;
+    /**
+     * Handles keydown events for the radio group.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     *
+     * @param e - the disabled event
+     */
+    disabledRadioHandler(e: CustomEvent): 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;
+    /**
+     * Resets the `tabIndex` for all child radios when the radio group loses focus.
+     *
+     * @internal
+     */
+    private restrictFocus;
+    /**
+     * 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 the validity of the element.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element'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;
+    /**
+     * Updates the collection of child radios when the slot changes.
+     *
+     * @param e - the slot change event
+     * @internal
      */
-    stacked: boolean;
+    slotchangeHandler(e: Event): void;
 }

package/dist/dts/radio-group/radio-group.options.d.ts

@@ -0,0 +1,17 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Radio Group orientation
+ * @public
+ */
+export declare const RadioGroupOrientation: {
+    readonly horizontal: "horizontal"; /**
+     * Radio Group orientation
+     * @public
+     */
+    readonly vertical: "vertical";
+};
+/**
+ * Types of Radio Group orientation
+ * @public
+ */
+export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;

package/dist/dts/radio-group/radio-group.template.d.ts

@@ -1,3 +1,4 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { RadioGroup } from './radio-group.js';
+export declare function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<RadioGroup>;

package/dist/dts/rating-display/define.d.ts

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

package/dist/dts/rating-display/index.d.ts

@@ -0,0 +1,6 @@
+export { BaseRatingDisplay } from './rating-display.base.js';
+export { RatingDisplay } from './rating-display.js';
+export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+export { template as RatingDisplayTemplate } from './rating-display.template.js';
+export { styles as RatingDisplayStyles } from './rating-display.styles.js';
+export { definition as RatingDisplayDefinition } from './rating-display.definition.js';

package/dist/dts/rating-display/rating-display.base.d.ts

@@ -0,0 +1,89 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ *
+ * @slot icon - SVG element used as the rating icon
+ *
+ * @public
+ */
+export declare class BaseRatingDisplay extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The number of ratings.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count?: number;
+    /**
+     * The `viewBox` attribute of the icon <svg> element.
+     *
+     * @public
+     * @default `0 0 20 20`
+     * @remarks
+     * HTML Attribute: `icon-view-box`
+     */
+    iconViewBox?: string;
+    /**
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * The value of the rating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * @internal
+     */
+    slottedIcon: HTMLElement[];
+    /**
+     * @internal
+     */
+    slottedIconChanged(): void;
+    /**
+     * @internal
+     */
+    private customIcon?;
+    private intlNumberFormatter;
+    constructor();
+    /**
+     * Returns "count" as string, formatted according to the locale.
+     *
+     * @internal
+     */
+    get formattedCount(): string;
+    /**
+     * Gets the selected value
+     *
+     * @protected
+     */
+    protected getSelectedValue(): number;
+    /**
+     * Gets the maximum icons to render
+     *
+     * @protected
+     */
+    protected getMaxIcons(): number;
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons(): string;
+}

package/dist/dts/rating-display/rating-display.d.ts

@@ -0,0 +1,50 @@
+import { BaseRatingDisplay } from './rating-display.base.js';
+import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+/**
+ * A Rating Display Custom HTML Element.
+ * Based on BaseRatingDisplay and includes style and layout specific attributes
+ *
+ * @tag fluent-rating-display
+ *
+ * @public
+ */
+export declare class RatingDisplay extends BaseRatingDisplay {
+    /**
+     * The color of the rating display icons.
+     *
+     * @public
+     * @default `marigold`
+     * @remarks
+     * HTML Attribute: `color`
+     */
+    color?: RatingDisplayColor;
+    /**
+     * The size of the component.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: RatingDisplaySize;
+    /**
+     * Renders a single filled icon with a label next to it.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `compact`
+     */
+    compact: boolean;
+    /**
+     * Overrides the selected value and returns 1 if compact is true.
+     *
+     * @override
+     */
+    protected getSelectedValue(): number;
+    /**
+     * Overrides the maximum icons and returns a max of 1 if compact is true.
+     *
+     * @override
+     */
+    protected getMaxIcons(): number;
+}

package/dist/dts/rating-display/rating-display.definition.d.ts

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