/** * BottomSheet custom element. * * @example * // Register in TypeScript for proper type checking: * declare global { * interface HTMLElementTagNameMap { * "bottom-sheet": BottomSheet; * } * } */ export declare class BottomSheet extends HTMLElement { #private; static observedAttributes: string[]; constructor(); connectedCallback(): void; /** * Scrolls the bottom sheet to the snap point at the given snap index, using * the same convention as the `snap-position-change` event's `snapIndex`. * Indices range from `0` (collapsed) to the maximum (fully expanded), with * intermediate values mapping to user-defined snap points in bottom-to-top * order. * * If the index is not an integer or is out of range, does nothing. * Otherwise, the final position is determined by the browser's scroll-snap, * so for example index `0` without `swipe-to-dismiss` resolves to the * bottommost reachable snap point, and indices beyond the `content-height` * limit resolve to the topmost reachable snap. * * @param index - The snap index to scroll to. * @param options - Options that control how the scroll is performed. */ snapToPoint(index: number, options?: SnapToPointOptions): void; attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void; disconnectedCallback(): void; } /** * Options for the {@link BottomSheet.snapToPoint} method. */ export interface SnapToPointOptions { /** * Determines whether scrolling is instant or animates smoothly. Maps directly * to the `behavior` option of the underlying * [`Element.scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) * call. */ behavior?: ScrollBehavior; } export interface BottomSheetHTMLAttributes { /** * When set, the bottom sheet maximum height is based on the the height of its * contents. */ ["content-height"]?: boolean; /** * When set, enables scrolling the sheet inner content independently of the sheet. */ ["nested-scroll"]?: boolean; /** * When set, enables resize optimization for the nested scroll mode to avoid reflows * during sheet resizing. Only relevant when `nested-scroll` is also true. Not relevant * for `expand-to-scroll` mode since it already avoids reflows. */ ["nested-scroll-optimization"]?: boolean; /** * When set, content becomes scrollable only after full expansion. Only relevant * when `nested-scroll` is also true. */ ["expand-to-scroll"]?: boolean; /** * When set, allows swiping down to dismiss the bottom sheet when used together * with the `bottom-sheet-dialog-manager` or with the Popover API. */ ["swipe-to-dismiss"]?: boolean; } /** * Represents the current state of the bottom sheet. * - `collapsed`: Sheet is fully collapsed (closed/minimized) * - `partially-expanded`: Sheet is at an intermediate snap point * - `expanded`: Sheet is fully expanded to its maximum height */ export type SheetState = "collapsed" | "partially-expanded" | "expanded"; /** * Detail object for the `snap-position-change` custom event. */ export interface SnapPositionChangeEventDetail { /** The semantic state of the sheet */ sheetState: SheetState; /** * The index of the current snap point (0 = collapsed, * higher values = more expanded, with the highest being fully expanded) */ snapIndex: number; } export type BottomSheetEvents = { "snap-position-change": CustomEvent; };