import { LitElement } from 'lit';
/**
 * Icon Selector - A checkbox-style toggle using icons for visual states.
 * Primarily designed for favorite/unfavorite functionality.
 *
 * @fires on-change - Emits when the checked state changes. Detail includes checked (boolean), value (string), and origEvent.
 * @slot icon-unchecked - Optional icon for unchecked state. Defaults to star outline.
 * @slot icon-checked - Optional icon for checked state. Defaults to filled star.
 */
export declare class IconSelector extends LitElement {
    static styles: import("lit").CSSResult;
    /** @ignore */
    static shadowRootOptions: {
        delegatesFocus: boolean;
        mode: ShadowRootMode;
        serializable?: boolean;
        slotAssignment?: SlotAssignmentMode;
    };
    /** Checked/selected state. */
    accessor checked: boolean;
    /** Value associated with this selector, useful for identifying the item. */
    accessor value: string;
    /** Accessible label when checked. */
    accessor checkedLabel: string;
    /** Accessible label when unchecked. */
    accessor uncheckedLabel: string;
    /** Disabled state. */
    accessor disabled: boolean;
    /**
     * When true, the icon is only visible when the parent element is hovered.
     * Visibility is controlled via CSS on the parent component.
     * Can also be set via `--kyn-icon-selector-only-visible-on-hover: 1` on an ancestor.
     */
    accessor onlyVisibleOnHover: boolean;
    /**
     * When true, checked items remain visible even when onlyVisibleOnHover is enabled.
     * Useful for showing users which items they've already favorited.
     * Can also be set via `--kyn-icon-selector-persist-when-checked: 1` on an ancestor.
     */
    accessor persistWhenChecked: boolean;
    /**
     * Enables a subtle pop/crossfade animation when toggling checked state.
     * Can also be enabled for all descendants by setting the CSS custom property
     * `--kyn-icon-selector-animate-selection: 1` on any ancestor element.
     */
    accessor animateSelection: boolean;
    /** @internal Resolved flags (prop OR inherited CSS custom property). */
    private _shouldAnimate;
    /** @internal Resolved flags (prop OR inherited CSS custom property). */
    private _shouldOnlyVisibleOnHover;
    /** @internal Resolved flags (prop OR inherited CSS custom property). */
    private _shouldPersistWhenChecked;
    /** @internal Suppresses opacity transition until initial state is painted. */
    private _transitionsReady;
    /** @internal Set on user interaction so animation only plays on deliberate toggles. */
    private _justToggled;
    render(): import("lit-html").TemplateResult<1>;
    private _handleClick;
    private _handleKeydown;
    private _emitChange;
    /**
     * Stop click events from bubbling up to parent elements (e.g., anchor tags).
     * This ensures clicking the icon-selector doesn't trigger navigation.
     * @internal
     */
    private _handleHostClick;
    firstUpdated(): void;
    updated(): void;
    private _readCSSFlags;
    willUpdate(changedProps: Map<string, unknown>): void;
    /** @internal Cached CSS custom property values (read once in firstUpdated). */
    private _cssAnimate;
    /** @internal Cached CSS custom property values (read once in firstUpdated). */
    private _cssOnlyVisibleOnHover;
    /** @internal Cached CSS custom property values (read once in firstUpdated). */
    private _cssPersistWhenChecked;
    private _resolveFlags;
    connectedCallback(): void;
    disconnectedCallback(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'kyn-icon-selector': IconSelector;
    }
}
//# sourceMappingURL=iconSelector.d.ts.map