@progressive-development/pd-page/dist/pd-site-header/PdSiteHeader.d.ts

Progressive development page helper, teaser, menu, footer.

import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
import { PdMenuItem } from '../types.js';
import { ButtonData } from '@progressive-development/pd-forms';
/**
 * Site header component that consolidates top-menu, teaser, and main menu
 * into a single orchestrating component.
 *
 * Internally renders two pd-menu instances (top + main) and a teaser slot area.
 * Provides a single `--pd-site-header-height` CSS variable and `height-change`
 * event for consumers to react to total header height changes.
 *
 * @tagname pd-site-header
 *
 * @event locale-change - Fired when language is changed (bubbles from internal pd-menu).
 * @event route-event - Fired when a menu item is clicked (bubbles from internal pd-menu).
 * @event section-activated - Fired when the active section changes during scroll (bubbles from internal pd-menu).
 * @event height-change - Fired when the total header height changes. Detail: `{ height: number }`.
 * @event teaser-collapse-change - Fired when teaser collapse state changes. Detail: `{ collapsed: boolean }`.
 *
 * @slot logo - Application logo, rendered inside the main menu.
 * @slot teaser-content - Teaser content (e.g. pd-panel-viewer with slides).
 *
 * @cssprop --pd-site-header-teaser-height - Teaser area height. Responsive defaults: 200/280/380px.
 * @cssprop --pd-site-header-menu-height - Main menu height. Responsive defaults: 50/56/60px.
 * @cssprop --pd-site-header-top-height - Top menu height. Default: `30px`.
 * @cssprop --pd-site-header-top-bg - Top menu background (detached mode).
 * @cssprop --pd-site-header-top-col - Top menu text color (detached mode).
 * @cssprop --pd-site-header-menu-over-teaser-bg - Menu background when teaser is visible.
 * @cssprop --pd-site-header-menu-over-teaser-col - Menu text color when teaser is visible.
 * @cssprop --pd-site-header-transition - Transition timing. Default: `300ms ease-out`.
 *
 * @attr teaser-fit-content - Content-driven teaser height. Uses CSS Grid collapse instead of fixed height.
 * @cssprop --pd-menu-gradient - Gradient overlay for bg-image (integrated mode). Forwarded to pd-menu in detached mode.
 * @cssprop --pd-menu-bg-size - CSS background-size for the integrated bg image. Default: `cover`. Shared with pd-menu.
 * @cssprop --pd-menu-bg-repeat - CSS background-repeat for the integrated bg image. Default: `no-repeat`. Shared with pd-menu.
 * @cssprop --pd-menu-bg-attachment - CSS background-attachment for the integrated bg image. Default: `scroll`. Shared with pd-menu.
 * @cssprop --pd-menu-bg-position - CSS background-position for the integrated bg image. Default: `center`. Shared with pd-menu.
 */
export declare class PdSiteHeader extends LitElement {
    /** Main menu entries. */
    menuItems: PdMenuItem[];
    /** Top menu entries (external links, etc.). */
    topMenuItems: PdMenuItem[];
    /** Currently active route for highlighting. */
    activeRoute: string;
    /** Route to navigate on logo click. */
    logoRoute: string;
    /** Currently selected language. */
    selectedLocale: string;
    /** Available language options. */
    locales: ButtonData[];
    /** Show locale selector only in main menu (not in top menu). */
    singleLocaleMenu: boolean;
    /** Whether teaser area is visible. */
    showTeaser: boolean;
    /** Whether teaser is collapsed (scrolled past threshold). */
    teaserCollapsed: boolean;
    /** Keep logo visible even when teaser is open. */
    keepTeaserLogo: boolean;
    /** Content-driven teaser height (no fixed height, collapses via CSS Grid). */
    teaserFitContent: boolean;
    /** Skip teaser transition (for navigate-and-scroll). */
    skipTeaserTransition: boolean;
    /**
     * Top menu display mode.
     * - "detached": Top menu has own background (--pd-site-header-top-bg)
     * - "integrated": Everything shares one background
     */
    topMenuMode: "integrated" | "detached";
    /**
     * Background image URL for the menu area.
     * - **integrated**: Image spans across top + main menu (host-level background layer).
     * - **detached**: Image applied only to main menu (forwarded to pd-menu's bgImage).
     */
    bgImage: string;
    private _resizeObserver?;
    private _lastHeight;
    static styles: CSSResultGroup;
    connectedCallback(): void;
    disconnectedCallback(): void;
    updated(changedProps: Map<string, unknown>): void;
    render(): TemplateResult;
}
//# sourceMappingURL=PdSiteHeader.d.ts.map