@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
55 lines • 1.97 kB
TypeScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { LitElement } from 'lit';
import { type IAttachable } from '../../utils/controller/attachable-controller';
import { type IRipple } from './ripple-action';
declare global {
interface HTMLElementTagNameMap {
"mdc-ripple": MDCRipple;
}
}
/**
* Ripple is not a concept that is explicitly categorized as a component.
*
* The parent element of the focus ring used to provide perspective focus
* must be set to relative.
*
* Ripple is often used for interactive buttons.
* It provides a `hovered-state-layer`, a `focused-state-layer` and a `pressed-state-layer` when the user interacts.
*
* @version
* Material Design 3
*/
export declare class MDCRipple extends LitElement implements IAttachable, IRipple {
static styles: import("lit").CSSResult;
protected readonly rippleElement: HTMLElement | null;
protected readonly _hoverStateLayerElement: HTMLElement;
protected readonly _focusStateLayerElement: HTMLElement;
protected readonly _pressStateLayerElement: HTMLElement;
disableHoverStateLayer: boolean;
disableFocusStateLayer: boolean;
disablePressStateLayer: boolean;
disabled: boolean;
private readonly action;
private readonly attachableController;
protected render(): import("lit-html").TemplateResult<1>;
get hoverStateLayerElement(): HTMLElement;
get focusStateLayerElement(): HTMLElement;
get pressStateLayerElement(): HTMLElement;
get hovered(): boolean;
set hovered(hovered: boolean);
get focused(): boolean;
set focused(focused: boolean);
get pressed(): boolean;
set pressed(pressed: boolean);
get htmlFor(): string | null;
set htmlFor(htmlFor: string | null);
get control(): HTMLElement | null;
set control(control: HTMLElement | null);
attach(control: HTMLElement): void;
detach(): void;
}
//# sourceMappingURL=ripple.d.ts.map