form-associated-helpers

/** * @template {{ new (...args: any[]): HTMLElement }} T * @param {T} superclass */ export function VanillaFormAssociatedGettersMixin<T extends new (...args: any[]) => HTMLElement>(superclass: T): T & (new (...args: any[]) => import("../../internal/form-associated-getters.js").AbstractGetters<T>); /** * A mixin of form associated helpers that get added to a class with attachInternals. * This opinionated version extends the above formAssociated and handles common conventions I like. * Required properties: { value, disabled, formControl, validationTarget } * * @see https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/ * @template {{ new (...args: any[]): HTMLElement }} T * @param {T} superclass */ export function VanillaFormAssociatedMixin<T extends new (...args: any[]) => HTMLElement>(superclass: T): { new (...args: any[]): { role: string | null; /** * @type {HTMLInputElement["name"]} */ name: HTMLInputElement["name"]; /** * `this.type` is used by ElementInternals. * @type {string} */ type: string; /** * Make sure if you're using a library that "reflects" properties to attributes, you don't reflect this `disabled.` * @type {boolean} */ disabled: boolean; /** * Generally form controls can have "required", this may not be necessary here, but is a nice convention. * @type {boolean} */ required: boolean; /** * Tracks when a user blurs from a form control. * @type {boolean} */ hasInteracted: boolean; /** * While not generally encouraged, you can add instance level validators. * These validators should not rely on an attribute, or should already have a "watched" attribute * to know when to re-run the validator. * @type {Array<import("../types.js").Validator>} */ validators: Array<import("../types.js").Validator>; /** * @protected */ __boundHandleInvalid: (e: Event) => void; /** * @protected */ __boundHandleInteraction: (e: Event) => void; /** * @protected */ __boundHandleSubmit: (e: Event) => void; /** These are dirty checks for custom errors. In Safari, {customError: true} always happens with `setValidity()`. This is the workaround. */ /** * @private */ __hasCustomError: boolean; /** * @private */ __customErrorMessage: string; connectedCallback(): void; disconnectedCallback(): void; /** * Handles a submit to a form. Dont use this directly. Instead use `submitCallback (form: HTMLFormElement) {}` for reacting to when the element has been submitted by the form. * @param {Event} e * @private */ __handleSubmit(e: Event): void; /** * Use this callback for when the element has been part of a form that was attempted to be submitted. * If a form is invalid, this will not fire. * If someone catches the event earlier in the tree and stops propagation, you this event will not fire. */ submitCallback(): void; /** * Override this to do things like emit your own `invalid` event. * @param {Event} e */ handleInvalid(e: Event): void; /** * Sets `this.hasInteracted = true` to true when the users focus / clicks the element. * Override this to have your own `handleInteraction` function. * @param {Event} e */ handleInteraction(e: Event): void; /** * This function technically does not exist with internals, but exists on native form elements. * This is backported for users familiar with the API. * @param {string} message */ setCustomValidity(message: string): void; /** * @param {string} name * @param {null | string} oldVal * @param {null | string} newVal */ attributeChangedCallback(name: string, oldVal: null | string, newVal: null | string): void; /** * Called when the form is being reset. (e.g. user pressed `<input[type=reset]>` button). Custom element should clear whatever value set by the user. * Generally it is best to call this *after* setting any properties you need as this will call `this.updateValidity()` and `this.setFormValue()` * @example * class MyClass extends VanillaFormAssociatedMixin(HTMLElement) { * formResetCallback () { * // set values first for validation * this.value = this.defaultValue * // call the reset handler to update validity. * super.formResetCallback() * } * } * @returns {void} */ formResetCallback(): void; /** * Called when the disabled state of the form changes. * @param {boolean} isDisabled * @returns {void} */ formDisabledCallback(isDisabled: boolean): void; /** * Called when the browser is trying to restore element’s state to state in which case reason is “restore”, or when the browser is trying to fulfill autofill on behalf of user in which case reason is “autocomplete”. In the case of “restore”, state is a string, File, or FormData object previously set as the second argument to setFormValue. * @param {unknown} state * @param {"restore" | "autocomplete"} reason * @returns {void} */ formStateRestoreCallback(state: unknown, reason: "restore" | "autocomplete"): void; /** * This should generally not be used by end users. This is intended for custom validators. * @param {Parameters<ElementInternals["setValidity"]>} params */ setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined, anchor?: HTMLElement | undefined): void; reportValidity(): boolean; checkValidity(): boolean; /** * @param {Parameters<ElementInternals["setFormValue"]>} args */ setFormValue(value: string | FormData | File | null, state?: string | FormData | File | null | undefined): void; /** * This function generally just returns `this.value`. Occasionally, you may want to apply transforms to your `this.value` prior to setting it on the form. This is the place to do that. * @returns {File | null | FormData | string} * @example * class MyElement extends VanillaFormAssociatedMixin(HTMLElement) { * toFormValue () { * const elementValue = this.value // => ["1", "2", "3"] * // Transform elementValue array into a comma separated string. * return elementValue.join(", ") * } * } */ toFormValue(): File | null | FormData | string; resetValidity(): void; updateValidity(): void; updateInteractionState(): void; addCustomState(state: string): void; deleteCustomState(state: string): void; toggleCustomState(state: string, bool: boolean): void; hasCustomState(state: string): boolean; accessKey: string; readonly accessKeyLabel: string; autocapitalize: string; dir: string; draggable: boolean; hidden: boolean; inert: boolean; innerText: string; lang: string; readonly offsetHeight: number; readonly offsetLeft: number; readonly offsetParent: Element | null; readonly offsetTop: number; readonly offsetWidth: number; outerText: string; popover: string | null; spellcheck: boolean; title: string; translate: boolean; attachInternals(): ElementInternals; click(): void; hidePopover(): void; showPopover(): void; togglePopover(force?: boolean | undefined): void; addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; readonly attributes: NamedNodeMap; readonly classList: DOMTokenList; className: string; readonly clientHeight: number; readonly clientLeft: number; readonly clientTop: number; readonly clientWidth: number; id: string; readonly localName: string; readonly namespaceURI: string | null; onfullscreenchange: ((this: Element, ev: Event) => any) | null; onfullscreenerror: ((this: Element, ev: Event) => any) | null; outerHTML: string; readonly ownerDocument: Document; readonly part: DOMTokenList; readonly prefix: string | null; readonly scrollHeight: number; scrollLeft: number; scrollTop: number; readonly scrollWidth: number; readonly shadowRoot: ShadowRoot | null; slot: string; readonly tagName: string; attachShadow(init: ShadowRootInit): ShadowRoot; checkVisibility(options?: CheckVisibilityOptions | undefined): boolean; closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null; closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null; closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null; closest<E extends Element = Element>(selectors: string): E | null; computedStyleMap(): StylePropertyMapReadOnly; getAttribute(qualifiedName: string): string | null; getAttributeNS(namespace: string | null, localName: string): string | null; getAttributeNames(): string[]; getAttributeNode(qualifiedName: string): Attr | null; getAttributeNodeNS(namespace: string | null, localName: string): Attr | null; getBoundingClientRect(): DOMRect; getClientRects(): DOMRectList; getElementsByClassName(classNames: string): HTMLCollectionOf<Element>; getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>; getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>; getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>; getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>; getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>; getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>; hasAttribute(qualifiedName: string): boolean; hasAttributeNS(namespace: string | null, localName: string): boolean; hasAttributes(): boolean; hasPointerCapture(pointerId: number): boolean; insertAdjacentElement(where: InsertPosition, element: Element): Element | null; insertAdjacentHTML(position: InsertPosition, text: string): void; insertAdjacentText(where: InsertPosition, data: string): void; matches(selectors: string): boolean; releasePointerCapture(pointerId: number): void; removeAttribute(qualifiedName: string): void; removeAttributeNS(namespace: string | null, localName: string): void; removeAttributeNode(attr: Attr): Attr; requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>; requestPointerLock(): void; scroll(options?: ScrollToOptions | undefined): void; scroll(x: number, y: number): void; scrollBy(options?: ScrollToOptions | undefined): void; scrollBy(x: number, y: number): void; scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void; scrollTo(options?: ScrollToOptions | undefined): void; scrollTo(x: number, y: number): void; setAttribute(qualifiedName: string, value: string): void; setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void; setAttributeNode(attr: Attr): Attr | null; setAttributeNodeNS(attr: Attr): Attr | null; setPointerCapture(pointerId: number): void; toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean; webkitMatchesSelector(selectors: string): boolean; readonly baseURI: string; readonly childNodes: NodeListOf<ChildNode>; readonly firstChild: ChildNode | null; readonly isConnected: boolean; readonly lastChild: ChildNode | null; readonly nextSibling: ChildNode | null; readonly nodeName: string; readonly nodeType: number; nodeValue: string | null; readonly parentElement: HTMLElement | null; readonly parentNode: ParentNode | null; readonly previousSibling: ChildNode | null; textContent: string | null; appendChild<T_1 extends Node>(node: T_1): T_1; cloneNode(deep?: boolean | undefined): Node; compareDocumentPosition(other: Node): number; contains(other: Node | null): boolean; getRootNode(options?: GetRootNodeOptions | undefined): Node; hasChildNodes(): boolean; insertBefore<T_2 extends Node>(node: T_2, child: Node | null): T_2; isDefaultNamespace(namespace: string | null): boolean; isEqualNode(otherNode: Node | null): boolean; isSameNode(otherNode: Node | null): boolean; lookupNamespaceURI(prefix: string | null): string | null; lookupPrefix(namespace: string | null): string | null; normalize(): void; removeChild<T_3 extends Node>(child: T_3): T_3; replaceChild<T_4 extends Node>(node: Node, child: T_4): T_4; readonly ELEMENT_NODE: 1; readonly ATTRIBUTE_NODE: 2; readonly TEXT_NODE: 3; readonly CDATA_SECTION_NODE: 4; readonly ENTITY_REFERENCE_NODE: 5; readonly ENTITY_NODE: 6; readonly PROCESSING_INSTRUCTION_NODE: 7; readonly COMMENT_NODE: 8; readonly DOCUMENT_NODE: 9; readonly DOCUMENT_TYPE_NODE: 10; readonly DOCUMENT_FRAGMENT_NODE: 11; readonly NOTATION_NODE: 12; readonly DOCUMENT_POSITION_DISCONNECTED: 1; readonly DOCUMENT_POSITION_PRECEDING: 2; readonly DOCUMENT_POSITION_FOLLOWING: 4; readonly DOCUMENT_POSITION_CONTAINS: 8; readonly DOCUMENT_POSITION_CONTAINED_BY: 16; readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32; dispatchEvent(event: Event): boolean; ariaAtomic: string | null; ariaAutoComplete: string | null; ariaBusy: string | null; ariaChecked: string | null; ariaColCount: string | null; ariaColIndex: string | null; ariaColSpan: string | null; ariaCurrent: string | null; ariaDisabled: string | null; ariaExpanded: string | null; ariaHasPopup: string | null; ariaHidden: string | null; ariaInvalid: string | null; ariaKeyShortcuts: string | null; ariaLabel: string | null; ariaLevel: string | null; ariaLive: string | null; ariaModal: string | null; ariaMultiLine: string | null; ariaMultiSelectable: string | null; ariaOrientation: string | null; ariaPlaceholder: string | null; ariaPosInSet: string | null; ariaPressed: string | null; ariaReadOnly: string | null; ariaRequired: string | null; ariaRoleDescription: string | null; ariaRowCount: string | null; ariaRowIndex: string | null; ariaRowSpan: string | null; ariaSelected: string | null; ariaSetSize: string | null; ariaSort: string | null; ariaValueMax: string | null; ariaValueMin: string | null; ariaValueNow: string | null; ariaValueText: string | null; animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation; getAnimations(options?: GetAnimationsOptions | undefined): Animation[]; after(...nodes: (string | Node)[]): void; before(...nodes: (string | Node)[]): void; remove(): void; replaceWith(...nodes: (string | Node)[]): void; innerHTML: string; readonly nextElementSibling: Element | null; readonly previousElementSibling: Element | null; readonly childElementCount: number; readonly children: HTMLCollection; readonly firstElementChild: Element | null; readonly lastElementChild: Element | null; append(...nodes: (string | Node)[]): void; prepend(...nodes: (string | Node)[]): void; querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null; querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null; querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null; querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null; querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null; querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>; querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>; querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>; querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>; querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>; replaceChildren(...nodes: (string | Node)[]): void; readonly assignedSlot: HTMLSlotElement | null; readonly attributeStyleMap: StylePropertyMap; readonly style: CSSStyleDeclaration; contentEditable: string; enterKeyHint: string; inputMode: string; readonly isContentEditable: boolean; onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null; onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null; onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null; onended: ((this: GlobalEventHandlers, ev: Event) => any) | null; onerror: OnErrorEventHandler; onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null; ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null; oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null; onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onload: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null; onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null; onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null; onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null; onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null; onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null; onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null; onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null; onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null; onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null; onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null; autofocus: boolean; readonly dataset: DOMStringMap; nonce?: string | undefined; tabIndex: number; blur(): void; focus(options?: FocusOptions | undefined): void; internals: ElementInternals; readonly allValidators: import("../types.js").Validator<HTMLElement & InstanceType<{ new (...args: any[]): { internals: ElementInternals; accessKey: string; readonly accessKeyLabel: string; autocapitalize: string; dir: string; draggable: boolean; hidden: boolean; inert: boolean; innerText: string; lang: string; readonly offsetHeight: number; readonly offsetLeft: number; readonly offsetParent: Element | null; readonly offsetTop: number; readonly offsetWidth: number; outerText: string; popover: string | null; spellcheck: boolean; title: string; translate: boolean; attachInternals(): ElementInternals; click(): void; hidePopover(): void; showPopover(): void; togglePopover(force?: boolean | undefined): void; addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; readonly attributes: NamedNodeMap; readonly classList: DOMTokenList; className: string; readonly clientHeight: number; readonly clientLeft: number; readonly clientTop: number; readonly clientWidth: number; id: string; readonly localName: string; readonly namespaceURI: string | null; onfullscreenchange: ((this: Element, ev: Event) => any) | null; onfullscreenerror: ((this: Element, ev: Event) => any) | null; outerHTML: string; readonly ownerDocument: Document; readonly part: DOMTokenList; readonly prefix: string | null; readonly scrollHeight: number; scrollLeft: number; scrollTop: number; readonly scrollWidth: number; readonly shadowRoot: ShadowRoot | null; slot: string; readonly tagName: string; attachShadow(init: ShadowRootInit): ShadowRoot; checkVisibility(options?: CheckVisibilityOptions | undefined): boolean; closest<K_19 extends keyof HTMLElementTagNameMap>(selector: K_19): HTMLElementTagNameMap[K_19] | null; closest<K_20 extends keyof SVGElementTagNameMap>(selector: K_20): SVGElementTagNameMap[K_20] | null; closest<K_21 extends keyof MathMLElementTagNameMap>(selector: K_21): MathMLElementTagNameMap[K_21] | null; closest<E_3 extends Element = Element>(selectors: string): E_3 | null; computedStyleMap(): StylePropertyMapReadOnly; getAttribute(qualifiedName: string): string | null; getAttributeNS(namespace: string | null, localName: string): string | null; getAttributeNames(): string[]; getAttributeNode(qualifiedName: string): Attr | null; getAttributeNodeNS(namespace: string | null, localName: string): Attr | null; getBoundingClientRect(): DOMRect; getClientRects(): DOMRectList; getElementsByClassName(classNames: string): HTMLCollectionOf<Element>; getElementsByTagName<K_22 extends keyof HTMLElementTagNameMap>(qualifiedName: K_22): HTMLCollectionOf<HTMLElementTagNameMap[K_22]>; getElementsByTagName<K_23 extends keyof SVGElementTagNameMap>(qualifiedName: K_23): HTMLCollectionOf<SVGElementTagNameMap[K_23]>; getElementsByTagName<K_24 extends keyof MathMLElementTagNameMap>(qualifiedName: K_24): HTMLCollectionOf<MathMLElementTagNameMap[K_24]>; getElementsByTagName<K_25 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_25): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_25]>; getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>; getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>; getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>; hasAttribute(qualifiedName: string): boolean; hasAttributeNS(namespace: string | null, localName: string): boolean; hasAttributes(): boolean; hasPointerCapture(pointerId: number): boolean; insertAdjacentElement(where: InsertPosition, element: Element): Element | null; insertAdjacentHTML(position: InsertPosition, text: string): void; insertAdjacentText(where: InsertPosition, data: string): void; matches(selectors: string): boolean; releasePointerCapture(pointerId: number): void; removeAttribute(qualifiedName: string): void; removeAttributeNS(namespace: string | null, localName: string): void; removeAttributeNode(attr: Attr): Attr; requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>; requestPointerLock(): void; scroll(options?: ScrollToOptions | undefined): void; scroll(x: number, y: number): void; scrollBy(options?: ScrollToOptions | undefined): void; scrollBy(x: number, y: number): void; scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void; scrollTo(options?: ScrollToOptions | undefined): void; scrollTo(x: number, y: number): void; setAttribute(qualifiedName: string, value: string): void; setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void; setAttributeNode(attr: Attr): Attr | null; setAttributeNodeNS(attr: Attr): Attr | null; setPointerCapture(pointerId: number): void; toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean; webkitMatchesSelector(selectors: string): boolean; readonly baseURI: string; readonly childNodes: NodeListOf<ChildNode>; readonly firstChild: ChildNode | null; readonly isConnected: boolean; readonly lastChild: ChildNode | null; readonly nextSibling: ChildNode | null; readonly nodeName: string; readonly nodeType: number; nodeValue: string | null; readonly parentElement: HTMLElement | null; readonly parentNode: ParentNode | null; readonly previousSibling: ChildNode | null; textContent: string | null; appendChild<T_1 extends Node>(node: T_1): T_1; cloneNode(deep?: boolean | undefined): Node; compareDocumentPosition(other: Node): number; contains(other: Node | null): boolean; getRootNode(options?: GetRootNodeOptions | undefined): Node; hasChildNodes(): boolean; insertBefore<T_5 extends Node>(node: T_5, child: Node | null): T_5; isDefaultNamespace(namespace: string | null): boolean; isEqualNode(otherNode: Node | null): boolean; isSameNode(otherNode: Node | null): boolean; lookupNamespaceURI(prefix: string | null): string | null; lookupPrefix(namespace: string | null): string | null; normalize(): void; removeChild<T_3 extends Node>(child: T_3): T_3; replaceChild<T_4 extends Node>(node: Node, child: T_4): T_4; readonly ELEMENT_NODE: 1; readonly ATTRIBUTE_NODE: 2; readonly TEXT_NODE: 3; readonly CDATA_SECTION_NODE: 4; readonly ENTITY_REFERENCE_NODE: 5; readonly ENTITY_NODE: 6; readonly PROCESSING_INSTRUCTION_NODE: 7; readonly COMMENT_NODE: 8; readonly DOCUMENT_NODE: 9; readonly DOCUMENT_TYPE_NODE: 10; readonly DOCUMENT_FRAGMENT_NODE: 11; readonly NOTATION_NODE: 12; readonly DOCUMENT_POSITION_DISCONNECTED: 1; readonly DOCUMENT_POSITION_PRECEDING: 2; readonly DOCUMENT_POSITION_FOLLOWING: 4; readonly DOCUMENT_POSITION_CONTAINS: 8; readonly DOCUMENT_POSITION_CONTAINED_BY: 16; readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32; dispatchEvent(event: Event): boolean; ariaAtomic: string | null; ariaAutoComplete: string | null; ariaBusy: string | null; ariaChecked: string | null; ariaColCount: string | null; ariaColIndex: string | null; ariaColSpan: string | null; ariaCurrent: string | null; ariaDisabled: string | null; ariaExpanded: string | null; ariaHasPopup: string | null; ariaHidden: string | null; ariaInvalid: string | null; ariaKeyShortcuts: string | null; ariaLabel: string | null; ariaLevel: string | null; ariaLive: string | null; ariaModal: string | null; ariaMultiLine: string | null; ariaMultiSelectable: string | null; ariaOrientation: string | null; ariaPlaceholder: string | null; ariaPosInSet: string | null; ariaPressed: string | null; ariaReadOnly: string | null; ariaRequired: string | null; ariaRoleDescription: string | null; ariaRowCount: string | null; ariaRowIndex: string | null; ariaRowSpan: string | null; ariaSelected: string | null; ariaSetSize: string | null; ariaSort: string | null; ariaValueMax: string | null; ariaValueMin: string | null; ariaValueNow: string | null; ariaValueText: string | null; role: string | null; animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation; getAnimations(options?: GetAnimationsOptions | undefined): Animation[]; after(...nodes: (string | Node)[]): void; before(...nodes: (string | Node)[]): void; remove(): void; replaceWith(...nodes: (string | Node)[]): void; innerHTML: string; readonly nextElementSibling: Element | null; readonly previousElementSibling: Element | null; readonly childElementCount: number; readonly children: HTMLCollection; readonly firstElementChild: Element | null; readonly lastElementChild: Element | null; append(...nodes: (string | Node)[]): void; prepend(...nodes: (string | Node)[]): void; querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null; querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null; querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null; querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null; querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null; querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>; querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>; querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>; querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>; querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>; replaceChildren(...nodes: (string | Node)[]): void; readonly assignedSlot: HTMLSlotElement | null; readonly attributeStyleMap: StylePropertyMap; readonly style: CSSStyleDeclaration; contentEditable: string; enterKeyHint: string; inputMode: string; readonly isContentEditable: boolean; onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null; onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null; onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null; ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null; onended: ((this: GlobalEventHandlers, ev: Event) => any) | null; onerror: OnErrorEventHandler; onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null; onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null; ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null; oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null; onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null; onload: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null; onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null; onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null; onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null; onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null; onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null; onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null; onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null; onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null; onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null; onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null; onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null; onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null; onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null; onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null; onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null; onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null; onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null; ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined; ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null; onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null; onwaiting: ((this: GlobalEventHandlers,