@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

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

@@ -11,7 +11,7 @@ export declare const SpinnerAppearance: {
  * A Spinner's appearance can be either primary or inverted
  * @public
  */
-export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 /**
  * SpinnerSize constants
  * @public
@@ -29,4 +29,4 @@ export declare const SpinnerSize: {
  * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
  * @public
  */
-export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
+export type SpinnerSize = ValuesOf<typeof SpinnerSize>;

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

@@ -1,5 +1,2 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { ProgressRingOptions } from '../progress-ring/progress-ring.options.js';
-import { Spinner } from './spinner.js';
-export declare function progressRingTemplate<T extends Spinner>(options?: ProgressRingOptions): ElementViewTemplate<T>;
-export declare const template: ElementViewTemplate<Spinner>;
+import type { Spinner } from './spinner.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

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

@@ -1 +1,2 @@
 export * from './badge.partials.js';
+export { typographyBody1Styles, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, } from './typography.partials.js';

package/dist/dts/styles/partials/typography.partials.d.ts

@@ -0,0 +1,18 @@
+import { CSSDirective } from '@microsoft/fast-element';
+export declare const typographyBody1Styles: CSSDirective;
+export declare const typographyBody1StrongStyles: CSSDirective;
+export declare const typographyBody1StrongerStyles: CSSDirective;
+export declare const typographyBody2Styles: CSSDirective;
+export declare const typographyCaption1Styles: CSSDirective;
+export declare const typographyCaption1StrongStyles: CSSDirective;
+export declare const typographyCaption1StrongerStyles: CSSDirective;
+export declare const typographyCaption2Styles: CSSDirective;
+export declare const typographyCaption2StrongStyles: CSSDirective;
+export declare const typographySubtitle1Styles: CSSDirective;
+export declare const typographySubtitle2Styles: CSSDirective;
+export declare const typographySubtitle2StrongerStyles: CSSDirective;
+export declare const typographyTitle1Styles: CSSDirective;
+export declare const typographyTitle2Styles: CSSDirective;
+export declare const typographyTitle3Styles: CSSDirective;
+export declare const typographyLargeTitleStyles: CSSDirective;
+export declare const typographyDisplayStyles: CSSDirective;

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,45 +1,8 @@
 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[];
+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,10 +1,11 @@
 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
  */

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,6 @@
 import { FASTElement } from '@microsoft/fast-element';
+/**
+ * @deprecated - Use tablist instead
+ */
 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,91 @@
+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.
+ * @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';