@fluentui/web-components 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/dts/patterns/aria-globals.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export declare class ARIAGlobalStatesAndProperties {
+    /**
+     * Indicates whether assistive technologies will present all, or only parts of,
+     * the changed region based on the change notifications defined by the aria-relevant attribute.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-atomic
+     */
+    ariaAtomic: 'true' | 'false' | string | null;
+    /**
+     * Indicates an element is being modified and that assistive technologies MAY want to wait
+     * until the modifications are complete before exposing them to the user.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-busy
+     */
+    ariaBusy: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-controls
+     */
+    ariaControls: string | null;
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-current
+     */
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
+    ariaDescribedby: string | null;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-details
+     */
+    ariaDetails: string | null;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-disabled
+     */
+    ariaDisabled: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element that provides an error message for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-errormessage
+     */
+    ariaErrormessage: string | null;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-flowto
+     */
+    ariaFlowto: string | null;
+    /**
+     * Indicates the availability and type of interactive popup element,
+     * such as menu or dialog, that can be triggered by an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-haspopup
+     */
+    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+    /**
+     * Indicates whether the element is exposed to an accessibility API
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
+    ariaHidden: 'false' | 'true' | string | null;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-invalid
+     */
+    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+    /**
+     * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-keyshortcuts
+     */
+    ariaKeyshortcuts: string | null;
+    /**
+     * Defines a string value that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string | null;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string | null;
+    /**
+     * Indicates that an element will be updated, and describes the types of updates the user agents,
+     * assistive technologies, and user can expect from the live region.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-live
+     */
+    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
+    /**
+     * Identifies an element (or elements) in order to define a visual,
+     * functional, or contextual parent/child relationship between DOM elements
+     * where the DOM hierarchy cannot be used to represent the relationship.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-owns
+     */
+    ariaOwns: string | null;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-relevant
+     */
+    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+    /**
+     * Defines a human-readable, author-localized description for the role of an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-roledescription
+     */
+    ariaRoledescription: string | null;
+}

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

@@ -0,0 +1,2 @@
+export * from './aria-globals.js';
+export * from './start-end.js';

package/dist/dts/patterns/start-end.d.ts

@@ -0,0 +1,44 @@
+import { CaptureType } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+/**
+ * Start configuration options
+ * @public
+ */
+export declare type StartOptions<TSource = any, TParent = any> = {
+    start?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * End configuration options
+ * @public
+ */
+export declare type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * Start/End configuration options
+ * @public
+ */
+export declare type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export declare class StartEnd {
+    start: HTMLSlotElement;
+    end: HTMLSlotElement;
+}
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;

package/dist/dts/progress-bar/base-progress.d.ts

@@ -0,0 +1,41 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * A base class for progress components.
+ * @public
+ */
+export declare class BaseProgress extends FASTElement {
+    /**
+     * The value of the progress
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: number | null;
+    protected valueChanged(): void;
+    /**
+     * The minimum value
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: number;
+    protected minChanged(): void;
+    /**
+     * The maximum value
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    protected maxChanged(): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    percentComplete: number;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private updatePercentComplete;
+}

package/dist/dts/progress-bar/index.d.ts

@@ -1,5 +1,5 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
+export { ProgressBar } from './progress-bar.js';
+export { ProgressOptions, ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, } from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -1,10 +1,17 @@
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+import { BaseProgress } from './base-progress.js';
+import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
-export declare class ProgressBar extends FASTProgress {
+export declare class ProgressBar extends BaseProgress {
     /**
      * The thickness of the progress bar
      *

package/dist/dts/progress-bar/progress-bar.options.d.ts

@@ -1,4 +1,5 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import { ProgressBar } from './progress-bar.js';
 /**
  * ProgressBarThickness Constants
  * @public
@@ -39,3 +40,11 @@ export declare const ProgressBarValidationState: {
  * @public
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+/**
+ * Progress configuration options
+ * @public
+ */
+export declare type ProgressOptions = {
+    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
+    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
+};

package/dist/dts/progress-bar/progress-bar.template.d.ts

@@ -1,3 +1,5 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
+import type { ProgressOptions } from './progress-bar.options.js';
 import type { ProgressBar } from './progress-bar.js';
+export declare function progressTemplate<T extends ProgressBar>(options?: ProgressOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<ProgressBar>;

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

@@ -1,4 +1,4 @@
-export * from './radio.js';
+export { Radio, RadioControl, RadioOptions } from './radio.js';
 export { definition as RadioDefinition } from './radio.definition.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';

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

@@ -1,5 +1,5 @@
-export * from './radio-group.js';
+export { RadioGroup } from './radio-group.js';
+export { RadioGroupOrientation } from './radio-group.options.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/index.d.ts

@@ -1,5 +1,5 @@
-export * from './slider.js';
-export * from './slider.options.js';
+export { Slider } from './slider.js';
+export { SliderConfiguration, SliderMode, SliderOptions, SliderOrientation, SliderSize } from './slider.options.js';
 export { definition as SliderDefinition } from './slider.definition.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;