@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
82 lines • 3.34 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import type { ReactiveController, ReactiveControllerHost } from 'lit';
import { type BottomSheetDetent, type BottomSheetVariant } from '../bottom-sheet.interface';
/**
* Host contract for {@link BottomSheetDragController}.
*
* The host must provide refs that resolve to the drag handle (where
* `pointerdown` is observed), the inner container (whose `transform` is
* animated), the header, and the scrim (whose `opacity` is animated). The `enabled`
* function is re-evaluated on every `pointerdown` so changes to `open`,
* `variant`, or `draggable` take effect immediately.
*/
export interface IBottomSheetDragHost extends ReactiveControllerHost, HTMLElement {
dragHandleRef: () => HTMLElement | null;
containerRef: () => HTMLElement | null;
headerRef: () => HTMLElement | null;
scrimRef: () => HTMLElement | null;
enabled: () => boolean;
getVariant: () => BottomSheetVariant;
/**
* Returns the resting detent. Read at drag-start and at pointerup (for
* the `drag-end` event detail and for snap-back target).
*/
getRestingDetent: () => BottomSheetDetent;
/** Whether slot="header" has assigned content. */
hasHeaderContent: () => boolean;
/** Whether the default body slot has assigned content. */
hasBodyContent: () => boolean;
}
/**
* 3-State pointer-driven drag controller for bottom-sheet (both standard and modal).
* Tracks vertical pointer movement, engages after 4px threshold, applies live
* translateY during drag (supporting upward expansion from peek to full, downward
* collapse from full to peek, and dismissal to closed), and decides 3-state snap target
* on release using distance and velocity heuristics per M3 specifications.
*/
export declare class BottomSheetDragController implements ReactiveController {
private readonly host;
private pointerId;
private startX;
private startY;
private engaged;
private canceled;
private initialDetent;
private currentDy;
private containerHeight;
private fullHeight;
private peekHeight;
private deltaH;
private lastMoveT;
private lastMoveDy;
private releaseVelocity;
private readonly handlePointerDownBound;
private readonly handlePointerMoveBound;
private readonly handlePointerUpBound;
private readonly handlePointerCancelBound;
constructor(host: IBottomSheetDragHost);
hostConnected(): void;
hostDisconnected(): void;
/**
* Cancel any in-flight drag (e.g. when the host calls `hide()` mid-drag).
* Snaps back to the current detent without dispatching a drag-end event
* (the host's lifecycle events own the close path).
*/
cancel(): void;
/**
* Whether the bottom sheet supports multi-detent (3-stage) transitions.
* True only when BOTH header and lower body content are provided.
* When there is no lower content (or no header), the sheet operates as a 2-stage
* sheet (closed <-> full/header) and downward drag closes directly in one step.
*/
private hasMultiDetent;
handlePointerDown(event: PointerEvent): void;
private handlePointerMove;
private handlePointerUp;
private resetState;
}
//# sourceMappingURL=bottom-sheet-drag-controller.d.ts.map