/**
 * TyCalendarNavigation Web Component
 * PORTED FROM: cljs/ty/components/calendar_navigation.cljs
 *
 * A pure presentation component for calendar month/year navigation.
 * Stateless - all state comes from properties, changes emitted via events.
 *
 * Features:
 * - Year/Month navigation (prev/next month, prev/next year)
 * - Localized month name display
 * - Custom event emission on navigation
 * - Property-driven API (no internal state)
 * - Inline SVG icons
 * - Shadow DOM encapsulation
 *
 * @example
 * ```html
 * <!-- Basic usage -->
 * <ty-calendar-navigation
 *   display-month="10"
 *   display-year="2025"
 *   locale="en-US">
 * </ty-calendar-navigation>
 *
 * <!-- Listen for changes -->
 * <script type="module">
 *   const nav = document.querySelector('ty-calendar-navigation');
 *   nav.addEventListener('change', (e) => {
 *     console.log('New month:', e.detail.month);
 *     console.log('New year:', e.detail.year);
 *   });
 * </script>
 * ```
 */
import { TyComponent } from '../base/ty-component.js';
import type { PropertyChange } from '../utils/property-manager.js';
/**
 * Navigation change event detail
 */
export interface NavigationChangeDetail {
    month: number;
    year: number;
}
/**
 * Internal navigation state (minimal - just for current display)
 */
interface NavigationState {
    displayMonth: number;
    displayYear: number;
}
/**
 * TyCalendarNavigation Web Component
 */
export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
    protected static properties: {
        'display-month': {
            type: "number";
            visual: boolean;
            default: () => number;
            validate: (v: any) => boolean;
            coerce: (v: any) => number;
        };
        'display-year': {
            type: "number";
            visual: boolean;
            default: () => number;
            validate: (v: any) => boolean;
            coerce: (v: any) => number;
        };
        locale: {
            type: "string";
            visual: boolean;
            default: string;
        };
        size: {
            type: "string";
            visual: boolean;
            default: string;
            validate: (v: any) => boolean;
            coerce: (v: any) => any;
        };
        width: {
            type: "string";
            visual: boolean;
            default: string;
        };
    };
    private _state;
    private _localeObserver?;
    constructor();
    /**
     * Called when component connects to DOM
     */
    protected onConnect(): void;
    /**
     * Called when component disconnects from DOM
     */
    protected onDisconnect(): void;
    /**
     * Called when properties change
     * Update internal state BEFORE render
     */
    protected onPropertiesChanged(changes: PropertyChange[]): void;
    get displayMonth(): number;
    set displayMonth(value: number);
    get displayYear(): number;
    set displayYear(value: number);
    get locale(): string;
    set locale(value: string);
    get size(): 'sm' | 'md' | 'lg';
    set size(value: 'sm' | 'md' | 'lg');
    get width(): string;
    set width(value: string);
    /**
     * Emit change event with new month/year
     */
    private emitChangeEvent;
    /**
     * Navigate to previous/next month
     * Handles year boundary crossing
     */
    private navigateMonth;
    /**
     * Navigate to previous/next year
     */
    private navigateYear;
    /**
     * Create navigation button
     */
    private createButton;
    /**
     * Main render function
     */
    protected render(): void;
}
export {};
//# sourceMappingURL=calendar-navigation.d.ts.map