import { ThumbEdge } from '../../../Types/ThumbEdge';
import { CustomElement } from '../../Abstracts/CustomElement';
import { IThumbElementProps } from './IThumbElementProps';
declare const ThumbElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Thumb - A draggable handle used in slider, scrollbar, and range control components.
 *
 * @description
 * The Thumb element represents the draggable handle in slider controls, range inputs, scrollbars,
 * and similar interactive components. It provides visual feedback for the current value position
 * and can be styled to indicate different states (normal, hover, active, disabled). The edge
 * property controls positioning behavior at the extremes of the range. This is a low-level
 * primitive typically used as a building block in more complex slider components.
 *
 * @name Thumb
 * @element mosaik-thumb
 * @category Primitives
 *
 * @cssprop {String} --thumb-background-color - Background color of the thumb handle
 * @cssprop {String} --thumb-border-color - Border color of the thumb
 * @cssprop {String} --thumb-border-radius - Border radius for rounded corners
 * @cssprop {String} --thumb-border-style - Border style (solid, dashed, etc.)
 * @cssprop {String} --thumb-border-width - Border width of the thumb
 * @cssprop {String} --thumb-transition-duration - Duration of state transitions
 * @cssprop {String} --thumb-transition-mode - Timing function for animations
 * @cssprop {Array} --thumb-transition-property - CSS properties to animate
 *
 * @example
 * Basic thumb for a slider:
 * ```html
 * <div class="slider-track">
 *   <mosaik-thumb id="sliderThumb" edge="none"></mosaik-thumb>
 * </div>
 *
 * <style>
 *   .slider-track {
 *     position: relative;
 *     width: 200px;
 *     height: 4px;
 *     background: #e0e0e0;
 *   }
 *
 *   mosaik-thumb {
 *     position: absolute;
 *     top: -6px;
 *     cursor: grab;
 *   }
 * </style>
 * ```
 *
 * @example
 * Thumb at minimum edge:
 * ```html
 * <mosaik-thumb edge="min"></mosaik-thumb>
 * ```
 *
 * @example
 * Disabled thumb:
 * ```html
 * <mosaik-thumb disabled edge="none"></mosaik-thumb>
 * ```
 *
 * @example
 * Thumb with custom styling via CSS variables:
 * ```html
 * <mosaik-thumb
 *   id="customThumb"
 *   style="
 *     --thumb-background-color: #2196F3;
 *     --thumb-border-color: #1976D2;
 *     --thumb-border-radius: 50%;
 *   ">
 * </mosaik-thumb>
 * ```
 *
 * @public
 */
export declare class ThumbElement extends ThumbElement_base implements IThumbElementProps {
    private _edge;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `edge` property.
     *
     * @public
     * @attr
     */
    get edge(): ThumbEdge;
    set edge(value: ThumbEdge);
}
/**
 * @public
 */
export declare namespace ThumbElement {
    type Props = IThumbElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-thumb': ThumbElement;
    }
}
export {};
//# sourceMappingURL=ThumbElement.d.ts.map