@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
109 lines • 4.32 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
import { type ISideSheetDragHost } from './side-sheet-drag-controller';
import { type ISideSheet, type SideSheetEdge, type SideSheetVariant } from '../side-sheet.interface';
declare const BaseSideSheet_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object & import("../../elevation/elevation-options.mixin").IMixinElevationOptions);
/**
* Abstract base for `mdc-side-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/side-sheets/guidelines
*/
export declare abstract class BaseSideSheet extends BaseSideSheet_base implements ISideSheet, ISideSheetDragHost {
static styles: import("lit").CSSResult[];
variant: SideSheetVariant;
open: boolean;
sheetEdge: SideSheetEdge;
maxWidth: number;
quick: boolean;
/**
* Whether Esc and scrim taps dismiss the modal sheet. Custom string-aware
* converter so `cancelable="false"` is honoured (Lit default treats any
* present attribute as `true`).
*/
cancelable: boolean;
noFocusTrap: boolean;
returnValue: string;
showBackButton: boolean;
/**
* Swipe-to-dismiss drag gesture. Enabled by default.
*/
draggable: boolean;
protected hasHeadline: boolean;
protected hasContent: boolean;
protected hasActions: boolean;
protected hasCloseIcon: boolean;
protected hasBackIcon: boolean;
private lastCloseReason;
private previouslyFocused;
/**
* Cancels any in-flight WAAPI animations (scrim + container) when a fresh
* `show()` or `hide()` interrupts them. Replaces the old CSS
* `transitionend` + `pendingClose` design — the CSS version wedged the
* sheet open when consumers toggled faster than the close animation
* finished (the cancelled transition never fired `transitionend`, so
* `pendingClose` stayed `true` forever). See `animateSideSheet`.
*/
protected cancelAnimations?: AbortController;
protected readonly dialogEl: HTMLDialogElement | null;
protected readonly containerEl: HTMLElement | null;
protected readonly scrimEl: HTMLElement | null;
protected readonly headlineEl: HTMLElement | null;
protected readonly closeIconEl: HTMLElement | null;
ariaLabel: string | null;
private readonly dragController;
constructor();
containerRef(): HTMLElement | null;
headlineRef(): HTMLElement | null;
scrimRef(): HTMLElement | null;
enabled(): boolean;
getVariant(): SideSheetVariant;
getSheetEdge(): SideSheetEdge;
protected getRenderClasses(): Record<string, boolean | string>;
protected render(): TemplateResult;
protected renderHeadlineBackIcon(): TemplateResult | typeof nothing;
protected renderFocusTrap(position: 'first' | 'last'): TemplateResult;
show(): Promise<void>;
hide(): Promise<void>;
close(returnValue?: string): Promise<void>;
dragCommittedClose(fromDx?: number): Promise<void>;
dragSnapBack(fromDx?: number): Promise<void>;
private readTranslateX;
private handleDragEnd;
private handleHeadlinePointerDown;
private handleContainerPointerDown;
/**
* Close the native `<dialog>` element, removing it from the top layer.
* Safe to call multiple times — no-ops if the dialog is already closed.
*/
private closeDialog;
protected willUpdate(changed: PropertyValues<this>): void;
disconnectedCallback(): void;
private animateSideSheet;
private focusFirstInside;
private restoreFocus;
private getFocusableElements;
private handleHeadlineSlotChange;
private handleContentSlotChange;
private handleActionsSlotChange;
private handleCloseIconSlotChange;
private handleBackIconSlotChange;
private handleNativeCancel;
private handleHostClick;
private handleKeydown;
private handleCloseIconClick;
private handleBackIconClick;
private handleFirstFocusTrapFocus;
private handleLastFocusTrapFocus;
}
export {};
//# sourceMappingURL=base-side-sheet.d.ts.map