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

package/dist/web-components.d.ts

@@ -1,3 +1,4 @@
+import { ButtonOptions } from '@microsoft/fast-foundation';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
 import { DividerOrientation } from '@microsoft/fast-foundation';
 import { DividerRole } from '@microsoft/fast-foundation';
@@ -5,6 +6,7 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTAccordion } from '@microsoft/fast-foundation';
 import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTButton } from '@microsoft/fast-foundation';
 import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
@@ -545,6 +547,130 @@ export declare const borderRadiusSmall: CSSDesignToken<string>;
 
 export declare const borderRadiusXLarge: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export declare class Button extends FASTButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: ButtonAppearance | undefined;
+    /**
+     * The shape the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ButtonShape | undefined;
+    /**
+     * The size the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: ButtonSize;
+    /**
+     * The button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The button is disabled but focusable
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabledFocusable?: boolean;
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    /**
+     * Prevents disabledFocusable click events
+     */
+    private handleDisabledFocusableClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+/**
+ * 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>;
+
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
+
+export { ButtonOptions }
+
+/**
+ * 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 declare const ButtonStyles: ElementStyles;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const ButtonTemplate: ElementViewTemplate<Button>;
+
 export declare const colorBackgroundOverlay: CSSDesignToken<string>;
 
 export declare const colorBrandBackground: CSSDesignToken<string>;