@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.90

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

@@ -1,43 +1,40 @@
 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 type { StaticallyComposableHTML } from '../utils/template-helpers.js';
 import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
-export declare type MenuItemColumnCount = 0 | 1 | 2;
+export type MenuItemColumnCount = 0 | 1 | 2;
 export { MenuItemRole, roleForMenuItem };
 /**
  * Menu Item configuration options
  * @public
  */
-export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
-    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
-    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
-    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+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 checked-indicator - The checked indicator
- * @slot radio-indicator - The radio indicator
+ * @slot indicator - The checkbox or 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 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 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 internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The disabled state of the element.
      *
@@ -47,14 +44,11 @@ export declare class MenuItem extends FASTElement {
      */
     disabled: boolean;
     /**
-     * The expanded state of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: expanded
+     * Handles changes to disabled attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    expanded: boolean;
-    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
+    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * The role of the element.
      *
@@ -64,11 +58,11 @@ export declare class MenuItem extends FASTElement {
      */
     role: MenuItemRole;
     /**
-     * Cleanup function for the submenu positioner.
-     *
-     * @public
+     * Handles changes to role attribute element internals properties
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    cleanup: () => void;
+    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
     /**
      * The checked value of the element.
      *
@@ -77,7 +71,12 @@ export declare class MenuItem extends FASTElement {
      * HTML Attribute: checked
      */
     checked: boolean;
-    protected checkedChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Handles changes to checked attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    protected checkedChanged(prev: boolean, next: boolean): void;
     /**
      * The hidden attribute.
      *
@@ -92,31 +91,17 @@ export declare class MenuItem extends FASTElement {
      * @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;
+    connectedCallback(): void;
     /**
      * @internal
      */
@@ -125,10 +110,6 @@ export declare class MenuItem extends FASTElement {
      * @internal
      */
     handleMenuItemClick: (e: MouseEvent) => boolean;
-    /**
-     * @internal
-     */
-    submenuLoaded: () => void;
     /**
      * @internal
      */
@@ -138,23 +119,19 @@ export declare class MenuItem extends FASTElement {
      */
     handleMouseOut: (e: MouseEvent) => boolean;
     /**
+     * Setup required ARIA on open/close
      * @internal
      */
-    private closeSubMenu;
-    /**
-     * @internal
-     */
-    private expandAndFocus;
+    toggleHandler: (e: Event) => void;
     /**
      * @internal
      */
     private invoke;
     /**
-     * Calculate and apply submenu positioning.
-     *
-     * @public
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
      */
-    updateSubmenu(): void;
+    setSubmenuPosition: () => void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

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

@@ -21,10 +21,10 @@ export declare const MenuItemRole: {
  * The types for menu item roles
  * @public
  */
-export declare type MenuItemRole = ValuesOf<typeof MenuItemRole>;
+export type MenuItemRole = ValuesOf<typeof MenuItemRole>;
 /**
  * @internal
  */
 export declare const roleForMenuItem: {
-    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+    [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
 };

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';

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

@@ -8,19 +8,25 @@ import { FASTElement } from '@microsoft/fast-element';
  * @public
  */
 export declare class MenuList extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * @internal
      */
     items: HTMLElement[];
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     protected menuItems: Element[] | undefined;
-    private expandedItem;
     /**
      * The index of the focusable element in the items array
      * defaults to -1
      */
     private focusIndex;
     private static focusableElementRoles;
+    constructor();
     /**
      * @internal
      */
@@ -39,12 +45,6 @@ export declare class MenuList extends FASTElement {
      * @public
      */
     focus(): void;
-    /**
-     * Collapses any expanded menu items.
-     *
-     * @public
-     */
-    collapseExpandedItem(): void;
     /**
      * @internal
      */
@@ -55,15 +55,17 @@ export declare class MenuList extends FASTElement {
      */
     handleFocusOut: (e: FocusEvent) => void;
     private handleItemFocus;
-    private handleExpandedChanged;
     private removeItemListeners;
     private static elementIndent;
     protected setItems(): void;
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
     handleChange(source: any, propertyName: string): void;
     /**
-     * handle change from child element
+     * Handle change from child MenuItem element and set radio group behavior
      */
-    private changeHandler;
+    private changedMenuItemHandler;
     /**
      * check if the item is a menu item
      */

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { MenuList } from './menu-list.js';
 export declare function menuTemplate<T extends MenuList>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<MenuList>;

package/dist/dts/message-bar/define.d.ts

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

package/dist/dts/message-bar/index.d.ts

@@ -0,0 +1,5 @@
+export { definition as MessageBarDefinition } from './message-bar.definition.js';
+export { MessageBar } from './message-bar.js';
+export { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
+export { styles as MessageBarStyles } from './message-bar.styles.js';
+export { template as MessageBarTemplate } from './message-bar.template.js';

package/dist/dts/message-bar/message-bar.bench.d.ts

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

package/dist/dts/message-bar/message-bar.d.ts

@@ -0,0 +1,48 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
+/**
+ * A Message Bar Custom HTML Element.
+ *
+ * @slot actions - Content that can be provided for the actions
+ * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot - The default slot for the content
+ * @public
+ */
+export declare class MessageBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    /**
+     * Sets the shape of the Message Bar.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape?: MessageBarShape;
+    /**
+     * Sets the layout of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `layout`
+     */
+    layout?: MessageBarLayout;
+    /**
+     * Sets the intent of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `intent`
+     */
+    intent?: MessageBarIntent;
+    /**
+     * @public
+     * Method to emit a `dismiss` event when the message bar is dismissed
+     */
+    dismissMessageBar: () => void;
+}

package/dist/dts/message-bar/message-bar.definition.d.ts

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

package/dist/dts/message-bar/message-bar.options.d.ts

@@ -0,0 +1,30 @@
+import type { ValuesOf } from '../utils/typings.js';
+/**
+ * @public
+ * The `layout` variations for the MessageBar component.
+ */
+export declare const MessageBarLayout: {
+    readonly multiline: "multiline";
+    readonly singleline: "singleline";
+};
+export type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
+/**
+ * @public
+ * The `shape` variations for the MessageBar component.
+ */
+export declare const MessageBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+export type MessageBarShape = ValuesOf<typeof MessageBarShape>;
+/**
+ * @public
+ * The `intent` variations for the MessageBar component.
+ */
+export declare const MessageBarIntent: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+    readonly info: "info";
+};
+export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;

package/dist/dts/message-bar/message-bar.styles.d.ts

@@ -0,0 +1,7 @@
+import type { ElementStyles } from '@microsoft/fast-element';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export declare const styles: ElementStyles;

package/dist/dts/message-bar/message-bar.template.d.ts

@@ -0,0 +1,14 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { MessageBar } from './message-bar.js';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export declare function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T>;
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export declare const template: ElementViewTemplate<MessageBar>;

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

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

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

@@ -0,0 +1,5 @@
+export { definition as DropdownOptionDefinition } from './option.definition.js';
+export { DropdownOption } from './option.js';
+export { isDropdownOption, type DropdownOptionOptions } from './option.options.js';
+export { styles as DropdownOptionStyles } from './option.styles.js';
+export { template as DropdownOptionTemplate } from './option.template.js';

package/dist/dts/option/option.d.ts

@@ -0,0 +1,260 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { Start } from '../patterns/start-end.js';
+/**
+ * A DropdownOption Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
+ *
+ * @slot - The default slot for the option's content.
+ * @slot checked-indicator - The checked indicator.
+ * @slot description - Optional description content.
+ *
+ * @remarks
+ * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
+ * itself handles form association and value submission, rather than its parent Dropdown element. In this way, the
+ * Option element is a variation of the Checkbox element that is specifically designed for use in the Dropdown element.
+ *
+ * This class is named `DropdownOption` to avoid conflicts with the native `Option` global. Related constructs are also
+ * titled with `DropdownOption` to maintain consistency.
+ *
+ * @public
+ */
+export declare class DropdownOption extends FASTElement implements Start {
+    /**
+     * Indicates that the option is active.
+     *
+     * @public
+     */
+    active: boolean;
+    /**
+     * Changes the active state of the option when the active property changes.
+     *
+     * @param prev - the previous active state
+     * @param next - the current active state
+     * @internal
+     */
+    protected activeChanged(prev: boolean, next: boolean): void;
+    /**
+     * The current selected state of the option.
+     *
+     * @internal
+     */
+    currentSelected?: boolean;
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial selected state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    defaultSelected?: boolean;
+    /**
+     * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+     *
+     * @param prev - The previous initial selected state
+     * @param next - The current initial selected state
+     * @internal
+     */
+    protected defaultSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The collection of slotted description elements.
+     *
+     * @internal
+     */
+    descriptionSlot: Node[];
+    /**
+     * Changes the description state of the option when the description slot changes.
+     *
+     * @param prev - the previous collection of description elements
+     * @param next - the current collection of description elements
+     * @internal
+     */
+    descriptionSlotChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * The current disabled state of the option.
+     *
+     * @public
+     */
+    disabled?: boolean;
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial disabled state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabledAttribute?: boolean;
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * Indicates that the option value should sync with the value of the dropdown's control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `freeform`
+     */
+    freeform?: boolean;
+    /**
+     * The id of the option. If not provided, a unique id will be assigned.
+     *
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
+     */
+    id: string;
+    /**
+     * The initial value of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Indicates that the option is in a multiple selection mode context.
+     * @public
+     */
+    multiple: boolean;
+    /**
+     * Updates the multiple state of the option when the multiple property changes.
+     *
+     * @param prev - the previous multiple state
+     * @param next - the current multiple state
+     */
+    multipleChanged(prev: boolean, next: boolean): void;
+    /**
+     * The name of the option. This option's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * Reference to the start slot element.
+     *
+     * @internal
+     */
+    start: HTMLSlotElement;
+    /**
+     * The text to display in the dropdown control when the option is selected.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `text`
+     */
+    textAttribute?: string;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The collection of slotted `output` elements, used to display the value when the option is freeform.
+     *
+     * @internal
+     */
+    freeformOutputs?: HTMLOutputElement[];
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static formAssociated: boolean;
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<HTMLLabelElement>;
+    /**
+     * The option's current selected state.
+     *
+     * @public
+     */
+    get selected(): boolean;
+    set selected(next: boolean);
+    /**
+     * The display text of the option.
+     *
+     * @public
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
+     */
+    get text(): string;
+    /**
+     * The internal value of the option.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the option.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    constructor();
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleSelected(force?: boolean): void;
+}

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

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