import { LitElement, PropertyValues } from 'lit';

/**
 * Event to notify if the sidebar is open or closed
 */
export interface AgSidebarToggleEventDetail {
    open: boolean;
}
/**
 * Event to notify if the sidebar is collapsed (rail mode) or expanded (desktop mode)
 */
export interface AgSidebarCollapseEventDetail {
    collapsed: boolean;
}
/**
 * Prop definitions
 */
export interface AgSidebarProps {
    /** Whether the sidebar is open or closed */
    open?: boolean;
    /** Whether the sidebar is collapsed (rail mode) or expanded (desktop mode) */
    collapsed?: boolean;
    /** Whether the sidebar is on the left or right */
    position?: 'left' | 'right';
    /** ARIA label for the sidebar */
    ariaLabel?: string;
    /** Variant of the sidebar */
    variant?: 'default' | 'bordered' | 'elevated';
    /** Whether to disable transitions */
    noTransition?: boolean;
    /** Width of the sidebar */
    width?: string;
    /** Whether to disable compact/rail mode. When true, sidebar is either full-width or hidden (no intermediate collapsed state) */
    disableCompactMode?: boolean;
    /** Whether to show the mobile toggle button */
    showMobileToggle?: boolean;
    /** Position of the mobile toggle button. Default: top-left */
    mobileTogglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /** Whether to show the header toggle button */
    showHeaderToggle?: boolean;
    /** Callback function to handle toggle open/close events */
    onToggle?: (event: AgSidebarToggleEvent) => void;
    /** Callback function to handle expanded/collapsed events */
    onCollapse?: (event: AgSidebarCollapseEvent) => void;
}
/**
 * Event type aliases
 */
export type AgSidebarToggleEvent = CustomEvent<AgSidebarToggleEventDetail>;
export type AgSidebarCollapseEvent = CustomEvent<AgSidebarCollapseEventDetail>;
/**
 * AgSidebar - A self-contained, accessible sidebar navigation component.
 *
 * Provides a responsive sidebar with mobile overlay and desktop rail/collapse modes.
 * Supports customizable header, navigation content, and footer sections with full
 * keyboard navigation and focus management.
 *
 * @element ag-sidebar
 *
 * @slot header - Header content area for logo, title, or actions. When `collapsed` is true on desktop, content fades out but slot remains in DOM for accessibility. If provided, overrides composable header slots (header-start, header-end, header-toggle).
 * @slot header-start - Left side of header for logo or title. Hidden when sidebar is collapsed. Ignored if `header` slot has content.
 * @slot header-end - Right side of header for action buttons. Always visible, even when collapsed. Ignored if `header` slot has content.
 * @slot header-toggle - Specific slot for custom toggle button in header. Auto-positioned at the end. Ignored if `header` slot has content.
 * @slot - Default slot for main navigation content. Use `<ag-sidebar-nav>` component for structured navigation with proper aria attributes.
 * @slot footer - Footer content area for copyright info, version numbers, or help links. Remains visible when sidebar is collapsed, content should be icon-only or very compact.
 * @slot ag-toggle-icon - Customizes the floating mobile toggle button icon and header toggle icon. Must be an SVG element sized 18x18px. Falls back to built-in panel icon if not provided.
 *
 * @fires ag-sidebar-toggle - Fired when sidebar open/close state changes (mobile overlay). Detail: `{ open: boolean }`
 * @fires ag-sidebar-collapse - Fired when sidebar expanded/collapsed state changes (desktop rail). Detail: `{ collapsed: boolean }`
 *
 * @csspart ag-sidebar-backdrop - The backdrop overlay shown on mobile when sidebar is open
 * @csspart ag-sidebar-toggle-button - The floating toggle button shown on mobile (when `show-mobile-toggle` is true)
 * @csspart ag-sidebar-container - The main sidebar container element (aside)
 * @csspart ag-sidebar-header - The header section wrapper
 * @csspart ag-sidebar-header-toggle - The collapse/expand toggle button in header (when `show-header-toggle` is true)
 * @csspart ag-sidebar-content - The main content scrollable area
 * @csspart ag-sidebar-footer - The footer section wrapper
 *
 * @cssprop --ag-sidebar-width - Width of expanded sidebar. Default: `18rem`
 * @cssprop --ag-sidebar-width-collapsed - Width of collapsed sidebar (rail mode). Default: `3rem`
 * @cssprop --ag-sidebar-padding - Internal padding for content area. Default: `0.5rem`
 * @cssprop --ag-sidebar-background - Background color of sidebar. Default: `#ffffff`
 * @cssprop --ag-sidebar-border - Border color. Default: `#e5e7eb`
 * @cssprop --ag-sidebar-transition-duration - Animation duration for state changes. Default: `200ms`
 * @cssprop --ag-sidebar-transition-easing - Animation easing function. Default: `ease-in-out`
 * @cssprop --ag-sidebar-z-index - Z-index for sidebar container on mobile. Default: `1000`
 * @cssprop --ag-sidebar-backdrop-z-index - Z-index for backdrop overlay on mobile. Default: `999`
 * @cssprop --ag-sidebar-toggle-z-index - Z-index for floating toggle button. Default: `1001`

 *
 * @example
 * ```html
 * <ag-sidebar>
 *   <div slot="header">
 *     <h1>My App</h1>
 *   </div>
 *
 *   <ag-sidebar-nav>
 *     <ag-sidebar-nav-item href="/">Home</ag-sidebar-nav-item>
 *     <ag-sidebar-nav-item href="/about">About</ag-sidebar-nav-item>
 *   </ag-sidebar-nav>
 *
 *   <div slot="footer">
 *     <p>© 2024 Company</p>
 *   </div>
 * </ag-sidebar>
 * ```
 *
 * @example
 * ```html
 * <!-- Composable header slots (automatic layout) -->
 * <ag-sidebar>
 *   <h2 slot="header-start">My App</h2>
 *   <button slot="header-end">Settings</button>
 *   <button slot="header-toggle" @click=${handleToggle}>
 *     ${PanelIcon()}
 *   </button>
 * </ag-sidebar>
 * ```
 *
 * @example
 * ```html
 * <!-- Custom toggle icon -->
 * <ag-sidebar show-header-toggle>
 *   <svg slot="ag-toggle-icon" width="18" height="18" viewBox="0 0 18 18">
 *     <path d="M3 9h12M3 5h12M3 13h12" stroke="currentColor"/>
 *   </svg>
 *   <div slot="header">Navigation</div>
 * </ag-sidebar>
 * ```
 */
export declare class AgSidebar extends LitElement implements AgSidebarProps {
    static styles: import('lit').CSSResult;
    open: boolean;
    collapsed: boolean;
    position: 'left' | 'right';
    ariaLabel: string;
    variant: 'default' | 'bordered' | 'elevated';
    noTransition: boolean;
    width?: string;
    disableCompactMode: boolean;
    showMobileToggle: boolean;
    mobileTogglePosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    showHeaderToggle: boolean;
    onToggle?: (event: AgSidebarToggleEvent) => void;
    onCollapse?: (event: AgSidebarCollapseEvent) => void;
    constructor();
    private _mainContentRef?;
    /**
     * Checks if the current viewport width is below the mobile breakpoint.
     *
     * This helper ensures consistent viewport detection across the component.
     * Called on-demand rather than using resize listeners to avoid memory overhead.
     *
     * @returns true if viewport width is less than breakpoint, false otherwise
     * @private
     */
    private _isMobileViewport;
    /**
     * Toggle the collapsed state (desktop rail mode)
     */
    toggleCollapse(): void;
    /**
     * Intelligent toggle that handles both mobile and desktop contexts.
     *
     * **Behavior:**
     * - Mobile (< breakpoint) + sidebar open: closes the sidebar overlay
     * - Desktop (>= breakpoint): toggles collapsed state (rail mode)
     * - Mobile (< breakpoint) + sidebar closed: toggles collapsed state
     *
     * **When to use:**
     * Use this method in custom header buttons when you want the sidebar to close
     * on mobile when it's already open (dismissing the overlay), but toggle
     * collapsed state on desktop or when closed on mobile.
     *
     * **Comparison with built-in toggle:**
     * - Built-in `showHeaderToggle`: Always toggles collapsed state (never closes on mobile)
     * - `toggleResponsive()`: Closes overlay on mobile when open, otherwise toggles collapsed
     *
     * **Resize awareness:**
     * Checks viewport width on each invocation, ensuring correct behavior even
     * after window resizes without requiring resize event listeners.
     *
     * @example
     * ```html
     * <ag-sidebar id="sidebar">
     *   <button slot="header" @click=${() => document.getElementById('sidebar').toggleResponsive()}>
     *     Toggle
     *   </button>
     * </ag-sidebar>
     * ```
     *
     * @example
     * ```typescript
     * // In Lit component
     * const sidebar = this.shadowRoot.querySelector('ag-sidebar');
     * sidebar.toggleResponsive();
     * ```
     */
    toggleResponsive(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    willUpdate(changedProperties: PropertyValues): void;
    private _handleBackdropClick;
    private _handleToggleClick;
    private _handleHeaderToggleClick;
    private _handleKeydown;
    private _dispatchToggleEvent;
    private _dispatchCollapseEvent;
    private _findMainContent;
    private _trapFocus;
    private _releaseFocus;
    private _handleSlotClick;
    private _renderToggleIcon;
    render(): import('lit').TemplateResult<1>;
}
//# sourceMappingURL=_Sidebar.d.ts.map