import CwElement from '../../internal/cw-element.js';
import CwIconButton from '../icon-button/icon-button.component.js';
import type { CSSResultGroup } from 'lit';
import type { Translation } from '../../utilities/localize.js';
interface HeaderAction {
    name: 'utility' | 'search' | 'notification' | 'user' | 'cart';
    icon: string;
    term: keyof Translation;
}
/**
 * @summary Page header region composing branding, primary navigation, icon-triggered action panels, and secondary
 * navigation into one piece of chrome.
 * @documentation https://cordwainer.dev/components/header
 * @status experimental
 * @since 1.3
 *
 * @dependency cw-icon-button
 *
 * @slot logo - A `<cw-logo>`.
 * @slot primary-navigation - A `<cw-primary-navigation>`.
 * @slot utility - Content for the utility action panel, opened via a gear icon trigger.
 * @slot search - Content for the search action panel, opened via a search icon trigger.
 * @slot notification - Content for the notification action panel, opened via a bell icon trigger.
 * @slot user - Content for the user/account action panel, opened via a person icon trigger.
 * @slot cart - Content for the cart action panel, opened via a cart icon trigger.
 * @slot secondary-navigation - A `<cw-secondary-navigation>`, rendered on its own row below everything else.
 *
 * @event {{ name: String }} cw-panel-show - Emitted when an action panel opens.
 * @event {{ name: String }} cw-panel-after-show - Emitted after an action panel opens and all animations are
 * complete.
 * @event {{ name: String }} cw-panel-hide - Emitted when an action panel closes.
 * @event {{ name: String }} cw-panel-after-hide - Emitted after an action panel closes and all animations are
 * complete.
 *
 * @csspart base - The component's base wrapper, a `<header>` landmark element.
 * @csspart logo - The container that wraps the slotted logo.
 * @csspart primary-navigation - The container that wraps the slotted primary navigation.
 * @csspart actions - The container that wraps the action triggers.
 * @csspart trigger - Each action trigger, a `<cw-icon-button>`.
 * @csspart trigger--utility - The utility action trigger.
 * @csspart trigger--search - The search action trigger.
 * @csspart trigger--notification - The notification action trigger.
 * @csspart trigger--user - The user action trigger.
 * @csspart trigger--cart - The cart action trigger.
 * @csspart trigger__base - A trigger's exported `base` part.
 * @csspart indicator - The line that highlights the currently open action trigger.
 * @csspart panel - The panel shown below the header when an action trigger is open.
 * @csspart secondary-navigation - The container that wraps the slotted secondary navigation.
 *
 * @cssproperty --panel-width - The width of an open action panel above `mobile-breakpoint`. Below it, panels are
 * always full width. Defaults to `50%`.
 *
 * @animation header.show - The animation to use when an action panel opens.
 * @animation header.hide - The animation to use when an action panel closes.
 */
export default class CwHeader extends CwElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cw-icon-button': typeof CwIconButton;
    };
    private readonly attrId;
    private readonly componentId;
    private readonly localize;
    private readonly hasSlotController;
    private mobileResizeObserver;
    private actionsResizeObserver;
    panel: HTMLElement;
    actionsRow: HTMLElement;
    indicator: HTMLElement;
    triggers: NodeListOf<CwIconButton>;
    private isMobile;
    /**
     * The name of the currently open action panel, or `null` if none is open. Not reflected as an attribute — `null`
     * is a legitimate, frequently-reached value here (no panel open), which doesn't play well with `CwElement`'s
     * reflected-attribute "morph fix" (`src/internal/cw-element.ts`), designed around properties whose first non-null
     * value is a permanent default rather than a value that legitimately toggles back to `null` at runtime.
     */
    activePanel: HeaderAction['name'] | null;
    /** The viewport width, in pixels, below which the header switches to its stacked mobile layout. */
    mobileBreakpoint: number;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private updateMobileState;
    private handleTriggerClick;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private addOpenListeners;
    private removeOpenListeners;
    private focusOnTrigger;
    private updateAccessibleTriggers;
    private repositionIndicator;
    handleActivePanelChange(oldValue: HeaderAction['name'] | null, newValue: HeaderAction['name'] | null): Promise<void>;
    /** Opens the named action panel. No-op if that slot has no content. */
    showPanel(name: HeaderAction['name']): Promise<void>;
    /** Closes the currently open action panel, if any. */
    hidePanel(): Promise<void>;
    render(): import("lit-html").TemplateResult<1>;
}
export {};