// Type definitions for Svelte HTML, based on JSX React 18 typings
// Original Project/Authors:
// Type definitions for React 18.0
// Project: http://facebook.github.io/react/
// Definitions by: Asana
// AssureSign
// Microsoft
// John Reilly
// Benoit Benezech
// Patricio Zavolinsky
// Eric Anderson
// Dovydas Navickas
// Josh Rutherford
// Guilherme Hübner
// Ferdy Budhidharma
// Johann Rakotoharisoa
// Olivier Pascal
// Martin Hochel
// Frank Li
// Jessica Franco
// Saransh Kataria
// Kanitkorn Sujautra
// Sebastian Silbermann
// Kyle Scully
// Cong Zhang
// Dimitri Mitropoulos
// JongChan Choi
// Victor Magalhães
// Dale Tan
// Priyanshu Rav
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
// Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined`
type Booleanish = boolean | 'true' | 'false';
//
// Event Handler Types
// ----------------------------------------------------------------------
type EventHandler = (
event: E & { currentTarget: EventTarget & T }
) => any;
export type ClipboardEventHandler = EventHandler;
export type CompositionEventHandler = EventHandler;
export type DragEventHandler = EventHandler;
export type FocusEventHandler = EventHandler;
export type FormEventHandler = EventHandler;
export type ChangeEventHandler = EventHandler;
export type KeyboardEventHandler = EventHandler;
export type MouseEventHandler = EventHandler;
export type TouchEventHandler = EventHandler;
export type PointerEventHandler = EventHandler;
export type UIEventHandler = EventHandler;
export type WheelEventHandler = EventHandler;
export type AnimationEventHandler = EventHandler;
export type TransitionEventHandler = EventHandler;
export type MessageEventHandler = EventHandler;
//
// DOM Attributes
// ----------------------------------------------------------------------
export interface DOMAttributes {
// Clipboard Events
'on:copy'?: ClipboardEventHandler | undefined | null;
'on:cut'?: ClipboardEventHandler | undefined | null;
'on:paste'?: ClipboardEventHandler | undefined | null;
// Composition Events
'on:compositionend'?: CompositionEventHandler | undefined | null;
'on:compositionstart'?: CompositionEventHandler | undefined | null;
'on:compositionupdate'?: CompositionEventHandler | undefined | null;
// Focus Events
'on:focus'?: FocusEventHandler | undefined | null;
'on:focusin'?: FocusEventHandler | undefined | null;
'on:focusout'?: FocusEventHandler | undefined | null;
'on:blur'?: FocusEventHandler | undefined | null;
// Form Events
'on:change'?: FormEventHandler | undefined | null;
'on:beforeinput'?: EventHandler | undefined | null;
'on:input'?: FormEventHandler | undefined | null;
'on:reset'?: FormEventHandler | undefined | null;
'on:submit'?: EventHandler | undefined | null;
'on:invalid'?: EventHandler | undefined | null;
'on:formdata'?: EventHandler | undefined | null;
// Image Events
'on:load'?: EventHandler | undefined | null;
'on:error'?: EventHandler | undefined | null; // also a Media Event
// Detail Events
'on:toggle'?: EventHandler | undefined | null;
// Keyboard Events
'on:keydown'?: KeyboardEventHandler | undefined | null;
'on:keypress'?: KeyboardEventHandler | undefined | null;
'on:keyup'?: KeyboardEventHandler | undefined | null;
// Media Events
'on:abort'?: EventHandler | undefined | null;
'on:canplay'?: EventHandler | undefined | null;
'on:canplaythrough'?: EventHandler | undefined | null;
'on:cuechange'?: EventHandler | undefined | null;
'on:durationchange'?: EventHandler | undefined | null;
'on:emptied'?: EventHandler | undefined | null;
'on:encrypted'?: EventHandler | undefined | null;
'on:ended'?: EventHandler | undefined | null;
'on:loadeddata'?: EventHandler | undefined | null;
'on:loadedmetadata'?: EventHandler | undefined | null;
'on:loadstart'?: EventHandler | undefined | null;
'on:pause'?: EventHandler | undefined | null;
'on:play'?: EventHandler | undefined | null;
'on:playing'?: EventHandler | undefined | null;
'on:progress'?: EventHandler | undefined | null;
'on:ratechange'?: EventHandler | undefined | null;
'on:seeked'?: EventHandler | undefined | null;
'on:seeking'?: EventHandler | undefined | null;
'on:stalled'?: EventHandler | undefined | null;
'on:suspend'?: EventHandler | undefined | null;
'on:timeupdate'?: EventHandler | undefined | null;
'on:volumechange'?: EventHandler | undefined | null;
'on:waiting'?: EventHandler | undefined | null;
// MouseEvents
'on:auxclick'?: MouseEventHandler | undefined | null;
'on:click'?: MouseEventHandler | undefined | null;
'on:contextmenu'?: MouseEventHandler | undefined | null;
'on:dblclick'?: MouseEventHandler | undefined | null;
'on:drag'?: DragEventHandler | undefined | null;
'on:dragend'?: DragEventHandler | undefined | null;
'on:dragenter'?: DragEventHandler | undefined | null;
'on:dragexit'?: DragEventHandler | undefined | null;
'on:dragleave'?: DragEventHandler | undefined | null;
'on:dragover'?: DragEventHandler | undefined | null;
'on:dragstart'?: DragEventHandler | undefined | null;
'on:drop'?: DragEventHandler | undefined | null;
'on:mousedown'?: MouseEventHandler | undefined | null;
'on:mouseenter'?: MouseEventHandler | undefined | null;
'on:mouseleave'?: MouseEventHandler | undefined | null;
'on:mousemove'?: MouseEventHandler | undefined | null;
'on:mouseout'?: MouseEventHandler | undefined | null;
'on:mouseover'?: MouseEventHandler | undefined | null;
'on:mouseup'?: MouseEventHandler | undefined | null;
// Selection Events
'on:select'?: EventHandler | undefined | null;
'on:selectionchange'?: EventHandler | undefined | null;
'on:selectstart'?: EventHandler | undefined | null;
// Touch Events
'on:touchcancel'?: TouchEventHandler | undefined | null;
'on:touchend'?: TouchEventHandler | undefined | null;
'on:touchmove'?: TouchEventHandler | undefined | null;
'on:touchstart'?: TouchEventHandler | undefined | null;
// Pointer Events
'on:gotpointercapture'?: PointerEventHandler | undefined | null;
'on:pointercancel'?: PointerEventHandler | undefined | null;
'on:pointerdown'?: PointerEventHandler | undefined | null;
'on:pointerenter'?: PointerEventHandler | undefined | null;
'on:pointerleave'?: PointerEventHandler | undefined | null;
'on:pointermove'?: PointerEventHandler | undefined | null;
'on:pointerout'?: PointerEventHandler | undefined | null;
'on:pointerover'?: PointerEventHandler | undefined | null;
'on:pointerup'?: PointerEventHandler | undefined | null;
'on:lostpointercapture'?: PointerEventHandler | undefined | null;
// UI Events
'on:scroll'?: UIEventHandler | undefined | null;
'on:resize'?: UIEventHandler | undefined | null;
// Wheel Events
'on:wheel'?: WheelEventHandler | undefined | null;
// Animation Events
'on:animationstart'?: AnimationEventHandler | undefined | null;
'on:animationend'?: AnimationEventHandler | undefined | null;
'on:animationiteration'?: AnimationEventHandler | undefined | null;
// Transition Events
'on:transitionstart'?: TransitionEventHandler | undefined | null;
'on:transitionrun'?: TransitionEventHandler | undefined | null;
'on:transitionend'?: TransitionEventHandler | undefined | null;
'on:transitioncancel'?: TransitionEventHandler | undefined | null;
// Svelte Transition Events
'on:outrostart'?: EventHandler, T> | undefined | null;
'on:outroend'?: EventHandler, T> | undefined | null;
'on:introstart'?: EventHandler, T> | undefined | null;
'on:introend'?: EventHandler, T> | undefined | null;
// Message Events
'on:message'?: MessageEventHandler | undefined | null;
'on:messageerror'?: MessageEventHandler | undefined | null;
// Document Events
'on:visibilitychange'?: EventHandler | undefined | null;
// Global Events
'on:cancel'?: EventHandler | undefined | null;
'on:close'?: EventHandler | undefined | null;
'on:fullscreenchange'?: EventHandler | undefined | null;
'on:fullscreenerror'?: EventHandler | undefined | null;
}
// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
export interface AriaAttributes {
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
'aria-activedescendant'?: string | undefined | null;
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
'aria-atomic'?: Booleanish | undefined | null;
/**
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
* presented if they are made.
*/
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
'aria-busy'?: Booleanish | undefined | null;
/**
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
* @see aria-pressed @see aria-selected.
*/
'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined | null;
/**
* Defines the total number of columns in a table, grid, or treegrid.
* @see aria-colindex.
*/
'aria-colcount'?: number | undefined | null;
/**
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
* @see aria-colcount @see aria-colspan.
*/
'aria-colindex'?: number | undefined | null;
/**
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-colindex @see aria-rowspan.
*/
'aria-colspan'?: number | undefined | null;
/**
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
* @see aria-owns.
*/
'aria-controls'?: string | undefined | null;
/** Indicates the element that represents the current item within a container or set of related elements. */
'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null;
/**
* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
*/
'aria-describedby'?: string | undefined | null;
/**
* Identifies the element that provides a detailed, extended description for the object.
* @see aria-describedby.
*/
'aria-details'?: string | undefined | null;
/**
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
* @see aria-hidden @see aria-readonly.
*/
'aria-disabled'?: Booleanish | undefined | null;
/**
* Indicates what functions can be performed when a dragged object is released on the drop target.
* @deprecated in ARIA 1.1
*/
'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null;
/**
* Identifies the element that provides an error message for the object.
* @see aria-invalid @see aria-describedby.
*/
'aria-errormessage'?: string | undefined | null;
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
'aria-expanded'?: Booleanish | undefined | null;
/**
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
* allows assistive technology to override the general default of reading in document source order.
*/
'aria-flowto'?: string | undefined | null;
/**
* Indicates an element's "grabbed" state in a drag-and-drop operation.
* @deprecated in ARIA 1.1
*/
'aria-grabbed'?: Booleanish | undefined | null;
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined | null;
/**
* Indicates whether the element is exposed to an accessibility API.
* @see aria-disabled.
*/
'aria-hidden'?: Booleanish | undefined | null;
/**
* Indicates the entered value does not conform to the format expected by the application.
* @see aria-errormessage.
*/
'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined | null;
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
'aria-keyshortcuts'?: string | undefined | null;
/**
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/
'aria-label'?: string | undefined | null;
/**
* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
*/
'aria-labelledby'?: string | undefined | null;
/** Defines the hierarchical level of an element within a structure. */
'aria-level'?: number | undefined | null;
/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
'aria-live'?: 'off' | 'assertive' | 'polite' | undefined | null;
/** Indicates whether an element is modal when displayed. */
'aria-modal'?: Booleanish | undefined | null;
/** Indicates whether a text box accepts multiple lines of input or only a single line. */
'aria-multiline'?: Booleanish | undefined | null;
/** Indicates that the user may select more than one item from the current selectable descendants. */
'aria-multiselectable'?: Booleanish | undefined | null;
/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
'aria-orientation'?: 'horizontal' | 'vertical' | undefined | null;
/**
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
* @see aria-controls.
*/
'aria-owns'?: string | undefined | null;
/**
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
* A hint could be a sample value or a brief description of the expected format.
*/
'aria-placeholder'?: string | undefined | null;
/**
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-setsize.
*/
'aria-posinset'?: number | undefined | null;
/**
* Indicates the current "pressed" state of toggle buttons.
* @see aria-checked @see aria-selected.
*/
'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined | null;
/**
* Indicates that the element is not editable, but is otherwise operable.
* @see aria-disabled.
*/
'aria-readonly'?: Booleanish | undefined | null;
/**
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
* @see aria-atomic.
*/
'aria-relevant'?:
| 'additions'
| 'additions removals'
| 'additions text'
| 'all'
| 'removals'
| 'removals additions'
| 'removals text'
| 'text'
| 'text additions'
| 'text removals'
| undefined
| null;
/** Indicates that user input is required on the element before a form may be submitted. */
'aria-required'?: Booleanish | undefined | null;
/** Defines a human-readable, author-localized description for the role of an element. */
'aria-roledescription'?: string | undefined | null;
/**
* Defines the total number of rows in a table, grid, or treegrid.
* @see aria-rowindex.
*/
'aria-rowcount'?: number | undefined | null;
/**
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
* @see aria-rowcount @see aria-rowspan.
*/
'aria-rowindex'?: number | undefined | null;
/**
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-rowindex @see aria-colspan.
*/
'aria-rowspan'?: number | undefined | null;
/**
* Indicates the current "selected" state of various widgets.
* @see aria-checked @see aria-pressed.
*/
'aria-selected'?: Booleanish | undefined | null;
/**
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-posinset.
*/
'aria-setsize'?: number | undefined | null;
/** Indicates if items in a table or grid are sorted in ascending or descending order. */
'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined | null;
/** Defines the maximum allowed value for a range widget. */
'aria-valuemax'?: number | undefined | null;
/** Defines the minimum allowed value for a range widget. */
'aria-valuemin'?: number | undefined | null;
/**
* Defines the current value for a range widget.
* @see aria-valuetext.
*/
'aria-valuenow'?: number | undefined | null;
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
'aria-valuetext'?: string | undefined | null;
}
// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
export type AriaRole =
| 'alert'
| 'alertdialog'
| 'application'
| 'article'
| 'banner'
| 'button'
| 'cell'
| 'checkbox'
| 'columnheader'
| 'combobox'
| 'complementary'
| 'contentinfo'
| 'definition'
| 'dialog'
| 'directory'
| 'document'
| 'feed'
| 'figure'
| 'form'
| 'grid'
| 'gridcell'
| 'group'
| 'heading'
| 'img'
| 'link'
| 'list'
| 'listbox'
| 'listitem'
| 'log'
| 'main'
| 'marquee'
| 'math'
| 'menu'
| 'menubar'
| 'menuitem'
| 'menuitemcheckbox'
| 'menuitemradio'
| 'navigation'
| 'none'
| 'note'
| 'option'
| 'presentation'
| 'progressbar'
| 'radio'
| 'radiogroup'
| 'region'
| 'row'
| 'rowgroup'
| 'rowheader'
| 'scrollbar'
| 'search'
| 'searchbox'
| 'separator'
| 'slider'
| 'spinbutton'
| 'status'
| 'switch'
| 'tab'
| 'table'
| 'tablist'
| 'tabpanel'
| 'term'
| 'textbox'
| 'timer'
| 'toolbar'
| 'tooltip'
| 'tree'
| 'treegrid'
| 'treeitem'
| (string & {});
export interface HTMLAttributes extends AriaAttributes, DOMAttributes {
// Standard HTML Attributes
accesskey?: string | undefined | null;
autofocus?: boolean | undefined | null;
class?: string | undefined | null;
contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null;
contextmenu?: string | undefined | null;
dir?: string | undefined | null;
draggable?: Booleanish | undefined | null;
enterkeyhint?:
| 'enter'
| 'done'
| 'go'
| 'next'
| 'previous'
| 'search'
| 'send'
| undefined
| null;
hidden?: boolean | undefined | null;
id?: string | undefined | null;
lang?: string | undefined | null;
part?: string | undefined | null;
placeholder?: string | undefined | null;
slot?: string | undefined | null;
spellcheck?: Booleanish | undefined | null;
style?: string | undefined | null;
tabindex?: number | undefined | null;
title?: string | undefined | null;
translate?: 'yes' | 'no' | '' | undefined | null;
inert?: boolean | undefined | null;
// Unknown
radiogroup?: string | undefined | null; // ,