@fluentui/web-components 3.0.0-alpha.16 → 3.0.0-alpha.18

package/dist/web-components.d.ts

@@ -1,3 +1,4 @@
+import { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation';
 import { ButtonOptions } from '@microsoft/fast-foundation';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
 import { DividerOrientation } from '@microsoft/fast-foundation';
@@ -6,6 +7,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 { FASTAnchor } from '@microsoft/fast-foundation';
 import { FASTButton } from '@microsoft/fast-foundation';
 import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
@@ -128,6 +130,137 @@ export declare const accordionStyles: ElementStyles;
 
 export declare const accordionTemplate: ElementViewTemplate<Accordion>;
 
+/**
+ * The base class used for constructing a fluent-anchor-button custom element
+ * @public
+ */
+export declare class AnchorButton extends FASTAnchor {
+    /**
+     * The appearance the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: AnchorButtonAppearance | undefined;
+    /**
+     * The shape the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: AnchorButtonShape | undefined;
+    /**
+     * The size the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: AnchorButtonSize;
+    /**
+     * The anchor button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The anchor button is disabled
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabled?: boolean;
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The anchor 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;
+}
+
+/**
+ * Anchor Button Appearance constants
+ * @public
+ */
+export declare const AnchorButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * An Anchor Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
+
+/**
+ * The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
+ * {@link @microsoft/fast-foundation#anchorTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-anchor-button\>
+ */
+export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
+
+export { AnchorButtonOptions }
+
+/**
+ * An Anchor Button can be square, circular or rounded.
+ * @public
+ */
+export declare const AnchorButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * An Anchor Button can be square, circular or rounded
+ * @public
+ */
+export declare type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
+
+/**
+ * An Anchor Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const AnchorButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * An Anchor Button can be on of several preset sizes.
+ * @public
+ */
+export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
+
 /**
  * The base class used for constructing a fluent-avatar custom element
  * @public
@@ -634,7 +767,9 @@ export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
 export { ButtonOptions }
+export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
+export { ButtonOptions as ToggleButtonOptions }
 
 /**
  * A Button can be square, circular or rounded.
@@ -1268,6 +1403,85 @@ export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
 
 export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-compound-button custom element
+ * @public
+ */
+export declare class CompoundButton extends Button {
+}
+
+/**
+ * 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>;
+
+/**
+ * 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 CompoundButtonDefinition: FASTElementDefinition<typeof CompoundButton>;
+
+/**
+ * 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 declare const CompoundButtonStyles: ElementStyles;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
+
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -2556,4 +2770,120 @@ export declare const TextWeight: {
  */
 export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
+/**
+ * The base class used for constructing a fluent-toggle-button custom element
+ * @public
+ */
+export declare class ToggleButton extends Button {
+    /**
+     * Tracks whether the "checked" property has been changed.
+     * This is necessary to provide consistent behavior with
+     * normal input checkboxes
+     */
+    protected dirtyChecked: boolean;
+    /**
+     * Provides the default checkedness of the input element
+     * Passed down to proxy
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checkedAttribute: boolean;
+    protected checkedAttributeChanged(): void;
+    defaultChecked: boolean;
+    protected defaultCheckedChanged(): void;
+    /**
+     * The checked state of the control.
+     *
+     * @public
+     */
+    checked: boolean;
+    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentChecked: boolean;
+    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    protected handleToggleButtonClick: (e: MouseEvent) => void;
+}
+
+/**
+ * Toggle Button Appearance constants
+ * @public
+ */
+export declare const ToggleButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Toggle Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
+
+/**
+ * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-toggle-button\>
+ */
+export declare const ToggleButtonDefinition: FASTElementDefinition<typeof ToggleButton>;
+
+/**
+ * A Toggle Button can be square, circular or rounded.
+ * @public
+ */
+export declare const ToggleButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Toggle Button can be square, circular or rounded
+ * @public
+ */
+export declare type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
+
+/**
+ * A Toggle Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const ToggleButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Toggle Button can be on of several preset sizes.
+ * @public
+ */
+export declare type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
+
+export declare const ToggleButtonStyles: ElementStyles;
+
+/**
+ * The template for the ToggleButton component.
+ * @public
+ */
+export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
+
 export { }