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

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

@@ -0,0 +1,46 @@
+import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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>;
+/**
+ * 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>;
+export { ButtonOptions };

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './button.js';
+export * from './button.options.js';
+export { template as ButtonTemplate } from './button.template.js';
+export { styles as ButtonStyles } from './button.styles.js';
+export { definition as ButtonDefinition } from './button.definition.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,50 @@
+import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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

@@ -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/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';
+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,40 @@
+import { DividerOrientation, DividerRole, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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/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 { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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,5 +1,26 @@
+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 './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 './toggle-button/index.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 { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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,46 @@
+import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * 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';