@ryanhelsing/ry-ui/dist/core/ry-element.d.ts

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * RyElement - Base class for all ry-ui components
 *
 * Provides:
 * - Lifecycle hooks with auto-cleanup
 * - Event helper methods
 * - State management via data attributes
 * - DOM query helpers
 */
export declare class RyElement extends HTMLElement {
    #private;
    constructor();
    /**
     * Called when element is added to DOM.
     * Override setup() in subclass instead of this.
     */
    connectedCallback(): void;
    /**
     * Called when element is removed from DOM.
     * Automatically cleans up event listeners and observers.
     */
    disconnectedCallback(): void;
    /**
     * Override in subclass for component initialization
     */
    setup?(): void;
    /**
     * Override in subclass for cleanup
     */
    teardown?(): void;
    /**
     * Add event listener with automatic cleanup on disconnect.
     */
    on<K extends keyof HTMLElementEventMap>(target: EventTarget, event: K, handler: (e: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): (e: HTMLElementEventMap[K]) => void;
    on(target: EventTarget, event: string, handler: EventListener, options?: AddEventListenerOptions): EventListener;
    /**
     * Emit a custom event with ry: prefix.
     */
    emit<T = void>(name: string, detail?: T, options?: CustomEventInit): boolean;
    /**
     * Get/set component state via data attribute.
     */
    get state(): string;
    set state(value: string);
    /**
     * Query within this element.
     */
    $<E extends Element = Element>(selector: string): E | null;
    /**
     * Query all within this element.
     */
    $$<E extends Element = Element>(selector: string): E[];
    /**
     * Setup a MutationObserver on this element.
     */
    observe(callback: MutationCallback, options?: MutationObserverInit): void;
    /**
     * Wait for next animation frame.
     */
    nextFrame(): Promise<number>;
    /**
     * Trap focus within a container (for modals, dropdowns).
     */
    trapFocus(container: HTMLElement): void;
}
//# sourceMappingURL=ry-element.d.ts.map