import { IEventEmitter } from '@breadstone/mosaik-elements';
import type { ISwatchCopyEventDetail } from '../../../events';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IColorEditorSwatchElementProps } from './IColorEditorSwatchElementProps';
declare const ColorEditorSwatchElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Focusable").IFocusableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Color Editor Swatch - A color preview element with optional copy functionality.
 *
 * @description
 * The Color Editor Swatch component displays a preview of a color with an optional
 * copy-to-clipboard button. It includes a checkerboard background pattern to indicate
 * transparency levels and automatically adjusts border visibility based on color
 * brightness.
 *
 * @name ColorEditorSwatch
 * @element mosaik-color-editor-swatch
 * @category Media
 *
 * @csspart checkerboard - The checkerboard part.
 * @csspart color - The color display area
 * @csspart copy-button - The copy to clipboard button overlay
 *
 * @cssprop {String} --color-editor-swatch-background-color - The editor swatch background color CSS custom property.
 * @cssprop {String} --color-editor-swatch-border-color - The editor swatch border color CSS custom property.
 * @cssprop {String} --color-editor-swatch-border-radius - The editor swatch border radius CSS custom property.
 * @cssprop {String} --color-editor-swatch-border-style - The editor swatch border style CSS custom property.
 * @cssprop {String} --color-editor-swatch-border-width - The editor swatch border width CSS custom property.
 * @cssprop {String} --color-editor-swatch-checkerboard-size - The editor swatch checkerboard size CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-family - The editor swatch font family CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-letter-spacing - The editor swatch font letter spacing CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-line-height - The editor swatch font line height CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-size - The editor swatch font size CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-text-decoration - The editor swatch font text decoration CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-text-transform - The editor swatch font text transform CSS custom property.
 * @cssprop {String} --color-editor-swatch-font-weight - The editor swatch font weight CSS custom property.
 * @cssprop {String} --color-editor-swatch-foreground-color - The editor swatch foreground color CSS custom property.
 * @cssprop {String} --color-editor-swatch-gap - The editor swatch gap CSS custom property.
 * @cssprop {String} --color-editor-swatch-height - The editor swatch height CSS custom property.
 * @cssprop {String} --color-editor-swatch-padding-bottom - The editor swatch padding bottom CSS custom property.
 * @cssprop {String} --color-editor-swatch-padding-left - The editor swatch padding left CSS custom property.
 * @cssprop {String} --color-editor-swatch-padding-right - The editor swatch padding right CSS custom property.
 * @cssprop {String} --color-editor-swatch-padding-top - The editor swatch padding top CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow - The editor swatch shadow CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow-blur - The editor swatch shadow blur CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow-color - The editor swatch shadow color CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow-offset-x - The editor swatch shadow offset x CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow-offset-y - The editor swatch shadow offset y CSS custom property.
 * @cssprop {String} --color-editor-swatch-shadow-spread - The editor swatch shadow spread CSS custom property.
 * @cssprop {String} --color-editor-swatch-transition-duration - The editor swatch transition duration CSS custom property.
 * @cssprop {String} --color-editor-swatch-transition-mode - The editor swatch transition mode CSS custom property.
 * @cssprop {String} --color-editor-swatch-transition-property - The editor swatch transition property CSS custom property.
 * @cssprop {String} --color-editor-swatch-translate - The editor swatch translate CSS custom property.
 * @cssprop {String} --color-editor-swatch-width - The editor swatch width CSS custom property.
 *
 * @fires swatchCopy {SwatchCopyEvent} - Fired when the color is copied to clipboard
 *
 * @dependency mosaik-button - The Button element.
 *
 * @example
 * Basic usage displaying a color:
 * ```html
 * <mosaik-color-editor-swatch color="#e91e63"></mosaik-color-editor-swatch>
 * ```
 *
 * @example
 * Disabled state:
 * ```html
 * <mosaik-color-editor-swatch color="#1976d2" disabled></mosaik-color-editor-swatch>
 * ```
 *
 * @public
 */
export declare class ColorEditorSwatchElement extends ColorEditorSwatchElement_base implements IColorEditorSwatchElementProps {
    private readonly _swatchCopy;
    private _color;
    private _copyable;
    /**
     * Constructs a new instance of the ColorEditorSwatchElement class.
     *
     * @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 color to display.
     *
     * @public
     * @attr
     */
    get color(): string;
    set color(value: string);
    /**
     * Gets or sets whether the swatch shows a copy button on hover.
     *
     * @public
     */
    get copyable(): boolean;
    set copyable(value: boolean);
    /**
     * Called when the color is copied to clipboard.
     * Provides reference to `ISwatchCopyEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get swatchCopy(): IEventEmitter<ISwatchCopyEventDetail>;
    /**
     * Handles click on the copy button.
     *
     * @public
     */
    pick(): Promise<void>;
    /**
     * @private
     */
    onPick(event: MouseEvent): void;
}
/**
 * @public
 */
export declare namespace ColorEditorSwatchElement {
    type Props = IColorEditorSwatchElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-color-editor-swatch': ColorEditorSwatchElement;
    }
}
export {};
//# sourceMappingURL=ColorEditorSwatchElement.d.ts.map