//#region src/lib/Adhesive.d.ts /** * Sticky positioning options. */ declare const ADHESIVE_POSITION: { /** Stick to the top of the viewport. */readonly TOP: "top"; /** Stick to the bottom of the viewport. */ readonly BOTTOM: "bottom"; }; /** * Type representing the available sticky positioning options. */ type AdhesivePosition = (typeof ADHESIVE_POSITION)[keyof typeof ADHESIVE_POSITION]; /** * Element status states. */ declare const ADHESIVE_STATUS: { /** Element is in its normal position. */readonly INITIAL: "initial"; /** Element is sticky and positioned fixed. */ readonly FIXED: "fixed"; /** Element is positioned relative at boundary. */ readonly RELATIVE: "relative"; }; /** * Type representing the available element status states. */ type AdhesiveStatus = (typeof ADHESIVE_STATUS)[keyof typeof ADHESIVE_STATUS]; type ElementSelector = HTMLElement | string; /** * Configuration options for Adhesive instances. */ interface AdhesiveOptions { /** The element to make sticky. */ readonly targetEl: ElementSelector; /** The container element that constrains sticky positioning. */ readonly boundingEl?: ElementSelector | null; /** * Whether sticky positioning is enabled. * @default true */ readonly enabled?: boolean; /** * Distance from the viewport edge when sticking. * @default 0 */ readonly offset?: number; /** * Whether to stick to the top or bottom of the viewport. * @default "top" */ readonly position?: AdhesivePosition; /** * CSS z-index for the sticky element. * @default "var(--adhesive-z-index, 1)" */ readonly zIndex?: number | string; /** * CSS class for the outer wrapper element. * @default "adhesive__outer" */ readonly outerClassName?: string; /** * CSS class for the inner wrapper element. * @default "adhesive__inner" */ readonly innerClassName?: string; /** * CSS class applied when the element is in its initial state. * @default "adhesive--initial" */ readonly initialClassName?: string; /** * CSS class applied when the element is sticky. * @default "adhesive--fixed" */ readonly fixedClassName?: string; /** * CSS class applied when the element reaches its boundary. * @default "adhesive--relative" */ readonly relativeClassName?: string; /** Optional callback invoked on status changes. */ readonly onStatusChange?: (status: AdhesiveStatus) => void; } /** * Current state information for an Adhesive instance. */ interface AdhesiveState { /** Current positioning status. */ readonly status: AdhesiveStatus; /** Whether the instance is actively tracking scroll. */ readonly activated: boolean; /** Current position offset in pixels. */ readonly position: number; /** Original CSS position value. */ readonly originalPosition: string; /** Original CSS top value. */ readonly originalTop: string; /** Original CSS z-index value. */ readonly originalZIndex: string; /** Original CSS transform value. */ readonly originalTransform: string; /** Current element width in pixels. */ readonly elementWidth: number; /** Current element height in pixels. */ readonly elementHeight: number; /** Current element X position. */ readonly elementX: number; /** Current element Y position. */ readonly elementY: number; /** Top boundary position for sticky behavior. */ readonly topBoundary: number; /** Bottom boundary position for sticky behavior. */ readonly bottomBoundary: number; } /** * Error thrown by Adhesive operations. */ declare class AdhesiveError extends Error { readonly code: string; constructor(code: string, message: string); } /** * Adhesive - A modern, performant, lightweight, dependency free, cross platform solution for flexible sticky positioned elements * * https://github.com/adhesivejs/adhesive/tree/main/packages/core#readme * * Provides advanced sticky positioning for DOM elements with configurable boundaries, * offsets, and positioning modes. Built for performance with passive event listeners, * ResizeObserver, and efficient DOM operations. * * - **🚀 Modern** - Built with TypeScript, distributed as ESM only * - **📦 Lightweight** - Zero dependencies, minimal bundle size * - **🔧 Flexible** - Supports top/bottom positioning with customizable offsets and boundaries * - **⚡️ Performant** - Optimized for smooth scrolling with efficient DOM updates * - **🎯 Type Safe** - Full TypeScript support with comprehensive type definitions * - **🌍 Cross Platform** - Works across all modern browsers and devices * - **🎨 Framework Ready** - Core library with framework specific adapters * - **🖥️ SSR Friendly** - Handles server-side rendering environments gracefully * * @example Basic usage * ```ts * Adhesive.create({ targetEl: '#target-element' }); * ``` * * Styling hook: the outer wrapper gets `data-adhesive-status` with values * `initial` | `fixed` | `relative` to enable attribute-based styling. * * @example Advanced configuration * ```ts * Adhesive.create({ * targetEl: document.querySelector('.sidebar'), * boundingEl: '.main-content', * position: 'bottom', * offset: 20, * zIndex: 999 * }); * ``` */ declare class Adhesive { #private; /** * Create a new Adhesive instance. */ static create(options: AdhesiveOptions): Adhesive; constructor(options: AdhesiveOptions); /** * Initialize the Adhesive instance. */ init(): this; /** * Enable sticky positioning. */ enable(): this; /** * Disable sticky positioning. */ disable(): this; /** * Update configuration options (partial update). */ updateOptions(newOptions: Partial>): this; /** * Replace configuration options (full update). */ replaceOptions(newOptions: Omit): this; /** * Get current state. */ getState(): AdhesiveState; /** * Refresh positioning calculations. */ refresh(): this; /** * Clean up resources like event listeners and remove sticky positioning. */ cleanup(): void; } //#endregion export { ADHESIVE_POSITION, ADHESIVE_STATUS, Adhesive, Adhesive as default, AdhesiveError, type AdhesiveOptions, type AdhesivePosition, type AdhesiveState, type AdhesiveStatus };