import { IEventEmitter } from '@breadstone/mosaik-elements';
import { CssLength } from '@breadstone/mosaik-themes';
import { ISlottable } from '../../../Behaviors/Slottable';
import type { ISplitRepositionEventDetail } from '../../../events';
import { SplitCollapsedPanel } from '../../../Types/SplitCollapsedPanel';
import { SplitLock } from '../../../Types/SplitLock';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { ISplitElementProps } from './ISplitElementProps';
declare const SplitElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Split - A layout component that creates a resizable split pane layout with a draggable divider.
 *
 * Enables users to dynamically resize two content areas separated by an interactive divider.
 * Supports both horizontal and vertical orientations, position locking, snapping, and keyboard navigation.
 * When `collapsible` is enabled, panels can be collapsed by dragging beyond 50% of their minimum size.
 *
 * @name SplitElement
 * @element mosaik-split
 * @category Layout
 *
 * @fires splitReposition {SplitRepositionEvent} - Fired when the split position changes via user interaction
 *
 * @slot start - The primary content panel positioned at the beginning of the split
 * @slot end - The secondary content panel positioned at the end of the split
 * @slot thumb - Custom grip icon for the draggable divider (defaults to three dots icon)
 *
 * @csspart panel - The container for each split panel content
 * @csspart start - The start panel container
 * @csspart end - The end panel container
 * @csspart divider - The interactive draggable divider element
 * @csspart thumb - The visual grip icon within the divider
 *
 * @cssprop {String} --split-divider-width - Width/height of the divider based on orientation
 *
 * @dependency ThumbElement - The thumb element used as the default grip in the divider
 *
 * @example
 * ```html
 * <!-- Basic split layout -->
 * <mosaik-split position="30">
 *   <div slot="start">Left Panel</div>
 *   <div slot="end">Right Panel</div>
 * </mosaik-split>
 *
 * <!-- Vertical split with snapping -->
 * <mosaik-split orientation="vertical" snaps="25% 50% 75%">
 *   <div slot="start">Top Panel</div>
 *   <div slot="end">Bottom Panel</div>
 * </mosaik-split>
 *
 * <!-- Locked split with custom thickness -->
 * <mosaik-split lock="start" thickness="4" position="200px">
 *   <nav slot="start">Navigation</nav>
 *   <main slot="end">Content</main>
 * </mosaik-split>
 *
 * <!-- Collapsible split with minimum constraint -->
 * <mosaik-split collapsible min="200px" position="30%">
 *   <aside slot="start">Collapsible Sidebar</aside>
 *   <main slot="end">Main Content</main>
 * </mosaik-split>
 * ```
 *
 * @public
 */
export declare class SplitElement extends SplitElement_base implements ISplitElementProps, ISlottable {
    private readonly _resizeController;
    private readonly _splitReposition;
    private _size;
    private _position;
    private _lock;
    private _snaps;
    private _snapThreshold;
    private _thickness;
    private _min;
    private _max;
    private _collapsible;
    private _collapsedPanel;
    private _positionBeforeCollapse;
    /**
     * Constructs a new instance of the `SplitElement` class.
     *
     * @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 `position` property.
     * The position of the divider. Accepts any valid CSS length value except 'auto'.
     *
     * @example '50%', '200px', '10rem'
     * @public
     * @attr
     */
    get position(): Exclude<CssLength, 'auto'>;
    set position(value: Exclude<CssLength, 'auto'>);
    /**
     * Gets or sets the `lock` property.
     * Determines which panel is the fixed reference for positioning and resize behavior.
     *
     * - `'none'` (default): The start panel is the primary reference. `position`, `min`, and `max`
     *   control the start panel's size. On container resize, the position **percentage** is preserved,
     *   meaning both panels resize proportionally.
     *
     * - `'start'`: Identical to `'none'` for layout and interaction, but on container resize
     *   the start panel's **absolute pixel size** is preserved instead of the percentage.
     *   The end panel absorbs all resize changes, keeping the start panel at a fixed width/height.
     *
     * - `'end'`: The end panel becomes the primary reference. The grid layout is inverted so
     *   that `position`, `min`, and `max` now control the **end** panel's size. Drag and keyboard
     *   directions are mirrored accordingly. On container resize, the end panel's **absolute pixel
     *   size** is preserved while the start panel absorbs resize changes.
     *
     * @example
     * ```html
     * <!-- Fixed 250px sidebar on the left, main area absorbs resize -->
     * <mosaik-split lock="start" position="250px">
     *   <nav slot="start">Sidebar</nav>
     *   <main slot="end">Content</main>
     * </mosaik-split>
     *
     * <!-- Fixed 300px panel on the right -->
     * <mosaik-split lock="end" position="300px">
     *   <main slot="start">Content</main>
     *   <aside slot="end">Details</aside>
     * </mosaik-split>
     * ```
     *
     * @public
     * @attr
     */
    get lock(): SplitLock;
    set lock(value: SplitLock);
    /**
     * Gets or sets the `snap` property.
     * The `snap` is a space separated list of snap points.
     * When the split is dragged, it will snap to the nearest snap point.
     *
     * @public
     * @attr
     */
    get snaps(): Array<Exclude<CssLength, 'auto'>>;
    set snaps(value: Array<Exclude<CssLength, 'auto'>>);
    /**
     * Gets or sets the `snapThreshold` property.
     *
     * @public
     * @attr
     */
    get snapThreshold(): number;
    set snapThreshold(value: number);
    /**
     * Gets or sets the `thickness` property.
     *
     * @public
     * @attr
     */
    get thickness(): number;
    set thickness(value: number);
    /**
     * Gets or sets the `min` property.
     * The minimum position constraint for the primary panel.
     * Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px').
     *
     * @public
     * @attr
     */
    get min(): Exclude<CssLength, 'auto'>;
    set min(value: Exclude<CssLength, 'auto'>);
    /**
     * Gets or sets the `max` property.
     * The maximum position constraint for the primary panel.
     * Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px').
     *
     * @public
     * @attr
     */
    get max(): Exclude<CssLength, 'auto'>;
    set max(value: Exclude<CssLength, 'auto'>);
    /**
     * Gets or sets the `collapsible` property.
     * When enabled, panels can be collapsed by dragging beyond 50% of their minimum size constraint.
     * A collapsed panel can be expanded by dragging back beyond 50% of the minimum size.
     *
     * **Requires a meaningful `min` value** (e.g., `min="200px"`). The collapse threshold is
     * calculated as 50% of `min`. With the default `min="0%"`, the threshold is 0px and the
     * snap-to-collapse behavior has no effect.
     *
     * **Difference to dragging without `collapsible`:**
     * Without `collapsible`, a panel can still reach zero size if `min="0%"`, but there is no
     * threshold snap behavior, no keyboard collapse (Home/End), and the `collapse()`/`expand()`
     * API methods are disabled.
     *
     * **Note:** The `collapsedPanel` property reflects the visual state regardless of this setting.
     * Even without `collapsible`, if a panel reaches zero size, `collapsedPanel` will indicate
     * which panel is collapsed.
     *
     * @public
     * @attr
     */
    get collapsible(): boolean;
    set collapsible(value: boolean);
    /**
     * Gets or sets the `collapsedPanel` property.
     * Indicates which panel is currently collapsed (has zero size).
     *
     * This property is **automatically derived** from the current `position`:
     * - When position is at or below `0%`, `collapsedPanel` is `'start'`.
     * - When position is at or above `100%`, `collapsedPanel` is `'end'`.
     * - Otherwise, `collapsedPanel` is `'none'`.
     *
     * This auto-detection works regardless of the `collapsible` property, ensuring
     * the value always reflects the visual state the user sees.
     *
     * @public
     * @attr
     * @readonly
     */
    get collapsedPanel(): SplitCollapsedPanel;
    private set collapsedPanel(value);
    /**
     * Gets the `isCollapsed` property.
     * Returns true if any panel is currently collapsed.
     *
     * @public
     * @readonly
     */
    get isCollapsed(): boolean;
    /**
     * Gets the `isStartCollapsed` property.
     * Returns true if the start panel is collapsed.
     *
     * @public
     * @readonly
     */
    get isStartCollapsed(): boolean;
    /**
     * Gets the `isEndCollapsed` property.
     * Returns true if the end panel is collapsed.
     *
     * @public
     * @readonly
     */
    get isEndCollapsed(): boolean;
    /**
     * Gets or sets the `hasPanels` property.
     *
     * @public
     */
    get hasPanels(): boolean;
    /**
     * Gets the position as a percentage value (0-100).
     * This is a computed property used internally for calculations.
     *
     * @public
     * @readonly
     */
    get positionPercentage(): number;
    /**
     * Gets the position in pixels.
     * This is a computed property used internally for calculations.
     *
     * @public
     * @readonly
     */
    get positionInPixels(): number;
    /**
     * Called when the split is repositioned.
     * Provides reference to `IEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get splitReposition(): IEventEmitter<ISplitRepositionEventDetail>;
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @public
     * @override
     */
    onSlotChanges(_slotName?: string): void;
    /**
     * @private
     */
    handleDrag(event: PointerEvent): void;
    /**
     * @private
     */
    handleKeyDown(event: KeyboardEvent): void;
    /**
     * Handles the double click on the thumb.
     * Toggles the collapse state of a panel based on the current `lock` setting:
     * - `lock="start"`: Toggles the start panel.
     * - `lock="end"`: Toggles the end panel.
     * - `lock="none"`: Determines the target panel by the current position percentage
     *   (≤ 50% → start, > 50% → end).
     *
     * When a panel is already collapsed, it expands that specific panel regardless of lock.
     *
     * @private
     */
    handleDoubleClick(): void;
    /**
     * Collapses the specified panel by dragging it beyond 50% of its minimum size constraint.
     * Only works when `collapsible` is enabled.
     *
     * @public
     * @param panel The panel to collapse
     */
    collapse(panel: Exclude<SplitCollapsedPanel, 'none'>): void;
    /**
     * Expands the specified collapsed panel back to its minimum/maximum position.
     * Only works when `collapsible` is enabled.
     *
     * @public
     * @param panel The panel to expand
     */
    expand(panel: Exclude<SplitCollapsedPanel, 'none'>): void;
    /**
     * Emits the `splitReposition` event.
     *
     * @protected
     */
    protected onSplitReposition(args: ISplitRepositionEventDetail): void;
    /**
     * Called when the `position` property changes.
     * Automatically updates `collapsedPanel` to reflect the visual state.
     *
     * @protected
     */
    protected onPositionPropertyChanged(_prev?: Exclude<CssLength, 'auto'>, _next?: Exclude<CssLength, 'auto'>): void;
    /**
     * @protected
     */
    protected onOrientationPropertyChanged(_prev?: boolean, _next?: boolean): void;
    /**
     * Converts a CSS length value to pixels.
     *
     * @private
     */
    private cssLengthToPixels;
    /**
     * Converts a CSS length value to percentage.
     *
     * @private
     */
    private cssLengthToPercentage;
    /**
     * @private
     */
    private detectSize;
    /**
     * @private
     */
    private pixelsToPercentage;
    /**
     * @private
     */
    private handleResize;
    /**
     * @private
     */
    private drag;
}
/**
 * @public
 */
export declare namespace SplitElement {
    type Props = ISplitElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-split': SplitElement;
    }
}
export {};
//# sourceMappingURL=SplitElement.d.ts.map