@fluentui/web-components 3.0.0-alpha.3 → 3.0.0-alpha.31

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
@@ -13,7 +13,7 @@ export declare class CounterBadge extends FASTElement {
      * @remarks
      * HTML Attribute: appearance
      */
-    appearance: CounterBadgeAppearance;
+    appearance?: CounterBadgeAppearance;
     /**
      * The color the badge should have.
      *
@@ -21,7 +21,7 @@ export declare class CounterBadge extends FASTElement {
      * @remarks
      * HTML Attribute: color
      */
-    color: CounterBadgeColor;
+    color?: CounterBadgeColor;
     /**
      * The shape the badge should have.
      *
@@ -29,7 +29,7 @@ export declare class CounterBadge extends FASTElement {
      * @remarks
      * HTML Attribute: shape
      */
-    shape: CounterBadgeShape;
+    shape?: CounterBadgeShape;
     /**
      * The size the badge should have.
      *
@@ -37,7 +37,7 @@ export declare class CounterBadge extends FASTElement {
      * @remarks
      * HTML Attribute: size
      */
-    size: CounterBadgeSize;
+    size?: CounterBadgeSize;
     /**
      * The count the badge should have.
      *

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/define.d.ts

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

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

@@ -0,0 +1,31 @@
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
+import { DividerAlignContent, DividerAppearance } from './divider.options.js';
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ */
+export declare class Divider extends FASTDivider {
+    /**
+     * @property alignContent
+     * @default center
+     * @remarks
+     * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
+     */
+    alignContent?: DividerAlignContent;
+    /**
+     * @property appearance
+     * @default default
+     * @remarks
+     * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
+     */
+    appearance?: DividerAppearance;
+    /**
+     * @property inset
+     * @default false
+     * @remarks
+     * Adds padding to the beginning and end of the divider.
+     */
+    inset?: boolean;
+}

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

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

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

@@ -0,0 +1,41 @@
+import { DividerOrientation, DividerRole } from '@microsoft/fast-foundation/divider.js';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * Fast Foundation DividerRole property
+ * @public
+ */
+export { DividerRole };
+/**
+ * Fast Foundation Orientation property
+ * @public
+ */
+export { DividerOrientation };
+/**
+ * Align content within divider
+ * @public
+ */
+export declare const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * The types for DividerAlignContent
+ * @public
+ */
+export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+export declare const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+    readonly default: "default";
+};
+/**
+ * The types for Appearance
+ * @public
+ */
+export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './divider.js';
+export * from './divider.options.js';
+export { definition as DividerDefinition } from './divider.definition.js';
+export { template as DividerTemplate } from './divider.template.js';
+export { styles as DividerStyles } from './divider.styles.js';

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/define.d.ts

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

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

@@ -0,0 +1,48 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ImageFit, ImageShape } from './image.options.js';
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+export declare class Image extends FASTElement {
+    /**
+     * Image layout
+     *
+     * @public
+     * @remarks
+     * HTML attribute: block.
+     */
+    block?: boolean;
+    /**
+     * Image border
+     *
+     * @public
+     * @remarks
+     * HTML attribute: border.
+     */
+    bordered?: boolean;
+    /**
+     * Image shadow
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shadow.
+     */
+    shadow?: boolean;
+    /**
+     * Image fit
+     *
+     * @public
+     * @remarks
+     * HTML attribute: fit.
+     */
+    fit?: ImageFit;
+    /**
+     * Image shape
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shape.
+     */
+    shape?: ImageShape;
+}

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

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

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

@@ -0,0 +1,27 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * Image fit
+ * @public
+ */
+export declare const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
+/**
+ * Types for image fit
+ * @public
+ */
+export declare type ImageFit = ValuesOf<typeof ImageFit>;
+/**
+ * Image shape
+ * @public
+ */
+export declare const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+export declare type ImageShape = ValuesOf<typeof ImageShape>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './image.js';
+export * from './image.options.js';
+export { definition as ImageDefinition } from './image.definition.js';
+export { template as ImageTemplate } from './image.template.js';
+export { styles as ImageStyles } from './image.styles.js';

package/dist/dts/index.d.ts

@@ -1,6 +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
@@ -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.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 {
+}