/**
 * PXM Switch Component
 *
 * A logic-only, accessible switch (toggle) component with thumb sub-component for enhanced styling control.
 * No Shadow DOM, no styling—bring your own CSS. Follows the PXM Elements architecture.
 *
 * Features:
 * - Accessible (manages aria-checked, aria-disabled, tabindex)
 * - Keyboard support (Space/Enter toggles)
 * - Event-driven animation system (bring your own animation library)
 * - Dynamic content support
 * - Dual-attribute pattern: ARIA for accessibility, data attributes for styling/JS
 * - Thumb sub-component for enhanced styling control
 *
 * Basic Usage:
 * ```html
 * <pxm-switch>
 *   <pxm-switch-thumb></pxm-switch-thumb>
 * </pxm-switch>
 * ```
 *
 * With Animation Library (via events):
 * ```javascript
 * const sw = document.querySelector('pxm-switch');
 *
 * sw.addEventListener('pxm:switch:before-toggle', (e) => {
 *   const { thumb, checked, complete } = e.detail;
 *   e.preventDefault(); // Take over the animation
 *
 *   gsap.to(thumb, {
 *     x: checked ? 20 : 0,
 *     duration: 0.2,
 *     onComplete: complete // Signal animation complete
 *   });
 * });
 * ```
 *
 * Accessibility:
 * This component manages both ARIA attributes (for accessibility) and data attributes (for styling/JS).
 * - ARIA attributes (aria-checked, aria-disabled) are automatically managed for screen readers
 * - Data attributes (data-state, data-disabled) are provided for CSS styling and JavaScript hooks
 * - Additional ARIA attributes, labels, and roles should be added by the consumer as needed
 *
 * Events:
 * - `pxm:switch:before-toggle` - Cancelable. Fired before toggle starts.
 * - `pxm:switch:after-toggle` - Fired after toggle completes.
 * - `pxm:switch:state-sync` - Fired when internal state syncs with manually changed DOM attributes.
 */
export interface SwitchToggleEventDetail {
    checked: boolean;
    element: HTMLElement;
    thumb?: HTMLElement;
    complete: () => void;
}