import type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';
import '../../content/icon/icon';
import '../../feedback/badge/badge';
export type OreCalendarEvents = {
    change: {
        isoValue: string | null;
    };
};
/**
 * A calendar event entry.
 * Dates must be ISO 8601 strings (yyyy-MM-dd).
 *
 * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,
 * `'var(--color-primary)'`). An invalid value silently falls back to the
 * component's theme color. Only pass values you control.
 */
export type CalendarEvent = {
    /**
     * Any CSS color value for the event dot / pill.
     * Defaults to the component's theme color when omitted.
     * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of
     * its custom-property declaration — it is not a full CSS-color syntax validator, so an
     * invalid (but injection-safe) value may still render as no color.
     */
    color?: string;
    /** ISO date the event falls on (yyyy-MM-dd) */
    date: string;
    /** Unique identifier */
    id: string;
    /** Short label shown in the calendar cell */
    label: string;
};
export type OreCalendarProps = {
    /** Theme color */
    color?: ThemeColor;
    /** Disable all date selection */
    disabled?: boolean;
    /**
     * Array of calendar events to display on day cells.
     * In normal mode each event renders as a small colored dot (max 3 dots, then "+N").
     * In expanded mode each event renders as a full-width colored pill with its label.
     * Pass as a JS property or as a JSON-encoded attribute.
     * @example
     * ```js
     * calendar.events = [
     *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },
     *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },
     * ];
     * ```
     */
    events?: CalendarEvent[];
    /**
     * Expanded layout — large cells with top-aligned day numbers suitable
     * for a full-page calendar app view.
     */
    expanded?: boolean;
    /** Expand to container width */
    fullwidth?: boolean;
    /** Locale for day/month names (default: browser locale) */
    locale?: string;
    /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */
    max?: string;
    /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */
    min?: string;
    /** Form field name (when used inside a form) */
    name?: string;
    /** Mark field as required */
    required?: boolean;
    /** Border radius override */
    rounded?: RoundedSize;
    /** Component size */
    size?: ComponentSize;
    /**
     * Selected date in ISO 8601 format (yyyy-MM-dd).
     * @example '2025-06-15'
     */
    value?: string;
    /**
     * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).
     * Pass as a JSON array attribute or a JS property.
     * @example
     * ```html
     * <ore-calendar weekend-days="[0,6]"></ore-calendar>
     * ```
     */
    'weekend-days'?: number[];
};
/**
 * An accessible, keyboard-navigable inline calendar component.
 * Supports day/month/year drill-down views, min/max bounds, disabled weekend
 * days, and optional form association.
 *
 * @element ore-calendar
 *
 * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)
 * @attr {string} min - Minimum selectable date (yyyy-MM-dd)
 * @attr {string} max - Maximum selectable date (yyyy-MM-dd)
 * @attr {boolean} disabled - Disable all interaction
 * @attr {boolean} required - Required field (form association)
 * @attr {string} name - Form field name
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 * @attr {string} locale - BCP 47 locale string
 * @attr {string} weekend-days - JSON array of day indices to disable (0=Sun…6=Sat)
 * @attr {boolean} fullwidth - Expand to full container width
 * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers
 *
 * @fires change - Fired when a date is selected. detail: { isoValue: string | null }
 *
 * @cssprop --calendar-bg - Calendar background
 * @cssprop --calendar-border-color - Calendar border color
 * @cssprop --calendar-radius - Calendar border radius
 * @cssprop --calendar-shadow - Calendar drop shadow
 * @cssprop --calendar-day-selected-bg - Background of selected day cell
 * @cssprop --calendar-day-today-color - Colour of today's date number
 * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month
 *
 * @part calendar - The root calendar panel
 * @part header - Calendar header (nav + label)
 * @part grid - Day grid
 * @part day - Individual day cell
 *
 * @example
 * ```html
 * <!-- Single date with bounds -->
 * <ore-calendar value="2025-06-15" min="2025-01-01" max="2025-12-31" color="primary"></ore-calendar>
 *
 * <!-- Expanded calendar-app layout -->
 * <ore-calendar expanded fullwidth color="primary"></ore-calendar>
 * ```
 */
export declare const CALENDAR_TAG: "ore-calendar";
//# sourceMappingURL=calendar.d.ts.map