@fluentui/web-components 3.0.0-alpha.12 → 3.0.0-alpha.14

package/dist/web-components.d.ts

@@ -1,3 +1,4 @@
+import { ButtonOptions } from '@microsoft/fast-foundation';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
 import { DividerOrientation } from '@microsoft/fast-foundation';
 import { DividerRole } from '@microsoft/fast-foundation';
@@ -5,6 +6,7 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTAccordion } from '@microsoft/fast-foundation';
 import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTButton } from '@microsoft/fast-foundation';
 import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
@@ -12,10 +14,14 @@ import { FASTProgress } from '@microsoft/fast-foundation';
 import { FASTProgressRing } from '@microsoft/fast-foundation';
 import { FASTSlider } from '@microsoft/fast-foundation';
 import { FASTSwitch } from '@microsoft/fast-foundation';
+import { FASTTab } from '@microsoft/fast-foundation';
+import { FASTTabPanel } from '@microsoft/fast-foundation';
+import { FASTTabs } from '@microsoft/fast-foundation';
 import { SliderOrientation } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
+import { TabsOrientation } from '@microsoft/fast-foundation';
 import type { Theme } from '@fluentui/tokens';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
@@ -545,6 +551,129 @@ export declare const borderRadiusSmall: CSSDesignToken<string>;
 
 export declare const borderRadiusXLarge: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export declare class Button extends FASTButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: ButtonAppearance | undefined;
+    /**
+     * The shape the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ButtonShape | undefined;
+    /**
+     * The size the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: ButtonSize;
+    /**
+     * The button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The button is disabled but focusable
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabledFocusable?: boolean;
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    /**
+     * Prevents disabledFocusable click events
+     */
+    private handleDisabledFocusableClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export declare const ButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
+
+export { ButtonOptions }
+export { ButtonOptions as MenuButtonOptions }
+
+/**
+ * A Button can be square, circular or rounded.
+ * @public
+ */
+export declare const ButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Button can be square, circular or rounded
+ * @public
+ */
+export declare type ButtonShape = ValuesOf<typeof ButtonShape>;
+
+/**
+ * A Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const ButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Button can be on of several preset sizes.
+ * @public
+ */
+export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const ButtonTemplate: ElementViewTemplate<Button>;
+
 export declare const colorBackgroundOverlay: CSSDesignToken<string>;
 
 export declare const colorBrandBackground: CSSDesignToken<string>;
@@ -1607,6 +1736,79 @@ export declare const lineHeightHero800: CSSDesignToken<string>;
 
 export declare const lineHeightHero900: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-menu-button custom element
+ * @public
+ */
+export declare class MenuButton extends Button {
+}
+
+/**
+ * Menu Button Appearance constants
+ * @public
+ */
+export declare const MenuButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Menu Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
+
+/**
+ * The Fluent Menu Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
+
+/**
+ * A Menu Button can be square, circular or rounded.
+ * @public
+ */
+export declare const MenuButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Menu Button can be square, circular or rounded
+ * @public
+ */
+export declare type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
+
+/**
+ * A Menu Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const MenuButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Menu Button can be on of several preset sizes.
+ * @public
+ */
+export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
+
 /**
  * The base class used for constructing a fluent-progress-bar custom element
  * @public
@@ -1913,6 +2115,10 @@ export declare const strokeWidthThickest: CSSDesignToken<string>;
 
 export declare const strokeWidthThin: CSSDesignToken<string>;
 
+declare const styles: ElementStyles;
+export { styles as ButtonStyles }
+export { styles as MenuButtonStyles }
+
 export declare class Switch extends FASTSwitch {
     /**
      * The label position of the switch
@@ -1945,6 +2151,139 @@ export declare const switchStyles: ElementStyles;
 
 export declare const switchTemplate: ElementViewTemplate<Switch>;
 
+/**
+ * Tab extends the FASTTab and is a child of the TabList
+ */
+export declare class Tab extends FASTTab {
+    private styles;
+    connectedCallback(): void;
+}
+
+export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
+
+export declare class TabPanel extends FASTTabPanel {
+}
+
+export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
+
+export declare const TabPanelStyles: ElementStyles;
+
+export declare const TabPanelTemplate: ElementViewTemplate<FASTTabPanel, any>;
+
+/**
+ * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
+ *
+ * @class TabList component
+ * @public
+ */
+export declare class Tabs extends FASTTabs {
+    /**
+     * 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 declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+
+export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
+
+export { TabsOrientation }
+
+export declare const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+export declare type TabsSize = ValuesOf<typeof TabsSize>;
+
+export declare const TabsStyles: ElementStyles;
+
+export declare const TabsTemplate: ElementViewTemplate<FASTTabs, any>;
+
+export declare const TabStyles: ElementStyles;
+
+export declare const TabTemplate: ElementViewTemplate<FASTTab, any>;
+
 /**
  * The base class used for constructing a fluent-text custom element
  * @public