import { type IAttachable } from '../../../Behaviors/Attachable'; import { ElevationWeight } from '../../../Types/ElevationWeight'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IElevationElementProps } from './IElevationElementProps'; declare const ElevationElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => IAttachable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Elevation - A visual effect indicating the depth of an element relative to its surroundings. * * @description * Elevation is a design technique used to create a sense of depth and hierarchy in a user interface. * Elements with higher elevation appear to be physically closer to the viewer, while elements with lower * elevation appear further away. Elevation is often used to highlight and differentiate elements, such as * cards, dialogs, and buttons, within a layout. * * @element mosaik-elevation * @category Visual Effects * * @cssprop {String} --elevation-font-family - The font family CSS custom property. * @cssprop {String} --elevation-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --elevation-font-line-height - The font line height CSS custom property. * @cssprop {String} --elevation-font-size - The font size CSS custom property. * @cssprop {String} --elevation-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --elevation-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --elevation-font-weight - The font weight CSS custom property. * @cssprop {String} --elevation-gap - The gap CSS custom property. * @cssprop {String} --elevation-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --elevation-padding-left - The padding left CSS custom property. * @cssprop {String} --elevation-padding-right - The padding right CSS custom property. * @cssprop {String} --elevation-padding-top - The padding top CSS custom property. * @cssprop {String} --elevation-shadow - The shadow CSS custom property. * @cssprop {String} --elevation-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --elevation-shadow-color - The shadow color CSS custom property. * @cssprop {String} --elevation-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --elevation-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --elevation-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --elevation-transition-duration - The transition duration CSS custom property. * @cssprop {String} --elevation-transition-mode - The transition mode CSS custom property. * @cssprop {String} --elevation-transition-property - The transition property CSS custom property. * @cssprop {String} --elevation-translate - The translate CSS custom property. * * @example * Basic elevation effect: * ```html * *
Elevated content
*
* ``` * * @example * High elevation for dialogs: * ```html * *
Card with high elevation
*
* ``` * * @public */ export declare class ElevationElement extends ElevationElement_base implements IElevationElementProps, IAttachable { private _weigh; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `weigh` property. * * @public * @attr */ get weigh(): ElevationWeight; set weigh(value: ElevationWeight); /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onWeighPropertyChanged(prev?: ElevationWeight, next?: ElevationWeight): void; /** * Reads the target box-shadow from the host's computed style and applies it to the control. * Temporarily disables the CSS transition so that `getComputedStyle` returns the final * target value instead of an in-progress transitioning value. * * @private */ private applyBoxShadow; } /** * @public */ export declare namespace ElevationElement { type Props = IElevationElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-elevation': ElevationElement; } } export {}; //# sourceMappingURL=ElevationElement.d.ts.map