@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.10

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

@@ -1,6 +1,10 @@
-import { FASTSwitch } from '@microsoft/fast-foundation';
+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 { ValuesOf } from '@microsoft/fast-foundation';
+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/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export * from './tab.js';
+export { template as TabTemplate } from './tab.template.js';
+export { styles as TabStyles } from './tab.styles.js';
+export { definition as TabDefinition } from './tab.definition.js';

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

@@ -0,0 +1,23 @@
+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 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.definition.d.ts

@@ -0,0 +1,2 @@
+import { Tab } from './tab.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tab>;

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,4 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+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/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export * from './tab-panel.js';
+export { template as TabPanelTemplate } from './tab-panel.template.js';
+export { styles as TabPanelStyles } from './tab-panel.styles.js';
+export { definition as TabPanelDefinition } from './tab-panel.definition.js';

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

@@ -0,0 +1,3 @@
+import { FASTElement } from '@microsoft/fast-element';
+export declare class TabPanel extends FASTElement {
+}

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

@@ -0,0 +1,2 @@
+import { TabPanel } from './tab-panel.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TabPanel>;

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,4 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { TabPanel } from './tab-panel.js';
+export declare function tabPanelTemplate<T extends TabPanel>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<TabPanel, any>;

package/dist/dts/tabs/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './tabs.js';
+export * from './tabs.options.js';
+export { template as TabsTemplate } from './tabs.template.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { definition as TabsDefinition } from './tabs.definition.js';

package/dist/dts/tabs/tabs.d.ts

@@ -0,0 +1,173 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/index.js';
+import { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
+/**
+ *
+ * @class TabList component
+ * @public
+ */
+export declare class BaseTabs extends FASTElement {
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TabsOrientation;
+    /**
+     * @internal
+     */
+    orientationChanged(): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+export declare class Tabs extends BaseTabs {
+    /**
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private activeTabData;
+    /**
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private previousActiveTabData;
+    /**
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
+     */
+    private activeTabOffset;
+    /**
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     */
+    private activeTabScale;
+    /**
+     * styles
+     * used in the class for storing the css variables required for animations
+     */
+    private styles;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TabsAppearance;
+    /**
+     * disabled
+     * Used for disabling all click and keyboard events for the tabs, child tab elements and tab panel elements. UI styling of content and tabs will appear as "grayed out."
+     */
+    disabled?: boolean;
+    /**
+     * size
+     * defaults to medium.
+     * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
+     */
+    size?: TabsSize;
+    /**
+     * calculateAnimationProperties
+     *
+     * Recalculates the active tab offset and scale.
+     * These values will be applied to css variables that control the tab active indicator position animations
+     */
+    private calculateAnimationProperties;
+    /**
+     * getSelectedTabPosition - gets the x or y coordinates of the tab
+     */
+    private getTabPosition;
+    /**
+     * getSelectedTabScale - gets the scale of the tab
+     */
+    private getTabScale;
+    /**
+     * applyUpdatedCSSValues
+     *
+     * calculates and applies updated values to CSS variables
+     * @param tab
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * animationLoop
+     * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
+     * @param tab
+     */
+    private animationLoop;
+    /**
+     * setTabData
+     * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+     */
+    private setTabData;
+    private setTabOffsetCSSVar;
+    private setTabScaleCSSVar;
+    activeidChanged(oldValue: string, newValue: string): void;
+    tabsChanged(): void;
+}
+export interface Tabs extends StartEnd {
+}

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

@@ -0,0 +1,2 @@
+import { Tabs } from './tabs.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tabs>;

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

@@ -0,0 +1,32 @@
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import { Tabs } from './tabs.js';
+export declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+export declare const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare type TabsSize = ValuesOf<typeof TabsSize>;
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export declare type TabsOptions = StartEndOptions<Tabs>;
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TabsOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * The types for the Tabs component
+ * @public
+ */
+export declare type TabsOrientation = ValuesOf<typeof TabsOrientation>;

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,5 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Tabs } from './tabs.js';
+import { TabsOptions } from './tabs.options.js';
+export declare function tabsTemplate<T extends Tabs>(options?: TabsOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Tabs, any>;

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

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

package/dist/dts/text-input/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/text-input/index.d.ts

@@ -0,0 +1,5 @@
+export * from './text-input.js';
+export * from './text-input.options.js';
+export { template as TextInputTemplate } from './text-input.template.js';
+export { styles as TextInputStyles } from './text-input.styles.js';
+export { definition as TextInputDefinition } from './text-input.definition.js';

package/dist/dts/text-input/text-field.form-associated.d.ts

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

package/dist/dts/text-input/text-input.d.ts

@@ -0,0 +1,154 @@
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from '../patterns/index.js';
+import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
+import { TextFieldType } from './text-input.options.js';
+import { FormAssociatedTextField } from './text-field.form-associated.js';
+export { TextFieldType };
+export declare type TextFieldOptions = StartEndOptions<TextInput>;
+export declare class TextInput extends FormAssociatedTextField {
+    /**
+     * Defines TextInput control size
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: control-size
+     */
+    controlSize?: TextInputControlSize;
+    /**
+     * Defines TextInput appearance.
+     *
+     * @public
+     * @default 'outline'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: TextInputAppearance;
+    /**
+     * 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;
+    /**
+     * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    protected autofocusChanged(): void;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    protected placeholderChanged(): void;
+    /**
+     * Allows setting a type or mode of text.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: TextFieldType;
+    private typeChanged;
+    /**
+     * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+     * @public
+     * @remarks
+     * HTML Attribute: list
+     */
+    list: string;
+    protected listChanged(): void;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    protected maxlengthChanged(): void;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    protected minlengthChanged(): void;
+    /**
+     * A regular expression that the value must match to pass validation.
+     * @public
+     * @remarks
+     * HTMLAttribute: pattern
+     */
+    pattern: string;
+    protected patternChanged(): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    protected sizeChanged(): void;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    spellcheck: boolean;
+    protected spellcheckChanged(): void;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * Selects all the text in the text field
+     *
+     * @public
+     */
+    select(): void;
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export declare class DelegatesARIATextbox {
+}
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+export interface TextInput extends StartEnd, DelegatesARIATextbox {
+}

package/dist/dts/text-input/text-input.definition.d.ts

@@ -0,0 +1,10 @@
+import { TextInput } from './text-input.js';
+/**
+ * The Fluent TextInput Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text-input\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TextInput>;

package/dist/dts/text-input/text-input.options.d.ts

@@ -0,0 +1,61 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * TextInput size constants
+ * @public
+ */
+export declare const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * Applies size styling to TextInput
+ * @public
+ */
+export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+/**
+ * TextInput appearance constants
+ * @public
+ */
+export declare const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+/**
+ * Applies appearance styling to TextInput
+ * @public
+ */
+export declare type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+/**
+ * Text field sub-types
+ * @public
+ */
+export declare const TextFieldType: {
+    /**
+     * An email TextField
+     */
+    readonly email: "email";
+    /**
+     * A password TextField
+     */
+    readonly password: "password";
+    /**
+     * A telephone TextField
+     */
+    readonly tel: "tel";
+    /**
+     * A text TextField
+     */
+    readonly text: "text";
+    /**
+     * A URL TextField
+     */
+    readonly url: "url";
+};
+/**
+ * Types for the text field sub-types
+ * @public
+ */
+export declare type TextFieldType = ValuesOf<typeof TextFieldType>;

package/dist/dts/text-input/text-input.styles.d.ts

@@ -0,0 +1,4 @@
+/** TextInput styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text-input/text-input.template.d.ts

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { TextFieldOptions, TextInput } from './text-input.js';
+export declare function textFieldTemplate<T extends TextInput>(options?: TextFieldOptions): ElementViewTemplate<T>;
+/**
+ * @internal
+ */
+export declare const template: ElementViewTemplate<TextInput>;