import { RanElement } from '../../utils';
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;
    /**
     * Paint the trigger swatch's own background directly from the current color state.
     * This is normally kept live by the reactive effect in `setupEffects()` — but that effect
     * (like the rest of the panel) is only wired up once the panel has been built, which
     * happens lazily on first open (`openColorPicker`). Before that first open, the swatch
     * never got painted at all: it sat on its CSS default (transparent, showing the
     * checkerboard) no matter what `value` was set to — including the *default* color the
     * signals already carry with no `value` attribute at all (opaque white), so opening the
     * panel for the first time made the swatch "suddenly" pick up a color it had silently
     * been holding the whole time. Called eagerly so the swatch always reflects live state,
     * panel built or not.
     */
    paintSwatch: () => void;
    updateColorValue: (value: string) => void;
    /** Sync the `value` attribute to the live color and emit a `change` event. */
    emitChange: () => void;
    palettePointerDown: (e: PointerEvent) => void;
    updatePaletteFromEvent: (e: PointerEvent) => void;
    sliderPointerDown: (kind: 'hue' | 'alpha') => (e: PointerEvent) => void;
    updateSliderFromEvent: (kind: 'hue' | 'alpha', e: PointerEvent) => 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;