@fluentui/web-components 3.0.0-alpha.2 → 3.0.0-alpha.21

package/dist/dts/menu-item/menu-item.d.ts

@@ -0,0 +1,8 @@
+import { FASTMenuItem } from '@microsoft/fast-foundation';
+export declare type MenuItemColumnCount = 0 | 1 | 2;
+/**
+ * The base class used for constructing a fluent-menu-item custom element
+ * @public
+ */
+export declare class MenuItem extends FASTMenuItem {
+}

package/dist/dts/menu-item/menu-item.definition.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from './menu-item.js';
+/**
+ * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
+ * {@link @microsoft/fast-foundation#menuItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-item>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MenuItem>;

package/dist/dts/menu-item/menu-item.styles.d.ts

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

package/dist/dts/menu-item/menu-item.template.d.ts

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { MenuItem } from './menu-item.js';
+export declare const template: ElementViewTemplate<MenuItem>;

package/dist/dts/menu-list/define.d.ts

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

package/dist/dts/menu-list/index.d.ts

@@ -0,0 +1,4 @@
+export * from './menu-list.js';
+export { template as MenuListTemplate } from './menu-list.template.js';
+export { styles as MenuListStyles } from './menu-list.styles.js';
+export { definition as MenuListDefinition } from './menu-list.definition.js';

package/dist/dts/menu-list/menu-list.d.ts

@@ -0,0 +1,9 @@
+import { FASTMenu } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-menu-list custom element
+ * @public
+ */
+export declare class MenuList extends FASTMenu {
+    protected setItems(): void;
+    private static elementIndent;
+}

package/dist/dts/menu-list/menu-list.definition.d.ts

@@ -0,0 +1,11 @@
+import { MenuList } from './menu-list.js';
+/**
+ * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
+ * {@link @microsoft/fast-foundation#menuTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-list>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MenuList>;

package/dist/dts/menu-list/menu-list.styles.d.ts

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

package/dist/dts/menu-list/menu-list.template.d.ts

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { MenuList } from './menu-list.js';
+export declare const template: ElementViewTemplate<MenuList>;

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -12,14 +12,14 @@ export declare class ProgressBar extends FASTProgress {
      * @remarks
      * HTML Attribute: thickness
      */
-    thickness: ProgressBarThickness;
+    thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
      * @public
      * @remarks
      * HTML Attribute: shape
      */
-    shape: ProgressBarShape;
+    shape?: ProgressBarShape;
     /**
      * The validation state of the progress bar
      * @public

package/dist/dts/progress-bar/progress-bar.styles.d.ts

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './radio.js';
+export { definition as RadioDefinition } from './radio.definition.js';
+export { styles as RadioStyles } from './radio.styles.js';
+export { template as RadioTemplate } from './radio.template.js';

package/dist/dts/radio/radio.d.ts

@@ -0,0 +1,7 @@
+import { FASTRadio } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-radio custom element
+ * @public
+ */
+export declare class Radio extends FASTRadio {
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Radio } from './radio.js';
+export declare const template: ElementViewTemplate<Radio>;

package/dist/dts/radio-group/define.d.ts

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

package/dist/dts/radio-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from './radio-group.js';
+export { definition as RadioGroupDefinition } from './radio-group.definition.js';
+export { styles as RadioGroupStyles } from './radio-group.styles.js';
+export { template as RadioGroupTemplate } from './radio-group.template.js';
+export { RadioGroupOrientation } from '@microsoft/fast-foundation';

package/dist/dts/radio-group/radio-group.d.ts

@@ -0,0 +1,15 @@
+import { FASTRadioGroup } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-radio-group custom element
+ * @public
+ */
+export declare class RadioGroup extends FASTRadioGroup {
+    /**
+     * sets radio layout styles
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: stacked
+     */
+    stacked: boolean;
+}

package/dist/dts/radio-group/radio-group.definition.d.ts

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

package/dist/dts/radio-group/radio-group.styles.d.ts

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

package/dist/dts/radio-group/radio-group.template.d.ts

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import type { RadioGroup } from './radio-group.js';
+export declare const template: ElementViewTemplate<RadioGroup>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './slider.js';
+export * from './slider.options.js';
+export { definition as SliderDefinition } from './slider.definition.js';
+export { styles as SliderStyles } from './slider.styles.js';
+export { template as SliderTemplate } from './slider.template.js';

package/dist/dts/slider/slider.d.ts

@@ -0,0 +1,24 @@
+import { FASTSlider } from '@microsoft/fast-foundation';
+import type { SliderSize } from './slider.options.js';
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+export declare class Slider extends FASTSlider {
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(source: any, propertyName: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private stepStyles?;
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    private handleStepStyles;
+}

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

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

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

@@ -0,0 +1,15 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+export { SliderOrientation } from '@microsoft/fast-foundation';
+/**
+ * SliderSize Constants
+ * @public
+ */
+export declare const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export declare type SliderSize = ValuesOf<typeof SliderSize>;

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

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

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

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTSlider } from '@microsoft/fast-foundation';
+export declare const template: ElementViewTemplate<FASTSlider>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './spinner.js';
+export * from './spinner.options.js';
+export { template as SpinnerTemplate } from './spinner.template.js';
+export { styles as SpinnerStyles } from './spinner.styles.js';
+export { definition as SpinnerDefinition } from './spinner.definition.js';

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

@@ -0,0 +1,25 @@
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class Spinner extends FASTProgressRing {
+    /**
+     * The size of the spinner
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SpinnerSize;
+    /**
+     * The appearance of the spinner
+     * @public
+     * @default 'primary'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: SpinnerAppearance;
+}

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

@@ -0,0 +1,11 @@
+import { Spinner } from './spinner.js';
+/**
+ * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
+ * {@link @microsoft/fast-foundation#progress-ringTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-spinner\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Spinner>;

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

@@ -0,0 +1,32 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+/**
+ * A Spinner's appearance can be either primary or inverted
+ * @public
+ */
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+/**
+ * SpinnerSize constants
+ * @public
+ */
+export declare const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
+/**
+ * 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>;

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

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

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

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { Spinner } from './spinner.js';
+export declare const template: ElementViewTemplate<Spinner>;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { FASTSwitch } from '@microsoft/fast-foundation';
+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;
+}

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

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

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

@@ -0,0 +1,15 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+/**
+ * Applies label position
+ * @public
+ */
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;

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

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

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

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Switch } from './switch.js';
+export declare const template: ElementViewTemplate<Switch>;

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

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

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

@@ -0,0 +1,4 @@
+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';

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

@@ -0,0 +1,8 @@
+import { FASTTab } from '@microsoft/fast-foundation';
+/**
+ * Tab extends the FASTTab and is a child of the TabList
+ */
+export declare class Tab extends FASTTab {
+    private styles;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,2 @@
+import { Tab } from './tab.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tab>;

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

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

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

@@ -0,0 +1,4 @@
+import { FASTTab, TabOptions } from '@microsoft/fast-foundation';
+import { ElementViewTemplate } from '@microsoft/fast-element';
+export declare function tabTemplate<T extends FASTTab>(options?: TabOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<FASTTab, any>;

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

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

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

@@ -0,0 +1,4 @@
+export * 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.d.ts

@@ -0,0 +1,3 @@
+import { FASTTabPanel } from '@microsoft/fast-foundation';
+export declare class TabPanel extends FASTTabPanel {
+}

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation").FASTTabPanel, any>;

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

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

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

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,88 @@
+import { FASTTabs } from '@microsoft/fast-foundation';
+import { TabsAppearance, TabsSize } from './tabs.options.js';
+/**
+ * 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;
+}

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

@@ -0,0 +1,2 @@
+import { Tabs } from './tabs.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tabs>;

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

@@ -0,0 +1,14 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+import { TabsOrientation } from '@microsoft/fast-foundation';
+export declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+export declare const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare type TabsSize = ValuesOf<typeof TabsSize>;
+export { TabsOrientation };

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

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

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

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation").FASTTabs, any>;

package/dist/dts/text/text.d.ts

@@ -63,7 +63,7 @@ export declare class Text extends FASTElement {
      * HTML Attribute: size
      *
      */
-    size: TextSize;
+    size?: TextSize;
     /**
      * THe Text font
      *
@@ -71,7 +71,7 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: font
      */
-    font: TextFont;
+    font?: TextFont;
     /**
      * THe Text weight
      *
@@ -79,7 +79,7 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: weight
      */
-    weight: TextWeight;
+    weight?: TextWeight;
     /**
      * THe Text align
      *
@@ -87,5 +87,5 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: align
      */
-    align: TextAlign;
+    align?: TextAlign;
 }