import { LitElement, type PropertyValues } from 'lit';
import type { ThemeColors } from '../../tailwind-plugin-theme.js';
export type IconGradientColor = Exclude<ThemeColors, 'black' | 'white'>;
export interface IconProps {
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    symbol?: string;
    gradient?: IconGradientColor;
    emphasize?: boolean | 'pulse';
}
declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
/**
 * An icon component for displaying Lucide icons.
 *
 * Icons inherit parent text color by default or can use gradient fills.
 * All icons are from the Lucide icon library (https://lucide.dev/icons/).
 * Supports both direct SVG rendering and mask-based gradient fills.
 *
 * @element btu-icon
 *
 * @fires {CustomEvent} btu-icon-ready - Fired after first render and initialization
 *
 * @cssprop --icon-size - Icon size (overrides size default)
 * @cssprop --icon-stroke-width - SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2)
 * @cssprop --icon-fill - Icon fill color for filled icons (e.g., "currentColor")
 * @cssprop --icon-svg - SVG data URI for mask-based rendering
 *
 * @example
 * ```html
 * <!-- Icon inheriting parent text color -->
 * <btu-icon symbol="heart" size="md"></btu-icon>
 *
 * <!-- Gradient icon -->
 * <btu-icon symbol="star" size="lg" gradient="primary"></btu-icon>
 *
 * <!-- Custom size via CSS -->
 * <btu-icon symbol="check" style="--icon-size: 3rem"></btu-icon>
 *
 * <!-- Filled icon via CSS (advanced usage) -->
 * <btu-icon symbol="heart" style="--icon-fill: currentColor"></btu-icon>
 * ```
 *
 * @example
 * ```typescript
 * // Programmatic usage
 * const icon = document.createElement('btu-icon')
 * icon.symbol = 'smile'
 * icon.size = 'lg'
 * icon.addEventListener('btu-icon-ready', () => console.log('Icon loaded'))
 * ```
 */
export default class Icon extends Icon_base {
    static get tagName(): string;
    /**
     * Size of the icon.
     * - 'xs': Extra small (0.75rem)
     * - 'sm': Small (1rem)
     * - 'md': Medium (1.25rem, default)
     * - 'lg': Large (1.5rem)
     * - 'xl': Extra large (1.75rem)
     * @attr
     */
    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Lucide icon name to display.
     * See https://lucide.dev/icons/ for available icons.
     * @attr
     */
    symbol: string;
    /**
     * Theme color to use for gradient fill.
     * When set, icon displays with gradient. When undefined, icon inherits parent text color.
     * @attr
     */
    gradient?: IconGradientColor;
    /**
     * Emphasize mode — renders a tonal circle with ring behind the icon.
     * Colors are derived from `currentColor` via oklch relative color syntax.
     * Defaults to primary; override with Tailwind `text-*` classes or `style="color: ..."`.
     * Set as a boolean for the static circle, or `"pulse"` for a one-shot ring animation.
     * Not intended for use with `gradient` — the two features target
     * conflicting rendering modes.
     * @attr
     */
    emphasize?: boolean | 'pulse';
    /** @internal */
    private initialClasses;
    connectedCallback(): void;
    createRenderRoot(): this;
    willUpdate(changedProperties: PropertyValues): void;
    firstUpdated(): void;
    /**
     * Escape HTML special characters to prevent XSS attacks in comments.
     * @internal
     */
    private escapeHtml;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'btu-icon': Icon;
    }
}
export {};
//# sourceMappingURL=Icon.d.ts.map