import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
import '@/components/popover';
import '@/components/input';
import '@/components/select';
export interface Context {
    disabled: Signal<boolean>;
    value: Signal<string>;
    hue: Signal<number>;
    saturation: Signal<number>;
    lightness: Signal<number>;
    transparency: Signal<number>;
}
export interface RGBA {
    r: number;
    g: number;
    b: number;
    a: number;
}
export interface Signal<T> {
    getter: () => T;
    setter: (newValue: T | ((prev: T) => T)) => void;
}
type ColorFormat = 'HEX' | 'RGB';
export declare class ColorPicker extends RanElement {
    colorpicker: HTMLDivElement;
    colorpickerInner: HTMLDivElement;
    context: Context;
    _shadowDom: ShadowRoot;
    _events: EventManager;
    _effectDisposers: Array<() => void>;
    popoverBlock: HTMLElement;
    popoverContent: HTMLElement;
    colorPickerInner?: HTMLDivElement;
    colorPickerPalette?: HTMLElement;
    colorPickerSaturation?: HTMLElement;
    colorPickerPaletteDot?: HTMLElement;
    colorPickerHueSlider?: HTMLElement;
    colorPickerHueThumb?: HTMLElement;
    colorPickerAlphaSlider?: HTMLElement;
    colorPickerAlphaTrack?: HTMLElement;
    colorPickerAlphaThumb?: HTMLElement;
    colorPickerPreviewInner?: HTMLElement;
    colorPickerValueInput?: HTMLElement;
    colorPickerFormatSelect?: HTMLElement;
    colorPickerPaletteSelect: boolean;
    _activeSlider: 'hue' | 'alpha' | null;
    _format: ColorFormat;
    _editingInput: boolean;
    static get observedAttributes(): string[];
    constructor();
    get value(): string;
    set value(value: string);
    get sheet(): string;
    set sheet(value: string);
    get disabled(): boolean;
    set disabled(value: boolean | string | undefined | null);
    handlerExternalCss: () => void;
    /**
     * Reflect the `disabled` attribute into the internal state, ARIA, and the
     * swatch's visual/interaction state. When disabled the swatch is removed from
     * the tab order and marked `aria-disabled`; opening is blocked by
     * `blockWhenDisabled` (a capture-phase guard wired in connectedCallback).
     */
    syncDisabledState: () => void;
    /** Capture-phase guard: swallow clicks/keydowns on the swatch while disabled. */
    blockWhenDisabled: (e: Event) => void;
    createContext: () => void;
    currentRgba: () => RGBA;
    /** Canonical string used for the `value` attribute and `change` events. */
    currentValue: () => string;
    /** String shown in the value input, depending on the selected format. */
    currentDisplay: () => string;
    updateColorValue: (value: string) => void;
    /** Sync the `value` attribute to the live color and emit a `change` event. */
    emitChange: () => void;
    palettePointerDown: (e: MouseEvent) => void;
    updatePaletteFromEvent: (e: MouseEvent) => void;
    sliderPointerDown: (kind: 'hue' | 'alpha') => (e: MouseEvent) => void;
    updateSliderFromEvent: (kind: 'hue' | 'alpha', e: MouseEvent) => void;
    onPointerMove: (e: Event) => void;
    /** Make a slider a focusable, described `role="slider"`; valuenow is kept live in setupEffects. */
    initSliderA11y: (el: HTMLElement, label: string, max: number) => void;
    /** Arrow keys adjust the hue/alpha slider (Shift = coarse step, Home/End = ends). */
    sliderKeydown: (kind: 'hue' | 'alpha') => (e: KeyboardEvent) => void;
    onPointerUp: () => void;
    /** Open the picker from the keyboard: Enter/Space act like a click on the swatch. */
    onSwatchKeydown: (e: KeyboardEvent) => void;
    onValueInput: (e: Event) => void;
    onFormatChange: (e: Event) => void;
    syncValueInput: () => void;
    setupEffects: () => void;
    disposeEffects: () => void;
    openColorPicker: () => void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, old: string, next: string): void;
}
export default ColorPicker;