@fluentui/web-components 3.0.0-beta.34 → 3.0.0-beta.36

package/dist/web-components.d.ts

@@ -4655,6 +4655,158 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
+/**
+ * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
+ * @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;
+}
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+export declare const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
+
+/**
+ * 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 declare 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 declare type DrawerSize = ValuesOf<typeof DrawerSize>;
+
+/** Drawer styles
+ * @public
+ */
+export declare const DrawerStyles: ElementStyles;
+
+export declare const DrawerTemplate: ElementViewTemplate<Drawer>;
+
+/**
+ * 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 declare type DrawerType = ValuesOf<typeof DrawerType>;
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#durationFast | `durationFast`} design token.
  * @public
@@ -7349,6 +7501,12 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
  * @public
  */
 declare class Text_2 extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The text will not wrap
      * NOTE: In Fluent UI React v9 this is "wrap"
@@ -7408,6 +7566,12 @@ declare class Text_2 extends FASTElement {
      *
      */
     size?: TextSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
     /**
      * THe Text font
      *
@@ -7417,13 +7581,25 @@ declare class Text_2 extends FASTElement {
      */
     font?: TextFont;
     /**
-     * THe Text weight
+     * Handles changes to font attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
+    /**
+     * The Text weight
      *
      * @public
      * @remarks
      * HTML Attribute: weight
      */
     weight?: TextWeight;
+    /**
+     * Handles changes to weight attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
     /**
      * THe Text align
      *
@@ -7432,6 +7608,21 @@ declare class Text_2 extends FASTElement {
      * HTML Attribute: align
      */
     align?: TextAlign;
+    /**
+     * Handles changes to align attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
 }
 export { Text_2 as Text }