@zanichelli/albe-web-components 7.3.2 → 7.3.4

package/dist/types/components/navigation/tabs/z-navigation-tab/index.d.ts

@@ -1,52 +1,52 @@
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
-/**
- * Single tab component to use inside `z-navigation-tabs`. It renders a button.
- */
-export declare class ZNavigationTab {
-  /**
-   * Whether the tab is selected.
-   */
-  selected?: boolean;
-  /**
-   * Whether the tab is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-   */
-  orientation: NavigationTabsOrientation;
-  /**
-   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-   */
-  size: NavigationTabsSize;
-  /**
-   * Name of the icon to use.
-   * The `filled` version will be automatically used (if found) when the tab is `selected`.
-   */
-  icon: string;
-  /**
-   * Label to show in the tab.
-   */
-  label: string;
-  /**
-   * Html `title` attribute for the button.
-   */
-  htmlTitle: string;
-  /**
-   * The tab has been selected.
-   */
-  private selectedEvent;
-  /**
-   * Scroll into view to center the tab.
-   */
-  private scrollToTab;
-  onClick(): void;
-  onSelected(): void;
-  /**
-   * Render the icon component using the icon's name passed from prop.
-   * Use the `filled` version when the tab is `selected`.
-   * @returns {HTMLElement}
-   */
-  private renderIcon;
-  render(): HTMLButtonElement;
-}
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders a button.
+ */
+export declare class ZNavigationTab {
+  /**
+   * Whether the tab is selected.
+   */
+  selected?: boolean;
+  /**
+   * Whether the tab is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+   */
+  orientation: NavigationTabsOrientation;
+  /**
+   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+   */
+  size: NavigationTabsSize;
+  /**
+   * Name of the icon to use.
+   * The `filled` version will be automatically used (if found) when the tab is `selected`.
+   */
+  icon: string;
+  /**
+   * Label to show in the tab.
+   */
+  label: string;
+  /**
+   * Html `title` attribute for the button.
+   */
+  htmlTitle: string;
+  /**
+   * The tab has been selected.
+   */
+  private selectedEvent;
+  /**
+   * Scroll into view to center the tab.
+   */
+  private scrollToTab;
+  onClick(): void;
+  onSelected(): void;
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  private renderIcon;
+  render(): HTMLButtonElement;
+}

package/dist/types/components/navigation/tabs/z-navigation-tab-link/index.d.ts

@@ -1,60 +1,60 @@
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
-/**
- * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
- */
-export declare class ZNavigationTabLink {
-  /**
-   * Whether the tab is selected.
-   */
-  selected?: boolean;
-  /**
-   * Whether the tab is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-   */
-  orientation: NavigationTabsOrientation;
-  /**
-   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-   */
-  size: NavigationTabsSize;
-  /**
-   * Html title attribute for the anchor element.
-   */
-  htmlTitle: string;
-  /**
-   * Html `target` attribute for the anchor element.
-   */
-  target: string;
-  /**
-   * Url to set to the anchor element.
-   */
-  href: string;
-  /**
-   * Name of the icon to use.
-   * The `filled` version will be automatically used (if found) when the tab is `selected`.
-   */
-  icon: string;
-  /**
-   * Label to show in the tab.
-   */
-  label: string;
-  /**
-   * The tab has been selected.
-   */
-  private selectedEvent;
-  /**
-   * Scroll into view to center the tab.
-   */
-  private scrollToTab;
-  onClick(): void;
-  onSelected(): void;
-  /**
-   * Render the icon component using the icon's name passed from prop.
-   * Use the `filled` version when the tab is `selected`.
-   * @returns {HTMLElement}
-   */
-  private renderIcon;
-  render(): HTMLAnchorElement;
-}
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
+ */
+export declare class ZNavigationTabLink {
+  /**
+   * Whether the tab is selected.
+   */
+  selected?: boolean;
+  /**
+   * Whether the tab is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+   */
+  orientation: NavigationTabsOrientation;
+  /**
+   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+   */
+  size: NavigationTabsSize;
+  /**
+   * Html title attribute for the anchor element.
+   */
+  htmlTitle: string;
+  /**
+   * Html `target` attribute for the anchor element.
+   */
+  target: string;
+  /**
+   * Url to set to the anchor element.
+   */
+  href: string;
+  /**
+   * Name of the icon to use.
+   * The `filled` version will be automatically used (if found) when the tab is `selected`.
+   */
+  icon: string;
+  /**
+   * Label to show in the tab.
+   */
+  label: string;
+  /**
+   * The tab has been selected.
+   */
+  private selectedEvent;
+  /**
+   * Scroll into view to center the tab.
+   */
+  private scrollToTab;
+  onClick(): void;
+  onSelected(): void;
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  private renderIcon;
+  render(): HTMLAnchorElement;
+}

package/dist/types/components/navigation/tabs/z-navigation-tabs/index.d.ts

@@ -1,70 +1,70 @@
-import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans";
-/**
- * Navigation tabs component.
- * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
- */
-export declare class ZNavigationTabs {
-  /**
-   * Navigation tabs orientation.
-   */
-  orientation?: NavigationTabsOrientation;
-  /**
-   * Navigation tabs size.
-   */
-  size?: NavigationTabsSize;
-  /**
-   * Whether to show navigation buttons.
-   */
-  canNavigate: boolean;
-  /**
-   * Whether backwards navigation is enabled.
-   */
-  canNavigatePrev: boolean;
-  /**
-   * Whether forward navigation is enabled.
-   */
-  canNavigateNext: boolean;
-  host: HTMLZNavigationTabsElement;
-  private tabsNav;
-  /**
-   * Getter for the direction to check based on current orientation.
-   */
-  get direction(): string;
-  /**
-   * Getter for the dimension to check based on current orientation.
-   */
-  get dimension(): string;
-  /**
-   * Set the `size` prop to all `z-navigation-tab` children.
-   */
-  setChildrenSize(): void;
-  /**
-   * Set the `orientation` prop to all `z-navigation-tab` children.
-   */
-  setChildrenOrientation(): void;
-  /**
-   * Check if the navigation buttons are needed on window resize.
-   */
-  checkScrollVisible(): void;
-  /**
-   * Check if navigation buttons can be enabled for each direction.
-   */
-  checkScrollEnabled(): void;
-  /**
-   * Listen for child tab selection.
-   * Deselect all other previously selected tabs,
-   * then scroll to the new selected tab and center it.
-   * @param {CustomEvent} event `selected` event triggered by a child tab
-   */
-  onTabSelected(event: CustomEvent): void;
-  /**
-   * Scroll the navigation bar half of its size backward.
-   */
-  private navigateBackwards;
-  /**
-   * Scroll the navigation bar half of its size forward.
-   */
-  private navigateForward;
-  componentDidRender(): void;
-  render(): HTMLZNavigationTabsElement;
-}
+import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans";
+/**
+ * Navigation tabs component.
+ * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
+ */
+export declare class ZNavigationTabs {
+  /**
+   * Navigation tabs orientation.
+   */
+  orientation?: NavigationTabsOrientation;
+  /**
+   * Navigation tabs size.
+   */
+  size?: NavigationTabsSize;
+  /**
+   * Whether to show navigation buttons.
+   */
+  canNavigate: boolean;
+  /**
+   * Whether backwards navigation is enabled.
+   */
+  canNavigatePrev: boolean;
+  /**
+   * Whether forward navigation is enabled.
+   */
+  canNavigateNext: boolean;
+  host: HTMLZNavigationTabsElement;
+  private tabsNav;
+  /**
+   * Getter for the direction to check based on current orientation.
+   */
+  get direction(): string;
+  /**
+   * Getter for the dimension to check based on current orientation.
+   */
+  get dimension(): string;
+  /**
+   * Set the `size` prop to all `z-navigation-tab` children.
+   */
+  setChildrenSize(): void;
+  /**
+   * Set the `orientation` prop to all `z-navigation-tab` children.
+   */
+  setChildrenOrientation(): void;
+  /**
+   * Check if the navigation buttons are needed on window resize.
+   */
+  checkScrollVisible(): void;
+  /**
+   * Check if navigation buttons can be enabled for each direction.
+   */
+  checkScrollEnabled(): void;
+  /**
+   * Listen for child tab selection.
+   * Deselect all other previously selected tabs,
+   * then scroll to the new selected tab and center it.
+   * @param {CustomEvent} event `selected` event triggered by a child tab
+   */
+  onTabSelected(event: CustomEvent): void;
+  /**
+   * Scroll the navigation bar half of its size backward.
+   */
+  private navigateBackwards;
+  /**
+   * Scroll the navigation bar half of its size forward.
+   */
+  private navigateForward;
+  componentDidRender(): void;
+  render(): HTMLZNavigationTabsElement;
+}

package/dist/types/components/navigation/z-app-header/index.d.ts

@@ -1,111 +1,143 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-/**
- * @slot title - Slot for the main title
- * @slot subtitle - Slot for the subtitle. It will not appear in stuck header.
- * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-height - Defaults to `auto`.
- * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
- * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
- * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
- * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
- * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
- * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
- * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
- * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
- * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
- * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
- * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
- * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
- * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
- * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
- * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
- * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
- * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
- * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
- * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
- * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
- * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
- * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
- * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
- * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
- * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
- * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-white`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-white`.
- * @cssprop --app-header-text-color - Text color. Defaults to `--gray800`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--gray800`.
- */
-export declare class ZAppHeader {
-  hostElement: HTMLZAppHeaderElement;
-  /**
-   * Stuck mode for the header.
-   * You can programmatically set it using an IntersectionObserver.
-   * **Optional**
-   */
-  stuck: boolean;
-  /**
-   * Set the hero image source for the header.
-   * You can also use a slot="hero" node for advanced customisation.
-   * **Optional**
-   */
-  hero: string;
-  /**
-   * Should place an overlay over the hero image.
-   * Useful for legibility purpose.
-   * **Optional**
-   */
-  overlay: boolean;
-  /**
-   * Control menu bar position in the header.
-   * - auto: the menu bar is positioned near the title
-   * - stack: the menu bar is positioned below the title
-   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-   */
-  flow: "auto" | "stack" | "offcanvas";
-  /**
-   * The opening state of the drawer.
-   */
-  drawerOpen: boolean;
-  /**
-   * The stuck state of the bar.
-   */
-  private _stuck;
-  /**
-   * Current count of menu items.
-   */
-  menuLength: number;
-  /**
-   * Emitted when the `stuck` state of the header changes
-   */
-  sticking: EventEmitter;
-  private emitStickingEvent;
-  private container?;
-  private menuElements?;
-  private observer?;
-  private openDrawer;
-  private closeDrawer;
-  constructor();
-  componentDidLoad(): void;
-  private get title();
-  private get scrollParent();
-  private collectMenuElements;
-  onStuckMode(): void;
-  private enableStuckObserver;
-  private disableStuckMode;
-  onStuck(): void;
-  setMenuFloatingMode(): void;
-  render(): HTMLZAppHeaderElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot title - Slot for the main title
+ * @slot subtitle - Slot for the subtitle. It will not appear in stuck header.
+ * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
+ * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
+ * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
+ * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
+ * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
+ * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
+ * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
+ * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
+ * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
+ * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
+ * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
+ * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
+ * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
+ * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
+ * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
+ * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+ * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+ * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+ * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+ * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
+ * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
+ * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
+ * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
+ * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
+ * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
+ * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
+ * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
+ * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
+ * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
+ * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
+ * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+ * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+ * @cssprop --app-header-height - Defaults to `auto`.
+ * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+ * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+ * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+ * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
+ * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
+ * Defaults to `--app-header-typography-3-size`.
+ * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
+ * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-lineheight`.
+ * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
+ * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-tracking`.
+ * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+ */
+export declare class ZAppHeader {
+  hostElement: HTMLZAppHeaderElement;
+  /**
+   * Stuck mode for the header.
+   * You can programmatically set it using an IntersectionObserver.
+   */
+  stuck: boolean;
+  /**
+   * Set the hero image source for the header.
+   * You can also use a [slot="hero"] node for advanced customization.
+   */
+  hero: string;
+  /**
+   * Should place an overlay over the hero image.
+   * Useful for legibility purpose.
+   */
+  overlay: boolean;
+  /**
+   * Control menu bar position in the header.
+   * - auto: the menu bar is positioned near the title
+   * - stack: the menu bar is positioned below the title
+   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+   */
+  flow: "auto" | "stack" | "offcanvas";
+  /**
+   * The opening state of the drawer.
+   */
+  drawerOpen: boolean;
+  /**
+   * Enable the search bar.
+   */
+  enableSearch: boolean;
+  /**
+   * Placeholder text for the search bar.
+   */
+  searchPlaceholder: string;
+  /**
+   * Url to the search page.
+   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.
+   * The link will also appear on the sticky header.
+   */
+  searchPageUrl: string;
+  /**
+   * The stuck state of the bar.
+   */
+  private _stuck;
+  /**
+   * Current viewport.
+   * Used to change the aspect of the search button (icon only) on mobile and tablet.
+   */
+  private currentViewport;
+  /**
+   * Current count of menu items.
+   */
+  menuLength: number;
+  /**
+   * Emitted when the `stuck` state of the header changes
+   */
+  sticking: EventEmitter;
+  private container?;
+  private menuElements?;
+  private observer?;
+  constructor();
+  evaluateViewport(): void;
+  onStuck(): void;
+  setMenuFloatingMode(): void;
+  private get title();
+  private get scrollParent();
+  private get canShowMenu();
+  private get canShowSearchbar();
+  /**
+   * Whether the header has a hero image, either as a prop or as a slot.
+   */
+  private get hasHero();
+  private openDrawer;
+  private closeDrawer;
+  private collectMenuElements;
+  private enableStuckObserver;
+  private disableStuckMode;
+  onStuckMode(): void;
+  private renderSearchLinkButton;
+  componentDidLoad(): void;
+  render(): HTMLZAppHeaderElement;
+}