import { type IOrientableProps } from '../../../Behaviors/Orientable';
import { ISlottable } from '../../../Behaviors/Slottable';
import { Orientation } from '../../../Types/Orientation';
import { CustomElement } from '../../Abstracts/CustomElement';
import { IScrollElementProps } from './IScrollElementProps';
declare const ScrollElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Scroll - A scrollable container with scroll position detection and optional navigation buttons.
 *
 * @description
 * The Scroll component provides a scrollable container that automatically detects when the user
 * has scrolled to the top, bottom, start, or end of the content. It supports both vertical
 * (default) and horizontal scrolling with optional navigation buttons for horizontal scroll.
 * When `showScrollButtons` is true, a CSS grid layout with prev/next arrow buttons and
 * gradient mask indicators is applied, following the Porsche Design System scroller pattern.
 * The scroll area spans the entire grid while action buttons overlay on top. The component
 * uses Intersection Observer API via invisible trigger elements to efficiently track scroll
 * boundaries without performance overhead.
 *
 * @name Scroll
 * @element mosaik-scroll
 * @category Primitives
 *
 * @slot - The default content slot for scrollable content
 *
 * @csspart root - The outer grid container element
 * @csspart scroller - The scrollable area element (spans the full grid)
 * @csspart content - The inner scroll wrapper (inline-flex, holds slot and triggers)
 * @csspart anchorTop - The top anchor element for vertical scroll detection
 * @csspart anchorBottom - The bottom anchor element for vertical scroll detection
 * @csspart trigger - Invisible trigger elements at start and end for horizontal scroll detection
 * @csspart actionPrev - The wrapper for the previous scroll button (overlays the scroll area)
 * @csspart actionNext - The wrapper for the next scroll button (overlays the scroll area)
 * @csspart scrollButtonPrev - The previous (left/up) navigation button
 * @csspart scrollButtonNext - The next (right/down) navigation button
 *
 * @cssprop {String} --scroll-action-button-width - The width of the action button wrapper area
 * @cssprop {String} --scroll-gradient-size - The size of the gradient fade indicator at scroll edges
 * @cssprop {String} --scroll-transition-duration - The duration of the opacity transition for action buttons
 * @cssprop {String} --scroll-transition-mode - The easing function of the opacity transition for action buttons
 * @cssprop {String} --scroll-transition-property - The CSS properties to transition (e.g. background-color, box-shadow, transform)
 * @cssprop {String} --scroll-content-gap - The gap between content items inside the scroll area
 * @cssprop {String} --scroll-align-scroll-indicator - The vertical alignment of the scroll navigation buttons
 *
 * @dependency {ButtonElement} - Navigation button components for scrolling
 *
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @example
 * Basic scrollable container:
 * ```html
 * <mosaik-scroll>
 *   <div>Long content here...</div>
 * </mosaik-scroll>
 * ```
 *
 * @example
 * Horizontal scroller with navigation buttons:
 * ```html
 * <mosaik-scroll show-scroll-buttons style="white-space: nowrap;">
 *   <mosaik-button label="Item 1"></mosaik-button>
 *   <mosaik-button label="Item 2"></mosaik-button>
 *   <mosaik-button label="Item 3"></mosaik-button>
 *   <!-- many more items -->
 * </mosaik-scroll>
 * ```
 *
 * @example
 * Detecting scroll position:
 * ```html
 * <mosaik-scroll id="myScroll">
 *   <div>Content...</div>
 * </mosaik-scroll>
 * <script>
 *   const scroll = document.querySelector('#myScroll');
 *   scroll.addEventListener('changed', (e) => {
 *     if (e.detail.propertyName === 'isAtScrollBottom' && e.detail.value) {
 *       console.log('Scrolled to bottom!');
 *     }
 *   });
 * </script>
 * ```
 *
 * @public
 */
export declare class ScrollElement extends ScrollElement_base implements IScrollElementProps, IOrientableProps, ISlottable {
    private readonly _intersectionAnchorController;
    private _scrollIntersectionObserver;
    private _isAtScrollTop;
    private _isAtScrollBottom;
    private _isAtScrollStart;
    private _isAtScrollEnd;
    private _showScrollButtons;
    private _showScrollbar;
    /**
     * @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 `isAtScrollTop` property.
     *
     * @public
     * @readonly
     * @attr
     */
    get isAtScrollTop(): boolean;
    private set isAtScrollTop(value);
    /**
     * Gets or sets the `isAtScrollBottom` property.
     *
     * @public
     * @readonly
     * @attr
     */
    get isAtScrollBottom(): boolean;
    private set isAtScrollBottom(value);
    /**
     * Gets the `isAtScrollStart` property.
     * Indicates whether the scroll area is at the horizontal start (left in LTR).
     *
     * @public
     * @readonly
     * @attr
     */
    get isAtScrollStart(): boolean;
    private set isAtScrollStart(value);
    /**
     * Gets the `isAtScrollEnd` property.
     * Indicates whether the scroll area is at the horizontal end (right in LTR).
     *
     * @public
     * @readonly
     * @attr
     */
    get isAtScrollEnd(): boolean;
    private set isAtScrollEnd(value);
    /**
     * Gets or sets the `showScrollButtons` property.
     * When `true`, prev/next navigation buttons are shown overlaying the scroll area.
     * The buttons are positioned at the edges and hidden when the scroll position is
     * already at the respective boundary. This property is independent of gradient
     * indicators and scrollbar visibility.
     * When `false`, no navigation buttons are shown.
     * The default value is `false`.
     *
     * @public
     * @attr
     */
    get showScrollButtons(): boolean;
    set showScrollButtons(value: boolean);
    /**
     * Gets or sets the `scrollbar` property.
     * When `true`, the native scrollbar is visible.
     * When `false`, the scrollbar is hidden.
     * The default value is `false`.
     *
     * @public
     * @attr
     */
    get showScrollbar(): boolean;
    set showScrollbar(value: boolean);
    /**
     * Returns whether horizontal scrolling is possible.
     *
     * @public
     * @readonly
     */
    get isScrollable(): boolean;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * Scrolls the content in the specified direction by approximately 80% of the visible dimension.
     * The scroll axis depends on the current `orientation`.
     *
     * @param direction - The scroll direction (`'prev'` or `'next'`).
     * @public
     */
    scrollByDirection(direction: 'prev' | 'next'): void;
    /**
     * Scrolls the content to a specific position in pixels.
     * The scroll axis depends on the current `orientation`.
     *
     * @param position - The target scroll position in pixels.
     * @param isSmooth - Whether the scrolling should be animated (smooth) or immediate. Defaults to `true`.
     * @public
     */
    scrollToPosition(position: number, isSmooth?: boolean): void;
    /**
     * Called when the `orientation` property changes.
     * Re-initializes the intersection observer for the correct axis.
     *
     * @param previous - The previous value.
     * @param next - The next value.
     * @protected
     */
    protected onOrientationChanged(previous?: Orientation, next?: Orientation): void;
    /**
     * Initializes the IntersectionObserver for the trigger elements inside the scroll-wrapper
     * (content part). Uses two invisible 1px triggers positioned at the start and end of the
     * content. When a trigger scrolls out of view, the gradient indicators become visible and
     * (if enabled) the corresponding scroll button appears.
     *
     * @private
     */
    private initScrollIntersectionObserver;
}
/**
 * @public
 */
export declare namespace ScrollElement {
    type Props = IScrollElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-scroll': ScrollElement;
    }
}
export {};
//# sourceMappingURL=ScrollElement.d.ts.map