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

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-utilities.d.ts

@@ -0,0 +1,5 @@
+import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export declare function convertPixelToPercent(pixelPos: number, minPosition: number, maxPosition: number, direction?: Direction): number;

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,10 +1,38 @@
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import type { SliderSize } from './slider.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { Direction, Orientation } from '@microsoft/fast-web-utilities';
+import { type SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
 /**
  * The base class used for constructing a fluent-slider custom element
+ *
+ * @tag fluent-slider
+ *
+ * @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 FASTSlider {
+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
@@ -12,13 +40,319 @@ export declare class Slider extends FASTSlider {
      * HTML Attribute: size
      */
     size?: SliderSize;
-    handleChange(source: any, propertyName: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**
      * Handles changes to step styling based on the step value
      * NOTE: This function is not a changed callback, stepStyles is not observable
      */
     private handleStepStyles;
+    /**
+     * 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
+     * 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
+     */
+    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
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    directionChanged(): void;
+    /**
+     * @internal
+     */
+    isDragging: boolean;
+    /**
+     * @internal
+     */
+    position: string;
+    /**
+     * @internal
+     */
+    trackWidth: number;
+    /**
+     * @internal
+     */
+    trackMinWidth: number;
+    /**
+     * @internal
+     */
+    trackHeight: number;
+    /**
+     * @internal
+     */
+    trackLeft: number;
+    /**
+     * @internal
+     */
+    trackMinHeight: number;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string;
+    protected valueTextFormatterChanged(): void;
+    /**
+     * The element's disabled state.
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: string;
+    protected minChanged(): void;
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    private get minAsNumber();
+    /**
+     * The maximum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    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.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    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(prev: Orientation | undefined, next: Orientation | undefined): void;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    handleKeydown(event: KeyboardEvent): boolean;
+    /**
+     * Places the thumb based on the current value
+     */
+    private setSliderPosition;
+    /**
+     * Update the step multiplier used to ensure rounding errors from steps that
+     * are not whole numbers
+     */
+    private updateStepMultiplier;
+    private setupTrackConstraints;
+    private get midpoint();
+    private setupDefaultValue;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
+    handleThumbPointerDown: (event: PointerEvent | null) => boolean;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handlePointerMove;
+    /**
+     * Calculate the new value based on the given raw pixel value.
+     *
+     * @param rawValue - the value to be converted to a constrained value
+     * @returns the constrained value
+     *
+     * @internal
+     */
+    calculateNewValue(rawValue: number): number;
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    private handleWindowPointerUp;
+    private stopDragging;
+    /**
+     *
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
+     */
+    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

@@ -1,5 +1,6 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-export { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import type { Direction } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import type { Slider } from './slider.js';
 /**
  * SliderSize Constants
  * @public
@@ -12,4 +13,44 @@ 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
+ */
+export declare const SliderOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * The types for the orientation of the slider
+ * @public
+ */
+export type SliderOrientation = ValuesOf<typeof SliderOrientation>;
+/**
+ * @public
+ */
+export declare const SliderMode: {
+    readonly singleValue: "single-value";
+};
+/**
+ * The types for the selection mode of the slider
+ * @public
+ */
+export type SliderMode = ValuesOf<typeof SliderMode>;
+/**
+ * @public
+ */
+export interface SliderConfiguration {
+    max?: string;
+    min?: string;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
+/**
+ * Slider configuration options
+ * @public
+ */
+export type SliderOptions = {
+    thumb?: StaticallyComposableHTML<Slider>;
+};

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

@@ -1,3 +1,5 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-export declare const template: ElementViewTemplate<FASTSlider>;
+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,18 @@
-import { FASTProgressRing } from '@microsoft/fast-foundation/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
+ *
+ * @tag fluent-spinner
+ *
  * @public
  */
-export declare class Spinner extends FASTProgressRing {
+export declare class Spinner extends BaseSpinner {
     /**
      * The size of the spinner
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -17,7 +20,6 @@ export declare class Spinner extends FASTProgressRing {
     /**
      * The appearance of the spinner
      * @public
-     * @default 'primary'
      * @remarks
      * HTML Attribute: appearance
      */

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

@@ -1,9 +1,5 @@
 import { Spinner } from './spinner.js';
 /**
- * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
- * {@link @microsoft/fast-foundation#progress-ringTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-spinner\>

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * SpinnerAppearance constants
  * @public
@@ -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,3 +1,2 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { Spinner } from './spinner.js';
-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;