@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.1

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

@@ -0,0 +1,5 @@
+export * from './checkbox.js';
+export * from './checkbox.options.js';
+export { definition as CheckboxDefinition } from './checkbox.definition.js';
+export { template as CheckboxTemplate } from './checkbox.template.js';
+export { styles as CheckboxStyles } from './checkbox.styles.js';

package/dist/dts/compound-button/compound-button.d.ts

@@ -0,0 +1,7 @@
+import { Button } from '../button/button.js';
+/**
+ * The base class used for constructing a fluent-compound-button custom element
+ * @public
+ */
+export declare class CompoundButton extends Button {
+}

package/dist/dts/compound-button/compound-button.definition.d.ts

@@ -0,0 +1,10 @@
+import { CompoundButton } from './compound-button.js';
+/**
+ * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-comopund-button\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof CompoundButton>;

package/dist/dts/compound-button/compound-button.options.d.ts

@@ -0,0 +1,51 @@
+import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * Compound Button Appearance constants
+ * @public
+ */
+export declare const CompoundButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+/**
+ * A Compound Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
+/**
+ * A Compound Button can be square, circular or rounded.
+ * @public
+ */
+export declare const CompoundButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * A Compound Button can be square, circular or rounded
+ * @public
+ */
+export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
+/**
+ * A Compound Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const CompoundButtonSize: {
+    readonly small: "small";
+    /**
+     * A Compound Button can be on of several preset sizes.
+     * @public
+     */
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * A Compound Button can be on of several preset sizes.
+ * @public
+ */
+export declare type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+export { ButtonOptions as CompoundButtonOptions };

package/dist/dts/compound-button/compound-button.styles.d.ts

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

package/dist/dts/compound-button/compound-button.template.d.ts

@@ -0,0 +1,13 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { CompoundButton } from './compound-button.js';
+import type { CompoundButtonOptions } from './compound-button.options.js';
+/**
+ * The template for the Compound Button component.
+ * @public
+ */
+export declare function buttonTemplate<T extends CompoundButton>(options?: CompoundButtonOptions): ElementViewTemplate<T>;
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<CompoundButton>;

package/dist/dts/compound-button/define.d.ts

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

package/dist/dts/compound-button/index.d.ts

@@ -0,0 +1,5 @@
+export * from './compound-button.js';
+export * from './compound-button.options.js';
+export { template as CompoundButtonTemplate } from './compound-button.template.js';
+export { styles as CompoundButtonStyles } from './compound-button.styles.js';
+export { definition as CompoundButtonDefinition } from './compound-button.definition.js';

package/dist/dts/counter-badge/counter-badge.d.ts

@@ -1,5 +1,5 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation';
+import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
 import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element

package/dist/dts/counter-badge/counter-badge.options.d.ts

@@ -1,4 +1,4 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { BadgeOptions } from '../badge/badge.options.js';
 /**
  * CounterBadge options

package/dist/dts/divider/divider.d.ts

@@ -1,4 +1,4 @@
-import { FASTDivider } from '@microsoft/fast-foundation';
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 import { DividerAlignContent, DividerAppearance } from './divider.options.js';
 /**
  * @class Divider component

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

@@ -1,4 +1,5 @@
-import { DividerOrientation, DividerRole, ValuesOf } from '@microsoft/fast-foundation';
+import { DividerOrientation, DividerRole } from '@microsoft/fast-foundation/divider.js';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 /**
  * Fast Foundation DividerRole property
  * @public

package/dist/dts/helpers.tests.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a formatted URL for a given Storybook fixture.
+ *
+ * @param id - the Storybook fixture ID
+ * @param args - Story args
+ * @returns - the local URL for the Storybook fixture iframe
+ */
+export declare function fixtureURL(id?: string, args?: Record<string, any>): string;

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

@@ -1,4 +1,4 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 /**
  * Image fit
  * @public

package/dist/dts/index.d.ts

@@ -1,12 +1,29 @@
 export * from './accordion/index.js';
 export * from './accordion-item/index.js';
+export * from './anchor-button/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './compound-button/index.js';
 export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
+export * from './label/index.js';
+export * from './menu-button/index.js';
+export * from './menu-item/index.js';
+export * from './menu-list/index.js';
 export * from './progress-bar/index.js';
+export * from './radio/index.js';
+export * from './radio-group/index.js';
+export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
+export * from './tabs/index.js';
+export * from './tab/index.js';
+export * from './tab-panel/index.js';
 export * from './text/index.js';
+export * from './text-input/index.js';
+export * from './toggle-button/index.js';
+export * from './fluent-design-system.js';
 export * from './theme/index.js';

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

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

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

@@ -0,0 +1,4 @@
+export * from './label.js';
+export { definition as LabelDefinition } from './label.definition.js';
+export { styles as LabelStyles } from './label.styles.js';
+export { template as LabelTemplate } from './label.template.js';

package/dist/dts/label/label.d.ts

@@ -0,0 +1,42 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { LabelSize, LabelWeight } from './label.options.js';
+/**
+ * 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;
+}

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

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

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

@@ -0,0 +1,26 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * A Labels font size can be small, medium, or large
+ */
+export declare const LabelSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * Applies font size to label
+ * @public
+ */
+export declare type LabelSize = ValuesOf<typeof LabelSize>;
+/**
+ * A label can have a font weight of regular or strong
+ */
+export declare const LabelWeight: {
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+};
+/**
+ * Applies font weight to label
+ * @public
+ */
+export declare type LabelWeight = ValuesOf<typeof LabelWeight>;

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

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

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

@@ -0,0 +1,8 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Label } from './label.js';
+/**
+ * The template for the Fluent label web-component.
+ * @public
+ */
+export declare function labelTemplate<T extends Label>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Label>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './menu-button.js';
+export * from './menu-button.options.js';
+export { template as MenuButtonTemplate } from './menu-button.template.js';
+export { styles as MenuButtonStyles } from '../button/button.styles.js';
+export { definition as MenuButtonDefinition } from './menu-button.definition.js';

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

@@ -0,0 +1,7 @@
+import { Button } from '../button/button.js';
+/**
+ * The base class used for constructing a fluent-menu-button custom element
+ * @public
+ */
+export declare class MenuButton extends Button {
+}

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

@@ -0,0 +1,10 @@
+import { MenuButton } from './menu-button.js';
+/**
+ * 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 definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MenuButton>;

package/dist/dts/menu-button/menu-button.options.d.ts

@@ -0,0 +1,47 @@
+import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * 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>;
+/**
+ * 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>;
+export { ButtonOptions as MenuButtonOptions };

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { MenuButton } from './menu-button.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<MenuButton>;

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

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

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

@@ -0,0 +1,4 @@
+export * from './menu-item.js';
+export { template as MenuItemTemplate } from './menu-item.template.js';
+export { styles as MenuItemStyles } from './menu-item.styles.js';
+export { definition as MenuItemDefinition } from './menu-item.definition.js';

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

@@ -0,0 +1,9 @@
+import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+export declare type MenuItemColumnCount = 0 | 1 | 2;
+export { MenuItemRole };
+/**
+ * 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 type { 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/menu.js';
+/**
+ * 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

@@ -1,4 +1,4 @@
-import { FASTProgress } from '@microsoft/fast-foundation';
+import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
 import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 /**
  * The base class used for constructing a fluent-progress-bar custom element

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

@@ -1,4 +1,4 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 /**
  * ProgressBarThickness Constants
  * @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/radio.js';
+/**
+ * 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/radio-group.js';

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

@@ -0,0 +1,15 @@
+import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+/**
+ * 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/slider.js';
+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>;