@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -1,10 +1,89 @@
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
-import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { FormAssociatedButton } from './button.form-associated.js';
+import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 /**
- * The base class used for constructing a fluent-button custom element
+ * 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 FASTButton {
+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.
      *
@@ -50,6 +129,65 @@ export declare class Button extends FASTButton {
      * 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

@@ -1,8 +1,5 @@
 import { Button } from './button.js';
 /**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-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

@@ -1,5 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { Button } from './button.js';
 /**
  * ButtonAppearance constants
  * @public
@@ -44,4 +45,24 @@ export declare const ButtonSize: {
  * @public
  */
 export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
-export { ButtonOptions };
+/**
+ * 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.template.d.ts

@@ -1,7 +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/checkbox/checkbox.d.ts

@@ -1,10 +1,28 @@
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { FormAssociatedCheckbox } from './checkbox.form-associated.js';
 import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
 /**
- * The base class used for constucting a fluent checkbox custom element
+ * Checkbox configuration options
  * @public
  */
-export declare class Checkbox extends FASTCheckbox {
+export declare type CheckboxOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
+    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
+};
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Checkbox extends FormAssociatedCheckbox {
     /**
      * Sets shape of the checkbox.
      *
@@ -32,4 +50,29 @@ export declare class Checkbox extends FASTCheckbox {
      * HTML Attribute: label-position
      */
     labelPosition?: CheckboxLabelPosition;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * The indeterminate state of the control
+     */
+    indeterminate: boolean;
+    constructor();
+    private toggleChecked;
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
 }

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

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

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Checkbox shape
  * @public

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

@@ -1,5 +1,10 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { Checkbox } from './checkbox.js';
+import type { Checkbox, CheckboxOptions } from './checkbox.js';
+/**
+ * Template for the Checkbox component
+ * @public
+ */
+export declare function checkboxTemplate<T extends Checkbox>(options?: CheckboxOptions): ElementViewTemplate<T>;
 /**
  * Template for the Checkbox component
  * @public

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

@@ -1,8 +1,5 @@
 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\>

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

@@ -1,5 +1,5 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ButtonOptions } from '../button/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Compound Button Appearance constants
  * @public
@@ -9,6 +9,10 @@ export declare const CompoundButtonAppearance: {
     readonly outline: "outline";
     readonly subtle: "subtle";
     readonly secondary: "secondary";
+    /**
+     * A Compound Button can be secondary, primary, outline, subtle, transparent
+     * @public
+     */
     readonly transparent: "transparent";
 };
 /**
@@ -36,10 +40,6 @@ export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
  */
 export declare const CompoundButtonSize: {
     readonly small: "small";
-    /**
-     * A Compound Button can be on of several preset sizes.
-     * @public
-     */
     readonly medium: "medium";
     readonly large: "large";
 };

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/patterns.js';
+import { StartEnd } from '../patterns/index.js';
 import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element

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

@@ -1,9 +1,5 @@
 import { CounterBadge } from './counter-badge.js';
 /**
- * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-counter-badge\>

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

@@ -1,5 +1,5 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { BadgeOptions } from '../badge/badge.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * CounterBadge options
  * @public

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

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

package/dist/dts/dialog/dialog.d.ts

@@ -0,0 +1,192 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { Button as FluentButton } from '../button/button.js';
+import { DialogModalType } from './dialog.options.js';
+/**
+ * Dialog component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @private
+     * Indicates whether focus is being trapped within the dialog
+     */
+    private isTrappingFocus;
+    /**
+     * @public
+     * Lifecycle method called when the element is connected to the DOM
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     * Lifecycle method called when the element is disconnected from the DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * @public
+     * The dialog element
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * The title action elements
+     */
+    titleAction: HTMLElement[];
+    /**
+     * @public
+     * The default title action button
+     */
+    defaultTitleAction?: FluentButton;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The type of the dialog modal
+     */
+    modalType: DialogModalType;
+    /**
+     * @public
+     * Indicates whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * @public
+     * Indicates whether the dialog has a title action
+     */
+    noTitleAction: boolean;
+    /**
+     * @private
+     * Indicates whether focus should be trapped within the dialog
+     */
+    private trapFocus;
+    /**
+     * @public
+     * Method called when the 'open' attribute changes
+     */
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * @public
+     * Method called when the 'modalType' attribute changes
+     */
+    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    /**
+     * @public
+     * Method to set the component's state based on its attributes
+     */
+    setComponent(): void;
+    /**
+     * @public
+     * Method to emit an event when the dialog's open state changes
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    onOpenChangeEvent: (dismissed?: boolean) => void;
+    /**
+     * @public
+     * Method to show the dialog
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the dialog
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    hide(dismissed?: boolean): void;
+    /**
+     * @public
+     * Method to dismiss the dialog
+     */
+    dismiss(): void;
+    /**
+     * @public
+     * Handles click events on the dialog
+     * @param event - The click event
+     * @returns boolean
+     */
+    handleClick(event: Event): boolean;
+    /**
+     * @public
+     * Handles keydown events on the dialog
+     * @param e - The keydown event
+     * @returns boolean | void
+     */
+    handleKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * @private
+     * Handles keydown events on the document
+     * @param e - The keydown event
+     */
+    private handleDocumentKeydown;
+    /**
+     * @private
+     * Handles tab keydown events
+     * @param e - The keydown event
+     */
+    private handleTabKeyDown;
+    /**
+     * @private
+     * Gets the bounds of the tab queue
+     * @returns (HTMLElement | SVGElement)[]
+     */
+    private getTabQueueBounds;
+    /**
+     * @private
+     * Focuses the first element in the tab queue
+     */
+    private focusFirstElement;
+    /**
+     * @private
+     * Determines if focus should be forced
+     * @param currentFocusElement - The currently focused element
+     * @returns boolean
+     */
+    private shouldForceFocus;
+    /**
+     * @private
+     * Determines if focus should be trapped
+     * @returns boolean
+     */
+    private shouldTrapFocus;
+    /**
+     * @private
+     * Handles focus events on the document
+     * @param e - The focus event
+     */
+    private handleDocumentFocus;
+    /**
+     * @private
+     * Updates the state of focus trapping
+     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+     */
+    private updateTrapFocus;
+    /**
+     * @private
+     * Reduces the list of tabbable items
+     * @param elements - The current list of elements
+     * @param element - The element to consider adding to the list
+     * @returns HTMLElement[]
+     */
+    private static reduceTabbableItems;
+    /**
+     * @private
+     * Determines if an element is a focusable FASTElement
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static isFocusableFastElement;
+    /**
+     * @private
+     * Determines if an element has a tabbable shadow
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static hasTabbableShadow;
+}

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

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

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

@@ -0,0 +1,11 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogModalType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+export declare type DialogModalType = ValuesOf<typeof DialogModalType>;

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

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './dialog.js';
+export { definition as DialogDefinition } from './dialog.definition.js';
+export { template as DialogTemplate } from './dialog.template.js';
+export { styles as DialogStyles } from './dialog.styles.js';

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

@@ -1,12 +1,28 @@
-import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
-import { DividerAlignContent, DividerAppearance } from './divider.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } 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.
+ * 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 {
+export declare class Divider extends FASTElement {
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: DividerRole;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: DividerOrientation;
     /**
      * @property alignContent
      * @default center