import { CustomElement } from '../../Abstracts/CustomElement'; import { IPlaceholderElementProps } from './IPlaceholderElementProps'; declare const PlaceholderElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Placeholder - A dimensional container for empty states, drag targets, and layout reservations. * * @description * The Placeholder component creates a styled container that represents empty content areas or reserved * layout space. It's commonly used for drag-and-drop drop zones, empty state displays, image upload * areas, and maintaining layout structure before content loads. The component supports custom dimensions * and provides visual cues through dashed borders and semi-transparent backgrounds to indicate * interactive or placeholder regions. * * @name Placeholder * @element mosaik-placeholder * @category Primitives * * @slot - The default content slot for placeholder content (text, icons, or instructions) * * @cssprop {String} --placeholder-background-color - Background color of the placeholder area * @cssprop {String} --placeholder-border-color - Border color of the placeholder outline * @cssprop {String} --placeholder-border-radius - Corner rounding radius * @cssprop {String} --placeholder-border-style - Border line style (typically dashed) * @cssprop {String} --placeholder-border-width - Border thickness * @cssprop {String} --placeholder-font-family - Font family for placeholder text * @cssprop {String} --placeholder-font-size - Font size for placeholder text * @cssprop {String} --placeholder-font-weight - Font weight for placeholder text * @cssprop {String} --placeholder-font-line-height - Line height for placeholder text * @cssprop {String} --placeholder-font-letter-spacing - Letter spacing for placeholder text * @cssprop {String} --placeholder-font-text-decoration - Text decoration style * @cssprop {String} --placeholder-font-text-transform - Text transformation style * @cssprop {String} --placeholder-gap - Spacing between placeholder content elements * @cssprop {String} --placeholder-padding-top - Top padding inside the placeholder * @cssprop {String} --placeholder-padding-right - Right padding inside the placeholder * @cssprop {String} --placeholder-padding-bottom - Bottom padding inside the placeholder * @cssprop {String} --placeholder-padding-left - Left padding inside the placeholder * @cssprop {String} --placeholder-transition-duration - Duration of visual transitions * @cssprop {String} --placeholder-transition-mode - Timing function for transitions * @cssprop {String} --placeholder-transition-property - CSS properties to transition * @cssprop {String} --placeholder-translate - Transform translation value * * @example * Basic placeholder with dimensions: * ```html * * ``` * * @example * Image upload placeholder: * ```html * *

Drag image here or click to upload

*
* ``` * * @example * Drag-and-drop target: * ```html * *

Drop files here

*
* * ``` * * @public */ export declare class PlaceholderElement extends PlaceholderElement_base implements IPlaceholderElementProps { /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; } /** * @public */ export declare namespace PlaceholderElement { type Props = IPlaceholderElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-placeholder': PlaceholderElement; } } export {}; //# sourceMappingURL=PlaceholderElement.d.ts.map