import { type Readable } from '@vielzeug/ripple';
import type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';
import '../../content/icon/icon';
/** Context provided by `ore-navbar` to `ore-navbar-item` children. */
export type NavbarContext = {
    closeMobileMenu: () => void;
    isMobile: Readable<boolean>;
    mobileMenuOpen: Readable<boolean>;
};
/** Injection key for navbar context. */
export declare const NAVBAR_CTX: import("@vielzeug/ore").InjectionKey<NavbarContext>;
/** Navbar component events */
export type OreNavbarEvents = {
    'mobile-menu-change': {
        open: boolean;
    };
};
/** Navbar component element interface */
export type NavbarElement = HTMLElement & OreNavbarProps & {
    closeMobileMenu(): void;
    openMobileMenu(): void;
    toggleMobileMenu(): void;
};
/** Navbar component properties */
export type OreNavbarProps = {
    /** CSS media query used for mobile layout switching */
    breakpoint?: string;
    /** Theme color */
    color?: ThemeColor;
    /** Evaluate mobile breakpoint against container width only when possible. */
    'container-breakpoints'?: boolean;
    /** Shadow elevation level (0-5) */
    elevation?: ElevationLevel;
    /** Start as detached floating navbar */
    floating?: boolean;
    /** Accessible nav landmark label */
    label?: string;
    /** CSS selector for an external sidebar toggled by the mobile button */
    'mobile-sidebar'?: string;
    /** Border radius size */
    rounded?: RoundedSize;
    /** Scroll threshold in px used by floating+sticky transition */
    'scroll-threshold'?: number;
    /** Stick to top of viewport */
    sticky?: boolean;
    /** Visual style variant */
    variant?: Exclude<VisualVariant, 'ghost' | 'text'>;
};
/** Navbar item properties */
export type OreNavbarItemProps = {
    /** Whether this item represents the current page */
    active?: boolean;
    /** Whether this item is disabled */
    disabled?: boolean;
    /** Link target URL. Renders an anchor when provided. */
    href?: string;
    /**
     * Icon-only mode — hides the (empty) label region and switches to compact, symmetric
     * padding instead of the icon+label layout's wider horizontal padding. Set this whenever
     * the default slot is intentionally left empty (name conveyed via `aria-label` instead),
     * otherwise the empty label still reserves its inter-element gap and the item ends up
     * with lopsided padding around the icon.
     */
    'icon-only'?: boolean;
    /** Relationship of linked URL (anchor-only) */
    rel?: string;
    /** Browsing context for link (anchor-only) */
    target?: string;
};
/**
 * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.
 *
 * @element ore-navbar
 * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot
 *
 * @attr {string} label - Accessible nav landmark label
 * @attr {boolean} sticky - Makes navbar sticky at top
 * @attr {boolean} floating - Makes navbar detached and floating
 * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition
 * @attr {string} breakpoint - CSS media query used for mobile mode
 * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width
 * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'
 *
 * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }
 *
 * @slot logo - Brand/logo content rendered at the leading edge
 * @slot start - Content rendered in the left/start region
 * @slot - Center navigation content rendered between the start and end regions
 * @slot end - Content rendered in the right/end region
 * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel
 *
 * @cssprop --navbar-height - Navbar bar height
 * @cssprop --navbar-width - Max width of the navbar content
 * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning
 * @cssprop --navbar-bg - Navbar background color
 * @cssprop --navbar-color - Navbar text color
 * @cssprop --navbar-border-color - Navbar border color
 * @cssprop --navbar-shadow - Navbar box shadow
 * @cssprop --navbar-radius - Border radius (floating/sticky modes)
 * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect
 * @cssprop --navbar-item-color - Nav item text color
 * @cssprop --navbar-item-hover-color - Nav item hover text color
 * @cssprop --navbar-item-hover-bg - Nav item hover background
 * @cssprop --navbar-item-active-color - Nav item active/current text color
 * @cssprop --navbar-item-active-bg - Nav item active/current background
 * @part nav - Outer navigation landmark
 * @part bar - Main navbar row container
 * @part logo - Logo slot container
 * @part start - Leading action/content region
 * @part center - Center content region
 * @part end - Trailing action/content region
 * @part mobile-toggle - Mobile menu toggle button
 * @part mobile-menu - Mobile overflow panel
 * @part item-icon - Leading icon inside navbar items
 * @part item-label - Label text inside navbar items
 * @part item-end - Trailing content inside navbar items
 * @part item - Clickable navbar item root
 * @example
 * ```html
 * <ore-navbar sticky elevation="1">
 *   <a href="/" slot="logo"><strong>MyApp</strong></a>
 *   <ore-navbar-item href="/dashboard">Dashboard</ore-navbar-item>
 *   <ore-navbar-item href="/docs">Docs</ore-navbar-item>
 *   <ore-button slot="end" variant="solid" color="primary" size="sm">Sign in</ore-button>
 * </ore-navbar>
 * ```
 */
export declare const NAVBAR_TAG: "ore-navbar";
/**
 * `ore-navbar-item` — Navigation item for navbar slots.
 *
 * Renders as an anchor when `href` is provided and item is not disabled.
 *
 * @element ore-navbar-item
 *
 * @attr {boolean} active - Marks item as the current active route
 * @attr {boolean} disabled - Disables interaction
 * @attr {string} href - Link URL; renders as `<a>` when set
 * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label
 * @attr {string} rel - Anchor `rel` attribute (links only)
 * @attr {string} target - Anchor `target` attribute (links only)
 *
 * @slot - Item label
 * @slot icon - Optional icon before the label
 *
 * @part item - Root clickable element (anchor or button).
 * @part item-icon - Leading icon container.
 * @part item-label - Label text container.
 * @part item-end - Trailing content container.
 *
 * @example
 * ```html
 * <ore-navbar-item href="/home">Home</ore-navbar-item>
 * <ore-navbar-item href="/docs" active>Docs</ore-navbar-item>
 * <ore-navbar-item href="/about" target="_blank" rel="noopener">About</ore-navbar-item>
 * <ore-navbar-item disabled>Disabled</ore-navbar-item>
 * <ore-navbar-item icon-only aria-label="Search"><ore-icon slot="icon" name="search"></ore-icon></ore-navbar-item>
 * ```
 */
export declare const NAVBAR_ITEM_TAG: "ore-navbar-item";
//# sourceMappingURL=navbar.d.ts.map