import { type Readable } from '@vielzeug/ripple';
import '../../content/icon/icon';
type SidebarVariant = 'floating' | 'inset';
type SidebarCollapseSource = 'api' | 'responsive' | 'toggle';
type SidebarMobileSource = 'api' | 'responsive' | 'toggle';
type SidebarMode = 'bottom-nav' | 'collapsed' | 'default';
/** Context provided by `ore-sidebar` to its `ore-sidebar-group` and `ore-sidebar-item` children. */
export type SidebarContext = {
    collapsed: Readable<boolean>;
    mobileOpen: Readable<boolean>;
    mode: Readable<SidebarMode>;
    variant: Readable<SidebarVariant | undefined>;
};
/** Injection key for the sidebar context. */
export declare const SIDEBAR_CTX: import("@vielzeug/ore").InjectionKey<SidebarContext>;
/** ore-sidebar element interface */
export type SidebarElement = HTMLElement & OreSidebarProps & {
    /** Close the drawer in bottom-nav mode. */
    closeMobile(): void;
    /** Open the drawer in bottom-nav mode. */
    openMobile(): void;
    /** Set collapsed state imperatively. */
    setCollapsed(next: boolean): void;
    /** Toggle between collapsed and expanded. */
    toggle(): void;
    /** Toggle the drawer in bottom-nav mode. */
    toggleMobile(): void;
};
/** Sidebar component properties */
export type OreSidebarEvents = {
    'collapsed-change': {
        collapsed: boolean;
        source: SidebarCollapseSource;
    };
    'mobile-open-change': {
        open: boolean;
        source: SidebarMobileSource;
    };
};
export type OreSidebarGroupEvents = {
    'open-change': {
        open: boolean;
    };
};
export type OreSidebarProps = {
    /** CSS media query that switches the sidebar to bottom navigation mode */
    'bottom-nav-at'?: string;
    /** Controlled collapsed state */
    collapsed?: boolean;
    /** Whether the sidebar supports collapsing */
    collapsible?: boolean;
    /** Evaluate responsive and bottom-nav breakpoints against container width only. */
    'container-breakpoints'?: boolean;
    /** Initial collapsed state in uncontrolled mode */
    'default-collapsed'?: boolean;
    /**
     * Accessible label for the navigation landmark.
     * Use to distinguish multiple navigation regions on a page.
     * @default 'Sidebar navigation'
     */
    label?: string;
    /**
     * CSS media query that, when it matches, automatically collapses the sidebar.
     * Unset by default — no automatic collapse.
     * @example 'responsive="(max-width: 768px)"'
     */
    responsive?: string;
    /** Visual style variant */
    variant?: SidebarVariant;
};
/**
 * `ore-sidebar` — A collapsible navigation sidebar with group and item support.
 *
 * @element ore-sidebar
 * @element ore-sidebar-group - Labelled group of navigation items
 * @element ore-sidebar-item - Individual navigation link or button
 *
 * @attr {boolean} collapsed - Controlled collapsed state
 * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars
 * @attr {boolean} collapsible - Show the collapse toggle button
 * @attr {string} variant - Visual variant: 'floating' | 'inset'
 * @attr {string} label - Accessible aria-label for the nav landmark
 *
 * @fires collapsed-change - Fired when collapsed state changes. detail: { collapsed: boolean; source: string }
 * @fires mobile-open-change - Fired when mobile overlay open state changes. detail: { open: boolean; source: string }
 *
 * @slot header - Branding or logo content above the nav
 * @slot - Navigation content (ore-sidebar-group / ore-sidebar-item)
 * @slot footer - Footer content below the nav (user info, settings, etc.)
 *
 * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)
 * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)
 * @cssprop --sidebar-bg - Sidebar background color
 * @cssprop --sidebar-border-color - Border color
 *
 * @part mobile-backdrop - Backdrop shown for mobile overlays.
 * @part nav - Navigation container.
 * @part header - Header container.
 * @part toggle-btn - Shadow part for the `toggle-btn` element.
 * @part content - Content container.
 * @part footer - Footer container.
 * @part bottom-bar - Bottom bar container.
 * @part group - Group container.
 * @part group-header - Group header container.
 * @part group-icon - Group icon container.
 * @part group-label - Group label container.
 * @part group-items - Group items container.
 * @part item-icon - Leading item icon container.
 * @part item-label - Item label container.
 * @part item-end - Trailing item content container.
 * @part item - Item root element.
 * @example
 * ```html
 * <ore-sidebar collapsible label="App navigation">
 *   <span slot="header">My App</span>
 *   <ore-sidebar-group label="Main">
 *     <ore-sidebar-item href="/dashboard" active>Dashboard</ore-sidebar-item>
 *     <ore-sidebar-item href="/settings">Settings</ore-sidebar-item>
 *   </ore-sidebar-group>
 * </ore-sidebar>
 *
 * <!-- Auto-collapse on mobile -->
 * <ore-sidebar collapsible responsive="(max-width: 768px)">...</ore-sidebar>
 * ```
 */
export declare const SIDEBAR_TAG: "ore-sidebar";
/** Sidebar group properties */
export type OreSidebarGroupProps = {
    /** Whether this group can be collapsed */
    collapsible?: boolean;
    /** Initial open state in uncontrolled mode */
    'default-open'?: boolean;
    /** Accessible label for the group */
    label?: string;
    /** Controlled open state */
    open?: boolean;
};
/**
 * `ore-sidebar-group` — A labelled section within `ore-sidebar`.
 *
 * @element ore-sidebar-group
 *
 * @attr {string} label - Group label text
 * @attr {boolean} collapsible - Whether this group can be toggled open/closed
 * @attr {boolean} open - Controlled expanded state
 * @attr {boolean} default-open - Initial expanded state in uncontrolled mode
 *
 * @fires open-change - Fired when the group open state changes (collapsible groups only). detail: { open: boolean }
 *
 * @slot - Navigation items (`ore-sidebar-item`)
 * @slot icon - Icon displayed before the label
 *
 * @example
 * ```html
 * <ore-sidebar-group label="Main" collapsible open>
 *   <ore-sidebar-item href="/home">Home</ore-sidebar-item>
 * </ore-sidebar-group>
 * ```
 */
export declare const SIDEBAR_GROUP_TAG: "ore-sidebar-group";
/** Sidebar item properties */
export type OreSidebarItemProps = {
    /** Whether this item represents the current page/section */
    active?: boolean;
    /** Whether this item is disabled */
    disabled?: boolean;
    /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */
    href?: string;
    /**
     * Relationship of the linked URL (`rel` attribute on the inner `<a>`).
     * Only applies when `href` is set.
     */
    rel?: string;
    /**
     * Browsing context for the link (`target` attribute on the inner `<a>`).
     * Only applies when `href` is set.
     */
    target?: string;
};
/**
 * `ore-sidebar-item` — An individual navigation item in a `ore-sidebar`.
 *
 * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.
 * Marks the active page via `aria-current="page"` when the `active` attribute is set.
 *
 * @element ore-sidebar-item
 *
 * @attr {string} href - Link URL; renders an anchor when set
 * @attr {boolean} active - Marks the item as the current page
 * @attr {boolean} disabled - Disables the item
 * @attr {string} rel - Anchor `rel` attribute (links only)
 * @attr {string} target - Anchor `target` attribute (links only)
 *
 * @slot - Label text
 * @slot icon - Leading icon
 * @slot end - Trailing content (badge, shortcut, arrow, etc.)
 *
 * @cssprop --sidebar-item-color - Default text color
 * @cssprop --sidebar-item-hover-bg - Hover background
 * @cssprop --sidebar-item-hover-color - Hover text color
 * @cssprop --sidebar-item-active-bg - Active background
 * @cssprop --sidebar-item-active-color - Active text color
 * @cssprop --sidebar-item-indicator - Active indicator bar color
 *
 * @part item - The inner anchor or button element
 * @part item-icon - The icon wrapper
 * @part item-label - The label wrapper
 * @part item-end - The trailing content wrapper
 *
 * @example
 * ```html
 * <ore-sidebar-item href="/dashboard" active>
 *   <span slot="icon">🏠</span>
 *   Dashboard
 * </ore-sidebar-item>
 *
 * <ore-sidebar-item href="/users">
 *   <span slot="icon">👤</span>
 *   Users
 *   <ore-badge slot="end" color="primary">3</ore-badge>
 * </ore-sidebar-item>
 * ```
 */
export declare const SIDEBAR_ITEM_TAG: "ore-sidebar-item";
export {};
//# sourceMappingURL=sidebar.d.ts.map