@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
105 lines • 4.1 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { type IBottomSheetDragHost } from './bottom-sheet-drag-controller';
import { type BottomSheetDetent, type BottomSheetVariant, type IBottomSheet } from '../bottom-sheet.interface';
declare const BaseBottomSheet_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object & import("../../elevation/elevation-options.mixin").IMixinElevationOptions);
/**
* Abstract base for `mdc-bottom-sheet`. Owns the lifecycle, focus traps,
* drag controller, and event dispatch. Subclasses define the public tag and
* the default variant.
*
* @version
* Material Design 3
*
* @link
* https://m3.material.io/components/bottom-sheets/overview
*/
export declare abstract class BaseBottomSheet extends BaseBottomSheet_base implements IBottomSheet, IBottomSheetDragHost {
static styles: import("lit").CSSResult[];
variant: BottomSheetVariant;
open: boolean;
detent: BottomSheetDetent;
quick: boolean;
/**
* String-aware converter so `cancelable="false"` is honoured (Lit default
* treats any present attribute as `true`).
*/
cancelable: boolean;
noFocusTrap: boolean;
returnValue: string;
/**
* Swipe-to-dismiss from the drag handle. Modal default is `true` per
* the MD3 spec — the handle is the swipe affordance.
*/
draggable: boolean;
/**
* Hide the visual drag-handle bar. The handle element stays in the
* shadow DOM so swipe-to-dismiss continues to work from its position.
*/
hideDragHandle: boolean;
maxHeight: number;
protected hasHeader: boolean;
protected hasContent: boolean;
private lastCloseReason;
private previouslyFocused;
/**
* Cancels any in-flight WAAPI animations (scrim + container) when a fresh
* `show()` or `hide()` interrupts them. Mirrors side-sheet's pattern.
*/
protected cancelAnimations?: AbortController;
protected readonly dialogEl: HTMLDialogElement | null;
protected readonly containerEl: HTMLElement | null;
protected readonly headerEl: HTMLElement | null;
protected readonly dragHandleEl: HTMLElement | null;
protected readonly scrimEl: HTMLElement | null;
ariaLabel: string | null;
private readonly dragController;
constructor();
dragHandleRef(): HTMLElement | null;
containerRef(): HTMLElement | null;
headerRef(): HTMLElement | null;
scrimRef(): HTMLElement | null;
enabled(): boolean;
getVariant(): BottomSheetVariant;
getRestingDetent(): BottomSheetDetent;
hasHeaderContent(): boolean;
hasBodyContent(): boolean;
protected getRenderClasses(): Record<string, boolean | string>;
protected render(): TemplateResult;
protected renderFocusTrap(position: 'first' | 'last'): TemplateResult;
show(detent?: BottomSheetDetent): Promise<void>;
hide(): Promise<void>;
close(returnValue?: string): Promise<void>;
private closeDialog;
dragCommittedClose(fromDy?: number): Promise<void>;
private detentTransitionOffset;
dragSnapToFull(fromDy?: number): Promise<void>;
dragSnapToPeek(fromDy?: number): Promise<void>;
dragSnapBack(fromDy?: number): Promise<void>;
/**
* Read the y-translation component from a `matrix(a, b, c, d, e, f)` transform.
* Returns 0 when no inline transform has been set.
*/
private readTranslateY;
protected willUpdate(changed: PropertyValues<this>): void;
disconnectedCallback(): void;
private animateBottomSheet;
private focusFirstInside;
private restoreFocus;
private getFocusableElements;
private handleHeaderSlotChange;
private handleContentSlotChange;
private handleNativeCancel;
private handleHostClick;
private handleKeydown;
private handleFirstFocusTrapFocus;
private handleLastFocusTrapFocus;
private handleDragHandlePointerDown;
private handleDragEnd;
}
export {};
//# sourceMappingURL=base-bottom-sheet.d.ts.map