@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.100

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Dialog } from './dialog.js';
 /**
  * Template for the Dialog component

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

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

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

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

package/dist/dts/dialog-body/dialog-body.bench.d.ts

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

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

@@ -0,0 +1,16 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * Dialog Body component that extends the FASTElement class.
+ *
+ * @tag fluent-dialog-body
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class DialogBody extends FASTElement {
+    /**
+     * @public
+     * Indicates whether the dialog has a title action
+     */
+    noTitleAction: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+/**
+ * Template for the dialog form
+ * @public
+ */
+export declare const template: ElementViewTemplate;

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

@@ -0,0 +1,4 @@
+export { DialogBody } from './dialog-body.js';
+export { definition as DialogBodyDefinition } from './dialog-body.definition.js';
+export { template as DialogBodyTemplate } from './dialog-body.template.js';
+export { styles as DialogBodyStyles } from './dialog-body.styles.js';

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

@@ -0,0 +1,49 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { DividerOrientation, DividerRole } from './divider.options.js';
+/**
+ * A Divider Custom HTML Element.
+ * 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.
+ *
+ * @public
+ */
+export declare class BaseDivider extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: DividerRole;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation?: DividerOrientation;
+    connectedCallback(): void;
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous: string | null, next: string | null): void;
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    orientationChanged(previous: DividerRole | undefined, next: DividerRole | undefined): void;
+}

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

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

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

@@ -1,45 +1,28 @@
-import { FASTElement } from '@microsoft/fast-element';
-import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
+import { DividerAlignContent, DividerAppearance } from './divider.options.js';
+import { BaseDivider } from './divider.base.js';
 /**
- * @class Divider component
+ * A Divider Custom HTML Element.
+ * Based on BaseDivider and includes style and layout specific attributes
  *
- * @remarks
- * 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.
+ * @tag fluent-divider
+ *
+ * @public
  */
-export declare class Divider extends FASTElement {
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-    role: DividerRole;
+export declare class Divider extends BaseDivider {
     /**
-     * The orientation of the divider.
-     *
      * @public
      * @remarks
-     * HTML Attribute: orientation
-     */
-    orientation: DividerOrientation;
-    /**
-     * @property alignContent
-     * @default center
-     * @remarks
      * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
      */
     alignContent?: DividerAlignContent;
     /**
-     * @property appearance
-     * @default default
+     * @public
      * @remarks
      * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
      */
     appearance?: DividerAppearance;
     /**
-     * @property inset
-     * @default false
+     * @public
      * @remarks
      * Adds padding to the beginning and end of the divider.
      */

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

@@ -17,7 +17,7 @@ export declare const DividerRole: {
  * The types for Divider roles
  * @public
  */
-export declare type DividerRole = ValuesOf<typeof DividerRole>;
+export type DividerRole = ValuesOf<typeof DividerRole>;
 /**
  * Divider orientation
  * @public
@@ -33,7 +33,7 @@ export declare const DividerOrientation: {
  * The types for Divider orientation
  * @public
  */
-export declare type DividerOrientation = ValuesOf<typeof DividerOrientation>;
+export type DividerOrientation = ValuesOf<typeof DividerOrientation>;
 /**
  * Align content within divider
  * @public
@@ -47,7 +47,7 @@ export declare const DividerAlignContent: {
  * The types for DividerAlignContent
  * @public
  */
-export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+export type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
 /**
  * DividerAppearance - divider color defined by a design token alias.
  * @public
@@ -56,10 +56,9 @@ export declare const DividerAppearance: {
     readonly strong: "strong";
     readonly brand: "brand";
     readonly subtle: "subtle";
-    readonly default: "default";
 };
 /**
  * The types for Appearance
  * @public
  */
-export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+export type DividerAppearance = ValuesOf<typeof DividerAppearance>;

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

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

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

@@ -1,5 +1,6 @@
-export * from './divider.js';
-export * from './divider.options.js';
+export { BaseDivider } from './divider.base.js';
+export { Divider } from './divider.js';
+export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 export { definition as DividerDefinition } from './divider.definition.js';
 export { template as DividerTemplate } from './divider.template.js';
 export { styles as DividerStyles } from './divider.styles.js';

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

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

package/dist/dts/drawer/drawer.d.ts

@@ -0,0 +1,96 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
+/**
+ * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
+ *
+ * @tag fluent-drawer
+ *
+ * @extends FASTElement
+ *
+ * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
+ * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
+ * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ *
+ * @csspart dialog - The dialog element of the drawer.
+ *
+ * @slot - Default slot for the content of the drawer.
+ *
+ * @fires toggle - Event emitted after the dialog's open state changes.
+ * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ *
+ * @method show - Method to show the drawer.
+ * @method hide - Method to hide the drawer.
+ * @method clickHandler - Handles click events on the drawer.
+ * @method emitToggle - Emits an event after the dialog's open state changes.
+ * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
+ *
+ * @summary A component that provides a drawer for displaying content in a side panel.
+ *
+ * @tag fluent-drawer
+ */
+export declare class Drawer extends FASTElement {
+    /**
+     * @public
+     * Determines whether the drawer should be displayed as modal or non-modal
+     * When rendered as a modal, an overlay is applied over the rest of the view.
+     */
+    type: DrawerType;
+    /**
+     * @public
+     * The ID of the element that labels the drawer.
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The ID of the element that describes the drawer.
+     */
+    ariaDescribedby?: string;
+    /**""
+     * @public
+     * @defaultValue start
+     * Sets the position of the drawer (start/end).
+     */
+    position: DrawerPosition;
+    /**
+     * @public
+     * @defaultValue medium
+     * Sets the size of the drawer (small/medium/large).
+     */
+    size: DrawerSize;
+    /**
+     * @public
+     * The dialog element.
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitToggle: () => void;
+    /**
+     * @public
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitBeforeToggle: () => void;
+    /**
+     * @public
+     * Method to show the drawer
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the drawer
+     */
+    hide(): void;
+    /**
+     * @public
+     * @param event - The click event
+     * @returns boolean - Always returns true
+     * Handles click events on the drawer.
+     */
+    clickHandler(event: Event): boolean;
+}

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

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

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

@@ -0,0 +1,40 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * A drawer can be positioned on the left or right side of the viewport.
+ */
+export declare const DrawerPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * The position of the drawer.
+ * @public
+ */
+export type DrawerPosition = ValuesOf<typeof DrawerPosition>;
+/**
+ * A drawer can be different sizes
+ */
+export declare const DrawerSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly full: "full";
+};
+/**
+ * The size of the drawer.
+ * @public
+ */
+export type DrawerSize = ValuesOf<typeof DrawerSize>;
+/**
+ * A drawer can be different sizes
+ */
+export declare const DrawerType: {
+    readonly nonModal: "non-modal";
+    readonly modal: "modal";
+    readonly inline: "inline";
+};
+/**
+ * The size of the drawer.
+ * @public
+ */
+export type DrawerType = ValuesOf<typeof DrawerType>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './drawer.js';
+export * from './drawer.options.js';
+export { definition as DrawerDefinition } from './drawer.definition.js';
+export { styles as DrawerStyles } from './drawer.styles.js';
+export { template as DrawerTemplate } from './drawer.template.js';

package/dist/dts/drawer-body/define.d.ts

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

package/dist/dts/drawer-body/drawer-body.d.ts

@@ -0,0 +1,23 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * A DrawerBody component to layout drawer content
+ *
+ * @tag fluent-drawer-body
+ *
+ * @extends FASTElement
+ *
+ * @slot title - The title slot
+ * @slot close - The close button slot
+ * @slot - The default content slot
+ * @slot footer - The footer slot
+ *
+ * @csspart header - The header part of the drawer
+ * @csspart content - The content part of the drawer
+ * @csspart footer - The footer part of the drawer
+ *
+ * @summary A component that provides a drawer body for displaying content in a side panel.
+ *
+ * @tag fluent-drawer-body
+ */
+export declare class DrawerBody extends FASTElement {
+}

package/dist/dts/drawer-body/drawer-body.definition.d.ts

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

package/dist/dts/drawer-body/drawer-body.styles.d.ts

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