@fluentui/web-components 3.0.0-alpha.13 → 3.0.0-alpha.15

package/dist/web-components.d.ts

@@ -14,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';
 
@@ -630,6 +634,7 @@ export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
 export { ButtonOptions }
+export { ButtonOptions as MenuButtonOptions }
 
 /**
  * A Button can be square, circular or rounded.
@@ -663,8 +668,6 @@ export declare const ButtonSize: {
  */
 export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
 
-export declare const ButtonStyles: ElementStyles;
-
 /**
  * The template for the Button component.
  * @public
@@ -1713,6 +1716,93 @@ export declare const ImageStyles: ElementStyles;
  */
 export declare const ImageTemplate: ElementViewTemplate<Image_2>;
 
+/**
+ * The base class used for constructing a fluent-label custom element
+ * @public
+ */
+export declare class Label extends FASTElement {
+    /**
+     * 	Specifies font size of a label
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: LabelSize;
+    /**
+     * 	Specifies font weight of a label
+     *
+     * @public
+     * @default 'regular'
+     * @remarks
+     * HTML Attribute: weight
+     */
+    weight?: LabelWeight;
+    /**
+     * 	Specifies styles for label when associated input is disabled
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * 	Specifies styles for label when associated input is a required field
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: required
+     */
+    required: boolean;
+}
+
+/**
+ * The Fluent Label Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-label\>
+ */
+export declare const LabelDefinition: FASTElementDefinition<typeof Label>;
+
+/**
+ * A Labels font size can be small, medium, or large
+ */
+declare const LabelSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * Applies font size to label
+ * @public
+ */
+declare type LabelSize = ValuesOf<typeof LabelSize>;
+
+/** Label styles
+ * @public
+ */
+export declare const LabelStyles: ElementStyles;
+
+export declare const LabelTemplate: ElementViewTemplate<Label>;
+
+/**
+ * A label can have a font weight of regular or strong
+ */
+declare const LabelWeight: {
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+};
+
+/**
+ * Applies font weight to label
+ * @public
+ */
+declare type LabelWeight = ValuesOf<typeof LabelWeight>;
+
 export declare const lineHeightBase100: CSSDesignToken<string>;
 
 export declare const lineHeightBase200: CSSDesignToken<string>;
@@ -1733,6 +1823,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
@@ -2039,6 +2202,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
@@ -2071,6 +2238,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