@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

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,48 @@
+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
+ *
+ * @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>;

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

@@ -0,0 +1,29 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
+ * @public
+ */
+export declare const RatingDisplayColor: {
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly marigold: "marigold";
+};
+/**
+ * The size of a Rating Display can be `small`, `medium`, or `large`.
+ * @public
+ */
+export declare const RatingDisplaySize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * The Rating Display items can be one of several colors.
+ * @public
+ */
+export type RatingDisplayColor = ValuesOf<typeof RatingDisplayColor>;
+/**
+ * A Rating Display can be one of several preset sizes.
+ * @public
+ */
+export type RatingDisplaySize = ValuesOf<typeof RatingDisplaySize>;

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

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

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

@@ -0,0 +1,14 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { RatingDisplay } from './rating-display.js';
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export declare function ratingDisplayTemplate<T extends RatingDisplay>(): ElementViewTemplate<T>;
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export declare const template: ElementViewTemplate<RatingDisplay>;

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

@@ -1,5 +1,6 @@
-export * from './slider.js';
-export * from './slider.options.js';
 export { definition as SliderDefinition } from './slider.definition.js';
+export { Slider } from './slider.js';
+export { SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
+export type { SliderConfiguration, SliderOptions } from './slider.options.js';
 export { styles as SliderStyles } from './slider.styles.js';
 export { template as SliderTemplate } from './slider.template.js';

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

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

package/dist/dts/slider/slider.d.ts

@@ -1,11 +1,36 @@
+import { FASTElement } from '@microsoft/fast-element';
 import { Direction, Orientation } from '@microsoft/fast-web-utilities';
-import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
-import { FormAssociatedSlider } from './slider.form-associated.js';
+import { type SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
 /**
  * The base class used for constructing a fluent-slider custom element
+ *
+ * @slot thumb - The slot for a custom thumb element.
+ * @csspart thumb-container - The container element of the thumb.
+ * @csspart track-container - The container element of the track.
+ * @fires change - Fires a custom 'change' event when the value changes.
+ *
  * @public
  */
-export declare class Slider extends FormAssociatedSlider implements SliderConfiguration {
+export declare class Slider extends FASTElement implements SliderConfiguration {
+    /**
+     * 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 size of the slider
      * @public
@@ -13,7 +38,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: size
      */
     size?: SliderSize;
-    handleChange(source: any, propertyName: string): void;
+    handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**
      * Handles changes to step styling based on the step value
@@ -21,14 +46,110 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      */
     private handleStepStyles;
     /**
-     * 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.
+     * 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
+     */
+    protected initialValueChanged(_: string, next: string): void;
+    /**
+     * 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 element's validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage | `ElemenentInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * Whether the element is a candidate for its owning form's constraint validation.
      *
      * @public
      * @remarks
-     * HTML Attribute: readonly
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate | `ElemenentInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity | `ElemenentInternals.checkValidity`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity | `ElemenentInternals.reportValidity`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validity message.
+     * @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
      */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * The internal value of the input.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the input.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Disabled the component when its associated form is disabled.
+     *
+     * @internal
+     *
+     * @privateRemarks
+     * DO NOT change the `disabled` property or attribute here, because if the
+     * `disabled` attribute is present, reenabling an ancestor `<fieldset>`
+     * element will not reenabling this component.
+     */
+    formDisabledCallback(disabled: 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;
     /**
      * @internal
      */
@@ -45,6 +166,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @internal
      */
     direction: Direction;
+    directionChanged(): void;
     /**
      * @internal
      */
@@ -81,35 +203,50 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     get valueAsNumber(): number;
     set valueAsNumber(next: number);
     /**
-     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+     * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
      *
      * @public
      */
-    valueTextFormatter: (value: string) => string | null;
+    valueTextFormatter: (value: string) => string;
+    protected valueTextFormatterChanged(): void;
     /**
-     * @internal
+     * The element's disabled state.
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    valueChanged(previous: string, next: string): void;
+    disabled: boolean;
+    protected disabledChanged(): void;
     /**
      * The minimum allowed value.
      *
-     * @defaultValue - 0
      * @public
      * @remarks
      * HTML Attribute: min
      */
-    min: number;
+    min: string;
     protected minChanged(): void;
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    private get minAsNumber();
     /**
      * The maximum allowed value.
      *
-     * @defaultValue - 10
      * @public
      * @remarks
      * HTML Attribute: max
      */
-    max: number;
+    max: string;
     protected maxChanged(): void;
+    /**
+     * Returns the max property or the default value
+     *
+     * @internal
+     */
+    private get maxAsNumber();
     /**
      * Value to increment or decrement via arrow keys, mouse click or drag.
      *
@@ -117,17 +254,30 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @remarks
      * HTML Attribute: step
      */
-    step: number | undefined;
+    step: string;
     protected stepChanged(): void;
+    /**
+     * Returns the step property as a number.
+     *
+     * @internal
+     */
+    private get stepAsNumber();
     /**
      * The orientation of the slider.
      *
      * @public
      * @remarks
      * HTML Attribute: orientation
+     *
+     * @privateRemarks
+     * When checking the value of `this.orientation`, always compare it to
+     * `Orientation.vertical`, never to `Orientation.horizontal`, it’s because
+     * this property is optional, so it could be `undefined`. So any
+     * orientation-related behavior should consider horizontal as default, and
+     * apply different behavior when it’s vertical.
      */
-    orientation: Orientation;
-    protected orientationChanged(): void;
+    orientation?: Orientation;
+    protected orientationChanged(prev: Orientation | undefined, next: Orientation | undefined): void;
     /**
      * The selection mode.
      *
@@ -136,6 +286,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: mode
      */
     mode: SliderMode;
+    constructor();
     /**
      * @internal
      */
@@ -156,41 +307,28 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @public
      */
     decrement(): void;
-    keypressHandler: (e: KeyboardEvent) => void;
-    /**
-     * Gets the actual step value for the slider
-     *
-     */
-    private get stepValue();
+    handleKeydown(event: KeyboardEvent): boolean;
     /**
      * Places the thumb based on the current value
-     *
-     * @public
-     * @param direction - writing mode
      */
-    private setThumbPositionForOrientation;
+    private setSliderPosition;
     /**
      * Update the step multiplier used to ensure rounding errors from steps that
      * are not whole numbers
      */
     private updateStepMultiplier;
     private setupTrackConstraints;
-    private setupListeners;
-    /**
-     * @internal
-     */
-    initialValue: string;
     private get midpoint();
     private setupDefaultValue;
     /**
      *  Handle mouse moves during a thumb drag operation
      *  If the event handler is null it removes the events
      */
-    handleThumbMouseDown: (event: MouseEvent | null) => void;
+    handleThumbPointerDown: (event: PointerEvent | null) => boolean;
     /**
      *  Handle mouse moves during a thumb drag operation
      */
-    private handleMouseMove;
+    private handlePointerMove;
     /**
      * Calculate the new value based on the given raw pixel value.
      *
@@ -203,12 +341,16 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     /**
      * Handle a window mouse up during a drag operation
      */
-    private handleWindowMouseUp;
+    private handleWindowPointerUp;
     private stopDragging;
     /**
      *
-     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
      */
-    handleMouseDown: (e: MouseEvent | null) => void;
+    handlePointerDown: (event: PointerEvent | null) => boolean;
     private convertToConstrainedValue;
+    /**
+     * Makes sure the side effects of set up when the disabled state changes.
+     */
+    private setDisabledSideEffect;
 }

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

@@ -13,7 +13,7 @@ export declare const SliderSize: {
  * Applies bar height to the slider rail and diameter to the slider thumbs
  * @public
  */
-export declare type SliderSize = ValuesOf<typeof SliderSize>;
+export type SliderSize = ValuesOf<typeof SliderSize>;
 /**
  * @public
  */
@@ -25,7 +25,7 @@ export declare const SliderOrientation: {
  * The types for the orientation of the slider
  * @public
  */
-export declare type SliderOrientation = ValuesOf<typeof SliderOrientation>;
+export type SliderOrientation = ValuesOf<typeof SliderOrientation>;
 /**
  * @public
  */
@@ -36,13 +36,13 @@ export declare const SliderMode: {
  * The types for the selection mode of the slider
  * @public
  */
-export declare type SliderMode = ValuesOf<typeof SliderMode>;
+export type SliderMode = ValuesOf<typeof SliderMode>;
 /**
  * @public
  */
 export interface SliderConfiguration {
-    max: number;
-    min: number;
+    max?: string;
+    min?: string;
     orientation?: SliderOrientation;
     direction?: Direction;
     disabled?: boolean;
@@ -51,6 +51,6 @@ export interface SliderConfiguration {
  * Slider configuration options
  * @public
  */
-export declare type SliderOptions = {
+export type SliderOptions = {
     thumb?: StaticallyComposableHTML<Slider>;
 };

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

@@ -1,5 +1,5 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { SliderOptions } from './slider.options.js';
-import { Slider } from './slider.js';
+import type { SliderOptions } from './slider.options.js';
+import type { Slider } from './slider.js';
 export declare function sliderTemplate<T extends Slider>(options?: SliderOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<Slider>;

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

@@ -1,5 +1,6 @@
-export * from './spinner.js';
-export * from './spinner.options.js';
+export { BaseSpinner } from './spinner.base.js';
+export { Spinner } from './spinner.js';
+export { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 export { template as SpinnerTemplate } from './spinner.template.js';
 export { styles as SpinnerStyles } from './spinner.styles.js';
 export { definition as SpinnerDefinition } from './spinner.definition.js';

package/dist/dts/spinner/spinner.base.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+}

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

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

package/dist/dts/spinner/spinner.d.ts

@@ -1,15 +1,16 @@
-import { ProgressRing } from '../progress-ring/progress-ring.js';
-import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+import { BaseSpinner } from './spinner.base.js';
+import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 /**
- * The base class used for constructing a fluent-spinner custom element
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
  * @public
  */
-export declare class Spinner extends ProgressRing {
+export declare class Spinner extends BaseSpinner {
     /**
      * The size of the spinner
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -17,7 +18,6 @@ export declare class Spinner extends ProgressRing {
     /**
      * The appearance of the spinner
      * @public
-     * @default 'primary'
      * @remarks
      * HTML Attribute: appearance
      */