@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
78 lines • 2.92 kB
TypeScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { LitElement, type PropertyValues } from 'lit';
import { RippleAction } from './ripple-action';
import type { IRipple } from './ripple.interface';
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 IRipple {
static styles: import("lit").CSSResult;
private _ignoreGlobalConfig;
private _hasLocalConfig;
private _disabled;
private _disableHoverStateLayer;
private _disableFocusStateLayer;
private _disablePressStateLayer;
private _configAttributeSyncSource;
private _lastEffectiveDisabled;
private readonly globalMDCContextConsumer;
protected readonly rippleElement: HTMLElement | null;
protected readonly _hoverStateLayerElement: HTMLElement;
protected readonly _focusStateLayerElement: HTMLElement;
protected readonly _pressStateLayerElement: HTMLElement;
get ignoreGlobalConfig(): boolean;
set ignoreGlobalConfig(value: boolean);
get disableHoverStateLayer(): boolean;
set disableHoverStateLayer(value: boolean);
get disableFocusStateLayer(): boolean;
set disableFocusStateLayer(value: boolean);
get disablePressStateLayer(): boolean;
set disablePressStateLayer(value: boolean);
get disabled(): boolean;
set disabled(value: boolean);
readonly action: RippleAction;
private readonly attachableController;
private get useLocalConfig();
private get globalRippleConfig();
private get effectiveDisabled();
private get effectiveDisableHoverStateLayer();
private get effectiveDisableFocusStateLayer();
private get effectiveDisablePressStateLayer();
private syncConfigAttributes;
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;
protected updated(_changedProperties: PropertyValues<this>): void;
}
//# sourceMappingURL=ripple.d.ts.map