import { LitElement } from 'lit';
/**
 * @element ui-feature-item
 * @description A single feature item for use inside ui-feature-grid
 *
 * @slot icon - Slot for a custom icon element
 * @slot - Default slot for custom content
 *
 * @cssprop --feature-item-bg - Item background
 * @cssprop --feature-item-padding - Item padding
 * @cssprop --feature-item-radius - Border radius
 * @cssprop --feature-item-border - Item border
 * @cssprop --feature-item-icon-color - Icon color
 * @cssprop --feature-item-icon-size - Icon size
 * @cssprop --feature-item-icon-bg - Icon background
 * @cssprop --feature-item-title-color - Title color
 * @cssprop --feature-item-title-size - Title font size
 * @cssprop --feature-item-desc-color - Description color
 * @cssprop --feature-item-desc-size - Description font size
 *
 * @csspart item - The item container
 * @csspart icon - The icon wrapper
 * @csspart title - The title
 * @csspart description - The description
 */
export declare class UIFeatureItem extends LitElement {
    static styles: import("lit").CSSResult;
    /** Icon text/emoji (can also use icon slot) */
    icon: string;
    /** Feature title */
    title: string;
    /** Feature description */
    description: string;
    /** Optional link URL */
    href: string;
    /** Internal: layout variant passed from parent */
    _variant: 'default' | 'centered' | 'icon-top' | 'card';
    render(): import("lit-html").TemplateResult<1>;
}
/**
 * @element ui-feature-grid
 * @description A grid layout for showcasing features/benefits
 *
 * @slot - Default slot for ui-feature-item elements
 *
 * @cssprop --feature-grid-max-width - Maximum grid width
 * @cssprop --feature-grid-padding - Section padding
 * @cssprop --feature-grid-gap - Gap between items
 * @cssprop --feature-grid-columns - Number of columns
 *
 * @csspart grid - The grid container
 *
 * @example
 * ```html
 * <ui-feature-grid columns="3" variant="card">
 *   <ui-feature-item icon="🚀" title="Fast" description="Blazing speed."></ui-feature-item>
 *   <ui-feature-item icon="🔒" title="Secure" description="Enterprise security."></ui-feature-item>
 *   <ui-feature-item icon="🎨" title="Beautiful" description="Modern design."></ui-feature-item>
 * </ui-feature-grid>
 * ```
 */
export declare class UIFeatureGrid extends LitElement {
    static styles: import("lit").CSSResult;
    /** Number of columns */
    columns: number;
    /** Visual variant */
    variant: 'default' | 'centered' | 'icon-top' | 'card';
    /** Gap between items */
    gap: string;
    updated(changedProperties: Map<string, unknown>): void;
    private _propagateVariant;
    private _handleSlotChange;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'ui-feature-grid': UIFeatureGrid;
        'ui-feature-item': UIFeatureItem;
    }
}
//# sourceMappingURL=feature-grid.d.ts.map