/**
 * PXM Toggle Component
 *
 * A two-state button that can be either on or off. Perfect for toggleable UI states like formatting buttons.
 * This component provides structure and behavior only - all styling is controlled by your CSS.
 *
 * Features:
 * - Full keyboard support (Enter, Space)
 * - Event-driven animation system for custom animations
 * - CSS-based styling via state attributes
 * - Button semantics with pressed state
 * - Dynamic attribute synchronization
 * - Lightweight and performant
 *
 * Keyboard Navigation:
 * - `Enter` or `Space` - Toggle the button state
 *
 * Basic Usage:
 * ```html
 * <!-- Formatting toggle -->
 * <pxm-toggle aria-label="Toggle italic">
 *   <svg><!-- italic icon --></svg>
 * </pxm-toggle>
 *
 * <!-- Pre-pressed toggle -->
 * <pxm-toggle pressed="true" aria-label="Toggle bold">
 *   <svg><!-- bold icon --></svg>
 * </pxm-toggle>
 *
 * <!-- Form integration toggle -->
 * <pxm-toggle form="true" name="notifications" aria-label="Enable notifications">
 *   <svg><!-- notification icon --></svg>
 * </pxm-toggle>
 *
 * <!-- Disabled toggle -->
 * <pxm-toggle disabled="true" aria-label="Toggle underline">
 *   <svg><!-- underline icon --></svg>
 * </pxm-toggle>
 * ```
 *
 * Dynamic Content:
 * ```javascript
 * // Programmatic control
 * const toggle = document.querySelector('pxm-toggle');
 * toggle.checked = true;
 * toggle.disabled = false;
 *
 * // Listen for changes
 * toggle.addEventListener('pxm:toggle:change', (e) => {
 *   console.log(`Toggle is now ${e.detail.checked ? 'ON' : 'OFF'}`);
 * });
 * ```
 *
 * With Animation Library (via events - recommended for CDN):
 * ```javascript
 * const toggle = document.querySelector('pxm-toggle');
 *
 * toggle.addEventListener('pxm:toggle:before-change', (e) => {
 *   const { element, checked, complete } = e.detail;
 *   e.preventDefault(); // Take over the animation
 *
 *   // Custom animation with GSAP, Anime.js, etc.
 *   gsap.to(element, {
 *     scale: checked ? 1.1 : 1.0,
 *     duration: 0.2,
 *     ease: "back.out(1.7)",
 *     onComplete: () => {
 *       complete(); // Signal animation complete
 *     }
 *   });
 * });
 * ```
 *
 * With CSS Transitions:
 * ```css
 * pxm-toggle {
 *   transition: all 0.3s ease;
 * }
 *
 * pxm-toggle[data-state="on"] {
 *   background-color: #3b82f6;
 * }
 *
 * pxm-toggle[data-disabled="true"] {
 *   opacity: 0.5;
 *   cursor: not-allowed;
 * }
 * ```
 *
 * With Tailwind CSS:
 * ```html
 * <pxm-toggle
 *   class="px-4 py-2 rounded transition-all
 *          data-[state=on]:bg-blue-500 data-[state=on]:text-white
 *          data-[state=off]:bg-gray-200 data-[state=off]:text-gray-700
 *          data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed"
 *   aria-label="Toggle notifications">
 *   <span>Notifications</span>
 * </pxm-toggle>
 * ```
 *
 * Consumer Styling Examples:
 * Style the toggle element directly with CSS. Use data-state="on|off" and
 * data-disabled="true" attributes to target different states. The component
 * provides no default styling - you have complete control over appearance.
 *
 * SSR / Hydration Support:
 * ```css
 * / Prevent hydration flash /
 * pxm-toggle:not(:defined) {
 *   opacity: 0;
 * }
 *
 * pxm-toggle {
 *   opacity: 1;
 *   transition: opacity 0.1s ease;
 * }
 * ```
 *
 * Events:
 * - `pxm:toggle:before-change` - Cancelable. Fired before toggle state changes.
 * - `pxm:toggle:after-change` - Fired after toggle state changes.
 * - `pxm:toggle:change` - Fired when toggle state changes (for compatibility).
 *
 * Accessibility:
 * This component implements the dual-attribute pattern:
 * - ARIA attributes (aria-pressed, aria-disabled) for screen readers and assistive technology
 * - Data attributes (data-state, data-disabled) for CSS styling and JavaScript interaction
 * Additional ARIA attributes, labels, and roles should be added by the consumer as needed.
 */
export interface ToggleEventDetail {
    pressed: boolean;
    element: HTMLElement;
    complete: () => void;
}
export interface TogglePressedChangeEventDetail {
    pressed: boolean;
    element: HTMLElement;
}
export declare class PxmToggle extends HTMLElement {
    private config;
    private state;
    private input?;
    private animationPromises;
    static get observedAttributes(): string[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(_: string, oldValue: string, newValue: string): void;
    private setupToggle;
    private createHiddenCheckbox;
    private updateState;
    /**
     * Create a promise that resolves when animation completes
     */
    private createAnimationPromise;
    /**
     * Resolve an animation promise
     */
    private resolveAnimation;
    private toggle;
    /**
     * Get the current pressed state
     */
    get pressed(): boolean;
    /**
     * Set the pressed state
     */
    set pressed(value: boolean);
    /**
     * Get the current 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 (only used when form="true")
     */
    get name(): string;
    /**
     * Set the form name (only used when form="true")
     */
    set name(value: string);
}
/**
 * Public TypeScript interface for the Toggle Component
 */
export interface PxmToggle extends HTMLElement {
    /**
     * Get/set the pressed state
     */
    pressed: boolean;
    /**
     * Get/set the disabled state
     */
    disabled: boolean;
    /**
     * Get/set the form integration state
     */
    form: boolean;
    /**
     * Get/set the form name (only used when form="true")
     */
    name: string;
    /**
     * Programmatically toggle the button
     */
    performToggle(): Promise<void>;
    /**
     * Check if the toggle is currently animating
     */
    isAnimating(): boolean;
}