import { LitElement } from 'lit';
/**
 * @element ui-hero-section
 * @description A full-width hero section component for landing pages with multiple layout variants
 *
 * @slot - Default slot for main content (headline, description, etc.)
 * @slot headline - Headline text (h1)
 * @slot subheadline - Subheadline/description text
 * @slot cta - Call-to-action buttons
 * @slot media - Media content (image, video, illustration)
 * @slot badge - Optional badge/label (above headline)
 * @slot footer - Optional content at bottom of hero
 *
 * @cssprop --hero-min-height - Minimum height of hero section (default: 500px)
 * @cssprop --hero-padding - Padding inside hero section
 * @cssprop --hero-background - Background color
 * @cssprop --hero-overlay-color - Overlay color (for background images/videos)
 * @cssprop --hero-overlay-opacity - Overlay opacity (default: 0.5)
 * @cssprop --hero-content-max-width - Max width of content area (default: 1200px)
 * @cssprop --hero-text-color - Text color
 * @cssprop --hero-headline-size - Headline font size
 * @cssprop --hero-subheadline-size - Subheadline font size
 *
 * @csspart container - The main container
 * @csspart content - Content wrapper
 * @csspart media - Media wrapper
 * @csspart overlay - Background overlay
 *
 * @example
 * ```html
 * <ui-hero-section variant="centered" full-height>
 *   <div slot="headline">Build Amazing Products</div>
 *   <div slot="subheadline">The best UI component library for modern web apps</div>
 *   <div slot="cta">
 *     <ui-button variant="primary" size="lg">Get Started</ui-button>
 *   </div>
 * </ui-hero-section>
 * ```
 */
export declare class UIHeroSection extends LitElement {
    static styles: import("lit").CSSResult;
    /**
     * Hero section variant
     */
    variant: 'centered' | 'split' | 'minimal' | 'video';
    /**
     * Background image URL
     */
    backgroundImage?: string;
    /**
     * Background video URL (MP4)
     */
    backgroundVideo?: string;
    /**
     * Full viewport height
     */
    fullHeight: boolean;
    /**
     * Hide overlay
     */
    noOverlay: boolean;
    /**
     * Show scroll indicator
     */
    showScrollIndicator: boolean;
    /**
     * Horizontal alignment for centered variant
     */
    align?: 'left' | 'center' | 'right';
    /**
     * Vertical alignment
     */
    valign?: 'top' | 'center' | 'bottom';
    /**
     * Enable parallax effect
     */
    parallax: boolean;
    /**
     * Dark theme variant
     */
    dark: boolean;
    /**
     * Light theme variant
     */
    light: boolean;
    /**
     * Accessible label for the hero section
     */
    ariaLabel: string | null;
    private heroId;
    private headlineId;
    private videoLoaded;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private setupParallax;
    private handleParallax;
    private handleScrollClick;
    private handleVideoLoaded;
    render(): import("lit-html").TemplateResult<1>;
    private renderBackground;
    private renderCenteredLayout;
    private renderSplitLayout;
    private renderBadge;
    private renderHeadline;
    private renderSubheadline;
    private renderCTA;
    private renderMedia;
    private renderFooter;
}
declare global {
    interface HTMLElementTagNameMap {
        'ui-hero-section': UIHeroSection;
    }
}
//# sourceMappingURL=hero-section.d.ts.map