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

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

@@ -0,0 +1,176 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import type { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
+/**
+ * Anchor configuration options
+ * @public
+ */
+export declare type AnchorOptions = StartEndOptions<AnchorButton>;
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+export declare class AnchorButton extends FASTElement {
+    /**
+     * Prompts the user to save the linked URL. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: download
+     */
+    download: string;
+    /**
+     * The URL the hyperlink references. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: href
+     */
+    href: string;
+    /**
+     * Hints at the language of the referenced resource. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: hreflang
+     */
+    hreflang: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: ping
+     */
+    ping: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: referrerpolicy
+     */
+    referrerpolicy: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: rel
+     */
+    rel: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: target
+     */
+    target: AnchorTarget;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: string;
+    /**
+     *
+     * Default slotted content
+     *
+     * @internal
+     */
+    defaultSlottedContent: HTMLElement[];
+    /**
+     * References the root element
+     */
+    control: HTMLAnchorElement;
+    /**
+     * 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;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export declare class DelegatesARIALink {
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
+    ariaExpanded: 'true' | 'false' | string | null;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface AnchorButton extends StartEnd, DelegatesARIALink {
+}

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

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

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

@@ -0,0 +1,64 @@
+import type { ValuesOf } from '../utils/index.js';
+import type { AnchorOptions } from './anchor-button.js';
+/**
+ * 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>;
+/**
+ * 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>;
+export { AnchorOptions as AnchorButtonOptions };
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export declare const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+/**
+ * Type for anchor target values.
+ *
+ * @public
+ */
+export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;

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

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

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

@@ -0,0 +1,12 @@
+import { ElementViewTemplate, ViewTemplate } from '@microsoft/fast-element';
+import type { AnchorButton, AnchorOptions } from './anchor-button.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare function anchorTemplate<T extends AnchorButton>(options?: AnchorOptions): ViewTemplate<T>;
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<AnchorButton>;

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

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

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

@@ -0,0 +1,4 @@
+export * from './anchor-button.js';
+export * from './anchor-button.options.js';
+export { template as AnchorButtonTemplate } from './anchor-button.template.js';
+export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';

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

@@ -1,4 +1,4 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * The Avatar "active" state
  */

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

@@ -1,5 +1,5 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation';
+import { StartEnd } from '../patterns/index.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element

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

@@ -1,8 +1,5 @@
 import { Badge } from './badge.js';
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks

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

@@ -1,4 +1,5 @@
-import { StartEndOptions, StaticallyComposableHTML, ValuesOf } from '@microsoft/fast-foundation';
+import { StartEndOptions } from '../patterns/index.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
 import type { Badge } from './badge.js';
 /**
  * @internal - marking as internal update when Badge PR for start/end is in

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

@@ -0,0 +1,193 @@
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { FormAssociatedButton } from './button.form-associated.js';
+import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+export declare class Button extends FormAssociatedButton {
+    /**
+     * Determines if the element should receive document focus on page load.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * The id of a form to associate the element to.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: form
+     */
+    formId: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formaction
+     */
+    formaction: string;
+    protected formactionChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formenctype
+     */
+    formenctype: string;
+    protected formenctypeChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formmethod
+     */
+    formmethod: string;
+    protected formmethodChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formnovalidate
+     */
+    formnovalidate: boolean;
+    protected formnovalidateChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formtarget
+     */
+    formtarget: '_self' | '_blank' | '_parent' | '_top';
+    protected formtargetChanged(): void;
+    /**
+     * The button type.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: ButtonType;
+    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
+    /**
+     * 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;
+    /**
+     *
+     * Default slotted content
+     *
+     * @public
+     * @remarks
+     */
+    defaultSlottedContent: HTMLElement[];
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Submits the parent form
+     */
+    private handleSubmission;
+    /**
+     * Resets the parent form
+     */
+    private handleFormReset;
+    control: HTMLButtonElement;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+export declare class DelegatesARIAButton {
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
+    ariaExpanded: 'true' | 'false' | string | null;
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-pressed
+     */
+    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface Button extends StartEnd, DelegatesARIAButton {
+}

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

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

package/dist/dts/button/button.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+declare class _Button extends FASTElement {
+}
+interface _Button extends FormAssociated {
+}
+declare const FormAssociatedButton_base: typeof _Button;
+/**
+ * @beta
+ */
+export declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,68 @@
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { Button } from './button.js';
+/**
+ * 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>;
+/**
+ * Button type values.
+ *
+ * @public
+ */
+export declare const ButtonType: {
+    readonly submit: "submit";
+    readonly reset: "reset";
+    readonly button: "button";
+};
+/**
+ * Type for button type values.
+ *
+ * @public
+ */
+export declare type ButtonType = ValuesOf<typeof ButtonType>;
+/**
+ * Button configuration options
+ * @public
+ */
+export declare type ButtonOptions = StartEndOptions<Button>;

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,9 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Button } from './button.js';
+import { ButtonOptions } from './button.options.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare function buttonTemplate<T extends Button>(options?: ButtonOptions): ElementViewTemplate<T>;
+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';