@sandlada/mdc/build/components/on-this-page/internal/base-on-this-page.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2026 Kai-Orion & Sandlada
 * SPDX-License-Identifier: MIT
 *
 * @fileoverview
 * Internal base class for `mdc-on-this-page` — an in-page table of contents / anchor navigation.
 *
 * Automatically tracks page scroll position, highlights the active section in view,
 * and renders a smoothly animated outline pill indicator that matches the active item's exact bounds.
 */
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import type { IOnThisPage, OnThisPageIndicatorFit } from '../on-this-page.interface';
import { BaseOnThisPageItem } from './base-on-this-page-item';
declare const BaseOnThisPage_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object & import("../../../utils/behaviors/element-internals").WithElementInternals);
export declare abstract class BaseOnThisPage extends BaseOnThisPage_base implements IOnThisPage {
    /** Subtitle/caption above the page title, e.g. "On this page". */
    caption: string;
    /** Main headline/title, e.g. "Navigation rail". */
    headline: string;
    /** Active item href anchor. */
    activeHref: string;
    /** Active item index. */
    activeIndex: number;
    /** Target scroll container selector or element (defaults to window). */
    scrollTarget: string | HTMLElement | Window;
    /** Offset in pixels from top of viewport/container for reading line and scroll snapping. */
    scrollOffset: number;
    /** Whether to update the URL hash on item click. */
    updateHash: boolean;
    /** Container selector for auto-discovering headings on the page. */
    contentSelector: string;
    /** Whether to auto-discover headings if no items are slotted. */
    autoDiscover: boolean;
    /** Whether the active indicator border wraps the text content or stretches to full container width. */
    indicatorFit: OnThisPageIndicatorFit;
    protected readonly itemsContainerElement: HTMLElement | null;
    protected readonly indicatorElement: HTMLElement | null;
    private readonly assignedItems;
    private discoveredItems;
    private items;
    private resizeObserver;
    private isManualScrolling;
    private manualScrollTimeout;
    private rafId;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected updated(changedProperties: PropertyValues<this>): void;
    protected getRenderClasses(): {
        [x: string]: boolean;
        container: boolean;
    };
    protected render(): TemplateResult;
    /** Returns current active item. */
    get activeItem(): BaseOnThisPageItem | null;
    /** Sets the active section by item index. */
    setActiveIndex(index: number, userInitiated?: boolean): void;
    /** Sets the active section by href / anchor id. */
    setActiveHref(href: string, userInitiated?: boolean): void;
    /** Recalculates and updates the indicator position & dimensions to match the active element 1:1. */
    updateIndicatorPosition(animate?: boolean): Promise<void>;
    private readonly handleSlotChange;
    private syncItems;
    private applyActiveState;
    private activateItem;
    private readonly handleItemClick;
    private scrollToTarget;
    private getScrollContainer;
    private setupScrollListener;
    private cleanupScrollListener;
    private setupResizeObserver;
    private readonly onScrollThrottled;
    private handleScroll;
    private discoverHeadings;
    private readonly handleKeyDown;
}
export {};
//# sourceMappingURL=base-on-this-page.d.ts.map