Variable Element

Element: {
    AttributeNotFound: any;
    DataAttributeNotFound: any;
    MergePropsCtx: any;
    NoSuchElementException: any;
    ElementRefTypeId: typeof ElementRefTypeId;
    $: {
        a: ElementFactory<"a">;
        abbr: ElementFactory<"abbr">;
        address: ElementFactory<"address">;
        area: ElementFactory<"area">;
        article: ElementFactory<"article">;
        aside: ElementFactory<"aside">;
        audio: ElementFactory<"audio">;
        b: ElementFactory<"b">;
        bdi: ElementFactory<"bdi">;
        bdo: ElementFactory<"bdo">;
        blockquote: ElementFactory<"blockquote">;
        br: ElementFactory<"br">;
        button: ElementFactory<"button">;
        canvas: ElementFactory<"canvas">;
        caption: ElementFactory<"caption">;
        circle: SVGElementFactory<"circle">;
        cite: ElementFactory<"cite">;
        clipPath: SVGElementFactory<"clipPath">;
        code: ElementFactory<"code">;
        col: ElementFactory<"col">;
        colgroup: ElementFactory<"colgroup">;
        data: ElementFactory<"data">;
        datalist: ElementFactory<"datalist">;
        dd: ElementFactory<"dd">;
        defs: SVGElementFactory<"defs">;
        del: ElementFactory<"del">;
        details: ElementFactory<"details">;
        dfn: ElementFactory<"dfn">;
        dialog: ElementFactory<"dialog">;
        div: ElementFactory<"div">;
        dl: ElementFactory<"dl">;
        dt: ElementFactory<"dt">;
        ellipse: SVGElementFactory<"ellipse">;
        em: ElementFactory<"em">;
        embed: ElementFactory<"embed">;
        empty: Child<never, never>;
        feBlend: SVGElementFactory<"feBlend">;
        feColorMatrix: SVGElementFactory<"feColorMatrix">;
        feGaussianBlur: SVGElementFactory<"feGaussianBlur">;
        feOffset: SVGElementFactory<"feOffset">;
        fieldset: ElementFactory<"fieldset">;
        figcaption: ElementFactory<"figcaption">;
        figure: ElementFactory<"figure">;
        filter: SVGElementFactory<"filter">;
        footer: ElementFactory<"footer">;
        foreignObject: SVGElementFactory<"foreignObject">;
        form: ElementFactory<"form">;
        g: SVGElementFactory<"g">;
        h1: ElementFactory<"h1">;
        h2: ElementFactory<"h2">;
        h3: ElementFactory<"h3">;
        h4: ElementFactory<"h4">;
        h5: ElementFactory<"h5">;
        h6: ElementFactory<"h6">;
        header: ElementFactory<"header">;
        hr: ElementFactory<"hr">;
        i: ElementFactory<"i">;
        iframe: ElementFactory<"iframe">;
        image: SVGElementFactory<"image">;
        img: ElementFactory<"img">;
        input: ElementFactory<"input">;
        ins: ElementFactory<"ins">;
        kbd: ElementFactory<"kbd">;
        label: ElementFactory<"label">;
        legend: ElementFactory<"legend">;
        li: ElementFactory<"li">;
        line: SVGElementFactory<"line">;
        linearGradient: SVGElementFactory<"linearGradient">;
        main: ElementFactory<"main">;
        map: ElementFactory<"map">;
        mark: ElementFactory<"mark">;
        marker: SVGElementFactory<"marker">;
        mask: SVGElementFactory<"mask">;
        menu: ElementFactory<"menu">;
        meter: ElementFactory<"meter">;
        nav: ElementFactory<"nav">;
        noscript: ElementFactory<"noscript">;
        object: ElementFactory<"object">;
        of: <A extends ChildNode>(value: A) => Effect<A, never, never>;
        ol: ElementFactory<"ol">;
        optgroup: ElementFactory<"optgroup">;
        option: ElementFactory<"option">;
        output: ElementFactory<"output">;
        p: ElementFactory<"p">;
        path: SVGElementFactory<"path">;
        pattern: SVGElementFactory<"pattern">;
        picture: ElementFactory<"picture">;
        polygon: SVGElementFactory<"polygon">;
        polyline: SVGElementFactory<"polyline">;
        pre: ElementFactory<"pre">;
        progress: ElementFactory<"progress">;
        q: ElementFactory<"q">;
        radialGradient: SVGElementFactory<"radialGradient">;
        rect: SVGElementFactory<"rect">;
        rp: ElementFactory<"rp">;
        rt: ElementFactory<"rt">;
        ruby: ElementFactory<"ruby">;
        s: ElementFactory<"s">;
        samp: ElementFactory<"samp">;
        script: ElementFactory<"script">;
        section: ElementFactory<"section">;
        select: ElementFactory<"select">;
        slot: ElementFactory<"slot">;
        small: ElementFactory<"small">;
        source: ElementFactory<"source">;
        span: ElementFactory<"span">;
        stop: SVGElementFactory<"stop">;
        strong: ElementFactory<"strong">;
        style: ElementFactory<"style">;
        sub: ElementFactory<"sub">;
        summary: ElementFactory<"summary">;
        sup: ElementFactory<"sup">;
        svg: SVGElementFactory<"svg">;
        symbol: SVGElementFactory<"symbol">;
        table: ElementFactory<"table">;
        tbody: ElementFactory<"tbody">;
        td: ElementFactory<"td">;
        template: ElementFactory<"template">;
        text: SVGElementFactory<"text">;
        textarea: ElementFactory<"textarea">;
        textPath: SVGElementFactory<"textPath">;
        tfoot: ElementFactory<"tfoot">;
        th: ElementFactory<"th">;
        thead: ElementFactory<"thead">;
        time: ElementFactory<"time">;
        tr: ElementFactory<"tr">;
        track: ElementFactory<"track">;
        tspan: SVGElementFactory<"tspan">;
        u: ElementFactory<"u">;
        ul: ElementFactory<"ul">;
        use: SVGElementFactory<"use">;
        var: ElementFactory<"var">;
        video: ElementFactory<"video">;
        wbr: ElementFactory<"wbr">;
    };
    addClass: {
        (
            ...classes: string[],
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            ...classes: string[],
        ): Element<A, E, R>;
    };
    addEventListener: {
        <K extends keyof HTMLElementEventMap>(
            event: K,
            handler: (e: HTMLElementEventMap[K]) => void,
            options?: AddEventListenerOptions,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
            self: Element<A, E, R>,
            event: K,
            handler: (e: HTMLElementEventMap[K]) => void,
            options?: AddEventListenerOptions,
        ): Element<A, E, R>;
    };
    appendChild: {
        <E2, R2>(
            child: Child<E2, R2>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E2 | E, R2 | R>;
        <A extends HTMLElement | SVGElement, E, R, E2, R2>(
            self: Element<A, E, R>,
            child: Child<E2, R2>,
        ): Element<A, E | E2, R | R2>;
    };
    bindAttribute: {
        <V>(
            name: string,
            readable: Readable.Readable<V>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R, V>(
            self: Element<A, E, R>,
            name: string,
            readable: Readable.Readable<V>,
        ): Element<A, E, R>;
    };
    bindBooleanAttribute: {
        (
            name: string,
            readable: Readable.Readable<boolean>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            name: string,
            readable: Readable.Readable<boolean>,
        ): Element<A, E, R>;
    };
    bindClass: {
        (
            className: string,
            readable: Readable.Readable<boolean>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            className: string,
            readable: Readable.Readable<boolean>,
        ): Element<A, E, R>;
    };
    bindData: {
        (
            key: string,
            readable: Readable.Readable<string>,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
            key: string,
            readable: Readable.Readable<string>,
        ): Element<A, E, R>;
    };
    bindInnerHTML: {
        (
            readable: Readable.Readable<string>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            readable: Readable.Readable<string>,
        ): Element<A, E, R>;
    };
    bindInputValue: {
        (
            readable: Readable.Readable<unknown>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            readable: Readable.Readable<unknown>,
        ): Element<A, E, R>;
    };
    bindStyle: {
        (
            property: string,
            readable: Readable.Readable<string>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            property: string,
            readable: Readable.Readable<string>,
        ): Element<A, E, R>;
    };
    bindTextContent: {
        (
            readable: Readable.Readable<string>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            readable: Readable.Readable<string>,
        ): Element<A, E, R>;
    };
    bindToggleClass: {
        (
            className: string,
            readable: Readable.Readable<boolean>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            className: string,
            readable: Readable.Readable<boolean>,
        ): Element<A, E, R>;
    };
    blur: <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    clearChildren: <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    click: <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    contains: {
        (
            node: Node,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
        ) => Effect<boolean, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
            node: Node,
        ): Effect<boolean, E, R>;
    };
    ElementRefTypeId: unique symbol;
    empty: Child<never, never>;
    focus: <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    focusFirst: {
        (
            selector: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
        ) => Effect<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
            selector: string,
        ): Effect<A, E, R>;
    };
    focusLast: {
        (
            selector: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
        ) => Effect<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
            selector: string,
        ): Effect<A, E, R>;
    };
    getBoundingClientRect: <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<DOMRect, E, R>;
    getData: {
        (
            key: string,
        ): <A extends HTMLElement, E, R>(
            self: Effect<A, E, R>,
        ) => Effect<string | undefined, E, R>;
        <A extends HTMLElement, E, R>(
            self: Effect<A, E, R>,
            key: string,
        ): Effect<string | undefined, E, R>;
    };
    getId: <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<string, E, R>;
    hasAttribute: {
        (
            name: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
        ) => Effect<boolean, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Effect<A, E, R>,
            name: string,
        ): Effect<boolean, E, R>;
    };
    make: <K extends keyof HTMLElementTagNameMap>(
        tagName: K,
    ) => Element<HTMLElementTagNameMap[K]>;
    makeSVG: <K extends keyof SVGElementTagNameMap>(
        tagName: K,
    ) => Element<SVGElementTagNameMap[K]>;
    of: <A extends ChildNode>(value: A) => Effect<A, never, never>;
    on: {
        <K extends keyof HTMLElementEventMap>(
            event: K,
            handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
            self: Element<A, E, R>,
            event: K,
            handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
        ): Element<A, E, R>;
    };
    once: {
        <K extends keyof HTMLElementEventMap>(
            event: K,
            handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
            self: Element<A, E, R>,
            event: K,
            handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
        ): Element<A, E, R>;
    };
    removeAttribute: {
        (
            name: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            name: string,
        ): Element<A, E, R>;
    };
    removeClass: {
        (
            ...classes: string[],
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            ...classes: string[],
        ): Element<A, E, R>;
    };
    removeData: {
        (
            key: string,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
            key: string,
        ): Element<A, E, R>;
    };
    removeEventListener: {
        <K extends keyof HTMLElementEventMap>(
            event: K,
            handler: (e: HTMLElementEventMap[K]) => void,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
            self: Element<A, E, R>,
            event: K,
            handler: (e: HTMLElementEventMap[K]) => void,
        ): Element<A, E, R>;
    };
    removeStyle: {
        (
            property: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            property: string,
        ): Element<A, E, R>;
    };
    replaceClass: {
        (
            oldClass: string,
            newClass: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            oldClass: string,
            newClass: string,
        ): Element<A, E, R>;
    };
    setAttribute: {
        (
            name: string,
            value: string | number | boolean,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            name: string,
            value: string | number | boolean,
        ): Element<A, E, R>;
    };
    setClass: {
        (
            className: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            className: string,
        ): Element<A, E, R>;
    };
    setData: {
        (
            key: string,
            value: string,
        ): <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement, E, R>(
            self: Element<A, E, R>,
            key: string,
            value: string,
        ): Element<A, E, R>;
    };
    setInnerHTML: {
        (
            html: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            html: string,
        ): Element<A, E, R>;
    };
    setInputValue: {
        (
            value: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            value: string,
        ): Element<A, E, R>;
    };
    setRef: {
        <A extends HTMLElement | SVGElement>(
            ref: ElementRef<A>,
        ): <E, R>(self: Element<A, E, R>) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            ref: ElementRef<A>,
        ): Element<A, E, R>;
    };
    setStyle: {
        (
            property: string,
            value: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            property: string,
            value: string,
        ): Element<A, E, R>;
    };
    setStyles: {
        (
            styles: Record<string, string | Readable.Readable<string>>,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            styles: Record<string, string | Readable.Readable<string>>,
        ): Element<A, E, R>;
    };
    setTextContent: {
        (
            text: string,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            text: string,
        ): Element<A, E, R>;
    };
    tap: {
        <A extends HTMLElement | SVGElement>(
            fn: (el: A) => void,
        ): <E, R>(self: Element<A, E, R>) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            fn: (el: A) => void,
        ): Element<A, E, R>;
    };
    tapEffect: {
        <A extends HTMLElement | SVGElement, E2, R2>(
            fn: (el: A) => Effect<unknown, E2, R2>,
        ): <E, R>(self: Element<A, E, R>) => Element<A, E2 | E, R2 | R>;
        <A extends HTMLElement | SVGElement, E, R, E2, R2>(
            self: Element<A, E, R>,
            fn: (el: A) => Effect<unknown, E2, R2>,
        ): Element<A, E | E2, R | R2>;
    };
    toggleAttribute: {
        (
            name: string,
            force?: boolean,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            name: string,
            force?: boolean,
        ): Element<A, E, R>;
    };
    toggleClass: {
        (
            className: string,
            force?: boolean,
        ): <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
        ) => Element<A, E, R>;
        <A extends HTMLElement | SVGElement, E, R>(
            self: Element<A, E, R>,
            className: string,
            force?: boolean,
        ): Element<A, E, R>;
    };
    getUnsafe<T extends Element>(ref: ElementRef<T>): T | null;
    isElementRef(value: unknown): value is ElementRef<HTMLElement | SVGElement>;
    ref<T extends Element = HTMLElement | SVGElement>(): Effect<ElementRef<T>>;
}

Type Declaration

ElementRefTypeId: typeof ElementRefTypeId
$: {
    a: ElementFactory<"a">;
    abbr: ElementFactory<"abbr">;
    address: ElementFactory<"address">;
    area: ElementFactory<"area">;
    article: ElementFactory<"article">;
    aside: ElementFactory<"aside">;
    audio: ElementFactory<"audio">;
    b: ElementFactory<"b">;
    bdi: ElementFactory<"bdi">;
    bdo: ElementFactory<"bdo">;
    blockquote: ElementFactory<"blockquote">;
    br: ElementFactory<"br">;
    button: ElementFactory<"button">;
    canvas: ElementFactory<"canvas">;
    caption: ElementFactory<"caption">;
    circle: SVGElementFactory<"circle">;
    cite: ElementFactory<"cite">;
    clipPath: SVGElementFactory<"clipPath">;
    code: ElementFactory<"code">;
    col: ElementFactory<"col">;
    colgroup: ElementFactory<"colgroup">;
    data: ElementFactory<"data">;
    datalist: ElementFactory<"datalist">;
    dd: ElementFactory<"dd">;
    defs: SVGElementFactory<"defs">;
    del: ElementFactory<"del">;
    details: ElementFactory<"details">;
    dfn: ElementFactory<"dfn">;
    dialog: ElementFactory<"dialog">;
    div: ElementFactory<"div">;
    dl: ElementFactory<"dl">;
    dt: ElementFactory<"dt">;
    ellipse: SVGElementFactory<"ellipse">;
    em: ElementFactory<"em">;
    embed: ElementFactory<"embed">;
    empty: Child<never, never>;
    feBlend: SVGElementFactory<"feBlend">;
    feColorMatrix: SVGElementFactory<"feColorMatrix">;
    feGaussianBlur: SVGElementFactory<"feGaussianBlur">;
    feOffset: SVGElementFactory<"feOffset">;
    fieldset: ElementFactory<"fieldset">;
    figcaption: ElementFactory<"figcaption">;
    figure: ElementFactory<"figure">;
    filter: SVGElementFactory<"filter">;
    footer: ElementFactory<"footer">;
    foreignObject: SVGElementFactory<"foreignObject">;
    form: ElementFactory<"form">;
    g: SVGElementFactory<"g">;
    h1: ElementFactory<"h1">;
    h2: ElementFactory<"h2">;
    h3: ElementFactory<"h3">;
    h4: ElementFactory<"h4">;
    h5: ElementFactory<"h5">;
    h6: ElementFactory<"h6">;
    header: ElementFactory<"header">;
    hr: ElementFactory<"hr">;
    i: ElementFactory<"i">;
    iframe: ElementFactory<"iframe">;
    image: SVGElementFactory<"image">;
    img: ElementFactory<"img">;
    input: ElementFactory<"input">;
    ins: ElementFactory<"ins">;
    kbd: ElementFactory<"kbd">;
    label: ElementFactory<"label">;
    legend: ElementFactory<"legend">;
    li: ElementFactory<"li">;
    line: SVGElementFactory<"line">;
    linearGradient: SVGElementFactory<"linearGradient">;
    main: ElementFactory<"main">;
    map: ElementFactory<"map">;
    mark: ElementFactory<"mark">;
    marker: SVGElementFactory<"marker">;
    mask: SVGElementFactory<"mask">;
    menu: ElementFactory<"menu">;
    meter: ElementFactory<"meter">;
    nav: ElementFactory<"nav">;
    noscript: ElementFactory<"noscript">;
    object: ElementFactory<"object">;
    of: <A extends ChildNode>(value: A) => Effect<A, never, never>;
    ol: ElementFactory<"ol">;
    optgroup: ElementFactory<"optgroup">;
    option: ElementFactory<"option">;
    output: ElementFactory<"output">;
    p: ElementFactory<"p">;
    path: SVGElementFactory<"path">;
    pattern: SVGElementFactory<"pattern">;
    picture: ElementFactory<"picture">;
    polygon: SVGElementFactory<"polygon">;
    polyline: SVGElementFactory<"polyline">;
    pre: ElementFactory<"pre">;
    progress: ElementFactory<"progress">;
    q: ElementFactory<"q">;
    radialGradient: SVGElementFactory<"radialGradient">;
    rect: SVGElementFactory<"rect">;
    rp: ElementFactory<"rp">;
    rt: ElementFactory<"rt">;
    ruby: ElementFactory<"ruby">;
    s: ElementFactory<"s">;
    samp: ElementFactory<"samp">;
    script: ElementFactory<"script">;
    section: ElementFactory<"section">;
    select: ElementFactory<"select">;
    slot: ElementFactory<"slot">;
    small: ElementFactory<"small">;
    source: ElementFactory<"source">;
    span: ElementFactory<"span">;
    stop: SVGElementFactory<"stop">;
    strong: ElementFactory<"strong">;
    style: ElementFactory<"style">;
    sub: ElementFactory<"sub">;
    summary: ElementFactory<"summary">;
    sup: ElementFactory<"sup">;
    svg: SVGElementFactory<"svg">;
    symbol: SVGElementFactory<"symbol">;
    table: ElementFactory<"table">;
    tbody: ElementFactory<"tbody">;
    td: ElementFactory<"td">;
    template: ElementFactory<"template">;
    text: SVGElementFactory<"text">;
    textarea: ElementFactory<"textarea">;
    textPath: SVGElementFactory<"textPath">;
    tfoot: ElementFactory<"tfoot">;
    th: ElementFactory<"th">;
    thead: ElementFactory<"thead">;
    time: ElementFactory<"time">;
    tr: ElementFactory<"tr">;
    track: ElementFactory<"track">;
    tspan: SVGElementFactory<"tspan">;
    u: ElementFactory<"u">;
    ul: ElementFactory<"ul">;
    use: SVGElementFactory<"use">;
    var: ElementFactory<"var">;
    video: ElementFactory<"video">;
    wbr: ElementFactory<"wbr">;
}
Namespace containing all HTML and SVG element factories.
- a: ElementFactory<"a">
- abbr: ElementFactory<"abbr">
- address: ElementFactory<"address">
- area: ElementFactory<"area">
- article: ElementFactory<"article">
- aside: ElementFactory<"aside">
- audio: ElementFactory<"audio">
- b: ElementFactory<"b">
- bdi: ElementFactory<"bdi">
- bdo: ElementFactory<"bdo">
- blockquote: ElementFactory<"blockquote">
- br: ElementFactory<"br">
- button: ElementFactory<"button">
- canvas: ElementFactory<"canvas">
- caption: ElementFactory<"caption">
- circle: SVGElementFactory<"circle">
- cite: ElementFactory<"cite">
- clipPath: SVGElementFactory<"clipPath">
- code: ElementFactory<"code">
- col: ElementFactory<"col">
- colgroup: ElementFactory<"colgroup">
- data: ElementFactory<"data">
- datalist: ElementFactory<"datalist">
- dd: ElementFactory<"dd">
- defs: SVGElementFactory<"defs">
- del: ElementFactory<"del">
- details: ElementFactory<"details">
- dfn: ElementFactory<"dfn">
- dialog: ElementFactory<"dialog">
- div: ElementFactory<"div">
- dl: ElementFactory<"dl">
- dt: ElementFactory<"dt">
- ellipse: SVGElementFactory<"ellipse">
- em: ElementFactory<"em">
- embed: ElementFactory<"embed">
- empty: Child<never, never>
  An empty child effect.
- feBlend: SVGElementFactory<"feBlend">
- feColorMatrix: SVGElementFactory<"feColorMatrix">
- feGaussianBlur: SVGElementFactory<"feGaussianBlur">
- feOffset: SVGElementFactory<"feOffset">
- fieldset: ElementFactory<"fieldset">
- figcaption: ElementFactory<"figcaption">
- figure: ElementFactory<"figure">
- filter: SVGElementFactory<"filter">
- footer: ElementFactory<"footer">
- foreignObject: SVGElementFactory<"foreignObject">
- form: ElementFactory<"form">
- g: SVGElementFactory<"g">
- h1: ElementFactory<"h1">
- h2: ElementFactory<"h2">
- h3: ElementFactory<"h3">
- h4: ElementFactory<"h4">
- h5: ElementFactory<"h5">
- h6: ElementFactory<"h6">
- header: ElementFactory<"header">
- hr: ElementFactory<"hr">
- i: ElementFactory<"i">
- iframe: ElementFactory<"iframe">
- image: SVGElementFactory<"image">
- img: ElementFactory<"img">
- input: ElementFactory<"input">
- ins: ElementFactory<"ins">
- kbd: ElementFactory<"kbd">
- label: ElementFactory<"label">
- legend: ElementFactory<"legend">
- li: ElementFactory<"li">
- line: SVGElementFactory<"line">
- linearGradient: SVGElementFactory<"linearGradient">
- main: ElementFactory<"main">
- map: ElementFactory<"map">
- mark: ElementFactory<"mark">
- marker: SVGElementFactory<"marker">
- mask: SVGElementFactory<"mask">
- menu: ElementFactory<"menu">
- meter: ElementFactory<"meter">
- nav: ElementFactory<"nav">
- noscript: ElementFactory<"noscript">
- object: ElementFactory<"object">
- of: <A extends ChildNode>(value: A) => Effect<A, never, never>
  Lift a primitive value into a Child.
- ol: ElementFactory<"ol">
- optgroup: ElementFactory<"optgroup">
- option: ElementFactory<"option">
- output: ElementFactory<"output">
- p: ElementFactory<"p">
- path: SVGElementFactory<"path">
- pattern: SVGElementFactory<"pattern">
- picture: ElementFactory<"picture">
- polygon: SVGElementFactory<"polygon">
- polyline: SVGElementFactory<"polyline">
- pre: ElementFactory<"pre">
- progress: ElementFactory<"progress">
- q: ElementFactory<"q">
- radialGradient: SVGElementFactory<"radialGradient">
- rect: SVGElementFactory<"rect">
- rp: ElementFactory<"rp">
- rt: ElementFactory<"rt">
- ruby: ElementFactory<"ruby">
- s: ElementFactory<"s">
- samp: ElementFactory<"samp">
- script: ElementFactory<"script">
- section: ElementFactory<"section">
- select: ElementFactory<"select">
- slot: ElementFactory<"slot">
- small: ElementFactory<"small">
- source: ElementFactory<"source">
- span: ElementFactory<"span">
- stop: SVGElementFactory<"stop">
- strong: ElementFactory<"strong">
- style: ElementFactory<"style">
- sub: ElementFactory<"sub">
- summary: ElementFactory<"summary">
- sup: ElementFactory<"sup">
- svg: SVGElementFactory<"svg">
- symbol: SVGElementFactory<"symbol">
- table: ElementFactory<"table">
- tbody: ElementFactory<"tbody">
- td: ElementFactory<"td">
- template: ElementFactory<"template">
- text: SVGElementFactory<"text">
- textarea: ElementFactory<"textarea">
- textPath: SVGElementFactory<"textPath">
- tfoot: ElementFactory<"tfoot">
- th: ElementFactory<"th">
- thead: ElementFactory<"thead">
- time: ElementFactory<"time">
- tr: ElementFactory<"tr">
- track: ElementFactory<"track">
- tspan: SVGElementFactory<"tspan">
- u: ElementFactory<"u">
- ul: ElementFactory<"ul">
- use: SVGElementFactory<"use">
- var: ElementFactory<"var">
- video: ElementFactory<"video">
- wbr: ElementFactory<"wbr">
addClass: {
    (
        ...classes: string[],
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        ...classes: string[],
    ): Element<A, E, R>;
}
Add one or more classes to the element. Note: Uses direct classList manipulation (client-side only).
addEventListener: {
    <K extends keyof HTMLElementEventMap>(
        event: K,
        handler: (e: HTMLElementEventMap[K]) => void,
        options?: AddEventListenerOptions,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
        self: Element<A, E, R>,
        event: K,
        handler: (e: HTMLElementEventMap[K]) => void,
        options?: AddEventListenerOptions,
    ): Element<A, E, R>;
}
Add an event listener to the element (low-level). Unlike on, this doesn't automatically clean up - you must call removeEventListener. Useful for manual event management in Effect.async patterns.
appendChild: {
    <E2, R2>(
        child: Child<E2, R2>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E2 | E, R2 | R>;
    <A extends HTMLElement | SVGElement, E, R, E2, R2>(
        self: Element<A, E, R>,
        child: Child<E2, R2>,
    ): Element<A, E | E2, R | R2>;
}
Append a child to the element.
bindAttribute: {
    <V>(
        name: string,
        readable: Readable.Readable<V>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R, V>(
        self: Element<A, E, R>,
        name: string,
        readable: Readable.Readable<V>,
    ): Element<A, E, R>;
}
Bind an attribute to a Readable, updating when it changes.
bindBooleanAttribute: {
    (
        name: string,
        readable: Readable.Readable<boolean>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        name: string,
        readable: Readable.Readable<boolean>,
    ): Element<A, E, R>;
}
Bind a boolean attribute to a Readable, adding/removing when it changes. Unlike bindAttribute which stringifies, this adds the attribute (empty string) when true and removes it when false.
bindClass: {
    (
        className: string,
        readable: Readable.Readable<boolean>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        className: string,
        readable: Readable.Readable<boolean>,
    ): Element<A, E, R>;
}
Bind a class to a Readable boolean, adding/removing when it changes.
bindData: {
    (
        key: string,
        readable: Readable.Readable<string>,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
        key: string,
        readable: Readable.Readable<string>,
    ): Element<A, E, R>;
}
Bind a data attribute to a Readable, updating when it changes.
bindInnerHTML: {
    (
        readable: Readable.Readable<string>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        readable: Readable.Readable<string>,
    ): Element<A, E, R>;
}
Bind innerHTML to a Readable, updating when it changes.
bindInputValue: {
    (
        readable: Readable.Readable<unknown>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        readable: Readable.Readable<unknown>,
    ): Element<A, E, R>;
}
Bind input value to a Readable, updating when it changes. Uses setInputValue which preserves cursor position.
bindStyle: {
    (
        property: string,
        readable: Readable.Readable<string>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        property: string,
        readable: Readable.Readable<string>,
    ): Element<A, E, R>;
}
Bind a style property to a Readable, updating when it changes.
bindTextContent: {
    (
        readable: Readable.Readable<string>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        readable: Readable.Readable<string>,
    ): Element<A, E, R>;
}
Bind text content to a Readable, updating when it changes.
bindToggleClass: {
    (
        className: string,
        readable: Readable.Readable<boolean>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        className: string,
        readable: Readable.Readable<boolean>,
    ): Element<A, E, R>;
}
Toggle a class based on a Readable boolean. Alias for bindClass.
blur: <A extends HTMLElement | SVGElement, E, R>(
self: Element<A, E, R>,
) => Element<A, E, R>
Blur (unfocus) the element.
clearChildren: <A extends HTMLElement | SVGElement, E, R>(
self: Element<A, E, R>,
) => Element<A, E, R>
Clear all children from the element.
click: <A extends HTMLElement, E, R>(self: Element<A, E, R>) => Element<A, E, R>
Programmatically click the element.
contains: {
    (
        node: Node,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<boolean, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
        node: Node,
    ): Effect<boolean, E, R>;
}
Check if an element contains another node. Works with any Effect that produces an element.
ElementRefTypeId: unique symbol
empty: Child<never, never>
An empty child (produces empty array).
focus: <A extends HTMLElement | SVGElement, E, R>(
self: Element<A, E, R>,
) => Element<A, E, R>
Focus the element.
focusFirst: {
    (
        selector: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
        selector: string,
    ): Effect<A, E, R>;
}
Focus the first element within that matches the selector. Works with any Effect that produces an element.
focusLast: {
    (
        selector: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
        selector: string,
    ): Effect<A, E, R>;
}
Focus the last element within that matches the selector. Works with any Effect that produces an element.
getBoundingClientRect: <A extends HTMLElement | SVGElement, E, R>(
self: Effect<A, E, R>,
) => Effect<DOMRect, E, R>
Get the bounding client rect of the element. Works with any Effect that produces an element.
getData: {
    (
        key: string,
    ): <A extends HTMLElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<string | undefined, E, R>;
    <A extends HTMLElement, E, R>(
        self: Effect<A, E, R>,
        key: string,
    ): Effect<string | undefined, E, R>;
}
Get a data attribute from the element. Works with any Effect that produces an element.
getId: <A extends HTMLElement | SVGElement, E, R>(
self: Effect<A, E, R>,
) => Effect<string, E, R>
Get the element's ID attribute. Works with any Effect that produces an element.
hasAttribute: {
    (
        name: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
    ) => Effect<boolean, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Effect<A, E, R>,
        name: string,
    ): Effect<boolean, E, R>;
}
Check if the element has a specific attribute. Works with any Effect that produces an element.
make: <K extends keyof HTMLElementTagNameMap>(
tagName: K,
) => Element<HTMLElementTagNameMap[K]>
Create an HTML element.
makeSVG: <K extends keyof SVGElementTagNameMap>(
tagName: K,
) => Element<SVGElementTagNameMap[K]>
Create an SVG element.
of: <A extends ChildNode>(value: A) => Effect<A, never, never>
Lift a value into a Child effect.
on: {
    <K extends keyof HTMLElementEventMap>(
        event: K,
        handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
        self: Element<A, E, R>,
        event: K,
        handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
    ): Element<A, E, R>;
}
Add an event listener to the element.
once: {
    <K extends keyof HTMLElementEventMap>(
        event: K,
        handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
        self: Element<A, E, R>,
        event: K,
        handler: (e: HTMLElementEventMap[K]) => Effect<void, never, never>,
    ): Element<A, E, R>;
}
Add a one-time event listener to the element.
removeAttribute: {
    (
        name: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        name: string,
    ): Element<A, E, R>;
}
Remove an attribute from the element.
removeClass: {
    (
        ...classes: string[],
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        ...classes: string[],
    ): Element<A, E, R>;
}
Remove one or more classes from the element. Note: Uses direct classList manipulation (client-side only).
removeData: {
    (
        key: string,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
        key: string,
    ): Element<A, E, R>;
}
Remove a data attribute from the element.
removeEventListener: {
    <K extends keyof HTMLElementEventMap>(
        event: K,
        handler: (e: HTMLElementEventMap[K]) => void,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R, K extends keyof HTMLElementEventMap>(
        self: Element<A, E, R>,
        event: K,
        handler: (e: HTMLElementEventMap[K]) => void,
    ): Element<A, E, R>;
}
Remove an event listener from the element. Use with addEventListener for manual event management.
removeStyle: {
    (
        property: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        property: string,
    ): Element<A, E, R>;
}
Remove a style property from the element.
replaceClass: {
    (
        oldClass: string,
        newClass: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        oldClass: string,
        newClass: string,
    ): Element<A, E, R>;
}
Replace one class with another. Note: Uses direct classList manipulation (client-side only).
setAttribute: {
    (
        name: string,
        value: string | number | boolean,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        name: string,
        value: string | number | boolean,
    ): Element<A, E, R>;
}
Set an attribute on the element.
setClass: {
    (
        className: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        className: string,
    ): Element<A, E, R>;
}
Set the class attribute (replaces existing classes).
setData: {
    (
        key: string,
        value: string,
    ): <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement, E, R>(
        self: Element<A, E, R>,
        key: string,
        value: string,
    ): Element<A, E, R>;
}
Set a data attribute on the element.
setInnerHTML: {
    (
        html: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        html: string,
    ): Element<A, E, R>;
}
Set the innerHTML of the element. WARNING: Be careful with untrusted content to avoid XSS.
setInputValue: {
    (
        value: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        value: string,
    ): Element<A, E, R>;
}
Set the value of an input element. Uses setInputValue which preserves cursor position.
setRef: {
    <A extends HTMLElement | SVGElement>(
        ref: ElementRef<A>,
    ): <E, R>(self: Element<A, E, R>) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        ref: ElementRef<A>,
    ): Element<A, E, R>;
}
Bind an ElementRef to this element.
setStyle: {
    (
        property: string,
        value: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        property: string,
        value: string,
    ): Element<A, E, R>;
}
Set a style property on the element.
setStyles: {
    (
        styles: Record<string, string | Readable.Readable<string>>,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        styles: Record<string, string | Readable.Readable<string>>,
    ): Element<A, E, R>;
}
Set multiple style properties on the element at once. Values can be static strings or Readable for reactive bindings.
setTextContent: {
    (
        text: string,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        text: string,
    ): Element<A, E, R>;
}
Set the text content of the element.
tap: {
    <A extends HTMLElement | SVGElement>(
        fn: (el: A) => void,
    ): <E, R>(self: Element<A, E, R>) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        fn: (el: A) => void,
    ): Element<A, E, R>;
}
Tap into the element to perform a side effect.
tapEffect: {
    <A extends HTMLElement | SVGElement, E2, R2>(
        fn: (el: A) => Effect<unknown, E2, R2>,
    ): <E, R>(self: Element<A, E, R>) => Element<A, E2 | E, R2 | R>;
    <A extends HTMLElement | SVGElement, E, R, E2, R2>(
        self: Element<A, E, R>,
        fn: (el: A) => Effect<unknown, E2, R2>,
    ): Element<A, E | E2, R | R2>;
}
Tap into the element with an Effect.
toggleAttribute: {
    (
        name: string,
        force?: boolean,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        name: string,
        force?: boolean,
    ): Element<A, E, R>;
}
Toggle a boolean attribute.
toggleClass: {
    (
        className: string,
        force?: boolean,
    ): <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
    ) => Element<A, E, R>;
    <A extends HTMLElement | SVGElement, E, R>(
        self: Element<A, E, R>,
        className: string,
        force?: boolean,
    ): Element<A, E, R>;
}
Toggle a class on the element. Note: Uses direct classList manipulation (client-side only).
getUnsafe: function
- getUnsafe<T extends Element>(ref: ElementRef<T>): T | null
  Synchronously get the element from a ref, returning null if not mounted. Use this for imperative code paths where you need synchronous access.
  Type Parameters
  - T extends Element
  Parameters
  - ref: ElementRef<T>
    The element ref created by Element.ref()
  Returns T | null
  The element or null if not mounted
  Example
  const el = Element.getUnsafe(buttonRef); if (el) { el.style.transform = `translateX(${x}px)`; }
  - Defined in packages/dom/src/Element/ref.ts:269
isElementRef: function
- isElementRef(value: unknown): value is ElementRef<HTMLElement | SVGElement>
  Check if the given value is an ElementRef.
  Parameters
  - value: unknown
  Returns value is ElementRef<HTMLElement | SVGElement>
  - Defined in packages/dom/src/Element/ref.ts:102
ref: function
- ref<T extends Element = HTMLElement | SVGElement>(): Effect<ElementRef<T>>
  Create a new element ref that can be passed to the ref prop and used to access the element in Effects.
  Type Parameters
  - T extends Element = HTMLElement | SVGElement
  Returns Effect<ElementRef<T>>
  An Effect that when yielded returns an ElementRef
  Example
  const buttonRef = yield* Element.ref<HTMLButtonElement>(); const handleClick = () => buttonRef.pipe( Element.addClass("clicked"), Element.focus, Effect.asVoid ); return yield* $.button({ ref: buttonRef, onClick: handleClick }, "Click");
  - Defined in packages/dom/src/Element/ref.ts:176