/**
 * PXM Slider Component
 *
 * A customizable slider component that supports single and multi-thumb ranges, form integration, and keyboard navigation.
 * This component provides structure and behavior only - all styling is controlled by your CSS.
 *
 * Features:
 * - Single and multi-thumb range selection
 * - Horizontal and vertical orientation
 * - Full keyboard support (Arrow keys, Home, End, Page Up/Down)
 * - Form integration with hidden inputs
 * - Step values and min/max constraints
 * - Event-driven animation system for custom animations
 * - CSS-based styling via state attributes
 * - Dynamic thumb management
 * - Accessibility with ARIA support
 * - Lightweight and performant
 *
 * Keyboard Navigation:
 * - `ArrowLeft/ArrowDown` - Decrease value by step
 * - `ArrowRight/ArrowUp` - Increase value by step
 * - `Home` - Set to minimum value
 * - `End` - Set to maximum value
 * - `PageDown` - Decrease by large step (10x step)
 * - `PageUp` - Increase by large step (10x step)
 *
 * Basic Usage:
 * ```html
 * <!-- Simple slider -->
 * <pxm-slider min="0" max="100" value="50">
 *   <pxm-slider-track>
 *     <pxm-slider-range></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 * </pxm-slider>
 *
 * <!-- Range slider with multiple thumbs -->
 * <pxm-slider min="0" max="100" value="20,80">
 *   <pxm-slider-track>
 *     <pxm-slider-range></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 * </pxm-slider>
 *
 * <!-- Vertical slider -->
 * <pxm-slider orientation="vertical" min="0" max="100" value="30">
 *   <pxm-slider-track>
 *     <pxm-slider-range></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 * </pxm-slider>
 *
 * <!-- Form integration -->
 * <pxm-slider form="true" name="volume" min="0" max="100" value="75">
 *   <pxm-slider-track>
 *     <pxm-slider-range></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 * </pxm-slider>
 *
 * <!-- Disabled slider -->
 * <pxm-slider disabled="true" min="0" max="100" value="50">
 *   <pxm-slider-track>
 *     <pxm-slider-range></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb></pxm-slider-thumb>
 * </pxm-slider>
 * ```
 *
 * Dynamic Content:
 * ```javascript
 * // Programmatic control
 * const slider = document.querySelector('pxm-slider');
 * slider.value = [25, 75]; // Range slider
 * slider.value = 50; // Single slider
 * slider.disabled = false;
 *
 * // Listen for changes
 * slider.addEventListener('pxm:slider:change', (e) => {
 *   console.log(`Slider value: ${e.detail.value}`);
 * });
 *
 * // Add/remove thumbs dynamically
 * slider.addThumb(60);
 * slider.removeThumb(1);
 * ```
 *
 * With Animation Library (via events - recommended for CDN):
 * ```javascript
 * const slider = document.querySelector('pxm-slider');
 *
 * slider.addEventListener('pxm:slider:before-change', (e) => {
 *   const { thumbElement, value, complete } = e.detail;
 *   e.preventDefault(); // Take over the animation
 *
 *   // Custom animation with GSAP, Anime.js, etc.
 *   gsap.to(thumbElement, {
 *     x: e.detail.position + 'px',
 *     duration: 0.3,
 *     ease: "power2.out",
 *     onComplete: () => {
 *       complete(); // Signal animation complete
 *     }
 *   });
 * });
 * ```
 *
 * With CSS Transitions:
 * ```css
 * pxm-slider {
 *   width: 200px;
 *   height: 20px;
 *   position: relative;
 * }
 *
 * pxm-slider-track {
 *   display: block;
 *   width: 100%;
 *   height: 4px;
 *   background: #e2e8f0;
 *   border-radius: 2px;
 *   position: relative;
 * }
 *
 * pxm-slider-range {
 *   display: block;
 *   height: 100%;
 *   background: #3b82f6;
 *   border-radius: inherit;
 *   position: absolute;
 *   transition: all 0.2s ease;
 * }
 *
 * pxm-slider-thumb {
 *   display: block;
 *   width: 20px;
 *   height: 20px;
 *   background: #3b82f6;
 *   border: 2px solid white;
 *   border-radius: 50%;
 *   position: absolute;
 *   cursor: grab;
 *   transition: all 0.2s ease;
 *   transform: translate(-50%, -50%);
 * }
 *
 * pxm-slider-thumb:hover {
 *   transform: translate(-50%, -50%) scale(1.1);
 * }
 *
 * pxm-slider-thumb[data-dragging="true"] {
 *   cursor: grabbing;
 *   transform: translate(-50%, -50%) scale(1.2);
 * }
 *
 * pxm-slider[data-disabled="true"] {
 *   opacity: 0.5;
 *   cursor: not-allowed;
 * }
 *
 * pxm-slider[data-disabled="true"] pxm-slider-thumb {
 *   cursor: not-allowed;
 * }
 *
 * pxm-slider[data-orientation="vertical"] {
 *   width: 20px;
 *   height: 200px;
 * }
 *
 * pxm-slider[data-orientation="vertical"] pxm-slider-track {
 *   width: 4px;
 *   height: 100%;
 * }
 * ```
 *
 * With Tailwind CSS:
 * ```html
 * <pxm-slider
 *   class="relative w-48 h-5
 *          data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed
 *          data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-48"
 *   min="0" max="100" value="50">
 *   <pxm-slider-track class="block w-full h-1 bg-gray-300 rounded-full relative top-2">
 *     <pxm-slider-range class="block h-full bg-blue-500 rounded-full absolute transition-all duration-200"></pxm-slider-range>
 *   </pxm-slider-track>
 *   <pxm-slider-thumb class="block w-5 h-5 bg-blue-500 border-2 border-white rounded-full absolute cursor-grab
 *                             transition-all duration-200 transform -translate-x-1/2 -translate-y-1/2
 *                             hover:scale-110 data-[dragging=true]:cursor-grabbing data-[dragging=true]:scale-120"></pxm-slider-thumb>
 * </pxm-slider>
 * ```
 *
 * Consumer Styling Examples:
 * Target data attributes for styling, not ARIA attributes.
 *
 * SSR / Hydration Support:
 * Use CSS to prevent hydration flash with opacity transitions.
 *
 * Events:
 * - `pxm:slider:before-change` - Cancelable. Fired before thumb position changes.
 * - `pxm:slider:after-change` - Fired after thumb position changes.
 * - `pxm:slider:change` - Fired when slider value changes.
 * - `pxm:slider:thumb-drag-start` - Fired when thumb drag starts.
 * - `pxm:slider:thumb-drag-end` - Fired when thumb drag ends.
 * - `pxm:slider:value-commit` - Fired when value is committed (mouseup/keyup).
 *
 * Accessibility:
 * This component implements the dual-attribute pattern:
 * - ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow, aria-disabled) for screen readers
 * - Data attributes (data-orientation, data-disabled, data-dragging) for CSS styling and JavaScript interaction
 * Additional ARIA attributes, labels, and roles should be added by the consumer as needed.
 */
export declare class PxmSlider extends HTMLElement {
    private config;
    private state;
    private trackElement?;
    private rangeElement?;
    private thumbElements;
    private hiddenInputs;
    private animationPromises;
    private resizeObserver?;
    private mutationObserver?;
    static get observedAttributes(): string[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    private setupSlider;
    private findElements;
    private parseInitialValues;
    private normalizeValue;
    private createFormInputs;
    private setupEventListeners;
    private setupTrackEventListeners;
    private setupThumbEventListeners;
    private setupKeyboardNavigation;
    private handleKeyboardMove;
    private getPercentageFromEvent;
    private percentageToValue;
    private valueToPercentage;
    private findClosestThumbIndex;
    private setThumbValue;
    private startThumbDrag;
    private updateThumbElements;
    private updateThumbPositions;
    private updateRangeElement;
    private updateFormInputs;
    private updateAriaAttributes;
    private updateState;
    private handleValueChange;
    private observeChanges;
    private cleanup;
    /**
     * Create a promise that resolves when animation completes
     */
    private createAnimationPromise;
    /**
     * Resolve an animation promise
     */
    private resolveAnimation;
    /**
     * Get the current value(s)
     */
    get value(): number | number[];
    /**
     * Set the current value(s)
     */
    set value(value: number | number[]);
    /**
     * Get the disabled state
     */
    get disabled(): boolean;
    /**
     * Set the disabled state
     */
    set disabled(value: boolean);
    /**
     * Get the form integration state
     */
    get form(): boolean;
    /**
     * Set the form integration state
     */
    set form(value: boolean);
    /**
     * Get the form name
     */
    get name(): string;
    /**
     * Set the form name
     */
    set name(value: string);
    /**
     * Get the minimum value
     */
    get min(): number;
    /**
     * Set the minimum value
     */
    set min(value: number);
    /**
     * Get the maximum value
     */
    get max(): number;
    /**
     * Set the maximum value
     */
    set max(value: number);
    /**
     * Get the step value
     */
    get step(): number;
    /**
     * Set the step value
     */
    set step(value: number);
    /**
     * Get the orientation
     */
    get orientation(): 'horizontal' | 'vertical';
    /**
     * Set the orientation
     */
    set orientation(value: 'horizontal' | 'vertical');
}
export declare class PxmSliderTrack extends HTMLElement {
    constructor();
    connectedCallback(): void;
}
export declare class PxmSliderRange extends HTMLElement {
    constructor();
    connectedCallback(): void;
}
export declare class PxmSliderThumb extends HTMLElement {
    constructor();
    connectedCallback(): void;
}
export type { SliderConfig, SliderState, SliderEventDetail, SliderValueCommitEventDetail, SliderThumbDragEventDetail } from './types';
/**
 * Public TypeScript interface for the Slider Component
 */
export interface PxmSlider extends HTMLElement {
    /**
     * Get/set the current value(s)
     */
    value: number | number[];
    /**
     * Get/set the disabled state
     */
    disabled: boolean;
    /**
     * Get/set the form integration state
     */
    form: boolean;
    /**
     * Get/set the form name
     */
    name: string;
    /**
     * Get/set the minimum value
     */
    min: number;
    /**
     * Get/set the maximum value
     */
    max: number;
    /**
     * Get/set the step value
     */
    step: number;
    /**
     * Get/set the orientation
     */
    orientation: 'horizontal' | 'vertical';
    /**
     * Add a new thumb at the specified value
     */
    addThumb(value: number): void;
    /**
     * Remove a thumb by index
     */
    removeThumb(index: number): void;
    /**
     * Check if the slider is currently being dragged
     */
    isDragging(): boolean;
    /**
     * Get the current values as an array
     */
    getValues(): number[];
    /**
     * Set multiple values at once
     */
    setValues(values: number[]): void;
    /**
     * Focus a specific thumb by index
     */
    focusThumb(index: number): void;
}
/**
 * Public TypeScript interface for Slider Track
 */
export interface PxmSliderTrack extends HTMLElement {
}
/**
 * Public TypeScript interface for Slider Range
 */
export interface PxmSliderRange extends HTMLElement {
}
/**
 * Public TypeScript interface for Slider Thumb
 */
export interface PxmSliderThumb extends HTMLElement {
}