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

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,8 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: size
      */
     size?: SliderSize;
-    handleChange(source: any, propertyName: string): void;
+    protected sizeChanged(prev: SliderSize | undefined, next: SliderSize | undefined): void;
+    handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**
      * Handles changes to step styling based on the step value
@@ -21,14 +47,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 +167,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @internal
      */
     direction: Direction;
+    directionChanged(): void;
     /**
      * @internal
      */
@@ -81,35 +204,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 +255,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 +287,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: mode
      */
     mode: SliderMode;
+    constructor();
     /**
      * @internal
      */
@@ -156,19 +308,11 @@ 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();
+    keypressHandler: (event: KeyboardEvent) => void;
     /**
      * 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
@@ -176,21 +320,17 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     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) => void;
     /**
      *  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 +343,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) => void;
     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,5 @@
-export * from './spinner.js';
-export * from './spinner.options.js';
+export { BaseSpinner, 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.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,25 +1,50 @@
-import { ProgressRing } from '../progress-ring/progress-ring.js';
-import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends ProgressRing {
+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();
+}
+/**
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class Spinner extends BaseSpinner {
     /**
      * The size of the spinner
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
     size?: SpinnerSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
     /**
      * The appearance of the spinner
      * @public
-     * @default 'primary'
      * @remarks
      * HTML Attribute: appearance
      */
     appearance?: SpinnerAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
 }

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

@@ -11,7 +11,7 @@ export declare const SpinnerAppearance: {
  * A Spinner's appearance can be either primary or inverted
  * @public
  */
-export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 /**
  * SpinnerSize constants
  * @public
@@ -29,4 +29,4 @@ export declare const SpinnerSize: {
  * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
  * @public
  */
-export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
+export type SpinnerSize = ValuesOf<typeof SpinnerSize>;

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

@@ -1,5 +1,2 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { ProgressRingOptions } from '../progress-ring/progress-ring.options.js';
-import { Spinner } from './spinner.js';
-export declare function progressRingTemplate<T extends Spinner>(options?: ProgressRingOptions): ElementViewTemplate<T>;
-export declare const template: ElementViewTemplate<Spinner>;
+import type { Spinner } from './spinner.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

package/dist/dts/styles/partials/index.d.ts

@@ -1 +1,2 @@
 export * from './badge.partials.js';
+export { typographyBody1Styles, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, } from './typography.partials.js';

package/dist/dts/styles/partials/typography.partials.d.ts

@@ -0,0 +1,18 @@
+import { CSSDirective } from '@microsoft/fast-element';
+export declare const typographyBody1Styles: CSSDirective;
+export declare const typographyBody1StrongStyles: CSSDirective;
+export declare const typographyBody1StrongerStyles: CSSDirective;
+export declare const typographyBody2Styles: CSSDirective;
+export declare const typographyCaption1Styles: CSSDirective;
+export declare const typographyCaption1StrongStyles: CSSDirective;
+export declare const typographyCaption1StrongerStyles: CSSDirective;
+export declare const typographyCaption2Styles: CSSDirective;
+export declare const typographyCaption2StrongStyles: CSSDirective;
+export declare const typographySubtitle1Styles: CSSDirective;
+export declare const typographySubtitle2Styles: CSSDirective;
+export declare const typographySubtitle2StrongerStyles: CSSDirective;
+export declare const typographyTitle1Styles: CSSDirective;
+export declare const typographyTitle2Styles: CSSDirective;
+export declare const typographyTitle3Styles: CSSDirective;
+export declare const typographyLargeTitleStyles: CSSDirective;
+export declare const typographyDisplayStyles: CSSDirective;