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

package/dist/dts/styles/states/index.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Selector for the `active` state.
+ * @public
+ */
+export declare const activeState: ":state(active)" | "[state--active]";
+/**
+ * Selector for the `bad-input` state.
+ * @public
+ */
+export declare const badInputState: ":state(bad-input)" | "[state--bad-input]";
+/**
+ * Selector for the `checked` state.
+ * @public
+ */
+export declare const checkedState: ":state(checked)" | "[state--checked]";
+/**
+ * Selector for the `custom-error` state.
+ * @public
+ */
+export declare const customErrorState: ":state(custom-error)" | "[state--custom-error]";
+/**
+ * Selector for the `description` state.
+ */
+export declare const descriptionState: ":state(description)" | "[state--description]";
+/**
+ * Selector for the `disabled` state.
+ * @public
+ */
+export declare const disabledState: ":state(disabled)" | "[state--disabled]";
+/**
+ * Selector for the `error` state.
+ * @public
+ */
+export declare const errorState: ":state(error)" | "[state--error]";
+/**
+ * Selector for the `flip-block` state.
+ * @public
+ */
+export declare const flipBlockState: ":state(flip-block)" | "[state--flip-block]";
+/**
+ * Selector for the `focus-visible` state.
+ * @public
+ */
+export declare const focusVisibleState: ":state(focus-visible)" | "[state--focus-visible]";
+/**
+ * Selector for the `has-message` state.
+ * @public
+ */
+export declare const hasMessageState: ":state(has-message)" | "[state--has-message]";
+/**
+ * Selector for the `indeterminate` state.
+ * @public
+ */
+export declare const indeterminateState: ":state(indeterminate)" | "[state--indeterminate]";
+/**
+ * Selector for the `multiselect` state.
+ * @public
+ */
+export declare const multipleState: ":state(multiple)" | "[state--multiple]";
+/**
+ * Selector for the `open` state.
+ * @public
+ */
+export declare const openState: ":state(open)" | "[state--open]";
+/**
+ * Selector for the `pattern-mismatch` state.
+ * @public
+ */
+export declare const patternMismatchState: ":state(pattern-mismatch)" | "[state--pattern-mismatch]";
+/**
+ * Selector for the `placeholder-shown` state.
+ * @public
+ */
+export declare const placeholderShownState: ":state(placeholder-shown)" | "[state--placeholder-shown]";
+/**
+ * Selector for the `pressed` state.
+ * @public
+ */
+export declare const pressedState: ":state(pressed)" | "[state--pressed]";
+/**
+ * Selector for the `range-overflow` state.
+ * @public
+ */
+export declare const rangeOverflowState: ":state(range-overflow)" | "[state--range-overflow]";
+/**
+ * Selector for the `range-underflow` state.
+ * @public
+ */
+export declare const rangeUnderflowState: ":state(range-underflow)" | "[state--range-underflow]";
+/**
+ * Selector for the `selected` state.
+ * @public
+ */
+export declare const selectedState: ":state(selected)" | "[state--selected]";
+/**
+ * Selector for the `step-mismatch` state.
+ * @public
+ */
+export declare const stepMismatchState: ":state(step-mismatch)" | "[state--step-mismatch]";
+/**
+ * Selector for the `submenu` state.
+ * @public
+ */
+export declare const submenuState: ":state(submenu)" | "[state--submenu]";
+/**
+ * Selector for the `too-long` state.
+ * @public
+ */
+export declare const tooLongState: ":state(too-long)" | "[state--too-long]";
+/**
+ * Selector for the `too-short` state.
+ * @public
+ */
+export declare const tooShortState: ":state(too-short)" | "[state--too-short]";
+/**
+ * Selector for the `type-mismatch` state.
+ * @public
+ */
+export declare const typeMismatchState: ":state(type-mismatch)" | "[state--type-mismatch]";
+/**
+ * Selector for the `user-invalid` state.
+ * @public
+ */
+export declare const userInvalidState: ":state(user-invalid)" | "[state--user-invalid]";
+/**
+ * Selector for the `valid` state.
+ * @public
+ */
+export declare const validState: ":state(valid)" | "[state--valid]";
+/**
+ * Selector for the `value-missing` state.
+ * @public
+ */
+export declare const valueMissingState: ":state(value-missing)" | "[state--value-missing]";

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

@@ -1,5 +1,6 @@
-export * from './switch.js';
-export * from './switch.options.js';
 export { definition as SwitchDefinition } from './switch.definition.js';
+export { Switch } from './switch.js';
+export type { SwitchOptions } from './switch.js';
+export { SwitchLabelPosition } from './switch.options.js';
 export { styles as SwitchStyles } from './switch.styles.js';
 export { template as SwitchTemplate } from './switch.template.js';

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

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

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

@@ -1,13 +1,15 @@
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
-import { SwitchLabelPosition } from './switch.options.js';
-export declare class Switch extends FASTSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @default 'after'
-     * @remarks
-     * HTML Attribute: labelposition
-     */
-    labelPosition: SwitchLabelPosition | undefined;
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { BaseCheckbox } from '../checkbox/checkbox.base.js';
+export type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+/**
+ * A Switch Custom HTML Element.
+ * Based on BaseCheckbox and includes style and layout specific attributes
+ *
+ * @tag fluent-switch
+ *
+ */
+export declare class Switch extends BaseCheckbox {
+    constructor();
 }

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
@@ -12,4 +12,4 @@ export declare const SwitchLabelPosition: {
  * Applies label position
  * @public
  */
-export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;

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

@@ -1,3 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { Switch } from './switch.js';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { 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/index.d.ts

@@ -1,4 +1,5 @@
-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';
+export { Tab } from './tab.js';
+export type { TabOptions } from './tab.js';
+export { styles as TabStyles } from './tab.styles.js';
+export { template as TabTemplate } from './tab.template.js';

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

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

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

@@ -1,8 +1,26 @@
-import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { FASTElement } from '@microsoft/fast-element';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import { StartEnd } from '../patterns/start-end.js';
+/**
+ * Tab configuration options
+ * @public
+ */
+export type TabOptions = StartEndOptions<Tab>;
 /**
  * Tab extends the FASTTab and is a child of the TabList
+ *
+ * @tag fluent-tab
  */
-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 { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { 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/index.d.ts

@@ -1,4 +1,4 @@
-export * from './tab-panel.js';
+export { TabPanel } 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.bench.d.ts

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

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

@@ -1,3 +1,8 @@
-import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
-export declare class TabPanel extends FASTTabPanel {
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * @deprecated - Use tablist instead
+ *
+ * @tag fluent-tab-panel
+ */
+export declare class TabPanel extends FASTElement {
 }

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

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

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

@@ -1 +1,7 @@
-export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation/tab-panel.js").FASTTabPanel, any>;
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { TabPanel } from './tab-panel.js';
+/**
+ * @deprecated - Use tablist instead
+ */
+export declare function tabPanelTemplate<T extends TabPanel>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<TabPanel, any>;

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

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

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

@@ -0,0 +1,6 @@
+export { definition as TablistDefinition } from './tablist.definition.js';
+export { BaseTablist } from './tablist.base.js';
+export { Tablist } from './tablist.js';
+export { TablistAppearance, TablistOrientation, TablistSize } from './tablist.options.js';
+export { styles as TablistStyles } from './tablist.styles.js';
+export { template as TablistTemplate } from './tablist.template.js';

package/dist/dts/tablist/tablist.base.d.ts

@@ -0,0 +1,95 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { TablistOrientation } from './tablist.options.js';
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled.
+     */
+    disabled: boolean;
+    /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TablistOrientation;
+    /**
+     * @internal
+     */
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    protected activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    protected tabsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabPanelMap;
+    private change;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private getTabIds;
+    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 activateTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}

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

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

package/dist/dts/tablist/tablist.d.ts

@@ -0,0 +1,94 @@
+import { BaseTablist } from './tablist.base.js';
+import { TablistAppearance, TablistSize } from './tablist.options.js';
+/**
+ * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ *
+ * @tag fluent-tablist
+ *
+ * @public
+ */
+export declare class Tablist extends BaseTablist {
+    /**
+     * 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;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TablistAppearance;
+    /**
+     * 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?: TablistSize;
+    /**
+     * 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;
+    /**
+     * Calculates and applies updated values to CSS variables.
+     *
+     * @param tab - the tab element to apply the updated values to
+     * @internal
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Sets the css variables for the active tab indicator.
+     * @internal
+     */
+    private setAnimationVars;
+    /**
+     * Initiates the active tab indicator animation loop when activeid changes.
+     * @param oldValue - the previous tabId
+     * @param newValue - the new tabId
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * Initiates the active tab indicator animation loop when tabs change.
+     */
+    tabsChanged(): void;
+}

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

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

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

@@ -0,0 +1,44 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * The appearance of the component
+ * @public
+ */
+export declare const TablistAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+/**
+ * The types for the Tablist appearance
+ * @public
+ */
+export type TablistAppearance = ValuesOf<typeof TablistAppearance>;
+/**
+ * The size of the component
+ * @public
+ */
+export declare const TablistSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * The types for the Tablist size
+ * @public
+ */
+export type TablistSize = ValuesOf<typeof TablistSize>;
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TablistOrientation: {
+    readonly horizontal: "horizontal"; /**
+     * The appearance of the component
+     * @public
+     */
+    readonly vertical: "vertical";
+};
+/**
+ * The types for the Tablist orientation
+ * @public
+ */
+export type TablistOrientation = ValuesOf<typeof TablistOrientation>;

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

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

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

@@ -0,0 +1,5 @@
+import type { Tablist } from './tablist.js';
+/**
+ * @public
+ */
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tablist, any>;

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

@@ -1,5 +1,6 @@
-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';
+export { Tabs } from './tabs.js';
+export { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
+export type { TabsOptions } from './tabs.options.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { template as TabsTemplate } from './tabs.template.js';

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

@@ -0,0 +1,90 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { TabsOrientation } from './tabs.options.js';
+/**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
+ *
+ * @deprecated - use tablist instead
+ */
+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;
+}

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

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