import { ISelectable } from '../../../Behaviors/Selectable'; import { type ISlottable } from '../../../Behaviors/Slottable'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ICardElementProps } from './ICardElementProps'; declare const CardElement_base: (abstract new (...args: Array) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Insetable").IInsetableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Selectable").ISelectableProps & import("../../../Behaviors/Selectable").ISelectableEvents & ISelectable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Card - A versatile container component for organizing related content in a visually distinct layout. * * @description * The Card component provides structured sections for media, headers, content, and actions within a cohesive, * elevated container. It supports advanced features like selectable states, elevation effects, inline media * positioning, and flexible content arrangement. Essential for displaying information hierarchies such as * product listings, user profiles, content previews, and dashboard widgets. Integrates seamlessly with the * theme system and supports comprehensive accessibility features. * * @name Card * @element mosaik-card * @category Grouping * * @slot cover - Primary visual content like hero images or graphics positioned at the top * @slot media - Additional media content such as images, videos, or rich content * @slot header - Header section typically containing titles and navigation elements * @slot content - Main content body for text, descriptions, or detailed information * @slot actions - Action buttons or interactive elements for user engagement * @slot footer - Footer section for supplementary information, links, or metadata * * @csspart elevation - Container for card elevation and shadow effects * @csspart cover - Cover image or media container at the top of the card * @csspart heading - Header section container wrapping header and inline media * @csspart media - Media content container for images or visual elements * @csspart header - Header section for titles and subtitles * @csspart content - Main content area container * @csspart actions - Actions section container for buttons and controls * @csspart footer - Footer section container for additional content * * @cssprop {String} --card-background-color - Background color of the card container * @cssprop {String} --card-border-color - Border color around the card * @cssprop {String} --card-border-radius - Border radius for card corner rounding * @cssprop {String} --card-border-style - Border line style (solid, dashed, dotted) * @cssprop {String} --card-border-width - Border width for card outline * @cssprop {String} --card-divider-height - Height of divider lines between sections * @cssprop {String} --card-font-family - Font family for card text content * @cssprop {String} --card-font-size - Font size for card text * @cssprop {String} --card-font-line-height - Line height for card text * @cssprop {String} --card-font-weight - Font weight for card text * @cssprop {String} --card-font-letter-spacing - Letter spacing for card text * @cssprop {String} --card-font-text-decoration - Text decoration for card text * @cssprop {String} --card-font-text-transform - Text transformation for card text * @cssprop {String} --card-foreground-color - Primary text and icon color * @cssprop {String} --card-shadow-blur - Shadow blur radius for elevation effect * @cssprop {String} --card-shadow-color - Shadow color for elevation effect * @cssprop {String} --card-shadow-offset-x - Horizontal shadow offset * @cssprop {String} --card-shadow-offset-y - Vertical shadow offset * @cssprop {String} --card-shadow-spread - Shadow spread radius * @cssprop {String} --card-transition-duration - Duration of hover and state transitions * @cssprop {String} --card-transition-mode - Timing function for transitions * @cssprop {String} --card-transition-property - CSS properties to transition * * @dependency {ElevationElement} - Provides elevation shadow and depth effects * @dependency {CardHeaderElement} - Structured header layout component * @dependency {CardContentElement} - Main content area component * @dependency {CardActionsElement} - Actions section layout component * @dependency {CardTitleElement} - Title text component * @dependency {CardSubTitleElement} - Subtitle text component * * @fires selected {SelectedEvent} - Fired when the card is selected (when selectable) * @fires deselected {DeselectedEvent} - Fired when the card is deselected (when selectable) * * @example * Full card anatomy with all sub-components: * ```html * * Card cover image * * * * * * * * * * * * * * ``` * * @example * Media card with cover image and elevation: * ```html * * Article image * * * * * * * * * ``` * * @example * Selectable card with inline media: * ```html * * Option thumbnail * * * * * * * ``` * * @example * Horizontal card layout with outline appearance: * ```html * * Profile picture * * * * * * * ``` * * @public */ export declare class CardElement extends CardElement_base implements ICardElementProps, ISlottable, ISelectable { private _header; private _subHeader; private _content; private _inlineMedia; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * The `header` property represents the header of the card. * It will inherited automatically by the `CardHeaderElement`. * * @public */ get header(): string; set header(value: string); /** * The `subHeader` property represents the sub header of the card. * It will inherited automatically by the `CardSubTitleElement`. * * @public */ get subHeader(): string; set subHeader(value: string); /** * Gets or sets the `content` property. * * @public */ get content(): string; set content(value: string); /** * Gets or sets the `inlineMedia` property. * * @public * @attr */ get inlineMedia(): boolean; set inlineMedia(value: boolean); } /** * @public */ export declare namespace CardElement { type Props = ICardElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-card': CardElement; } } export {}; //# sourceMappingURL=CardElement.d.ts.map