import { CssLength } from '@breadstone/mosaik-themes';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IStickyElementProps } from './IStickyElementProps';
declare const StickyElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Sticky - A container that maintains fixed positioning within the viewport during scrolling.
 *
 * @description
 * The Sticky element provides CSS sticky positioning behavior with configurable top and left offsets.
 * Content inside this element will "stick" to its specified position when the user scrolls past it,
 * remaining fixed within its containing block until the container's edge is reached. Commonly used
 * for sticky headers, navigation bars, floating action buttons, and persistent UI elements that
 * should remain accessible during page scrolling.
 *
 * @name Sticky
 * @element mosaik-sticky
 * @category Primitives
 *
 * @slot - Default slot for content that should exhibit sticky positioning
 *
 * @cssprop {String} --sticky-left - Left offset when sticky positioning is applied
 * @cssprop {String} --sticky-top - Top offset when sticky positioning is applied
 *
 * @example
 * Basic sticky header (top/left set via JavaScript):
 * ```html
 * <div class="page-content">
 *   <mosaik-sticky id="stickyHeader">
 *     <header class="site-header">
 *       <h1>My Site</h1>
 *       <nav>...</nav>
 *     </header>
 *   </mosaik-sticky>
 *   <main>
 *     <!-- Long scrollable content -->
 *   </main>
 * </div>
 * <script>
 *   document.querySelector('#stickyHeader').top = '0px';
 * </script>
 * ```
 *
 * @example
 * Sticky sidebar navigation:
 * ```html
 * <div class="layout">
 *   <aside class="sidebar">
 *     <mosaik-sticky id="stickySidebar">
 *       <nav class="side-nav">
 *         <a href="#section1">Section 1</a>
 *         <a href="#section2">Section 2</a>
 *         <a href="#section3">Section 3</a>
 *       </nav>
 *     </mosaik-sticky>
 *   </aside>
 *   <main>...</main>
 * </div>
 * <script>
 *   document.querySelector('#stickySidebar').top = '80px';
 * </script>
 * ```
 *
 * @example
 * Programmatic offset adjustment:
 * ```html
 * <mosaik-sticky id="stickyNav">
 *   <nav>Navigation</nav>
 * </mosaik-sticky>
 * <script>
 *   const stickyNav = document.getElementById('stickyNav');
 *   stickyNav.top = '0px';
 *   window.addEventListener('resize', () => {
 *     const headerHeight = document.querySelector('.top-banner')?.offsetHeight || 0;
 *     stickyNav.top = `${headerHeight}px`;
 *   });
 * </script>
 * ```
 *
 * @public
 */
export declare class StickyElement extends StickyElement_base implements IStickyElementProps {
    private _top;
    private _left;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `top` property.
     *
     * @public
     */
    get top(): CssLength;
    set top(value: CssLength);
    /**
     * Gets or sets the `left` property.
     *
     * @public
     */
    get left(): CssLength;
    set left(value: CssLength);
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @protected
     */
    protected onTopPropertyChanged(prev?: CssLength, next?: CssLength): void;
    /**
     * @protected
     */
    protected onLeftPropertyChanged(prev?: CssLength, next?: CssLength): void;
}
/**
 * @public
 */
export declare namespace StickyElement {
    type Props = IStickyElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-sticky': StickyElement;
    }
}
export {};
//# sourceMappingURL=StickyElement.d.ts.map