import { StateBaseElement } from '../Abstracts/StateBaseElement'; import { ISuccessStateElementProps } from './ISuccessStateElementProps'; declare const SuccessStateElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof StateBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * SuccessState - A celebration component that displays successful operations and positive outcomes to users. * * @description * The SuccessState component provides positive reinforcement and confirmation messaging when tasks * complete successfully, operations finish, or goals are achieved. It helps build user confidence * and satisfaction through clear success indicators and optional next-step actions. The component * features customizable success icons, celebratory messaging, detailed confirmation text, and action * buttons to guide users toward their next productive steps. It's designed to create positive user * experiences by clearly communicating achievement and offering smooth transitions to follow-up tasks. * * @name SuccessState * @element mosaik-success-state * @category States * * @slot - Default content area for additional success information or custom content * @slot actions - Action buttons for next steps or related operations after success * * @csspart icon - The icon container for success state visual indicators (checkmarks, thumbs up) * @csspart header - The header text container for primary success messaging * @csspart content - The content text container for detailed success information * @csspart innerStack - The internal stack container for action slot elements * * @cssprop {String} --success-state-foreground-color - The text color for success state content * @cssprop {String} --success-state-gap - The spacing between icon, text, and action elements * @cssprop {String} --success-state-header-font-family - The font family for header text * @cssprop {String} --success-state-header-font-size - The font size for header text * @cssprop {String} --success-state-header-font-line-height - The line height for header text * @cssprop {String} --success-state-header-font-weight - The font weight for header text * @cssprop {String} --success-state-header-font-letter-spacing - The letter spacing for header text * @cssprop {String} --success-state-header-font-text-decoration - The text decoration style for header text * @cssprop {String} --success-state-header-font-text-transform - The text transformation style for header text * @cssprop {String} --success-state-padding-top - The top padding inside the success state container * @cssprop {String} --success-state-padding-right - The right padding inside the success state container * @cssprop {String} --success-state-padding-bottom - The bottom padding inside the success state container * @cssprop {String} --success-state-padding-left - The left padding inside the success state container * * @dependency {IconElement} - For displaying success icons and positive indicators * @dependency {TextElement} - For rendering header and content text messages * @dependency {StackElement} - For layout management and content arrangement * * @example * Success state with action: * ```html * * Go to Dashboard * * ``` * * @example * Success state configured via JavaScript: * ```html * * View Order Details * Continue Shopping * * * ``` * * @public */ export declare class SuccessStateElement extends SuccessStateElement_base implements ISuccessStateElementProps { private _icon; private _header; /** * Constructs a new instance of the `SuccessStateElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `icon` property. * The icon SVG path data for the success state visual indicator. * The default value is an empty string, which displays a default success circle icon. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `header` property. * The primary success message displayed to users. * The default value is an empty string, which means no header is displayed. * * @public */ get header(): string; set header(value: string); } /** * @public */ export declare namespace SuccessStateElement { type Props = ISuccessStateElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-success-state': SuccessStateElement; } } export {}; //# sourceMappingURL=SuccessStateElement.d.ts.map