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

package/dist/dts/option/option.d.ts

@@ -0,0 +1,262 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { Start } from '../patterns/start-end.js';
+/**
+ * A DropdownOption Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
+ *
+ * @tag fluent-dropdown-option
+ *
+ * @slot - The default slot for the option's content.
+ * @slot checked-indicator - The checked indicator.
+ * @slot description - Optional description content.
+ *
+ * @remarks
+ * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
+ * itself handles form association and value submission, rather than its parent Dropdown element. In this way, the
+ * Option element is a variation of the Checkbox element that is specifically designed for use in the Dropdown element.
+ *
+ * This class is named `DropdownOption` to avoid conflicts with the native `Option` global. Related constructs are also
+ * titled with `DropdownOption` to maintain consistency.
+ *
+ * @public
+ */
+export declare class DropdownOption extends FASTElement implements Start {
+    /**
+     * Indicates that the option is active.
+     *
+     * @public
+     */
+    active: boolean;
+    /**
+     * Changes the active state of the option when the active property changes.
+     *
+     * @param prev - the previous active state
+     * @param next - the current active state
+     * @internal
+     */
+    protected activeChanged(prev: boolean, next: boolean): void;
+    /**
+     * The current selected state of the option.
+     *
+     * @internal
+     */
+    currentSelected?: boolean;
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial selected state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    defaultSelected?: boolean;
+    /**
+     * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+     *
+     * @param prev - The previous initial selected state
+     * @param next - The current initial selected state
+     * @internal
+     */
+    protected defaultSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The collection of slotted description elements.
+     *
+     * @internal
+     */
+    descriptionSlot: Node[];
+    /**
+     * Changes the description state of the option when the description slot changes.
+     *
+     * @param prev - the previous collection of description elements
+     * @param next - the current collection of description elements
+     * @internal
+     */
+    descriptionSlotChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * The current disabled state of the option.
+     *
+     * @public
+     */
+    disabled?: boolean;
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial disabled state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabledAttribute?: boolean;
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * Indicates that the option value should sync with the value of the dropdown's control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `freeform`
+     */
+    freeform?: boolean;
+    /**
+     * The id of the option. If not provided, a unique id will be assigned.
+     *
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
+     */
+    id: string;
+    /**
+     * The initial value of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Indicates that the option is in a multiple selection mode context.
+     * @public
+     */
+    multiple: boolean;
+    /**
+     * Updates the multiple state of the option when the multiple property changes.
+     *
+     * @param prev - the previous multiple state
+     * @param next - the current multiple state
+     */
+    multipleChanged(prev: boolean, next: boolean): void;
+    /**
+     * The name of the option. This option's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * Reference to the start slot element.
+     *
+     * @internal
+     */
+    start: HTMLSlotElement;
+    /**
+     * The text to display in the dropdown control when the option is selected.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `text`
+     */
+    textAttribute?: string;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The collection of slotted `output` elements, used to display the value when the option is freeform.
+     *
+     * @internal
+     */
+    freeformOutputs?: HTMLOutputElement[];
+    /**
+     * 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<HTMLLabelElement>;
+    /**
+     * The option's current selected state.
+     *
+     * @public
+     */
+    get selected(): boolean;
+    set selected(next: boolean);
+    /**
+     * The display text of the option.
+     *
+     * @public
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
+     */
+    get text(): string;
+    /**
+     * The internal value of the option.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the option.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    constructor();
+    /**
+     * 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;
+    /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleSelected(force?: boolean): void;
+}

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

@@ -0,0 +1,9 @@
+import { DropdownOption } from './option.js';
+/**
+ * The Fluent Option Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-option>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof DropdownOption>;

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

@@ -0,0 +1,20 @@
+import type { StartOptions } from '../patterns/start-end.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { DropdownOption } from './option.js';
+/**
+ * Predicate function that determines if the element should be considered an option.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is an option.
+ * @public
+ */
+export declare function isDropdownOption(value: Node | null, tagName?: string): value is DropdownOption;
+/**
+ * The options for the {@link DropdownOption} component.
+ *
+ * @public
+ */
+export type DropdownOptionOptions = StartOptions<DropdownOption> & {
+    checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
+};

package/dist/dts/option/option.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for the {@link (DropdownOption:class)} component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,16 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import type { DropdownOption } from './option.js';
+import type { DropdownOptionOptions } from './option.options.js';
+/**
+ * Generates a template for the {@link (Option:class)} component.
+ *
+ * @param options - The {@link (OptionOptions:interface)} to use for generating the template.
+ * @returns The template object.
+ * @public
+ */
+export declare function dropdownOptionTemplate<T extends DropdownOption>(options?: DropdownOptionOptions): ElementViewTemplate<T>;
+/**
+ * Template for the Option component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<DropdownOption>;

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,58 @@
+import { type CaptureType } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+/**
+ * Start configuration options
+ * @public
+ */
+export type StartOptions<TSource = any, TParent = any> = {
+    start?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * End configuration options
+ * @public
+ */
+export type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * Start/End configuration options
+ * @public
+ */
+export type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+/**
+ * A mixin class implementing start slots.
+ * @public
+ */
+export declare class Start {
+    start: HTMLSlotElement;
+}
+/**
+ * A mixin class implementing end slots.
+ * @public
+ */
+export declare class End {
+    end: HTMLSlotElement;
+}
+/**
+ * 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 implements Start, End {
+    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 Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;

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

@@ -1,5 +1,6 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { BaseProgressBar } from './progress-bar.base.js';
+export { ProgressBar } from './progress-bar.js';
+export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.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.base.d.ts

@@ -0,0 +1,73 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ProgressBarValidationState } from './progress-bar.options.js';
+/**
+ * A Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
+export declare class BaseProgressBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The validation state of the progress bar
+     * @public
+     * HTML Attribute: `validation-state`
+     */
+    validationState: ProgressBarValidationState | null;
+    /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
+    /**
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
+     */
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
+}

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

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