import { LitElement, PropertyValues } from "lit";
/**
 * @element sky-appbar
 *
 * @summary Application top bar with title, optional leading control, trailing actions, and optional color/image background.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/appbar
 * @dependency sky-icon
 *
 * @slot button - Leading area (e.g., menu/back button). Defaults to a hamburger icon.
 * @slot - Trailing actions (icons/buttons). This is the default slot.
 *
 * @property {string} title - Title text displayed in the app bar.
 * @property {string} color - Semantic token or CSS color for bar background; foreground color is derived for contrast.
 * @property {string} url - Background image URL.
 * @property {boolean} banner - Uses `role="banner"` when true, otherwise `role="group"`.
 * @property {boolean} dense - Enables compact vertical spacing.
 * @property {boolean} elevated - Applies elevated shadow styling.
 * @property {string} leadingLabel - Accessible label for default leading button fallback.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 *
 * @csspart content - Wrapper that contains the leading slot, title, and actions.
 * @csspart leading - Container for the leading slot (e.g. menu button).
 * @csspart title - The title area (contains .title-text with the title string).
 * @csspart actions - The trailing actions container.
 *
 * @Behavior
 * - `color` resolves background via `resolveColor()`; solid FG uses on-color
 *   fallback + `contrast-color()` against the fill.
 * - `url` renders a background layer behind content.
 * - `banner` should be true only for the primary page app bar landmark.
 * - In RTL contexts, the default leading icon is mirrored unless reduced motion is enabled.
 *
 * @example
 * ```html
 * <sky-appbar title="Dashboard" color="primary" dense>
 *   <button slot="button">Menu</button>
 *   <sky-icon icon="ion:search"></sky-icon>
 * </sky-appbar>
 * ```
 * ```vue
 * <template>
 *   <sky-appbar title="Dashboard" color="primary" dense>
 *     <button slot="button">Menu</button>
 *     <sky-icon icon="ion:search"></sky-icon>
 *   </sky-appbar>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <sky-appbar title="Dashboard" color="primary" dense>
 *       <button slot="button">Menu</button>
 *       <sky-icon icon="ion:search"></sky-icon>
 *     </sky-appbar>
 *   );
 * }
 * ```
 */
export declare class SkyAppbar extends LitElement {
    static dependencies: Record<string, CustomElementConstructor>;
    /** Title text displayed in the app bar. @default "App Bar" */
    title: string;
    /**
     * Bar background token or CSS color; when set, foreground uses on-color
     * fallback enhanced by `contrast-color()` against the fill.
     * @default "default"
     */
    color: string;
    /** Background image URL. @default "" */
    url: string;
    /** When true, the bar has role="banner" (main app header). Set false for secondary bars. @default true */
    banner: boolean;
    /** When true, reduces vertical padding for a compact bar. @default false */
    dense: boolean;
    /** When true, applies stronger shadow (e.g. for sticky bar after scroll). @default false */
    elevated: boolean;
    /** Accessible label for the default leading button when no slot content is provided. @default "Open menu" */
    leadingLabel: string;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    static styles: import("lit").CSSResult;
    /** Applies glass vs solid surface tokens from `color`. */
    private _applyColorSurface;
    connectedCallback(): void;
    /** Sets background image CSS variable from `url`. */
    private _applyBackgroundImage;
    /** Updates host style variables when visual input properties change. */
    protected updated(changedProperties: PropertyValues): void;
    render(): import("lit-html").TemplateResult<1>;
}