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

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

@@ -1,7 +1,58 @@
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { FormAssociatedRadio } from './radio.form-associated.js';
 /**
- * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export declare class Radio extends FASTRadio {
+export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+/**
+ * Radio configuration options
+ * @public
+ */
+export declare type RadioOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends FormAssociatedRadio implements RadioControl {
+    /**
+     * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
+     */
+    name: string;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    private get radioGroup();
+    /**
+     * @internal
+     */
+    defaultCheckedChanged(): void;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private isInsideRadioGroup;
+    /**
+     * Handles key presses on the radio.
+     * @beta
+     */
+    keypressHandler(e: KeyboardEvent): boolean | void;
 }

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

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

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

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

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

@@ -2,4 +2,3 @@ export * from './radio-group.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.d.ts

@@ -1,9 +1,10 @@
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { RadioGroupOrientation } from './radio-group.options.js';
 /**
  * The base class used for constructing a fluent-radio-group custom element
  * @public
  */
-export declare class RadioGroup extends FASTRadioGroup {
+export declare class RadioGroup extends FASTElement {
     /**
      * sets radio layout styles
      *
@@ -12,4 +13,92 @@ export declare class RadioGroup extends FASTRadioGroup {
      * HTML Attribute: stacked
      */
     stacked: boolean;
+    /**
+     * When true, the child radios 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;
+    /**
+     * Disables the radio group and child radios.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the radio group. Setting this value will set the name value
+     * for all child radio elements.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name: string;
+    protected nameChanged(): void;
+    /**
+     * The value of the checked radio
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: string;
+    protected valueChanged(): void;
+    /**
+     * The orientation of the group
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: RadioGroupOrientation;
+    childItems: HTMLElement[];
+    /**
+     * @internal
+     */
+    slottedRadioButtons: HTMLElement[];
+    protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
+    private selectedRadio;
+    private focusedRadio;
+    private direction;
+    private get parentToolbar();
+    private get isInsideToolbar();
+    private get isInsideFoundationToolbar();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupRadioButtons;
+    private radioChangeHandler;
+    private moveToRadioByIndex;
+    private moveRightOffGroup;
+    private moveLeftOffGroup;
+    /**
+     * @internal
+     */
+    focusOutHandler: (e: FocusEvent) => boolean | void;
+    /**
+     * @internal
+     */
+    handleDisabledClick: (e: MouseEvent) => void | boolean;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void | boolean;
+    private shouldMoveOffGroupToTheRight;
+    private shouldMoveOffGroupToTheLeft;
+    private checkFocusedRadio;
+    private moveRight;
+    private moveLeft;
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
+    keydownHandler: (e: KeyboardEvent) => boolean | 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 declare 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 { RadioGroup } from './radio-group.js';
+export declare function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<RadioGroup>;

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.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
@@ -13,3 +14,43 @@ export declare const SliderSize: {
  * @public
  */
 export declare 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 declare 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 declare type SliderMode = ValuesOf<typeof SliderMode>;
+/**
+ * @public
+ */
+export interface SliderConfiguration {
+    max: number;
+    min: number;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
+/**
+ * Slider configuration options
+ * @public
+ */
+export declare 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/spinner.d.ts

@@ -1,10 +1,10 @@
-import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { ProgressRing } from '../progress-ring/progress-ring.js';
 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 ProgressRing {
     /**
      * The size of the spinner
      *

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

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

@@ -1,3 +1,5 @@
 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>;

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

@@ -1,6 +1,10 @@
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import type { StaticallyComposableHTML } from '../utils/index.js';
 import { SwitchLabelPosition } from './switch.options.js';
-export declare class Switch extends FASTSwitch {
+import { FormAssociatedSwitch } from './switch.form-associated.js';
+export declare type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+export declare class Switch extends FormAssociatedSwitch {
     /**
      * The label position of the switch
      *
@@ -10,4 +14,32 @@ export declare class Switch extends FASTSwitch {
      * HTML Attribute: labelposition
      */
     labelPosition: SwitchLabelPosition | undefined;
+    /**
+     * 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;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    constructor();
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
 }

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 {};

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * SwitchLabelPosition Constants
  * @public

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

@@ -1,3 +1,4 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { Switch } from './switch.js';
+import { Switch, SwitchOptions } from './switch.js';
+export declare function switchTemplate<T extends Switch>(options?: SwitchOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<Switch>;

package/dist/dts/tab/tab.d.ts

@@ -1,8 +1,23 @@
-import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd, StartEndOptions } from '../patterns/index.js';
+/**
+ * Tab configuration options
+ * @public
+ */
+export declare type TabOptions = StartEndOptions<Tab>;
 /**
  * Tab extends the FASTTab and is a child of the TabList
  */
-export declare class Tab extends FASTTab {
+export declare class Tab extends FASTElement {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
     private styles;
     connectedCallback(): void;
 }
+export interface Tab extends StartEnd {
+}

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

@@ -1,4 +1,4 @@
-import { FASTTab, TabOptions } from '@microsoft/fast-foundation/tab.js';
 import { ElementViewTemplate } from '@microsoft/fast-element';
-export declare function tabTemplate<T extends FASTTab>(options?: TabOptions): ElementViewTemplate<T>;
-export declare const template: ElementViewTemplate<FASTTab, any>;
+import { Tab, TabOptions } from './tab.js';
+export declare function tabTemplate<T extends Tab>(options?: TabOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Tab, any>;

package/dist/dts/tab-panel/tab-panel.d.ts

@@ -1,3 +1,3 @@
-import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
-export declare class TabPanel extends FASTTabPanel {
+import { FASTElement } from '@microsoft/fast-element';
+export declare class TabPanel extends FASTElement {
 }