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

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
@@ -8,14 +8,13 @@ export declare const CompoundButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * A Compound Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
+export type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
 /**
  * A Compound Button can be square, circular or rounded.
  * @public
@@ -29,17 +28,13 @@ export declare const CompoundButtonShape: {
  * A Compound Button can be square, circular or rounded
  * @public
  */
-export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
+export type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
 /**
  * A Compound Button can be a size of small, medium or large.
  * @public
  */
 export declare const CompoundButtonSize: {
     readonly small: "small";
-    /**
-     * A Compound Button can be on of several preset sizes.
-     * @public
-     */
     readonly medium: "medium";
     readonly large: "large";
 };
@@ -47,5 +42,5 @@ export declare const CompoundButtonSize: {
  * A Compound Button can be on of several preset sizes.
  * @public
  */
-export declare type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
-export { ButtonOptions as CompoundButtonOptions };
+export type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+export type { ButtonOptions as CompoundButtonOptions };

package/dist/dts/compound-button/compound-button.template.d.ts

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { CompoundButton } from './compound-button.js';
 import type { CompoundButtonOptions } from './compound-button.options.js';
 /**

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

@@ -1,5 +1,5 @@
-export * from './compound-button.js';
-export * from './compound-button.options.js';
+export { CompoundButton } from './compound-button.js';
+export { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 export { template as CompoundButtonTemplate } from './compound-button.template.js';
 export { styles as CompoundButtonStyles } from './compound-button.styles.js';
 export { definition as CompoundButtonDefinition } from './compound-button.definition.js';

package/dist/dts/counter-badge/counter-badge.bench.d.ts

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

package/dist/dts/counter-badge/counter-badge.d.ts

@@ -1,11 +1,20 @@
 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
+ *
+ * @tag fluent-counter-badge
+ *
  * @public
  */
 export declare class CounterBadge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *

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,10 +1,10 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-import { BadgeOptions } from '../badge/badge.options.js';
+import type { BadgeOptions } from '../badge/badge.options.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * CounterBadge options
  * @public
  */
-export declare type CounterBadgeOptions = BadgeOptions;
+export type CounterBadgeOptions = BadgeOptions;
 /**
  * CounterBadgeAppearance constants
  * @public
@@ -17,7 +17,7 @@ export declare const CounterBadgeAppearance: {
  * A CounterBadge can have an appearance of filled or ghost
  * @public
  */
-export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+export type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 /**
  * CounterBadgeColor constants
  * @public
@@ -36,7 +36,7 @@ export declare const CounterBadgeColor: {
  * A CounterBadge can be one of preset colors
  * @public
  */
-export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 /**
  * A CounterBadge shape can be circular or rounded.
  * @public
@@ -49,7 +49,7 @@ export declare const CounterBadgeShape: {
  * A CounterBadge can be one of preset colors
  * @public
  */
-export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+export type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 /**
  * A CounterBadge can be square, circular or rounded.
  * @public
@@ -66,4 +66,4 @@ export declare const CounterBadgeSize: {
  * A CounterBadge can be on of several preset sizes.
  * @public
  */
-export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
+export type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;

package/dist/dts/counter-badge/counter-badge.template.d.ts

@@ -1,5 +1,5 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { CounterBadge } from './counter-badge.js';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { CounterBadge } from './counter-badge.js';
 /**
  * The template for the Counter Badge component.
  * @public

package/dist/dts/counter-badge/index.d.ts

@@ -1,5 +1,5 @@
-export * from './counter-badge.js';
-export * from './counter-badge.options.js';
+export { CounterBadge } from './counter-badge.js';
+export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
 export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
 export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';

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

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

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

@@ -0,0 +1,60 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { DialogType } from './dialog.options.js';
+/**
+ * A Dialog Custom HTML Element.
+ *
+ * @tag fluent-dialog
+ *
+ * @public
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @public
+     * The dialog element
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The type of the dialog modal
+     */
+    type: DialogType;
+    /**
+     * @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 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 show the dialog
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the dialog
+     */
+    hide(): void;
+    /**
+     * @public
+     * Handles click events on the dialog overlay for light-dismiss
+     * @param event - The click event
+     * @returns boolean
+     */
+    clickHandler(event: Event): boolean;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { Dialog } from './dialog.js';
+/**
+ * Template for the Dialog component
+ * @public
+ */
+export declare const template: ElementViewTemplate<Dialog>;

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

@@ -0,0 +1,5 @@
+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,29 +1,28 @@
-import { FASTDivider } from '@microsoft/fast-foundation/divider.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
- * 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.
+ * @tag fluent-divider
+ *
+ * @public
  */
-export declare class Divider extends FASTDivider {
+export declare class Divider extends BaseDivider {
     /**
-     * @property alignContent
-     * @default center
+     * @public
      * @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

@@ -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 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 type DividerOrientation = ValuesOf<typeof DividerOrientation>;
 /**
  * Align content within divider
  * @public
@@ -23,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
@@ -32,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,5 +1,6 @@
-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>;
 /**
  * Template for the Divider component
  * @public

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