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

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

@@ -1,12 +1,12 @@
-import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
-import { TabsAppearance, TabsSize } from './tabs.options.js';
+import { StartEnd } from '../patterns/index.js';
+import { BaseTabs } from './tabs.base.js';
+import { TabsAppearance, type TabsSize } from './tabs.options.js';
 /**
- * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
+ * @deprecated - Use tablist instead
  *
- * @class TabList component
- * @public
+ * @tag fluent-tabs
  */
-export declare class Tabs extends FASTTabs {
+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.
@@ -64,21 +64,31 @@ export declare class Tabs extends FASTTabs {
      */
     private getTabScale;
     /**
-     * applyUpdatedCSSValues
+     * Calculates and applies updated values to CSS variables.
      *
-     * calculates and applies updated values to CSS variables
-     * @param tab
+     * @param tab - the tab element to apply the updated values to
+     * @internal
      */
     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
+     * 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 - the tab element to apply the updated values to
+     * @internal
      */
     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.
+     * Gets the position data for a tab element relative to its parent
+     * @param tab - The tab element to get position data for
+     * @returns The position data for the tab
+     */
+    private getTabPositionData;
+    /**
+     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+     * tab indicator.
+     *
+     * @internal
      */
     private setTabData;
     private setTabOffsetCSSVar;
@@ -86,3 +96,5 @@ export declare class Tabs extends FASTTabs {
     activeidChanged(oldValue: string, newValue: string): void;
     tabsChanged(): void;
 }
+export interface Tabs extends StartEnd {
+}

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

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

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

@@ -1,14 +1,32 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { Tabs } from './tabs.js';
 export declare const TabsAppearance: {
     readonly subtle: "subtle";
     readonly transparent: "transparent";
 };
-export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+export 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>;
-export { TabsOrientation };
+export type TabsSize = ValuesOf<typeof TabsSize>;
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export 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 type TabsOrientation = ValuesOf<typeof TabsOrientation>;

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

@@ -1 +1,8 @@
-export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation/tabs.js").FASTTabs, any>;
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { Tabs } from './tabs.js';
+import type { TabsOptions } from './tabs.options.js';
+/**
+ * @deprecated - Use tablist instead
+ */
+export declare function tabsTemplate<T extends Tabs>(options?: TabsOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Tabs, any>;

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

@@ -1,5 +1,5 @@
-export * from './text.js';
-export * from './text.options.js';
+export { Text } from './text.js';
+export { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 export { template as TextTemplate } from './text.template.js';
 export { styles as TextStyles } from './text.styles.js';
 export { definition as TextDefinition } from './text.definition.js';

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

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

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

@@ -1,10 +1,19 @@
 import { FASTElement } from '@microsoft/fast-element';
-import type { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
+import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 /**
  * The base class used for constructing a fluent-text custom element
+ *
+ * @tag fluent-text
+ *
  * @public
  */
 export declare class Text extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The text will not wrap
      * NOTE: In Fluent UI React v9 this is "wrap"
@@ -73,7 +82,7 @@ export declare class Text extends FASTElement {
      */
     font?: TextFont;
     /**
-     * THe Text weight
+     * The Text weight
      *
      * @public
      * @remarks
@@ -81,7 +90,7 @@ export declare class Text extends FASTElement {
      */
     weight?: TextWeight;
     /**
-     * THe Text align
+     * The Text alignment
      *
      * @public
      * @remarks

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * TextSize constants
  * @public
@@ -20,7 +20,7 @@ export declare const TextSize: {
  * The font size and line height based on the theme tokens
  * @public
  */
-export declare type TextSize = ValuesOf<typeof TextSize>;
+export type TextSize = ValuesOf<typeof TextSize>;
 /**
  * TextFont Constants
  * @public
@@ -34,7 +34,7 @@ export declare const TextFont: {
  * Applies font family to the content
  * @public
  */
-export declare type TextFont = ValuesOf<typeof TextFont>;
+export type TextFont = ValuesOf<typeof TextFont>;
 /**
  * TextWeight Constants
  * @public
@@ -49,7 +49,7 @@ export declare const TextWeight: {
  * Applies font weight to the content
  * @public
  */
-export declare type TextWeight = ValuesOf<typeof TextWeight>;
+export type TextWeight = ValuesOf<typeof TextWeight>;
 /**
  * TextAlign Constants
  * @public
@@ -64,4 +64,4 @@ export declare const TextAlign: {
  * Aligns the content
  * @public
  */
-export declare type TextAlign = ValuesOf<typeof TextAlign>;
+export type TextAlign = ValuesOf<typeof TextAlign>;

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Text } from './text.js';
 /**
  * @internal

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

@@ -1,6 +1,7 @@
-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';
-export { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
+export { BaseTextInput } from './text-input.base.js';
+export { TextInput } from './text-input.js';
+export { TextInputAppearance, TextInputControlSize, TextInputType } from './text-input.options.js';
+export type { TextInputOptions } from './text-input.options.js';
+export { styles as TextInputStyles } from './text-input.styles.js';
+export { template as TextInputTemplate } from './text-input.template.js';

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

@@ -0,0 +1,402 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { TextInputType } from './text-input.options.js';
+/**
+ * A Text Input Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
+ *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot - The default slot for button content
+ * @csspart label - The internal `<label>` element
+ * @csspart root - the root container for the internal control
+ * @csspart control - The internal `<input>` control
+ * @public
+ */
+export declare class BaseTextInput extends FASTElement {
+    /**
+     * Indicates the element's autocomplete state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autocomplete`
+     */
+    autocomplete?: string;
+    /**
+     * Indicates that the element should get focus after the page finishes loading.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
+     */
+    autofocus: boolean;
+    /**
+     * The current value of the input.
+     * @public
+     * @remarks
+     * HTML Attribute: `current-value`
+     */
+    currentValue: string;
+    /**
+     * Tracks the current value of the input.
+     *
+     * @param prev - the previous value
+     * @param next - the next value
+     *
+     * @internal
+     */
+    currentValueChanged(prev: string, next: string): void;
+    /**
+     * The default slotted content. This is the content that appears in the text field label.
+     *
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * Updates the control label visibility based on the presence of default slotted content.
+     *
+     * @internal
+     */
+    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * Sets the directionality of the element to be submitted with form data.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `dirname`
+     */
+    dirname?: string;
+    /**
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled?: boolean;
+    /**
+     * 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;
+    /**
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the element to the initial value.
+     *
+     * @internal
+     */
+    initialValueChanged(): void;
+    /**
+     * Allows associating a `<datalist>` to the element by ID.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `list`
+     */
+    list: string;
+    /**
+     * The maximum number of characters a user can enter.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `maxlength`
+     */
+    maxlength: number;
+    /**
+     * The minimum number of characters a user can enter.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `minlength`
+     */
+    minlength: number;
+    /**
+     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `multiple`
+     */
+    multiple: boolean;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * A regular expression that the value must match to pass validation.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `pattern`
+     */
+    pattern: string;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `placeholder`
+     * This attribute is not a valid substitute for a label.
+     */
+    placeholder: string;
+    /**
+     * When true, the control will be immutable by user interaction.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `readonly`
+     */
+    readOnly?: boolean;
+    /**
+     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+     *
+     * @internal
+     */
+    readOnlyChanged(): void;
+    /**
+     * The element's required attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    required: boolean;
+    /**
+     * Syncs the element's internal `aria-required` state with the `required` attribute.
+     *
+     * @param previous - the previous required state
+     * @param next - the current required state
+     *
+     * @internal
+     */
+    requiredChanged(previous: boolean, next: boolean): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size: number;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `spellcheck`
+     */
+    spellcheck: boolean;
+    /**
+     * Allows setting a type or mode of text.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    type: TextInputType;
+    /**
+     * A reference to the internal input element.
+     *
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * Calls the `setValidity` method when the control reference changes.
+     *
+     * @param prev - the previous control reference
+     * @param next - the current control reference
+     *
+     * @internal
+     */
+    controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
+    /**
+     * A reference to the internal label element.
+     *
+     * @internal
+     */
+    controlLabel: HTMLLabelElement;
+    /**
+     * Indicates that the value has been changed by the user.
+     *
+     * @internal
+     */
+    private dirtyValue;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * 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 readonly formAssociated = true;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * The current value of the input.
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * 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;
+    /**
+     * Handles the internal control's `keypress` event.
+     *
+     * @internal
+     */
+    beforeinputHandler(e: InputEvent): boolean | void;
+    /**
+     * Change event handler for inner control.
+     *
+     * @internal
+     * @privateRemarks
+     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
+     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     */
+    changeHandler(e: InputEvent): boolean | void;
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Clicks the inner control when the component is clicked.
+     *
+     * @param e - the event object
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    /**
+     * Focuses the inner control when the component is focused.
+     *
+     * @param e - the event object
+     * @public
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Resets the value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Handles implicit form submission when the user presses the "Enter" key.
+     *
+     * @internal
+     */
+    private implicitSubmit;
+    /**
+     * Handles the internal control's `input` event.
+     *
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Handles the internal control's `keydown` event.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Selects all the text in the text field.
+     *
+     * @public
+     * @privateRemarks
+     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
+     * emitting a `select` event whenever the internal control emits a `select` event
+     *
+     */
+    select(): void;
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * 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;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+}

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

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