import { Size } from '../../../Types/Size'; import type { Spacing } from '../../../Types/Spacing'; import { CustomElement } from '../../Abstracts/CustomElement'; import { type ISpacerElementProps } from './ISpacerElementProps'; declare const SpacerElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Spacer - A flexible spacing element for creating consistent gaps and layout control. * * @description * The Spacer component is a fundamental layout utility that provides precise spacing control between * UI elements, maintaining consistent visual rhythm and alignment throughout the interface. It uses * the design system's spacing scale to ensure harmonious layouts across different screen sizes and * contexts. The component supports configurable thickness properties that define which sides (top, * right, bottom, left, vertical, horizontal, or all) receive spacing, size multipliers for scaling * the base spacing value, predefined size categories (tiny, small, medium, large, giant), and an * invert option for creating negative margins when needed. The Spacer integrates with the theme * system to ensure spacing values align with the overall design language, making it essential for * building responsive, well-structured layouts without manual margin/padding calculations. * * @name Spacer * @element mosaik-spacer * @category Primitives * * @slot - Default content slot for spacer element (typically empty) * * @example * Basic spacing between elements: * ```html *
Content Above
* *
Content Below
* ``` * * @example * Custom multiplier for proportional spacing: * ```html * * ``` * * @public */ export declare class SpacerElement extends SpacerElement_base implements ISpacerElementProps { private _multiplier; private _size; private _thickness; private _invert; private _multiplierValidator; /** * @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 `multiplier` property. * * The multiplier factor for spacing. Adjusts the space based on a numeric value. * * @public * @attr */ get multiplier(): number; set multiplier(value: number); /** * Gets or sets the `density` property. * * Possible values are `tiny`, `small`, `medium`, `large` or `giant`. * The default is `medium`. * * @public * @attr */ get size(): Size; set size(value: Size); /** * Gets or sets the `thickness` property. * * The thickness or sides for which the Spacer applies. Accepts values: `top`, `right`, `bottom`, `left`, `vertical`, `horizontal`, `all` or `none`. * The default is `null`. * * @public * @attr */ get thickness(): Spacing | Array | null; set thickness(value: Spacing | Array | null); /** * Gets or sets the `invert` property. * * Inverts the spacing. This is useful for creating negative space. * The default is `false`. * * @public * @attr */ get invert(): boolean; set invert(value: boolean); /** * Gets or sets the `multiplierValidator` property. * * The multiplier validator function. * The default is `DEFAULT_SPACER_ELEMENT_PROPS.multiplierValidator`. * * @public */ get multiplierValidator(): (value: number) => boolean; set multiplierValidator(value: (value: number) => boolean); /** * Tries to get the thickness. * * @private * @template */ tryGetThickness(thicknesses: Array): string | boolean; /** * Parses the `thickness` property into an array of `Spacing`. * * @private */ private parseThickness; /** * Validates the `thickness` property. * * @private */ private validateThickness; /** * Gets the size as number. * * @private */ private getSizeAsNumber; /** * Parses the size. * * @private */ private parseSize; } /** * @public */ export declare namespace SpacerElement { type Props = ISpacerElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-spacer': SpacerElement; } } export {}; //# sourceMappingURL=SpacerElement.d.ts.map