@tylertech/forge 3.0.0-next.23 → 3.0.0-next.24

package/esm/bottom-sheet/bottom-sheet-foundation.d.ts

@@ -5,30 +5,19 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IBottomSheetAdapter } from './bottom-sheet-adapter';
+import { BottomSheetMode } from './bottom-sheet-constants';
 export interface IBottomSheetFoundation extends ICustomElementFoundation {
-    backdropClose: boolean;
-    escapeClose: boolean;
+    mode: BottomSheetMode;
     open: boolean;
+    persistent: boolean;
     fullscreen: boolean;
-    showBackdrop: boolean;
-    openCallback: () => void | Promise<void>;
-    closeCallback: () => void | Promise<void>;
-    beforeCloseCallback: () => boolean | Promise<boolean>;
 }
 export declare class BottomSheetFoundation implements IBottomSheetFoundation {
     _adapter: IBottomSheetAdapter;
     private _open;
-    private _backdropClose;
-    private _escapeClose;
+    private _mode;
+    private _persistent;
     private _fullscreen;
-    private _showBackdrop;
-    private _openCallback;
-    private _closeCallback;
-    private _beforeCloseCallback;
-    private _openTransitionEndHandler;
-    private _closeTransitionEndHandler;
-    private _documentKeydownHandler;
-    private _backdropClickHandler;
     private _isDragging;
     private _dragContext;
     private _lastPosition;
@@ -37,37 +26,14 @@ export declare class BottomSheetFoundation implements IBottomSheetFoundation {
     private _dragMoveHandler;
     private _dragEndHandler;
     private _dragCancelHandler;
+    private _dialogDismissListener;
+    private _dialogBeforeCloseListener;
     constructor(_adapter: IBottomSheetAdapter);
     initialize(): void;
-    destroy(): void;
-    private _setOpen;
     private _openBottomSheet;
     private _closeBottomSheet;
-    private _onCloseTransitionEnd;
-    private _onOpenTransitionEnd;
-    private _onDocumentKeydown;
-    private _onBackdropClick;
-    private _tryClose;
-    private _setBackdropClickListener;
-    private _setDocumentKeydownListener;
-    /** Controls whether clicking the backdrop closes the bottom sheet or not. */
-    set backdropClose(value: boolean);
-    get backdropClose(): boolean;
-    /** Controls whether pressing the escape key closes the sheet or not. */
-    set escapeClose(value: boolean);
-    get escapeClose(): boolean;
-    get open(): boolean;
-    set open(value: boolean);
-    get fullscreen(): boolean;
-    set fullscreen(value: boolean);
-    get showBackdrop(): boolean;
-    set showBackdrop(value: boolean);
-    get openCallback(): () => void | Promise<void>;
-    set openCallback(callback: () => void | Promise<void>);
-    get closeCallback(): () => void | Promise<void>;
-    set closeCallback(callback: () => void | Promise<void>);
-    get beforeCloseCallback(): () => boolean | Promise<boolean>;
-    set beforeCloseCallback(callback: () => boolean | Promise<boolean>);
+    private _onDialogDismiss;
+    private _onDialogBeforeClose;
     /** If scrollable, allow drag to/from fullscreen, and make fullscreen on scroll. */
     private _initScrollableHandlers;
     private _onBodyScroll;
@@ -76,4 +42,12 @@ export declare class BottomSheetFoundation implements IBottomSheetFoundation {
     private _onDragEnd;
     private _onDragCancel;
     private _dragComplete;
+    get open(): boolean;
+    set open(value: boolean);
+    get mode(): BottomSheetMode;
+    set mode(value: BottomSheetMode);
+    get persistent(): boolean;
+    set persistent(value: boolean);
+    get fullscreen(): boolean;
+    set fullscreen(value: boolean);
 }

package/esm/bottom-sheet/bottom-sheet-foundation.js

@@ -4,239 +4,78 @@
  * License: Apache-2.0
  */
 import { getEventPath } from '@tylertech/forge-core';
+import { DIALOG_CONSTANTS } from '../dialog';
 import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
 export class BottomSheetFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._open = false;
-        this._backdropClose = true;
-        this._escapeClose = true;
+        this._mode = 'nonmodal';
+        this._persistent = false;
         this._fullscreen = false;
-        this._showBackdrop = false;
         this._isDragging = false;
         this._bodyScrollHandler = () => this._onBodyScroll();
-        this._dragStartHandler = ($event) => this._onDragStart($event);
-        this._dragMoveHandler = ($event) => this._onDragMove($event);
-        this._dragEndHandler = () => this._onDragEnd();
-        this._dragCancelHandler = () => this._onDragCancel();
-        this._openTransitionEndHandler = (_evt) => this._onOpenTransitionEnd();
-        this._closeTransitionEndHandler = (_evt) => this._onCloseTransitionEnd();
-        this._documentKeydownHandler = (evt) => this._onDocumentKeydown(evt);
-        this._backdropClickHandler = (evt) => this._onBackdropClick(evt);
+        this._dragStartHandler = this._onDragStart.bind(this);
+        this._dragMoveHandler = this._onDragMove.bind(this);
+        this._dragEndHandler = this._onDragEnd.bind(this);
+        this._dragCancelHandler = this._onDragCancel.bind(this);
+        this._dialogDismissListener = this._onDialogDismiss.bind(this);
+        this._dialogBeforeCloseListener = this._onDialogBeforeClose.bind(this);
     }
     initialize() {
-        this._adapter.initializeAccessibility();
-    }
-    destroy() {
-        if (this._open) {
-            this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-        }
-    }
-    _setOpen(open) {
-        this._open = open;
+        this._adapter.initialize();
         if (this._open) {
             this._openBottomSheet();
         }
-        else {
-            this._closeBottomSheet();
-        }
-        this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, this._open);
     }
     _openBottomSheet() {
-        this._adapter.attach();
-        this._adapter.setBodyAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, 'true');
-        this._adapter.registerTransitionEndHandler(this._openTransitionEndHandler);
-        this._setDocumentKeydownListener(this._escapeClose);
-        this._setBackdropClickListener(this._backdropClose);
-        // Ensure transitions are triggered properly
-        window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-                this._adapter.setVisibility(true);
-                this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.OPEN);
-                this._adapter.trySetInitialFocus();
-                this._adapter.initScrollable();
-            });
-        });
-    }
-    _closeBottomSheet() {
-        this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
-        this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-        this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-        this._adapter.registerTransitionEndHandler(this._closeTransitionEndHandler);
-        this._adapter.setVisibility(false);
-    }
-    _onCloseTransitionEnd() {
-        this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.CLOSE);
-        this._adapter.detach();
-        const openBottomSheets = this._adapter.getOpenBottomSheets(BOTTOM_SHEET_CONSTANTS.elementName);
-        if (!openBottomSheets.length) {
-            this._adapter.removeBodyAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN);
-        }
-    }
-    _onOpenTransitionEnd() {
-        if (!this._open) {
-            return;
+        if (this._fullscreen) {
+            this._adapter.setFullscreen(true);
         }
-        this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
-        this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.READY);
-        this._adapter.tryLayoutChildren();
+        this._adapter.addDialogListener(DIALOG_CONSTANTS.events.BEFORE_CLOSE, this._dialogBeforeCloseListener);
+        this._adapter.addDialogListener(DIALOG_CONSTANTS.events.CLOSE, this._dialogDismissListener);
+        this._adapter.open();
         if (this._adapter.isScrollable()) {
             this._initScrollableHandlers();
         }
+        this._adapter.trySetInitialFocus();
+        this._adapter.setBodyAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, 'true');
+        this._adapter.dispatchHostEvent(new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.OPEN, { bubbles: true }));
     }
-    _onDocumentKeydown(evt) {
-        evt.stopPropagation();
-        if (evt.key && (evt.key === 'Escape' || evt.key === 'Esc')) {
-            this._tryClose();
-        }
-    }
-    _onBackdropClick(evt) {
-        evt.stopPropagation();
-        this._tryClose();
-    }
-    async _tryClose() {
-        const isCancelled = !this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.BEFORE_CLOSE, undefined, undefined, true);
-        if (isCancelled) {
-            return;
-        }
-        if (!this._beforeCloseCallback) {
-            this.open = false;
-            return;
-        }
-        try {
-            const shouldClose = await Promise.resolve(this._beforeCloseCallback());
-            if (shouldClose) {
-                this.open = false;
-                return;
-            }
-        }
-        catch (err) {
-            return;
-        }
-    }
-    _setBackdropClickListener(attach) {
-        if (!this._open) {
-            return;
-        }
-        if (attach) {
-            this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
-        }
-        else {
-            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-        }
-    }
-    _setDocumentKeydownListener(attach) {
-        if (!this._open) {
-            return;
-        }
-        if (attach) {
-            this._adapter.addDocumentListener('keydown', this._documentKeydownHandler);
-        }
-        else {
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-        }
-    }
-    /** Controls whether clicking the backdrop closes the bottom sheet or not. */
-    set backdropClose(value) {
-        value = Boolean(value);
-        if (this._backdropClose !== value) {
-            this._backdropClose = value;
-            this._setBackdropClickListener(this._backdropClose);
-            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose);
-        }
-    }
-    get backdropClose() {
-        return this._backdropClose;
-    }
-    /** Controls whether pressing the escape key closes the sheet or not. */
-    set escapeClose(value) {
-        value = Boolean(value);
-        if (this._escapeClose !== value) {
-            this._escapeClose = value;
-            this._setDocumentKeydownListener(this._escapeClose);
-            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose);
-        }
-    }
-    get escapeClose() {
-        return this._escapeClose;
-    }
-    get open() {
-        return this._open;
-    }
-    set open(value) {
-        if (this._open !== value) {
-            value = Boolean(value);
-            if (value !== this._open) {
-                const callback = value ? this._openCallback : this._closeCallback;
-                if (callback) {
-                    Promise.resolve(callback())
-                        .then(() => {
-                        this._setOpen(value);
-                    })
-                        .catch(() => { });
-                }
-                else {
-                    this._setOpen(value);
-                }
-            }
-        }
-    }
-    get fullscreen() {
-        return this._fullscreen;
-    }
-    set fullscreen(value) {
-        if (this._fullscreen !== value) {
-            this._fullscreen = value;
-            this._adapter.setFullscreen(this._fullscreen);
-            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
-        }
+    _closeBottomSheet() {
+        this._adapter.removeDialogListener(DIALOG_CONSTANTS.events.BEFORE_CLOSE, this._dialogBeforeCloseListener);
+        this._adapter.removeDialogListener(DIALOG_CONSTANTS.events.CLOSE, this._dialogDismissListener);
+        this._adapter.close();
+        this._adapter.dispatchHostEvent(new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.CLOSE, { bubbles: true }));
+        this._open = false;
+        this._adapter.setFullscreen(false);
     }
-    get showBackdrop() {
-        return this._showBackdrop;
+    _onDialogDismiss() {
+        this._closeBottomSheet();
     }
-    set showBackdrop(value) {
-        if (this._showBackdrop !== value) {
-            this._showBackdrop = value;
-            this._adapter.setBackdropVisibility(value);
-            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.SHOW_BACKDROP, this._showBackdrop);
+    _onDialogBeforeClose(evt) {
+        const beforeCloseEvent = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.BEFORE_CLOSE, { bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(beforeCloseEvent);
+        if (beforeCloseEvent.defaultPrevented) {
+            evt.preventDefault();
         }
     }
-    get openCallback() {
-        return this._openCallback;
-    }
-    set openCallback(callback) {
-        this._openCallback = callback;
-    }
-    get closeCallback() {
-        return this._closeCallback;
-    }
-    set closeCallback(callback) {
-        this._closeCallback = callback;
-    }
-    get beforeCloseCallback() {
-        return this._beforeCloseCallback;
-    }
-    set beforeCloseCallback(callback) {
-        this._beforeCloseCallback = callback;
-    }
     /** If scrollable, allow drag to/from fullscreen, and make fullscreen on scroll. */
     _initScrollableHandlers() {
-        if (!this._fullscreen && this._adapter.isScrollable()) {
+        if (!this._adapter.isFullscreen() && this._adapter.isScrollable()) {
             this._adapter.setDragTargetHandler('mousedown', this._dragStartHandler);
             this._adapter.setDragTargetHandler('touchstart', this._dragStartHandler);
             this._adapter.setBodyScrollHandler(this._bodyScrollHandler);
         }
     }
     _onBodyScroll() {
-        if (!this._fullscreen && !this._isDragging) {
-            this.fullscreen = true;
-            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+        if (!this._adapter.isFullscreen() && !this._isDragging) {
+            this._adapter.setFullscreen(true);
+            this._adapter.dispatchHostEvent(new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, { bubbles: true, detail: true }));
         }
     }
     _onDragStart(evt) {
-        if (this._fullscreen) {
+        if (this._adapter.isFullscreen()) {
             const eventPath = getEventPath(evt);
             const isWithinScrollContainer = this._adapter.isScrollable() && this._adapter.isContentChild(eventPath[0]);
             if (isWithinScrollContainer) {
@@ -269,21 +108,24 @@ export class BottomSheetFoundation {
         // then update the surface position if not prevented
         if (!this._isDragging) {
             this._isDragging = true;
-            const canDrag = this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_START, height, true, true);
-            if (!canDrag) {
+            const dragStartEvt = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_START, { bubbles: true, detail: height, cancelable: true });
+            this._adapter.dispatchHostEvent(dragStartEvt);
+            if (dragStartEvt.defaultPrevented) {
                 return;
             }
             this._adapter.setDragging(true);
         }
         // If not fullscreen, clamp to minimum of original height.
-        const newPosition = this._fullscreen ? height : { y: Math.max(height.y, this._dragContext.height) };
+        const newPosition = this._adapter.isFullscreen() ? height : { y: Math.max(height.y, this._dragContext.height) };
         // Only update the position if it actually changed
         if (!this._lastPosition || newPosition.y !== this._lastPosition.y) {
-            const canMove = this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAGGED, newPosition, true, true);
-            if (canMove) {
-                this._lastPosition = Object.assign(Object.assign({}, newPosition), { clientY });
-                this._adapter.setContainerHeight(newPosition.y);
+            const dragMoveEvt = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.DRAGGED, { bubbles: true, detail: newPosition, cancelable: true });
+            this._adapter.dispatchHostEvent(dragMoveEvt);
+            if (dragMoveEvt.defaultPrevented) {
+                return;
             }
+            this._lastPosition = Object.assign(Object.assign({}, newPosition), { clientY });
+            this._adapter.setContainerHeight(newPosition.y);
         }
     }
     _onDragEnd() {
@@ -291,24 +133,27 @@ export class BottomSheetFoundation {
             const clientY = this._lastPosition.clientY;
             const dragContext = this._dragContext;
             if (dragContext) {
-                if (this._fullscreen && clientY > 0) {
-                    this.fullscreen = false;
-                    this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+                const isFullscreen = this._adapter.isFullscreen();
+                if (isFullscreen && clientY > 0) {
+                    this._adapter.setFullscreen(false);
                 }
-                else if (!this._fullscreen && clientY < dragContext.height + dragContext.top) {
-                    this.fullscreen = true;
-                    this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+                else if (!isFullscreen && clientY < dragContext.height + dragContext.top) {
+                    this._adapter.setFullscreen(true);
                 }
+                const fullscreenEvt = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, { bubbles: true, detail: isFullscreen });
+                this._adapter.dispatchHostEvent(fullscreenEvt);
             }
         }
         if (this._isDragging) {
-            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_END);
+            const dragEndEvt = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_END, { bubbles: true });
+            this._adapter.dispatchHostEvent(dragEndEvt);
         }
         this._dragComplete();
     }
     _onDragCancel() {
         if (this._isDragging) {
-            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_CANCEL);
+            const dragCancelEvt = new CustomEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_CANCEL, { bubbles: true });
+            this._adapter.dispatchHostEvent(dragCancelEvt);
         }
         this._dragComplete();
     }
@@ -324,4 +169,52 @@ export class BottomSheetFoundation {
         this._dragContext = undefined;
         this._isDragging = false;
     }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._open = value;
+            if (this._adapter.isConnected) {
+                if (this._open) {
+                    this._openBottomSheet();
+                }
+                else {
+                    this._closeBottomSheet();
+                }
+            }
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, value);
+        }
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(value) {
+        if (this._mode !== value) {
+            this._mode = value;
+            this._adapter.setDialogProperty('mode', this._mode);
+        }
+    }
+    get persistent() {
+        return this._persistent;
+    }
+    set persistent(value) {
+        value = Boolean(value);
+        if (this._persistent !== value) {
+            this._persistent = value;
+            this._adapter.setDialogProperty('persistent', this._persistent);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.PERSISTENT, this._persistent);
+        }
+    }
+    get fullscreen() {
+        return this._fullscreen;
+    }
+    set fullscreen(value) {
+        if (this._fullscreen !== value) {
+            this._fullscreen = value;
+            this._adapter.setFullscreen(this._fullscreen);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
+        }
+    }
 }

package/esm/bottom-sheet/bottom-sheet.d.ts

@@ -4,27 +4,22 @@
  * License: Apache-2.0
  */
 import { ICustomElement } from '@tylertech/forge-core';
-import { IBottomSheetDragEventData, IBottomSheetDragStartEventData } from './bottom-sheet-constants';
+import { BaseComponent } from '../core/base/base-component';
+import { BottomSheetMode, IBottomSheetDragEventData, IBottomSheetDragStartEventData } from './bottom-sheet-constants';
 export interface IBottomSheetComponent extends ICustomElement {
-    showBackdrop: boolean;
-    backdropClose: boolean;
-    escapeClose: boolean;
+    mode: BottomSheetMode;
+    persistent: boolean;
     open: boolean;
     fullscreen: boolean;
-    openCallback: () => void | Promise<void>;
-    closeCallback: () => void | Promise<void>;
-    beforeCloseCallback: () => boolean | Promise<boolean>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-bottom-sheet': IBottomSheetComponent;
     }
     interface HTMLElementEventMap {
-        'forge-bottom-sheet-open': CustomEvent<void>;
-        'forge-bottom-sheet-close': CustomEvent<void>;
         'forge-bottom-sheet-before-close': CustomEvent<void>;
-        'forge-bottom-sheet-before-open': CustomEvent<void>;
-        'forge-bottom-sheet-ready': CustomEvent<void>;
+        'forge-bottom-sheet-close': CustomEvent<void>;
+        'forge-bottom-sheet-open': CustomEvent<void>;
         'forge-bottom-sheet-drag-start': CustomEvent<IBottomSheetDragStartEventData>;
         'forge-bottom-sheet-dragged': CustomEvent<IBottomSheetDragEventData>;
         'forge-bottom-sheet-drag-end': CustomEvent<void>;
@@ -32,32 +27,50 @@ declare global {
         'forge-bottom-sheet-fullscreen': CustomEvent<boolean>;
     }
 }
+declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("..").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & typeof BaseComponent;
 /**
- * The web component class behind the `<forge-bottom-sheet>` custom element.
- *
  * @tag forge-bottom-sheet
+ *
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal more content and/or actions that the user can take.
+ *
+ * @property {boolean} open - Whether the bottom sheet is open.
+ * @property {BottomSheetMode} mode - The mode of the bottom sheet. Defaults to non-modal.
+ * @property {boolean} persistent - Whether the bottom sheet is persistent.
+ * @property {boolean} fullscreen - Whether the bottom sheet is fullscreen.
+ *
+ * @attribute {boolean} open - Whether the bottom sheet is open.
+ * @attribute {BottomSheetMode} mode - The mode of the bottom sheet. Defaults to non-modal.
+ * @attribute {boolean} persistent - Whether the bottom sheet is persistent.
+ * @attribute {boolean} fullscreen - Whether the bottom sheet is fullscreen.
+ *
+ * @event {CustomEvent<void>} forge-bottom-sheet-before-close - Fires before the bottom sheet closes.
+ * @event {CustomEvent<void>} forge-bottom-sheet-close - Fires after the bottom sheet closes.
+ * @event {CustomEvent<void>} forge-bottom-sheet-open - Fires after the bottom sheet opens.
+ * @event {CustomEvent<IBottomSheetDragStartEventData>} forge-bottom-sheet-drag-start - Fires when the bottom sheet starts to be dragged.
+ * @event {CustomEvent<IBottomSheetDragEventData>} forge-bottom-sheet-dragged - Fires when the bottom sheet is dragged.
+ * @event {CustomEvent<void>} forge-bottom-sheet-drag-end - Fires when the bottom sheet drag ends.
+ * @event {CustomEvent<void>} forge-bottom-sheet-drag-cancel - Fires when the bottom sheet drag is cancelled.
+ * @event {CustomEvent<boolean>} forge-bottom-sheet-fullscreen - Fires when the bottom sheet is toggled to fullscreen.
+ *
+ * @cssproperty --forge-bottom-sheet-desktop-max-width - The maximum width of the bottom sheet on desktop.
+ * @cssproperty --forge-bottom-sheet-desktop-min-width - The minimum width of the bottom sheet on desktop.
+ * @cssproperty --forge-bottom-sheet-animation-duration - The duration of the bottom sheet animation to fullscreen.
+ * @cssproperty --forge-bottom-sheet-animation-timing - The timing function of the bottom sheet animation to fullscreen.
+ *
+ * @csspart root - The root element of the bottom sheet.
+ * @csspart surface - The surface element of the bottom sheet within th dialog.
+ *
+ * @slot - The content of the bottom sheet. This is a passthrough slot to the dialog surface.
  */
-export declare class BottomSheetComponent extends HTMLElement implements IBottomSheetComponent {
+export declare class BottomSheetComponent extends BaseClass implements IBottomSheetComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
-    /** Controls whether clicking the backdrop closes the bottom-sheet or not. Default is true. */
-    backdropClose: boolean;
-    /** Controls whether pressing the escape key closes the bottom-sheet or not. Default is true. */
-    escapeClose: boolean;
-    /** Controls whether the bottom-sheet is open or not. Default is false. */
     open: boolean;
-    /** Controls whether the bottom-sheet is full screen or not. Default is false. */
+    mode: BottomSheetMode;
+    persistent: boolean;
     fullscreen: boolean;
-    /** Shows a backdrop to prevent interacting with other content until the bottom sheet is dismissed.  Default is false. */
-    showBackdrop: boolean;
-    /** The function to call when the bottom-sheet wants to open. */
-    openCallback: () => void | Promise<void>;
-    /** the function to call when the bottom-sheet wants to close. */
-    closeCallback: () => void | Promise<void>;
-    /** the function to call when the bottom-sheet wants to close. */
-    beforeCloseCallback: () => boolean | Promise<boolean>;
 }
+export {};