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

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

@@ -1,45 +1,15 @@
 import type { StaticallyComposableHTML } from '../utils/index.js';
-import { SwitchLabelPosition } from './switch.options.js';
-import { FormAssociatedSwitch } from './switch.form-associated.js';
-export declare type SwitchOptions = {
+import { BaseCheckbox } from '../checkbox/checkbox.base.js';
+export type SwitchOptions = {
     switch?: StaticallyComposableHTML<Switch>;
 };
-export declare class Switch extends FormAssociatedSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @default 'after'
-     * @remarks
-     * 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[];
+/**
+ * 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();
-    /**
-     * @internal
-     */
-    keypressHandler: (e: KeyboardEvent) => void;
-    /**
-     * @internal
-     */
-    clickHandler: (e: MouseEvent) => void;
 }

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

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

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { Tab, TabOptions } from './tab.js';
+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 { 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,4 +1,7 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { TabPanel } from './tab-panel.js';
+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';

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

@@ -1,94 +1,11 @@
-import { FASTElement } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/index.js';
-import { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
+import { BaseTabs } from './tabs.base.js';
+import { TabsAppearance, type TabsSize } from './tabs.options.js';
 /**
+ * @deprecated - Use tablist instead
  *
- * @class TabList component
- * @public
+ * @tag fluent-tabs
  */
-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
@@ -147,21 +64,31 @@ export declare class Tabs extends BaseTabs {
      */
     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;

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>;