Props.ts

// 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;
	/** 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'?: 'true' | 'false' | boolean;
	/**
	 * 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';
	/** 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'?: 'true' | 'false' | boolean;
	/**
	 * Indicates the current 'checked' state of checkboxes, radio buttons, and other widgets.
	 * @see aria-pressed @see aria-selected.
	 */
	'aria-checked'?: 'false' | 'mixed' | 'true' | boolean;
	/**
	 * Defines the total number of columns in a table, grid, or treegrid.
	 * @see aria-colindex.
	 */
	'aria-colcount'?: number;
	/**
	 * 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;
	/**
	 * 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;
	/**
	 * Identifies the element (or elements) whose contents or presence are controlled by the current element.
	 * @see aria-owns.
	 */
	'aria-controls'?: string;
	/** Indicates the element that represents the current item within a container or set of related elements. */
	'aria-current'?: 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
	/**
	 * Identifies the element (or elements) that describes the object.
	 * @see aria-labelledby
	 */
	'aria-describedby'?: string;
	/**
	 * Identifies the element that provides a detailed, extended description for the object.
	 * @see aria-describedby.
	 */
	'aria-details'?: string;
	/**
	 * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
	 * @see aria-hidden @see aria-readonly.
	 */
	'aria-disabled'?: 'true' | 'false' | boolean;
	/**
	 * Identifies the element that provides an error message for the object.
	 * @see aria-invalid @see aria-describedby.
	 */
	'aria-errormessage'?: string;
	/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
	'aria-expanded'?: 'true' | 'false' | boolean;
	/**
	 * 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;
	/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
	'aria-haspopup'?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
	/**
	 * Indicates whether the element is exposed to an accessibility API.
	 * @see aria-disabled.
	 */
	'aria-hidden'?: 'true' | 'false' | boolean;
	/**
	 * Indicates the entered value does not conform to the format expected by the application.
	 * @see aria-errormessage.
	 */
	'aria-invalid'?: 'false' | 'true' | 'grammar' | 'spelling' | boolean;
	/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
	'aria-keyshortcuts'?: string;
	/**
	 * Defines a string value that labels the current element.
	 * @see aria-labelledby.
	 */
	'aria-label'?: string;
	/**
	 * Identifies the element (or elements) that labels the current element.
	 * @see aria-describedby.
	 */
	'aria-labelledby'?: string;
	/** Defines the hierarchical level of an element within a structure. */
	'aria-level'?: number;
	/** 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';
	/** Indicates whether an element is modal when displayed. */
	'aria-modal'?: 'true' | 'false' | boolean;
	/** Indicates whether a text box accepts multiple lines of input or only a single line. */
	'aria-multiline'?: 'true' | 'false' | boolean;
	/** Indicates that the user may select more than one item from the current selectable descendants. */
	'aria-multiselectable'?: 'true' | 'false' | boolean;
	/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
	'aria-orientation'?: 'horizontal' | 'vertical';
	/**
	 * 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;
	/**
	 * 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;
	/**
	 * 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;
	/**
	 * Indicates the current 'pressed' state of toggle buttons.
	 * @see aria-checked @see aria-selected.
	 */
	'aria-pressed'?: 'false' | 'mixed' | 'true' | boolean;
	/**
	 * Indicates that the element is not editable, but is otherwise operable.
	 * @see aria-disabled.
	 */
	'aria-readonly'?: 'true' | 'false' | boolean;
	/**
	 * 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';
	/** Indicates that user input is required on the element before a form may be submitted. */
	'aria-required'?: 'true' | 'false' | boolean;
	/** Defines a human-readable, author-localized description for the role of an element. */
	'aria-roledescription'?: string;
	/**
	 * Defines the total number of rows in a table, grid, or treegrid.
	 * @see aria-rowindex.
	 */
	'aria-rowcount'?: number;
	/**
	 * 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;
	/**
	 * 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;
	/**
	 * Indicates the current 'selected' state of various widgets.
	 * @see aria-checked @see aria-pressed.
	 */
	'aria-selected'?: 'true' | 'false' | boolean;
	/**
	 * 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;
	/** Indicates if items in a table or grid are sorted in ascending or descending order. */
	'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
	/** Defines the maximum allowed value for a range widget. */
	'aria-valuemax'?: number;
	/** Defines the minimum allowed value for a range widget. */
	'aria-valuemin'?: number;
	/**
	 * Defines the current value for a range widget.
	 * @see aria-valuetext.
	 */
	'aria-valuenow'?: number;
	/** Defines the human readable text alternative of aria-valuenow for a range widget. */
	'aria-valuetext'?: string;
}

// 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 {
	'accesskey'?: string;
	'autocapitalize'?: string;
	'autofocus'?: string;
	'class'?: string;
	'contenteditable'?: 'true' | 'false' | 'inherit' | boolean;
	'contextMenu'?: string;
	'dir'?: 'ltr' | 'rtl' | 'auto';
	'draggable'?: 'true' | 'false' | boolean;
	'enterkeyhint'?: string;
	'exportparts'?: string;
	'hidden'?: string;
	'id'?: string;
	'inputmode'?: string;
	'is'?: string;
	'lang'?: string;
	'placeholder'?: string;
	'role'?: AriaRole;
	'slot'?: string;
	'spellcheck'?: 'true' | 'false' | boolean;
	'style'?: string;
	'tabindex'?: number;
	'title'?: string;
	'translate'?: 'yes' | 'no';
}

export interface Props extends HTMLAttributes {
	'fill'?: string;
	'fill-opacity'?: number | string;
	'fill-rule'?: "nonzero" | "evenodd" | "inherit";
	'height'?: number | string;
	'size'?: number | string;
	'stroke'?: string;
	'stroke-dasharray'?: string | number;
	'stroke-dashoffset'?: string | number;
	'stroke-linecap'?: "butt" | "round" | "square" | "inherit";
	'stroke-linejoin'?: "miter" | "round" | "bevel" | "inherit";
	'stroke-miterlimit'?: number | string;
	'stroke-opacity'?: number | string;
	'stroke-width'?: number | string;
	'viewBox'?: string;
	'width'?: number | string;
}