@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
109 lines • 3.69 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { LitElement, type TemplateResult } from 'lit';
import { MeasuredDimensionController } from '../../../utils/controller/measured-dimension-controller';
import { OpacityTransitionController } from '../../../utils/controller/opacity-transition-controller';
declare const BaseButton_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object & import("../../../utils/behaviors/element-internals").WithElementInternals & import("../../ripple/ripple-options.mixin").IMixinRippleOptions & import("../../ripple/ripple-options.mixin").IMixinRippleAttributes & import("../../elevation/elevation-options.mixin").IMixinElevationOptions & import("../../focus-ring/focus-ring-options.mixin").IMixinFocusRingOption);
/**
* Supports inserting icon and label buttons.
*
* There are two implementations:
* - mdc-button
* - mdc-toggle-button
*
* Available in 5 variants:
* - filled (default)
* - filled-tonal
* - elevated
* - outlined
* - text
*
* ```html
* <mdc-button variant="filled-tonal"></mdc-button>
* <mdc-toggle-button variant="filled-tonal"></mdc-toggle-button>
* ```
*
* Available in 5 sizes:
* - extra-small
* - small (default)
* - medium
* - large
* - extra-large
*
* ```html
* <mdc-button size="medium"></mdc-button>
* <mdc-toggle-button size="medium"></mdc-toggle-button>
* ```
*
* Each button is available in 2 shapes:
* - round (default)
* - square
*
* ```html
* <mdc-button shape="round"></mdc-button>
* <mdc-toggle-button shape="square"></mdc-toggle-button>
* ```
*
* @see
* When passing in a tag, make sure your tag is an HTMLElement and not a text node:
*
* ```html
* <mdc-button>
* <span>Delete</span>
* <mdc-icon slot="icon">delete</mdc-icon>
* </mdc-button>
* ```
*
* @version
* Material Design 3 - Expressive
*
* @link
* https://m3.material.io/components/buttons/overview
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=57994-696&t=kLfic7eA8vKtkiiO-0
*/
export declare abstract class BaseButton extends BaseButton_base {
static styles: import("lit").CSSResult[];
/**
* 'filled' | 'filled-tonal' | 'elevated' | 'outlined' | 'text'
*/
abstract variant: string;
abstract disabled: boolean;
size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
trailingIcon: boolean;
shape: 'round' | 'square';
disableMorph: boolean;
protected hasIcon: boolean;
protected hasLabel: boolean;
protected readonly buttonElement: HTMLElement | null;
protected readonly labelElement: HTMLElement | null;
protected readonly sizeController: MeasuredDimensionController;
protected readonly opacityController: OpacityTransitionController;
get focusRingControl(): HTMLElement | null;
get rippleControl(): HTMLElement | null;
constructor();
protected getRenderClasses(): {
[x: string]: boolean;
container: boolean;
'has-icon': boolean;
'has-label': boolean;
'disable-morph': boolean;
disabled: boolean;
};
protected render(): TemplateResult;
protected renderBackground(): TemplateResult<1>;
protected renderOutline(): unknown;
protected renderContent(): TemplateResult<1>;
protected renderIcon(): TemplateResult<1>;
protected renderLabel(): TemplateResult<1>;
protected renderTouchTarget(): TemplateResult<1>;
focus(): void;
blur(): void;
protected handleClick(e: MouseEvent): void;
private handleIconSlotChange;
private handleLabelSlotChange;
}
export {};
//# sourceMappingURL=base-button.d.ts.map