import { ButtonType } from '../../../Types/ButtonType'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITileElementProps } from './ITileElementProps'; declare const TileElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Rippleable").IRippleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Tile - A clickable card-like container for interactive content blocks. * * @description * The Tile component is a hybrid between a button and a card. It provides a clickable, * elevated container that can hold arbitrary content through a default slot. Tiles are designed * for use cases where a larger, card-like interactive surface is needed instead of a standard * button — such as dashboard widgets, selection grids, or navigation blocks. The component * supports elevation, ripple effects, focus rings, and multiple appearance/variant combinations * while remaining semantically a button for accessibility. * * @name Tile * @element mosaik-tile * @category Buttons * * @slot - Default slot for arbitrary tile content * * @csspart button - The native button element container * @csspart content - The content wrapper inside the button * @csspart elevation - The elevation/shadow layer * @csspart focusRing - The focus indicator ring for keyboard navigation * @csspart ripple - The touch feedback ripple effect container * * @cssprop {Color} --tile-background-color - Background color of the tile * @cssprop {Color} --tile-border-color - Border color around the tile * @cssprop {String} --tile-border-radius - Corner rounding radius * @cssprop {String} --tile-border-style - Border line style * @cssprop {String} --tile-border-width - Border width * @cssprop {String} --tile-focus-ring-active-width - Focus ring active width * @cssprop {String} --tile-focus-ring-color - Focus ring color * @cssprop {String} --tile-focus-ring-inward-offset - Focus ring inward offset * @cssprop {String} --tile-focus-ring-outward-offset - Focus ring outward offset * @cssprop {String} --tile-font-family - Font family for tile text * @cssprop {String} --tile-font-letter-spacing - Letter spacing * @cssprop {String} --tile-font-line-height - Line height * @cssprop {String} --tile-font-size - Font size * @cssprop {String} --tile-font-text-decoration - Text decoration * @cssprop {String} --tile-font-text-transform - Text transformation * @cssprop {String} --tile-font-weight - Font weight * @cssprop {Color} --tile-foreground-color - Text and icon color * @cssprop {String} --tile-gap - Spacing between child elements * @cssprop {String} --tile-padding-bottom - Bottom padding * @cssprop {String} --tile-padding-left - Left padding * @cssprop {String} --tile-padding-right - Right padding * @cssprop {String} --tile-padding-top - Top padding * @cssprop {Color} --tile-ripple-color - Ripple effect color * @cssprop {String} --tile-ripple-duration - Ripple animation duration * @cssprop {String} --tile-shadow - Box shadow * @cssprop {String} --tile-shadow-blur - Shadow blur radius * @cssprop {String} --tile-shadow-color - Shadow color * @cssprop {String} --tile-shadow-offset-x - Horizontal shadow offset * @cssprop {String} --tile-shadow-offset-y - Vertical shadow offset * @cssprop {String} --tile-shadow-spread - Shadow spread radius * @cssprop {String} --tile-transition-duration - Transition duration * @cssprop {String} --tile-transition-mode - Transition timing function * @cssprop {String} --tile-transition-property - Properties to transition * @cssprop {String} --tile-translate - Translate transform * * @dependency mosaik-elevation - The Elevation element. * @dependency mosaik-focus-ring - The Focus Ring element. * @dependency mosaik-ripple - The Ripple element. * * @example * Basic tile with text content: * ```html * * * * * ``` * * @example * Tile with variant and appearance: * ```html * * * * * ``` * * @example * Disabled tile: * ```html * * * * ``` * * @public */ export declare class TileElement extends TileElement_base implements ITileElementProps { private _type; /** * Constructs a new instance of the `TileElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `type` property. * It modifies the classification and default behavior of the tile button. * * @public * @attr type */ get type(): ButtonType; set type(value: ButtonType); } /** * @public */ export declare namespace TileElement { type Props = ITileElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tile': TileElement; } } export {}; //# sourceMappingURL=TileElement.d.ts.map