import { Size } from '../../../Types/Size';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IRibbonElementProps } from './IRibbonElementProps';
declare const RibbonElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Ribbon - A decorative label component for highlighting status, features, or promotional content.
 *
 * @description
 * The Ribbon component displays a prominent label with optional icon, typically used to draw attention
 * to special features, new content, status indicators, or promotional badges. It supports multiple size
 * variants, color variants for different semantic meanings (success, warning, error, info), and can be
 * disabled for inactive states. Ribbons are commonly positioned at corners or edges of cards, images,
 * and containers to create eye-catching visual accents.
 *
 * @name Ribbon
 * @element mosaik-ribbon
 * @category Primitives
 *
 * @csspart root - The root container element for the ribbon
 * @csspart text - The text display element
 *
 * @cssprop {String} --ribbon-background-color - Background color of the ribbon
 * @cssprop {String} --ribbon-border-color - Border color of the ribbon outline
 * @cssprop {String} --ribbon-border-radius - Corner rounding radius
 * @cssprop {String} --ribbon-border-style - Border line style
 * @cssprop {String} --ribbon-border-width - Border thickness
 * @cssprop {String} --ribbon-font - Combined font shorthand property
 * @cssprop {String} --ribbon-font-family - Font family for ribbon text
 * @cssprop {String} --ribbon-font-letter-spacing - Letter spacing for ribbon text
 * @cssprop {String} --ribbon-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --ribbon-font-size - Font size for ribbon text
 * @cssprop {String} --ribbon-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --ribbon-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --ribbon-font-weight - Font weight for ribbon text
 * @cssprop {String} --ribbon-foreground-color - Text and icon color
 * @cssprop {String} --ribbon-gap - Spacing between icon and text
 * @cssprop {String} --ribbon-padding-bottom - Bottom padding inside the ribbon
 * @cssprop {String} --ribbon-padding-left - Left padding inside the ribbon
 * @cssprop {String} --ribbon-padding-right - Right padding inside the ribbon
 * @cssprop {String} --ribbon-padding-top - Top padding inside the ribbon
 * @cssprop {String} --ribbon-shadow - Drop shadow or elevation effect
 * @cssprop {String} --ribbon-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --ribbon-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --ribbon-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --ribbon-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --ribbon-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --ribbon-transition-duration - Duration of visual transitions
 * @cssprop {String} --ribbon-transition-mode - Timing function for transitions
 * @cssprop {String} --ribbon-transition-property - CSS properties to transition
 * @cssprop {String} --ribbon-translate - The translate CSS custom property.
 *
 * @dependency mosaik-icon - The Icon element.
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic ribbon with label:
 * ```html
 * <mosaik-ribbon label="New" variant="primary"></mosaik-ribbon>
 * ```
 *
 * @example
 * Ribbon with icon (set via JavaScript):
 * ```html
 * <mosaik-ribbon id="featuredRibbon" label="Featured" variant="success"></mosaik-ribbon>
 * <script>
 *   document.querySelector('#featuredRibbon').icon = 'star-icon-path';
 * </script>
 * ```
 *
 * @example
 * Sale badge on product card:
 * ```html
 * <div class="product-card" style="position: relative;">
 *   <img src="product.jpg" alt="Product">
 *   <mosaik-ribbon
 *     label="50% OFF"
 *     variant="error"
 *     size="large"
 *     style="position: absolute; top: 10px; right: 10px;">
 *   </mosaik-ribbon>
 * </div>
 * ```
 *
 * @example
 * Status indicator:
 * ```html
 * <mosaik-ribbon label="Beta" variant="warning" size="small"></mosaik-ribbon>
 * ```
 *
 * @example
 * Disabled ribbon:
 * ```html
 * <mosaik-ribbon label="Expired" disabled></mosaik-ribbon>
 * ```
 *
 * @public
 */
export declare class RibbonElement extends RibbonElement_base implements IRibbonElementProps {
    private _icon;
    private _iconSize;
    /**
     * @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 `icon` property.
     *
     * @public
     */
    get icon(): string;
    set icon(value: string);
    /**
     * Gets or sets the `iconSize` property.
     *
     * @public
     */
    get iconSize(): Size | null;
    set iconSize(value: Size | null);
}
/**
 * @public
 */
export declare namespace RibbonElement {
    type Props = IRibbonElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-ribbon': RibbonElement;
    }
}
export {};
//# sourceMappingURL=RibbonElement.d.ts.map