@fluentui/web-components 3.0.0-beta.4 → 3.0.0-beta.41

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

@@ -1,10 +1,11 @@
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import type { SliderSize } from './slider.options.js';
+import { Direction, Orientation } from '@microsoft/fast-web-utilities';
+import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
+import { FormAssociatedSlider } from './slider.form-associated.js';
 /**
  * The base class used for constructing a fluent-slider custom element
  * @public
  */
-export declare class Slider extends FASTSlider {
+export declare class Slider extends FormAssociatedSlider implements SliderConfiguration {
     /**
      * The size of the slider
      * @public
@@ -13,12 +14,201 @@ export declare class Slider extends FASTSlider {
      */
     size?: SliderSize;
     handleChange(source: any, propertyName: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): 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;
+    /**
+     * 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.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    protected readOnlyChanged(): void;
+    /**
+     * @internal
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    /**
+     * @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 "aria-valuetext" attribute based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string | null;
+    /**
+     * @internal
+     */
+    valueChanged(previous: string, next: string): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @defaultValue - 0
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: number;
+    protected minChanged(): void;
+    /**
+     * The maximum allowed value.
+     *
+     * @defaultValue - 10
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    protected maxChanged(): void;
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    step: number | undefined;
+    protected stepChanged(): void;
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: Orientation;
+    protected orientationChanged(): void;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * Gets the actual step value for the slider
+     *
+     */
+    private get stepValue();
+    /**
+     * Places the thumb based on the current value
+     *
+     * @public
+     * @param direction - writing mode
+     */
+    private setThumbPositionForOrientation;
+    /**
+     * 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;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handleMouseMove;
+    /**
+     * 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 handleWindowMouseUp;
+    private stopDragging;
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
+    handleMouseDown: (e: MouseEvent | null) => void;
+    private convertToConstrainedValue;
 }

package/dist/dts/slider/slider.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+declare class _Slider extends FASTElement {
+}
+interface _Slider extends FormAssociated {
+}
+declare const FormAssociatedSlider_base: typeof _Slider;
+/**
+ * @beta
+ */
+export declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
+export {};

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: number;
+    min: number;
+    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 { SliderOptions } from './slider.options.js';
+import { 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 { 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,42 @@
-import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { FASTElement } from '@microsoft/fast-element';
 import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends FASTProgressRing {
+export declare class Spinner extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * 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;
+    constructor();
 }

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>;
+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;

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

@@ -0,0 +1,215 @@
+/**
+ * Selector for the `checked` state.
+ * @public
+ */
+export declare const checkedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `disabled` state.
+ * @public
+ */
+export declare const disabledState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `filled-lighter` state.
+ * @public
+ */
+export declare const filledLighterState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `filled-darker` state.
+ * @public
+ */
+export declare const filledDarkerState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `ghost` state.
+ * @public
+ */
+export declare const ghostState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `inverted` state.
+ * @public
+ */
+export declare const invertedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `primary` state.
+ * @public
+ */
+export declare const primaryState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `outline` state.
+ * @public
+ */
+export declare const outlineState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `strong` state.
+ * @public
+ */
+export declare const strongState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `subtle` state.
+ * @public
+ */
+export declare const subtleState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `tint` state.
+ * @public
+ */
+export declare const tintState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `underline` state.
+ * @public
+ */
+export declare const underlineState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `transparent` state.
+ * @public
+ */
+export declare const transparentState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `circular` state.
+ * @public
+ */
+export declare const circularState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `rounded` state.
+ * @public
+ */
+export declare const roundedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `square` state.
+ * @public
+ */
+export declare const squareState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `tiny` state.
+ * @public
+ */
+export declare const tinyState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `extra-small` state.
+ * @public
+ */
+export declare const extraSmallState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `small` state.
+ * @public
+ */
+export declare const smallState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `large` state.
+ * @public
+ */
+export declare const largeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `extra-large` state.
+ * @public
+ */
+export declare const extraLargeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `huge` state.
+ * @public
+ */
+export declare const hugeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `alignment` start state.
+ * @public
+ */
+export declare const alignStartState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `alignment` end state.
+ * @public
+ */
+export declare const alignEndState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `inset` state.
+ * @public
+ */
+export declare const insetState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `iconOnly` state.
+ * @public
+ */
+export declare const iconOnlyState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `pressed` state.
+ * @public
+ */
+export declare const pressedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `brand` state.
+ * @public
+ */
+export declare const brandState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `error` state.
+ * @public
+ */
+export declare const errorState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `danger` state.
+ * @public
+ */
+export declare const dangerState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `important` state.
+ * @public
+ */
+export declare const importantState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `informative` state.
+ * @public
+ */
+export declare const informativeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `marigold` state.
+ * @public
+ */
+export declare const marigoldState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `neutral` state.
+ * @public
+ */
+export declare const neutralState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `severe` state.
+ * @public
+ */
+export declare const severeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `success` state.
+ * @public
+ */
+export declare const successState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `warning` state.
+ * @public
+ */
+export declare const warningState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `vertical` state.
+ * @public
+ */
+export declare const verticalState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `horizontal` state.
+ * @public
+ */
+export declare const horizontalState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `singleline` state.
+ * @public
+ */
+export declare const singleLineState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `multiline` state.
+ * @public
+ */
+export declare const multiLineState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `expanded` state.
+ * @public
+ */
+export declare const expandedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `block` state.
+ * @public
+ */
+export declare const blockState: import("@microsoft/fast-element").CSSDirective;

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

@@ -1,5 +1,6 @@
-export * from './switch.js';
-export * from './switch.options.js';
 export { definition as SwitchDefinition } from './switch.definition.js';
+export { Switch } from './switch.js';
+export type { SwitchOptions } from './switch.js';
+export { SwitchLabelPosition } from './switch.options.js';
 export { styles as SwitchStyles } from './switch.styles.js';
 export { template as SwitchTemplate } from './switch.template.js';

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

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

package/dist/dts/switch/switch.d.ts

@@ -1,13 +1,8 @@
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
-import { SwitchLabelPosition } from './switch.options.js';
-export declare class Switch extends FASTSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @default 'after'
-     * @remarks
-     * HTML Attribute: labelposition
-     */
-    labelPosition: SwitchLabelPosition | undefined;
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { BaseCheckbox } from '../checkbox/checkbox.js';
+export type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+export declare class Switch extends BaseCheckbox {
+    constructor();
 }

package/dist/dts/switch/switch.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckableFormAssociated } from '../form-associated/form-associated.js';
+declare class _Switch extends FASTElement {
+}
+interface _Switch extends CheckableFormAssociated {
+}
+declare const FormAssociatedSwitch_base: typeof _Switch;
+/**
+ * @beta
+ */
+export declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+export {};