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

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

@@ -1,9 +1,78 @@
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTElement } from '@microsoft/fast-element';
 /**
- * The base class used for constructing a fluent-menu-list custom element
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
-export declare class MenuList extends FASTMenu {
-    protected setItems(): void;
+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;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private handleItemFocus;
+    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 MenuItem element and set radio group behavior
+     */
+    private changedMenuItemHandler;
+    /**
+     * check if the item is a menu item
+     */
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private setFocus;
 }

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

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

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

@@ -1,3 +1,4 @@
 import { 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,66 @@
+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;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: MessageBarShape | undefined, next: MessageBarShape | undefined): void;
+    /**
+     * Sets the layout of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `layout`
+     */
+    layout?: MessageBarLayout;
+    /**
+     * Handles changes to the layout attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    layoutChanged(prev: MessageBarLayout | undefined, next: MessageBarLayout | undefined): void;
+    /**
+     * Sets the intent of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `intent`
+     */
+    intent?: MessageBarIntent;
+    /**
+     * Handles changes to the intent attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    intentChanged(prev: MessageBarIntent | undefined, next: MessageBarIntent | undefined): void;
+    /**
+     * @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 { 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/patterns/aria-globals.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export declare class ARIAGlobalStatesAndProperties {
+    /**
+     * Indicates whether assistive technologies will present all, or only parts of,
+     * the changed region based on the change notifications defined by the aria-relevant attribute.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-atomic
+     */
+    ariaAtomic: 'true' | 'false' | string | null;
+    /**
+     * Indicates an element is being modified and that assistive technologies MAY want to wait
+     * until the modifications are complete before exposing them to the user.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-busy
+     */
+    ariaBusy: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-controls
+     */
+    ariaControls: string | null;
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-current
+     */
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
+    ariaDescribedby: string | null;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-details
+     */
+    ariaDetails: string | null;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-disabled
+     */
+    ariaDisabled: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element that provides an error message for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-errormessage
+     */
+    ariaErrormessage: string | null;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-flowto
+     */
+    ariaFlowto: string | null;
+    /**
+     * Indicates the availability and type of interactive popup element,
+     * such as menu or dialog, that can be triggered by an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-haspopup
+     */
+    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+    /**
+     * Indicates whether the element is exposed to an accessibility API
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
+    ariaHidden: 'false' | 'true' | string | null;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-invalid
+     */
+    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+    /**
+     * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-keyshortcuts
+     */
+    ariaKeyshortcuts: string | null;
+    /**
+     * Defines a string value that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string | null;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string | null;
+    /**
+     * Indicates that an element will be updated, and describes the types of updates the user agents,
+     * assistive technologies, and user can expect from the live region.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-live
+     */
+    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
+    /**
+     * Identifies an element (or elements) in order to define a visual,
+     * functional, or contextual parent/child relationship between DOM elements
+     * where the DOM hierarchy cannot be used to represent the relationship.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-owns
+     */
+    ariaOwns: string | null;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-relevant
+     */
+    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+    /**
+     * Defines a human-readable, author-localized description for the role of an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-roledescription
+     */
+    ariaRoledescription: string | null;
+}

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

@@ -0,0 +1,2 @@
+export * from './aria-globals.js';
+export * from './start-end.js';

package/dist/dts/patterns/start-end.d.ts

@@ -0,0 +1,44 @@
+import { CaptureType } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+/**
+ * Start configuration options
+ * @public
+ */
+export type StartOptions<TSource = any, TParent = any> = {
+    start?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * End configuration options
+ * @public
+ */
+export type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * Start/End configuration options
+ * @public
+ */
+export type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export declare class StartEnd {
+    start: HTMLSlotElement;
+    end: HTMLSlotElement;
+}
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;

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

@@ -1,5 +1,5 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { ProgressBar } from './progress-bar.js';
+export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/dts/progress-bar/progress-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/progress-bar/progress-bar.d.ts

@@ -1,30 +1,98 @@
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
  * @public
  */
-export declare class ProgressBar extends FASTProgress {
+export declare class ProgressBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The thickness of the progress bar
      *
      * @public
-     * @remarks
-     * HTML Attribute: thickness
+     * HTML Attribute: `thickness`
      */
     thickness?: ProgressBarThickness;
+    /**
+     * Handles changes to thickness attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
     /**
      * The shape of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: ProgressBarShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
     /**
      * The validation state of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: validation-state
+     * HTML Attribute: `validation-state`
      */
     validationState: ProgressBarValidationState | null;
+    /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
+    /**
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
+     */
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
 }

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * ProgressBarThickness Constants
  * @public
@@ -11,7 +11,7 @@ export declare const ProgressBarThickness: {
  * Applies bar thickness to the content
  * @public
  */
-export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+export type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
 /**
  * ProgressBarShape Constants
  * @public
@@ -24,7 +24,7 @@ export declare const ProgressBarShape: {
  * Applies bar shape to the content
  * @public
  */
-export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 /**
  * ProgressBarValidationState Constants
  * @public
@@ -38,4 +38,4 @@ export declare const ProgressBarValidationState: {
  * Applies validation state to the content
  * @public
  */
-export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;

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

@@ -1,3 +1,4 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
 import type { ProgressBar } from './progress-bar.js';
+export declare function progressTemplate<T extends ProgressBar>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<ProgressBar>;

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

@@ -1,4 +1,5 @@
-export * from './radio.js';
 export { definition as RadioDefinition } from './radio.definition.js';
+export { Radio } from './radio.js';
+export type { RadioControl, RadioOptions } from './radio.options.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';

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

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