@fluentui/web-components 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/dts/link/link.d.ts

@@ -0,0 +1,45 @@
+import { BaseAnchor } from '../anchor-button/anchor-button.js';
+import { type LinkAppearance } from './link.options.js';
+/**
+ * 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 link content
+ * @slot end - Content which can be provided after the link content
+ * @slot - The default slot for link content
+ *
+ * @public
+ */
+export declare class Link extends BaseAnchor {
+    /**
+     * The appearance the link should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance?: LinkAppearance | undefined;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: LinkAppearance | undefined, next: LinkAppearance | undefined): void;
+    /**
+     * The link is inline with text
+     * In chromium browsers, if the link is contained within a semantic
+     * text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,
+     * `:host-context()` ensures inline links are styled appropriately.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `inline`
+     */
+    inline: boolean;
+    /**
+     * Handles changes to inline attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    inlineChanged(prev: boolean, next: boolean): void;
+}

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

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

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

@@ -0,0 +1,52 @@
+import { AnchorTarget } from '../anchor-button/anchor-button.options.js';
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Link Appearance constants
+ * @public
+ */
+export declare const LinkAppearance: {
+    readonly subtle: "subtle";
+};
+/**
+ * An Link can be subtle or the default appearance
+ * @public
+ */
+export type LinkAppearance = ValuesOf<typeof LinkAppearance>;
+/**
+ * Link target values.
+ *
+ * @public
+ */
+export declare const LinkTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+/**
+ * Type for link target values.
+ *
+ * @public
+ */
+export type LinkTarget = ValuesOf<typeof AnchorTarget>;
+/**
+ * Reflected link attributes.
+ *
+ * @public
+ */
+export declare const LinkAttributes: {
+    readonly download: "download";
+    readonly href: "href";
+    readonly hreflang: "hreflang";
+    readonly ping: "ping";
+    readonly referrerpolicy: "referrerpolicy";
+    readonly rel: "rel";
+    readonly target: "target";
+    readonly type: "type";
+};
+/**
+ * Type for link attributes.
+ *
+ * @public
+ */
+export type LinkAttributes = ValuesOf<typeof LinkAttributes>;

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

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

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

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

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

@@ -1,4 +1,4 @@
-export * from './menu.js';
+export { Menu } from './menu.js';
 export { template as MenuTemplate } from './menu.template.js';
 export { styles as MenuStyles } from './menu.styles.js';
 export { definition as MenuDefinition } from './menu.definition.js';

package/dist/dts/menu/menu.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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

@@ -1,7 +1,43 @@
+/// <reference types="web" />
 import { FASTElement } from '@microsoft/fast-element';
 import { MenuList } from '../menu-list/menu-list.js';
 /**
- * The Menu class represents a menu component.
+ * A Menu component that provides a customizable menu element.
+ * @class Menu
+ * @extends FASTElement
+ *
+ * @attr open-on-hover - Determines if the menu should open on hover.
+ * @attr open-on-context - Determines if the menu should open on right click.
+ * @attr close-on-scroll - Determines if the menu should close on scroll.
+ * @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
+ *
+ * @cssproperty --menu-max-height - The max-height of the menu.
+ *
+ * @slot trigger - Slot for the trigger elements.
+ * @slot - Default slot for the menu list.
+ *
+ * @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
+ * @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
+ * @method setComponent - Sets the component state.
+ * @method toggleMenu - Toggles the open state of the menu.
+ * @method closeMenu - Closes the menu.
+ * @method openMenu - Opens the menu.
+ * @method focusMenuList - Focuses on the menu list.
+ * @method focusTrigger - Focuses on the menu trigger.
+ * @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
+ * @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
+ * @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
+ * @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
+ * @method addListeners - Adds event listeners.
+ * @method removeListeners - Removes event listeners.
+ * @method menuKeydownHandler - Handles keyboard interaction for the menu.
+ * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
+ * @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+ *
+ * @summary The Menu component functions as a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
  * @public
  */
 export declare class Menu extends FASTElement {
@@ -25,11 +61,6 @@ export declare class Menu extends FASTElement {
      * @public
      */
     persistOnItemClick?: boolean;
-    /**
-     * Defines whether the menu is open or not.
-     * @public
-     */
-    open: boolean;
     /**
      * Holds the slotted menu list.
      * @public
@@ -41,25 +72,20 @@ export declare class Menu extends FASTElement {
      */
     slottedTriggers: HTMLElement[];
     /**
-     * The positioning container of the menu.
+     * Defines whether the menu is open or not.
      * @internal
      */
-    positioningContainer?: HTMLElement;
+    private _open;
     /**
      * The trigger element of the menu.
-     * @private
+     * @internal
      */
     private _trigger?;
     /**
-     * The menu list element of the menu.
-     * @private
+     * The menu list element of the menu which has the popover behavior.
+     * @internal
      */
     private _menuList?;
-    /**
-     * Holds a reference to a function that is used to cleanup resources.
-     * @public
-     */
-    cleanup?: () => void;
     /**
      * Called when the element is connected to the DOM.
      * Sets up the component.
@@ -87,7 +113,7 @@ export declare class Menu extends FASTElement {
      * Closes the menu.
      * @public
      */
-    closeMenu: () => void;
+    closeMenu: (event?: Event) => void;
     /**
      * Opens the menu.
      * @public
@@ -104,91 +130,83 @@ export declare class Menu extends FASTElement {
      */
     focusTrigger(): void;
     /**
-     * Called whenever the open state changes.
-     * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
-     * Sets menu list position
-     * emits openChanged event
+     * Handles the 'toggle' event on the popover.
      * @public
-     * @param {boolean} oldValue - The previous value of 'open'.
-     * @param {boolean} newValue - The new value of 'open'.
+     * @param e - the event
+     * @returns void
      */
-    openChanged(oldValue: boolean, newValue: boolean): void;
+    toggleHandler: (e: Event | ToggleEvent) => void;
     /**
      * Called whenever the 'openOnHover' property changes.
      * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     *
+     * @param oldValue - The previous value of 'openOnHover'.
+     * @param newValue - The new value of 'openOnHover'.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnHover'.
-     * @param {boolean} newValue - The new value of 'openOnHover'.
      */
     openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'persistOnItemClick' property changes.
      * Adds or removes a 'click' event listener to the menu list based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
-     * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+     * @param oldValue - The previous value of 'persistOnItemClick'.
+     * @param newValue - The new value of 'persistOnItemClick'.
      */
     persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'openOnContext' property changes.
      * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnContext'.
-     * @param {boolean} newValue - The new value of 'openOnContext'.
+     * @param oldValue - The previous value of 'openOnContext'.
+     * @param newValue - The new value of 'openOnContext'.
      */
     openOnContextChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'closeOnScroll' property changes.
      * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
-     * @param {boolean} newValue - The new value of 'closeOnScroll'.
+     * @param oldValue - The previous value of 'closeOnScroll'.
+     * @param newValue - The new value of 'closeOnScroll'.
      */
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
-    /**
-     * The task to set the positioning of the menu.
-     * @protected
-     */
-    protected setPositioningTask: () => void;
-    /**
-     * Sets the positioning of the menu.
-     * @protected
-     */
-    protected setPositioning(): void;
     /**
      * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+     * Adds click and keydown event listeners to the trigger.
+     * Adds a 'toggle' event listener to the menu list.
      * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * @public
+     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * @internal
      */
     private addListeners;
     /**
      * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+     * Removes click and keydown event listeners from the trigger.
+     * Also removes toggle event listener from the menu list.
      * Also removes 'mouseover' event listeners from the trigger.
-     * @private
+     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * @internal
      */
     private removeListeners;
     /**
-     * Handles keyboard interaction for the menu.
-     * Closes the menu and focuses on the trigger when the Escape key is pressed.
-     * Closes the menu when the Tab key is pressed.
+     * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+     * pressed. Closes the menu when the Tab key is pressed.
+     *
+     * @param e - the keyboard event
      * @public
-     * @param {KeyboardEvent} e - the keyboard event
      */
-    handleMenuKeydown(e: KeyboardEvent): boolean | void;
+    menuKeydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * Handles keyboard interaction for the trigger.
-     * Toggles the menu when the Space or Enter key is pressed.
-     * If the menu is open, focuses on the menu list.
+     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
+     * is open, focuses on the menu list.
+     *
+     * @param e - the keyboard event
      * @public
-     * @param {KeyboardEvent} e - the keyboard event
      */
-    handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
+    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
     /**
-     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
-     * @private
-     * @param {Event} e - The event triggered on document click.
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * @internal
+     * @param e - The event triggered on document click.
      */
-    private handleDocumentClick;
+    private documentClickHandler;
 }

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

@@ -1,5 +1,6 @@
-export * from './menu-button.js';
-export * from './menu-button.options.js';
-export { template as MenuButtonTemplate } from './menu-button.template.js';
 export { styles as MenuButtonStyles } from '../button/button.styles.js';
 export { definition as MenuButtonDefinition } from './menu-button.definition.js';
+export { MenuButton } from './menu-button.js';
+export { MenuButtonAppearance, MenuButtonShape, MenuButtonSize } from './menu-button.options.js';
+export type { MenuButtonOptions } from './menu-button.options.js';
+export { template as MenuButtonTemplate } from './menu-button.template.js';

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

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Menu Button Appearance constants
  * @public
@@ -8,14 +8,13 @@ export declare const MenuButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * A Menu Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
+export type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
 /**
  * A Menu Button can be square, circular or rounded.
  * @public
@@ -29,7 +28,7 @@ export declare const MenuButtonShape: {
  * A Menu Button can be square, circular or rounded
  * @public
  */
-export declare type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
+export type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
 /**
  * A Menu Button can be a size of small, medium or large.
  * @public
@@ -43,5 +42,5 @@ export declare const MenuButtonSize: {
  * A Menu Button can be on of several preset sizes.
  * @public
  */
-export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
-export { ButtonOptions as MenuButtonOptions };
+export type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
+export type { ButtonOptions as MenuButtonOptions };

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

@@ -1,4 +1,6 @@
-export * from './menu-item.js';
-export { template as MenuItemTemplate } from './menu-item.template.js';
-export { styles as MenuItemStyles } from './menu-item.styles.js';
 export { definition as MenuItemDefinition } from './menu-item.definition.js';
+export { MenuItem } from './menu-item.js';
+export type { MenuItemColumnCount, MenuItemOptions } from './menu-item.js';
+export { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
+export { styles as MenuItemStyles } from './menu-item.styles.js';
+export { template as MenuItemTemplate } from './menu-item.template.js';

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

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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

@@ -1,9 +1,120 @@
-import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
-export declare type MenuItemColumnCount = 0 | 1 | 2;
-export { MenuItemRole };
+/// <reference types="web" />
+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 type MenuItemColumnCount = 0 | 1 | 2;
+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 type MenuItemOptions = StartEndOptions<MenuItem> & {
+    indicator?: StaticallyComposableHTML<MenuItem>;
+    submenuGlyph?: 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 indicator - The checkbox or radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot - The default slot for menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot submenu-glyph - The submenu expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart content - The element wrapping the menu item content
+ * @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 role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: MenuItemRole;
+    /**
+     * 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[];
+    /**
+     * Sets the submenu and updates its position.
+     *
+     * @internal
+     */
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    /**
+     * @internal
+     */
+    submenu: HTMLElement | undefined;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * Setup required ARIA on open/close
+     * @internal
+     */
+    toggleHandler: (e: ToggleEvent | Event) => void;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
+     */
+    setSubmenuPosition: () => 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>

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

@@ -0,0 +1,30 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Menu items roles.
+ * @public
+ */
+export declare const MenuItemRole: {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    readonly menuitem: "menuitem";
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    readonly menuitemradio: "menuitemradio";
+};
+/**
+ * The types for menu item roles
+ * @public
+ */
+export type MenuItemRole = ValuesOf<typeof MenuItemRole>;
+/**
+ * @internal
+ */
+export declare const roleForMenuItem: {
+    [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
+};

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

@@ -1,3 +1,4 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import type { MenuItem } from './menu-item.js';
+import type { MenuItem, MenuItemOptions } from './menu-item.js';
+export declare function menuItemTemplate<T extends MenuItem>(options?: MenuItemOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<MenuItem>;

package/dist/dts/menu-list/index.d.ts

@@ -1,4 +1,4 @@
-export * from './menu-list.js';
+export { MenuList } from './menu-list.js';
 export { template as MenuListTemplate } from './menu-list.template.js';
 export { styles as MenuListStyles } from './menu-list.styles.js';
 export { definition as MenuListDefinition } from './menu-list.definition.js';

package/dist/dts/menu-list/menu-list.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';