@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.8

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/dialog.options.d.ts

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

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

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

@@ -1,15 +1,39 @@
-import { DividerOrientation, DividerRole } from '@microsoft/fast-foundation/divider.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
- * Fast Foundation DividerRole property
+ * Divider roles
  * @public
  */
-export { DividerRole };
+export declare const DividerRole: {
+    /**
+     * The divider semantically separates content
+     */
+    readonly separator: "separator";
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    readonly presentation: "presentation";
+};
+/**
+ * The types for Divider roles
+ * @public
+ */
+export declare type DividerRole = ValuesOf<typeof DividerRole>;
+/**
+ * Divider orientation
+ * @public
+ */
+export declare const DividerOrientation: {
+    readonly horizontal: "horizontal"; /**
+     * Divider roles
+     * @public
+     */
+    readonly vertical: "vertical";
+};
 /**
- * Fast Foundation Orientation property
+ * The types for Divider orientation
  * @public
  */
-export { DividerOrientation };
+export declare type DividerOrientation = ValuesOf<typeof DividerOrientation>;
 /**
  * Align content within divider
  * @public

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

@@ -1,5 +1,6 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import type { Divider } from './divider.js';
+export declare function dividerTemplate<T extends Divider>(): ElementViewTemplate<T>;
 /**
  * Template for the Divider component
  * @public

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

@@ -0,0 +1,178 @@
+import type { Constructable, FASTElement } from '@microsoft/fast-element';
+/**
+ * This file enables typing support for ElementInternals APIs.
+ * It is largely taken from https://github.com/microsoft/TSJS-lib-generator/pull/818/files.
+ *
+ * When TypeScript adds support for these APIs we can delete this file.
+ */
+interface ValidityStateFlags {
+    badInput?: boolean;
+    customError?: boolean;
+    patternMismatch?: boolean;
+    rangeOverflow?: boolean;
+    rangeUnderflow?: boolean;
+    stepMismatch?: boolean;
+    tooLong?: boolean;
+    tooShort?: boolean;
+    typeMismatch?: boolean;
+    valueMissing?: boolean;
+}
+/**
+ * Source:
+ * https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals
+ */
+interface ElementInternals {
+    /**
+     * Returns the form owner of internals target element.
+     */
+    readonly form: HTMLFormElement | null;
+    /**
+     * Returns a NodeList of all the label elements that internals target element is associated with.
+     */
+    readonly labels: NodeList;
+    /**
+     * Returns the error message that would be shown to the user if internals target element was to be checked for validity.
+     */
+    readonly validationMessage: string;
+    /**
+     * Returns the ValidityState object for internals target element.
+     */
+    readonly validity: ValidityState;
+    /**
+     * Returns true if internals target element will be validated when the form is submitted; false otherwise.
+     */
+    readonly willValidate: boolean;
+    /**
+     * Returns true if internals target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns true if internals target element has no validity problems; otherwise,
+     * returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets both the state and submission value of internals target element to value.
+     *
+     * While "null" isn't enumerated as a argument type (here)[https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface],
+     * In practice it appears to remove the value from the form data on submission. Adding it as a valid type here
+     * becuase that capability is required for checkbox and radio types
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Marks internals target element as suffering from the constraints indicated by the flags argument,
+     * and sets the element's validation message to message.
+     * If anchor is specified, the user agent might use
+     * it to indicate problems with the constraints of internals target
+     * element when the form owner is validated interactively or reportValidity() is called.
+     */
+    setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+}
+declare let ElementInternals: {
+    prototype: ElementInternals;
+    new (): ElementInternals;
+};
+/**
+ * @alpha
+ */
+export declare const supportsElementInternals: boolean;
+/**
+ * Base class for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+export interface FormAssociated extends Omit<ElementInternals, 'labels'> {
+    dirtyValue: boolean;
+    disabled: boolean;
+    readonly elementInternals: ElementInternals | null;
+    readonly formAssociated: boolean;
+    initialValue: string;
+    readonly labels: ReadonlyArray<Node[]>;
+    name: string;
+    required: boolean;
+    value: string;
+    currentValue: string;
+    attachProxy(): void;
+    detachProxy(): void;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+    requiredChanged(prev: boolean, next: boolean): void;
+    stopPropagation(e: Event): void;
+    /**
+     * Sets the validity of the custom element. By default this uses the proxy element to determine
+     * validity, but this can be extended or replaced in implementation.
+     *
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+     */
+    validate(anchor?: HTMLElement): void;
+    valueChanged(previous: string, next: string): void;
+}
+/**
+ * Base class for providing Custom Element Form Association with checkable features.
+ *
+ * @beta
+ */
+export interface CheckableFormAssociated extends FormAssociated {
+    currentChecked: boolean;
+    dirtyChecked: boolean;
+    checkedAttribute: boolean;
+    defaultChecked: boolean;
+    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+    checked: boolean;
+    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+}
+/**
+ * Avaiable types for the `proxy` property.
+ * @beta
+ */
+export declare type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
+/**
+ * Identifies a class as having a proxy element and optional submethods related
+ * to the proxy element.
+ *
+ * @beta
+ */
+export interface FormAssociatedProxy {
+    proxy: ProxyElement;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback?(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    valueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+}
+/**
+ * Combined type to describe a Form-associated element.
+ *
+ * @beta
+ */
+export declare type FormAssociatedElement = FormAssociated & FASTElement & HTMLElement & FormAssociatedProxy;
+/**
+ * Combined type to describe a checkable Form-associated element.
+ *
+ * @beta
+ */
+export declare type CheckableFormAssociatedElement = FormAssociatedElement & CheckableFormAssociated & {
+    proxy: HTMLInputElement;
+};
+/**
+ * Combined type to describe a Constructable Form-Associated type.
+ *
+ * @beta
+ */
+export declare type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+export declare function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+/**
+ * Creates a checkable form associated component.
+ * @beta
+ */
+export declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+export {};

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

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

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * A Labels font size can be small, medium, or large
  */

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

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

package/dist/dts/menu-button/menu-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/index.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Menu Button Appearance constants
  * @public

package/dist/dts/menu-item/menu-item.d.ts

@@ -1,9 +1,166 @@
-import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+import { FASTElement } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import { StartEnd } from '../patterns/start-end.js';
+import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 export declare type MenuItemColumnCount = 0 | 1 | 2;
-export { MenuItemRole };
+export { MenuItemRole, roleForMenuItem };
 /**
- * The base class used for constructing a fluent-menu-item custom element
+ * Menu Item configuration options
  * @public
  */
-export declare class MenuItem extends FASTMenuItem {
+export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
+    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
+    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
+    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+};
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+export declare class MenuItem extends FASTElement {
+    /**
+     * The disabled state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The expanded state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: expanded
+     */
+    expanded: boolean;
+    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: MenuItemRole;
+    /**
+     * Cleanup function for the submenu positioner.
+     *
+     * @public
+     */
+    cleanup: () => void;
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checked: boolean;
+    protected checkedChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * The hidden attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * The submenu slotted content.
+     *
+     * @internal
+     */
+    slottedSubmenu: HTMLElement[];
+    /**
+     * @internal
+     */
+    get hasSubmenu(): boolean;
+    /**
+     * Sets the submenu and updates its position.
+     *
+     * @internal
+     */
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    /**
+     * The container for the submenu.
+     *
+     * @internal
+     */
+    submenuContainer: HTMLDivElement;
+    /**
+     * @internal
+     */
+    submenu: HTMLElement | undefined;
+    private focusSubmenuOnLoad;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    submenuLoaded: () => void;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    private closeSubMenu;
+    /**
+     * @internal
+     */
+    private expandAndFocus;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Calculate and apply submenu positioning.
+     *
+     * @public
+     */
+    updateSubmenu(): void;
+}
+/**
+ * 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 MenuItem extends StartEnd {
 }

package/dist/dts/menu-item/menu-item.definition.d.ts

@@ -1,9 +1,5 @@
 import { MenuItem } from './menu-item.js';
 /**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-item>