solid-js

/** * Based on JSX types for Surplus and Inferno and adapted for `dom-expressions`. * * https://github.com/adamhaile/surplus/blob/master/index.d.ts * https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts */ type DOMElement = Element; export namespace JSX { type Element = | Node | ArrayElement | FunctionElement | string | number | boolean | null | undefined; interface ArrayElement extends Array<Element> {} interface FunctionElement { (): Element; } interface ElementClass { render(props: any): Element; } type LibraryManagedAttributes<Component, Props> = Props; interface ElementChildrenAttribute { children: {}; } interface EventHandler<T, E extends Event> { ( e: E & { currentTarget: T; target: DOMElement; } ): void; } interface BoundEventHandler<T, E extends Event> { 0: ( data: any, e: E & { currentTarget: T; target: DOMElement; } ) => void; 1: any; } type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>; interface IntrinsicAttributes { ref?: unknown | ((e: unknown) => void); } interface CustomAttributes<T> { ref?: T | ((el: T) => void); classList?: { [k: string]: boolean | undefined; }; $ServerOnly?: boolean; } interface Directives {} interface ExplicitProperties {} interface ExplicitAttributes {} interface CustomEvents {} interface CustomCaptureEvents {} type DirectiveAttributes = { [Key in keyof Directives as `use:${Key}`]?: Directives[Key]; }; type PropAttributes = { [Key in keyof ExplicitProperties as `prop:${Key}`]?: ExplicitProperties[Key]; }; type AttrAttributes = { [Key in keyof ExplicitAttributes as `attr:${Key}`]?: ExplicitAttributes[Key]; }; type OnAttributes<T> = { [Key in keyof CustomEvents as `on:${Key}`]?: EventHandler<T, CustomEvents[Key]>; } type OnCaptureAttributes<T> = { [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<T, CustomCaptureEvents[Key]>; } interface DOMAttributes<T> extends CustomAttributes<T>, DirectiveAttributes, PropAttributes, AttrAttributes, OnAttributes<T>, OnCaptureAttributes<T> { children?: Element; innerHTML?: string; innerText?: string | number; textContent?: string | number; onCopy?: EventHandlerUnion<T, ClipboardEvent>; onCut?: EventHandlerUnion<T, ClipboardEvent>; onPaste?: EventHandlerUnion<T, ClipboardEvent>; onCompositionEnd?: EventHandlerUnion<T, CompositionEvent>; onCompositionStart?: EventHandlerUnion<T, CompositionEvent>; onCompositionUpdate?: EventHandlerUnion<T, CompositionEvent>; onFocus?: EventHandlerUnion<T, FocusEvent>; onFocusOut?: EventHandlerUnion<T, FocusEvent>; onFocusIn?: EventHandlerUnion<T, FocusEvent>; onBlur?: EventHandlerUnion<T, FocusEvent>; onChange?: EventHandlerUnion<T, Event>; onInput?: EventHandlerUnion<T, InputEvent>; onReset?: EventHandlerUnion<T, Event>; onSubmit?: EventHandlerUnion< T, Event & { submitter: HTMLElement; } >; onLoad?: EventHandlerUnion<T, Event>; onError?: EventHandlerUnion<T, Event>; onKeyDown?: EventHandlerUnion<T, KeyboardEvent>; onKeyPress?: EventHandlerUnion<T, KeyboardEvent>; onKeyUp?: EventHandlerUnion<T, KeyboardEvent>; onGotPointerCapture?: EventHandlerUnion<T, PointerEvent>; onLostPointerCapture?: EventHandlerUnion<T, PointerEvent>; onPointerCancel?: EventHandlerUnion<T, PointerEvent>; onPointerDown?: EventHandlerUnion<T, PointerEvent>; onPointerEnter?: EventHandlerUnion<T, PointerEvent>; onPointerLeave?: EventHandlerUnion<T, PointerEvent>; onPointerMove?: EventHandlerUnion<T, PointerEvent>; onPointerOver?: EventHandlerUnion<T, PointerEvent>; onPointerOut?: EventHandlerUnion<T, PointerEvent>; onPointerUp?: EventHandlerUnion<T, PointerEvent>; onAbort?: EventHandlerUnion<T, Event>; onCanPlay?: EventHandlerUnion<T, Event>; onCanPlayThrough?: EventHandlerUnion<T, Event>; onDurationChange?: EventHandlerUnion<T, Event>; onEmptied?: EventHandlerUnion<T, Event>; onEncrypted?: EventHandlerUnion<T, Event>; onEnded?: EventHandlerUnion<T, Event>; onLoadedData?: EventHandlerUnion<T, Event>; onLoadedMetadata?: EventHandlerUnion<T, Event>; onLoadStart?: EventHandlerUnion<T, Event>; onPause?: EventHandlerUnion<T, Event>; onPlay?: EventHandlerUnion<T, Event>; onPlaying?: EventHandlerUnion<T, Event>; onProgress?: EventHandlerUnion<T, Event>; onRateChange?: EventHandlerUnion<T, Event>; onSeeked?: EventHandlerUnion<T, Event>; onSeeking?: EventHandlerUnion<T, Event>; onStalled?: EventHandlerUnion<T, Event>; onSuspend?: EventHandlerUnion<T, Event>; onTimeUpdate?: EventHandlerUnion<T, Event>; onVolumeChange?: EventHandlerUnion<T, Event>; onWaiting?: EventHandlerUnion<T, Event>; onClick?: EventHandlerUnion<T, MouseEvent>; onContextMenu?: EventHandlerUnion<T, MouseEvent>; onDblClick?: EventHandlerUnion<T, MouseEvent>; onDrag?: EventHandlerUnion<T, DragEvent>; onDragEnd?: EventHandlerUnion<T, DragEvent>; onDragEnter?: EventHandlerUnion<T, DragEvent>; onDragExit?: EventHandlerUnion<T, DragEvent>; onDragLeave?: EventHandlerUnion<T, DragEvent>; onDragOver?: EventHandlerUnion<T, DragEvent>; onDragStart?: EventHandlerUnion<T, DragEvent>; onDrop?: EventHandlerUnion<T, DragEvent>; onMouseDown?: EventHandlerUnion<T, MouseEvent>; onMouseEnter?: EventHandlerUnion<T, MouseEvent>; onMouseLeave?: EventHandlerUnion<T, MouseEvent>; onMouseMove?: EventHandlerUnion<T, MouseEvent>; onMouseOut?: EventHandlerUnion<T, MouseEvent>; onMouseOver?: EventHandlerUnion<T, MouseEvent>; onMouseUp?: EventHandlerUnion<T, MouseEvent>; onSelect?: EventHandlerUnion<T, UIEvent>; onTouchCancel?: EventHandlerUnion<T, TouchEvent>; onTouchEnd?: EventHandlerUnion<T, TouchEvent>; onTouchMove?: EventHandlerUnion<T, TouchEvent>; onTouchStart?: EventHandlerUnion<T, TouchEvent>; onScroll?: EventHandlerUnion<T, UIEvent>; onWheel?: EventHandlerUnion<T, WheelEvent>; onAnimationStart?: EventHandlerUnion<T, AnimationEvent>; onAnimationEnd?: EventHandlerUnion<T, AnimationEvent>; onAnimationIteration?: EventHandlerUnion<T, AnimationEvent>; onTransitionEnd?: EventHandlerUnion<T, TransitionEvent>; // lower case events oncopy?: EventHandlerUnion<T, ClipboardEvent>; oncut?: EventHandlerUnion<T, ClipboardEvent>; onpaste?: EventHandlerUnion<T, ClipboardEvent>; oncompositionend?: EventHandlerUnion<T, CompositionEvent>; oncompositionstart?: EventHandlerUnion<T, CompositionEvent>; oncompositionupdate?: EventHandlerUnion<T, CompositionEvent>; onfocus?: EventHandlerUnion<T, FocusEvent>; onfocusout?: EventHandlerUnion<T, FocusEvent>; onfocusin?: EventHandlerUnion<T, FocusEvent>; onblur?: EventHandlerUnion<T, FocusEvent>; onchange?: EventHandlerUnion<T, Event>; oninput?: EventHandlerUnion<T, InputEvent>; onreset?: EventHandlerUnion<T, Event>; onsubmit?: EventHandlerUnion< T, Event & { submitter: HTMLElement; } >; onload?: EventHandlerUnion<T, Event>; onerror?: EventHandlerUnion<T, Event>; onkeydown?: EventHandlerUnion<T, KeyboardEvent>; onkeypress?: EventHandlerUnion<T, KeyboardEvent>; onkeyup?: EventHandlerUnion<T, KeyboardEvent>; ongotpointercapture?: EventHandlerUnion<T, PointerEvent>; onlostpointercapture?: EventHandlerUnion<T, PointerEvent>; onpointercancel?: EventHandlerUnion<T, PointerEvent>; onpointerdown?: EventHandlerUnion<T, PointerEvent>; onpointerenter?: EventHandlerUnion<T, PointerEvent>; onpointerleave?: EventHandlerUnion<T, PointerEvent>; onpointermove?: EventHandlerUnion<T, PointerEvent>; onpointerover?: EventHandlerUnion<T, PointerEvent>; onpointerout?: EventHandlerUnion<T, PointerEvent>; onpointerup?: EventHandlerUnion<T, PointerEvent>; onabort?: EventHandlerUnion<T, Event>; oncanplay?: EventHandlerUnion<T, Event>; oncanplaythrough?: EventHandlerUnion<T, Event>; ondurationchange?: EventHandlerUnion<T, Event>; onemptied?: EventHandlerUnion<T, Event>; onencrypted?: EventHandlerUnion<T, Event>; onended?: EventHandlerUnion<T, Event>; onloadeddata?: EventHandlerUnion<T, Event>; onloadedmetadata?: EventHandlerUnion<T, Event>; onloadstart?: EventHandlerUnion<T, Event>; onpause?: EventHandlerUnion<T, Event>; onplay?: EventHandlerUnion<T, Event>; onplaying?: EventHandlerUnion<T, Event>; onprogress?: EventHandlerUnion<T, Event>; onratechange?: EventHandlerUnion<T, Event>; onseeked?: EventHandlerUnion<T, Event>; onseeking?: EventHandlerUnion<T, Event>; onstalled?: EventHandlerUnion<T, Event>; onsuspend?: EventHandlerUnion<T, Event>; ontimeupdate?: EventHandlerUnion<T, Event>; onvolumechange?: EventHandlerUnion<T, Event>; onwaiting?: EventHandlerUnion<T, Event>; onclick?: EventHandlerUnion<T, MouseEvent>; oncontextmenu?: EventHandlerUnion<T, MouseEvent>; ondblclick?: EventHandlerUnion<T, MouseEvent>; ondrag?: EventHandlerUnion<T, DragEvent>; ondragend?: EventHandlerUnion<T, DragEvent>; ondragenter?: EventHandlerUnion<T, DragEvent>; ondragexit?: EventHandlerUnion<T, DragEvent>; ondragleave?: EventHandlerUnion<T, DragEvent>; ondragover?: EventHandlerUnion<T, DragEvent>; ondragstart?: EventHandlerUnion<T, DragEvent>; ondrop?: EventHandlerUnion<T, DragEvent>; onmousedown?: EventHandlerUnion<T, MouseEvent>; onmouseenter?: EventHandlerUnion<T, MouseEvent>; onmouseleave?: EventHandlerUnion<T, MouseEvent>; onmousemove?: EventHandlerUnion<T, MouseEvent>; onmouseout?: EventHandlerUnion<T, MouseEvent>; onmouseover?: EventHandlerUnion<T, MouseEvent>; onmouseup?: EventHandlerUnion<T, MouseEvent>; onselect?: EventHandlerUnion<T, UIEvent>; ontouchcancel?: EventHandlerUnion<T, TouchEvent>; ontouchend?: EventHandlerUnion<T, TouchEvent>; ontouchmove?: EventHandlerUnion<T, TouchEvent>; ontouchstart?: EventHandlerUnion<T, TouchEvent>; onscroll?: EventHandlerUnion<T, UIEvent>; onwheel?: EventHandlerUnion<T, WheelEvent>; onanimationstart?: EventHandlerUnion<T, AnimationEvent>; onanimationend?: EventHandlerUnion<T, AnimationEvent>; onanimationiteration?: EventHandlerUnion<T, AnimationEvent>; ontransitionend?: EventHandlerUnion<T, TransitionEvent>; } type CSSWideKeyword = "initial" | "inherit" | "unset"; type CSSPercentage = string; type CSSLength = number | string; interface CSSProperties { /** * Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. */ "align-content"?: | CSSWideKeyword | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch"; /** * Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis. */ "align-items"?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; /** * Allows the default alignment to be overridden for individual flex items. */ "align-self"?: | CSSWideKeyword | "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; /** * This property allows precise alignment of elements, such as graphics, * that do not have a baseline-table or lack the desired baseline in their baseline-table. * With the alignment-adjust property, the position of the baseline identified by the alignment-baseline * can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element. */ "alignment-adjust"?: CSSWideKeyword | any; "alignment-baseline"?: CSSWideKeyword | any; /** * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. */ "animation-delay"?: CSSWideKeyword | any; /** * Defines whether an animation should run in reverse on some or all cycles. */ "animation-direction"?: CSSWideKeyword | any; /** * Defines how long an animation runs for. */ "animation-duration"?: CSSWideKeyword | any; /** * Specifies how many times an animation cycle should play. */ "animation-iteration-count"?: CSSWideKeyword | any; /** * Defines the list of animations that apply to the element. */ "animation-name"?: CSSWideKeyword | any; /** * Defines whether an animation is running or paused. */ "animation-play-state"?: CSSWideKeyword | any; /** * Allows changing the style of any element to platform-based interface elements or vice versa. */ appearance?: CSSWideKeyword | any; /** * Determines whether or not the “back” side of a transformed element is visible when facing the viewer. */ "backface-visibility"?: CSSWideKeyword | any; /** * Shorthand property to set the values for one or more of: * background-clip, background-color, background-image, * background-origin, background-position, background-repeat, * background-size, and background-attachment. */ background?: CSSWideKeyword | any; /** * If a background-image is specified, this property determines * whether that image's position is fixed within the viewport, * or scrolls along with its containing block. * See CSS 3 background-attachment property https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment */ "background-attachment"?: CSSWideKeyword | "scroll" | "fixed" | "local"; /** * This property describes how the element's background images should blend with each other and the element's background color. * The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the * corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, * the UA must calculate its used value by repeating the list of values until there are enough. */ "background-blend-mode"?: CSSWideKeyword | any; /** * Sets the background color of an element. */ "background-color"?: CSSWideKeyword | any; "background-composite"?: CSSWideKeyword | any; /** * Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients. */ "background-image"?: CSSWideKeyword | any; /** * Specifies what the background-position property is relative to. */ "background-origin"?: CSSWideKeyword | any; /** * Sets the position of a background image. */ "background-position"?: CSSWideKeyword | any; /** * Background-repeat defines if and how background images will be repeated after they have been sized and positioned */ "background-repeat"?: CSSWideKeyword | any; /** * Defines the size of the background images */ "background-size"?: CSSWideKeyword | any; /** * Obsolete - spec retired, not implemented. */ "baseline-shift"?: CSSWideKeyword | any; /** * Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior. */ behavior?: CSSWideKeyword | any; /** * Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. * It can be used to set border-width, border-style and border-color, or a subset of these. */ border?: CSSWideKeyword | any; /** * Shorthand that sets the values of border-bottom-color, * border-bottom-style, and border-bottom-width. */ "border-bottom"?: CSSWideKeyword | any; /** * Sets the color of the bottom border of an element. */ "border-bottom-color"?: CSSWideKeyword | any; /** * Defines the shape of the border of the bottom-left corner. */ "border-bottom-left-radius"?: CSSWideKeyword | CSSLength; /** * Defines the shape of the border of the bottom-right corner. */ "border-bottom-right-radius"?: CSSWideKeyword | CSSLength; /** * Sets the line style of the bottom border of a box. */ "border-bottom-style"?: CSSWideKeyword | any; /** * Sets the width of an element's bottom border. To set all four borders, * use the border-width shorthand property which sets the values simultaneously for border-top-width, * border-right-width, border-bottom-width, and border-left-width. */ "border-bottom-width"?: CSSWideKeyword | any; /** * Border-collapse can be used for collapsing the borders between table cells */ "border-collapse"?: CSSWideKeyword | any; /** * The CSS border-color property sets the color of an element's four borders. * This property can have from one to four values, made up of the elementary properties: * • border-top-color * • border-right-color * • border-bottom-color * • border-left-color The default color is the currentColor of each of these values. * If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, * respectively. Providing three values sets the top, vertical, and bottom values, in that order. * Four values set all for sides: top, right, bottom, and left, in that order. */ "border-color"?: CSSWideKeyword | any; /** * Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). * Works along with border-radius to specify the size of each corner effect. */ "border-corner-shape"?: CSSWideKeyword | any; /** * The property border-image-source is used to set the image to be used instead of the border style. * If this is set to none the border-style is used instead. */ "border-image-source"?: CSSWideKeyword | any; /** * The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, * the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, * bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges. */ "border-image-width"?: CSSWideKeyword | any; /** * Shorthand property that defines the border-width, border-style and border-color of an element's left border in a single declaration. * Note that you can use the corresponding longhand properties to set specific individual properties of the left border — border-left-width, * border-left-style and border-left-color. */ "border-left"?: CSSWideKeyword | any; /** * The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, * but often you will find it more convenient to fix the border's left color as part of a shorthand set, either border-left or border-color. * Colors can be defined several ways. For more information, see Usage. */ "border-left-color"?: CSSWideKeyword | any; /** * Sets the style of an element's left border. To set all four borders, use the shorthand property, border-style. * Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. */ "border-left-style"?: CSSWideKeyword | any; /** * Sets the width of an element's left border. To set all four borders, * use the border-width shorthand property which sets the values simultaneously for border-top-width, * border-right-width, border-bottom-width, and border-left-width. */ "border-left-width"?: CSSWideKeyword | any; /** * Shorthand property that sets the rounding of all four corners. */ "border-radius"?: CSSWideKeyword | CSSLength; /** * Shorthand property that defines the border-width, border-style and border-color of an element's right border * in a single declaration. Note that you can use the corresponding longhand properties to set specific * individual properties of the right border — border-right-width, border-right-style and border-right-color. */ "border-right"?: CSSWideKeyword | any; /** * Sets the color of an element's right border. This page explains the border-right-color value, * but often you will find it more convenient to fix the border's right color as part of a shorthand set, * either border-right or border-color. * Colors can be defined several ways. For more information, see Usage. */ "border-right-color"?: CSSWideKeyword | any; /** * Sets the style of an element's right border. To set all four borders, use the shorthand property, * border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, * border-bottom-style, border-left-style. */ "border-right-style"?: CSSWideKeyword | any; /** * Sets the width of an element's right border. To set all four borders, * use the border-width shorthand property which sets the values simultaneously for border-top-width, * border-right-width, border-bottom-width, and border-left-width. */ "border-right-width"?: CSSWideKeyword | any; /** * Specifies the distance between the borders of adjacent cells. */ "border-spacing"?: CSSWideKeyword | any; /** * Sets the style of an element's four borders. This property can have from one to four values. * With only one value, the value will be applied to all four borders; * otherwise, this works as a shorthand property for each of border-top-style, border-right-style, * border-bottom-style, border-left-style, where each border style may be assigned a separate value. */ "border-style"?: CSSWideKeyword | any; /** * Shorthand property that defines the border-width, border-style and border-color of an element's top border * in a single declaration. Note that you can use the corresponding longhand properties to set specific * individual properties of the top border — border-top-width, border-top-style and border-top-color. */ "border-top"?: CSSWideKeyword | any; /** * Sets the color of an element's top border. This page explains the border-top-color value, * but often you will find it more convenient to fix the border's top color as part of a shorthand set, * either border-top or border-color. * Colors can be defined several ways. For more information, see Usage. */ "border-top-color"?: CSSWideKeyword | any; /** * Sets the rounding of the top-left corner of the element. */ "border-top-left-radius"?: CSSWideKeyword | CSSLength; /** * Sets the rounding of the top-right corner of the element. */ "border-top-right-radius"?: CSSWideKeyword | CSSLength; /** * Sets the style of an element's top border. To set all four borders, use the shorthand property, border-style. * Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. */ "border-top-style"?: CSSWideKeyword | any; /** * Sets the width of an element's top border. To set all four borders, * use the border-width shorthand property which sets the values simultaneously for border-top-width, * border-right-width, border-bottom-width, and border-left-width. */ "border-top-width"?: CSSWideKeyword | any; /** * Sets the width of an element's four borders. This property can have from one to four values. * This is a shorthand property for setting values simultaneously for border-top-width, * border-right-width, border-bottom-width, and border-left-width. */ "border-width"?: CSSWideKeyword | any; /** * This property specifies how far an absolutely positioned box's bottom margin edge * is offset above the bottom edge of the box's containing block. For relatively positioned boxes, * the offset is with respect to the bottom edges of the box itself * (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). */ bottom?: CSSWideKeyword | any; /** * Obsolete. */ "box-align"?: CSSWideKeyword | any; /** * Breaks a box into fragments creating new borders, * padding and repeating backgrounds or lets it stay as a continuous box on a page break, * column break, or, for inline elements, at a line break. */ "box-decoration-break"?: CSSWideKeyword | any; /** * Deprecated */ "box-direction"?: CSSWideKeyword | any; /** * Do not use. This property has been replaced by the flex-wrap property. * Gets or sets a value that specifies the direction to add successive rows or columns when the value of box-lines is set to multiple. */ "box-line-progression"?: CSSWideKeyword | any; /** * Do not use. This property has been replaced by the flex-wrap property. * Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object. */ "box-lines"?: CSSWideKeyword | any; /** * Do not use. This property has been replaced by flex-order. * Specifies the ordinal group that a child element of the object belongs to. * This ordinal value identifies the display order (along the axis defined by the box-orient property) for the group. */ "box-ordinal-group"?: CSSWideKeyword | any; /** * Deprecated. */ "box-flex"?: CSSWideKeyword | number; /** * Deprecated. */ "box-flex-group"?: CSSWideKeyword | number; /** * Cast a drop shadow from the frame of almost any element. * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */ "box-shadow"?: CSSWideKeyword | any; /** * The CSS break-after property allows you to force a break on multi-column layouts. * More specifically, it allows you to force a break after an element. * It allows you to determine if a break should occur, and what type of break it should be. * The break-after CSS property describes how the page, column or region break behaves after the generated box. * If there is no generated box, the property is ignored. */ "break-after"?: CSSWideKeyword | any; /** * Control page/column/region breaks that fall above a block of content */ "break-before"?: CSSWideKeyword | any; /** * Control page/column/region breaks that fall within a block of content */ "break-inside"?: CSSWideKeyword | any; /** * The clear CSS property specifies if an element can be positioned next to * or must be positioned below the floating elements that precede it in the markup. */ clear?: CSSWideKeyword | any; /** * Deprecated; see clip-path. * Lets you specify the dimensions of an absolutely positioned element that should be visible, * and the element is clipped into this shape, and displayed. */ clip?: CSSWideKeyword | any; /** * Clipping crops an graphic, so that only a portion of the graphic is rendered, or filled. * This clip-rule property, when used with the clip-path property, defines which clip rule, or algorithm, * to use when filling the different parts of a graphics. */ "clip-rule"?: CSSWideKeyword | any; /** * The color property sets the color of an element's foreground content (usually text), * accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a). */ color?: CSSWideKeyword | any; /** * Describes the number of columns of the element. * See CSS 3 column-count property https://www.w3.org/TR/css3-multicol/#cc */ "column-count"?: CSSWideKeyword | number | "auto"; /** * Specifies how to fill columns (balanced or sequential). */ "column-fill"?: CSSWideKeyword | any; /** * The column-gap property controls the width of the gap between columns in multi-column elements. */ "column-gap"?: CSSWideKeyword | any; /** * Sets the width, style, and color of the rule between columns. */ "column-rule"?: CSSWideKeyword | any; /** * Specifies the color of the rule between columns. */ "column-rule-color"?: CSSWideKeyword | any; /** * Specifies the width of the rule between columns. */ "column-rule-width"?: CSSWideKeyword | any; /** * The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. * An element that spans more than one column is called a spanning element. */ "column-span"?: CSSWideKeyword | any; /** * Specifies the width of columns in multi-column elements. */ "column-width"?: CSSWideKeyword | any; /** * This property is a shorthand property for setting column-width and/or column-count. */ columns?: CSSWideKeyword | any; /** * The counter-increment property accepts one or more names of counters (identifiers), * each one optionally followed by an integer which specifies the value by which the counter should be incremented * (e.g. if the value is 2, the counter increases by 2 each time it is invoked). */ "counter-increment"?: CSSWideKeyword | any; /** * The counter-reset property contains a list of one or more names of counters, * each one optionally followed by an integer (otherwise, the integer defaults to 0.). * Each time the given element is invoked, the counters specified by the property are set to the given integer. */ "counter-reset"?: CSSWideKeyword | any; /** * The cue property specifies sound files (known as an "auditory icon") to be played by speech media agents * before and after presenting an element's content; if only one file is specified, it is played both before and after. * The volume at which the file(s) should be played, relative to the volume of the main element, may also be specified. * The icon files may also be set separately with the cue-before and cue-after properties. */ cue?: CSSWideKeyword | any; /** * The cue-after property specifies a sound file (known as an "auditory icon") to be played by speech media agents * after presenting an element's content; the volume at which the file should be played may also be specified. * The shorthand property cue sets cue sounds for both before and after the element is presented. */ "cue-after"?: CSSWideKeyword | any; /** * Specifies the mouse cursor displayed when the mouse pointer is over an element. */ cursor?: CSSWideKeyword | any; /** * The direction CSS property specifies the text direction/writing direction. The rtl is used for Hebrew or Arabic text, the ltr is for other languages. */ direction?: CSSWideKeyword | any; /** * This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties. */ display?: CSSWideKeyword | any; /** * The ‘fill’ property paints the interior of the given graphical element. * The area to be painted consists of any areas inside the outline of the shape. * To determine the inside of the shape, all subpaths are considered, * and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. * The zero-width geometric outline of a shape is included in the area to be painted. */ fill?: CSSWideKeyword | any; /** * SVG: Specifies the opacity of the color or the content the current object is filled with. * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty */ "fill-opacity"?: CSSWideKeyword | number; /** * The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. * For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; * however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, * the interpretation of "inside" is not so obvious. * The ‘fill-rule’ property provides two options for how the inside of a shape is determined: */ "fill-rule"?: CSSWideKeyword | any; /** * Applies various image processing effects. This property is largely unsupported. See Compatibility section for more information. */ filter?: CSSWideKeyword | any; /** * Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. */ flex?: CSSWideKeyword | number | string; /** * Obsolete, do not use. This property has been renamed to align-items. * Specifies the alignment (perpendicular to the layout axis defined by the flex-direction property) of child elements of the object. */ "flex-align"?: CSSWideKeyword | any; /** * The flex-basis CSS property describes the initial main size of the flex item * before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink). */ "flex-basis"?: CSSWideKeyword | any; /** * The flex-direction CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis. */ "flex-direction"?: CSSWideKeyword | "row" | "row-reverse" | "column" | "column-reverse"; /** * The flex-flow CSS property defines the flex container's main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties. */ "flex-flow"?: CSSWideKeyword | string; /** * Specifies the flex grow factor of a flex item. * See CSS flex-grow property https://drafts.csswg.org/css-flexbox-1/#flex-grow-property */ "flex-grow"?: CSSWideKeyword | number; /** * Do not use. This property has been renamed to align-self * Specifies the alignment (perpendicular to the layout axis defined by flex-direction) of child elements of the object. */ "flex-item-align"?: CSSWideKeyword | any; /** * Do not use. This property has been renamed to align-content. * Specifies how a flexbox's lines align within the flexbox when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property. */ "flex-line-pack"?: CSSWideKeyword | any; /** * Gets or sets a value that specifies the ordinal group that a flexbox element belongs to. This ordinal value identifies the display order for the group. */ "flex-order"?: CSSWideKeyword | any; /** * Specifies the flex shrink factor of a flex item. * See CSS flex-shrink property https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property */ "flex-shrink"?: CSSWideKeyword | number; /** * Specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. * If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. * See CSS flex-wrap property https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property */ "flex-wrap"?: CSSWideKeyword | "nowrap" | "wrap" | "wrap-reverse"; /** * Elements which have the style float are floated horizontally. * These elements can move as far to the left or right of the containing element. * All elements after the floating element will flow around it, but elements before the floating element are not impacted. * If several floating elements are placed after each other, they will float next to each other as long as there is room. */ float?: CSSWideKeyword | any; /** * Flows content from a named flow (specified by a corresponding flow-into) through selected elements to form a dynamic chain of layout regions. */ "flow-from"?: CSSWideKeyword | any; /** * The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, * or you can set one of a choice of keywords to adopt a system font setting. */ font?: CSSWideKeyword | any; /** * The font-family property allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. * The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character. */ "font-family"?: CSSWideKeyword | any; /** * The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text. * This property controls <bold>metric kerning</bold> - that utilizes adjustment data contained in the font. Optical Kerning is not supported as yet. */ "font-kerning"?: CSSWideKeyword | any; /** * Specifies the size of the font. Used to compute em and ex units. * See CSS 3 font-size property https://www.w3.org/TR/css-fonts-3/#propdef-font-size */ "font-size"?: | CSSWideKeyword | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "larger" | "smaller" | CSSLength | CSSPercentage; /** * The font-size-adjust property adjusts the font-size of the fallback fonts defined with font-family, * so that the x-height is the same no matter what font is used. * This preserves the readability of the text when fallback happens. * See CSS 3 font-size-adjust property https://www.w3.org/TR/css-fonts-3/#propdef-font-size-adjust */ "font-size-adjust"?: CSSWideKeyword | "none" | number; /** * Allows you to expand or condense the widths for a normal, condensed, or expanded font face. * See CSS 3 font-stretch property https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch */ "font-stretch"?: | CSSWideKeyword | "normal" | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded"; /** * The font-style property allows normal, italic, or oblique faces to be selected. * Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. * Oblique faces can be simulated by artificially sloping the glyphs of the regular face. * See CSS 3 font-style property https://www.w3.org/TR/css-fonts-3/#propdef-font-style */ "font-style"?: CSSWideKeyword | "normal" | "italic" | "oblique"; /** * This value specifies whether the user agent is allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. */ "font-synthesis"?: CSSWideKeyword | any; /** * The font-variant property enables you to select the small-caps font within a font family. */ "font-variant"?: CSSWideKeyword | any; /** * Fonts can provide alternate glyphs in addition to default glyph for a character. This property provides control over the selection of these alternate glyphs. */ "font-variant-alternates"?: CSSWideKeyword | any; /** * Specifies the weight or boldness of the font. * See CSS 3 'font-weight' property https://www.w3.org/TR/css-fonts-3/#propdef-font-weight */ "font-weight"?: | CSSWideKeyword | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /** * Lays out one or more grid items bound by 4 grid lines. Shorthand for setting grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single declaration. */ "grid-area"?: CSSWideKeyword | any; /** * Controls a grid item's placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration. */ "grid-column"?: CSSWideKeyword | any; /** * Controls a grid item's placement in a grid area as well as grid position and a grid span. * The grid-column-end property (with grid-row-start, grid-row-end, and grid-column-start) determines a grid item's placement by specifying the grid lines of a grid item's grid area. */ "grid-column-end"?: CSSWideKeyword | any; /** * Determines a grid item's placement by specifying the starting grid lines of a grid item's grid area. * A grid item's placement in a grid area consists of a grid position and a grid span. * See also ( grid-row-start, grid-row-end, and grid-column-end) */ "grid-column-start"?: CSSWideKeyword | any; /** * Gets or sets a value that indicates which row an element within a Grid should appear in. Shorthand for setting grid-row-start and grid-row-end in a single declaration. */ "grid-row"?: CSSWideKeyword | any; /** * Determines a grid item’s placement by specifying the block-end. A grid item's placement in a grid area consists of a grid position and a grid span. * The grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end) determines a grid item's placement by specifying the grid lines of a grid item's grid area. */ "grid-row-end"?: CSSWideKeyword | any; /** * Specifies a row position based upon an integer location, string value, or desired row size. * css/properties/grid-row is used as short-hand for grid-row-position and grid-row-position */ "grid-row-position"?: CSSWideKeyword | any; "grid-row-span"?: CSSWideKeyword | any; /** * Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. * The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand. */ "grid-template-areas"?: CSSWideKeyword | any; /** * Specifies (with grid-template-rows) the line names and track sizing functions of the grid. * Each sizing function can be specified as a length, a percentage of the grid container’s size, * a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. */ "grid-template-columns"?: CSSWideKeyword | any; /** * Specifies (with grid-template-columns) the line names and track sizing functions of the grid. * Each sizing function can be specified as a length, a percentage of the grid container’s size, * a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. */ "grid-template-rows"?: CSSWideKeyword | any; /** * Sets the height of an element. The content area of the element height does not include the padding, border, and margin of the element. */ height?: CSSWideKeyword | any; /** * Specifies the minimum number of characters in a hyphenated word */ "hyphenate-limit-chars"?: CSSWideKeyword | any; /** * Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit. */ "hyphenate-limit-lines"?: CSSWideKeyword | any; /** * Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered * to pull part of a word from the next line back up into the current one. */ "hyphenate-limit-zone"?: CSSWideKeyword | any; /** * Specifies whether or not words in a sentence can be split by the use of a manual or automatic hyphenation mechanism. */ hyphens?: CSSWideKeyword | any; "ime-mode"?: CSSWideKeyword | any; /** * Defines how the browser distributes space between and around flex items * along the main-axis of their container. * See CSS justify-content property https://www.w3.org/TR/css-flexbox-1/#justify-content-property */ "justify-content"?: | CSSWideKeyword | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"; "layout-grid"?: CSSWideKeyword | any; "layout-grid-char"?: CSSWideKeyword | any; "layout-grid-line"?: CSSWideKeyword | any; "layout-grid-mode"?: CSSWideKeyword | any; "layout-grid-type"?: CSSWideKeyword | any; /** * Sets the left edge of an element */ left?: CSSWideKeyword | any; /** * The letter-spacing CSS property specifies the spacing behavior between text characters. */ "letter-spacing"?: CSSWideKeyword | any; /** * Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean. */ "line-break"?: CSSWideKeyword | any; "line-clamp"?: CSSWideKeyword | number; /** * Specifies the height of an inline block level element. * See CSS 2.1 line-height property https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height */ "line-height"?: CSSWideKeyword | "normal" | number | CSSLength | CSSPercentage; /** * Shorthand property that sets the list-style-type, list-style-position and list-style-image properties in one declaration. */ "list-style"?: CSSWideKeyword | any; /** * This property sets the image that will be used as the list item marker. When the image is available, * it will replace the marker set with the 'list-style-type' marker. That also means that if the image is not available, * it will show the style specified by list-style-property */ "list-style-image"?: CSSWideKeyword | any; /** * Specifies if the list-item markers should appear inside or outside the content flow. */ "list-style-position"?: CSSWideKeyword | any; /** * Specifies the type of list-item marker in a list. */ "list-style-type"?: CSSWideKeyword | any; /** * The margin property is shorthand to allow you to set all four margins of an element at once. * Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. * Negative values are also allowed. */ margin?: CSSWideKeyword | any; /** * margin-bottom sets the bottom margin of an element. */ "margin-bottom"?: CSSWideKeyword | any; /** * margin-left sets the left margin of an element. */ "margin-left"?: CSSWideKeyword | any; /** * margin-right sets the right margin of an element. */ "margin-right"?: CSSWideKeyword | any; /** * margin-top sets the top margin of an element. */ "margin-top"?: CSSWideKeyword | any; /** * The marquee-direction determines the initial direction in which the marquee content moves. */ "marquee-direction"?: CSSWideKeyword | any; /** * The 'marquee-style' property determines a marquee's scrolling behavior. */ "marquee-style"?: CSSWideKeyword | any; /** * This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. * Omitted values are set to their original properties' initial values. */ mask?: CSSWideKeyword | any; /** * This property is shorthand for setting mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat. * Omitted values are set to their original properties' initial values. */ "mask-border"?: CSSWideKeyword | any; /** * This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. * The first keyword applies to the horizontal sides, the second one applies to the vertical ones. * If the second keyword is absent, it is assumed to be the same as the first, similar to the CSS border-image-repeat property. */ "mask-border-repeat"?: CSSWideKeyword | any; /** * This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, * dividing it into nine regions: four corners, four edges, and a middle. * The middle image part is discarded and treated as fully transparent black unless the fill keyword is present. * The four values set the top, right, bottom and left offsets in that order, similar to the CSS border-image-slice property. */ "mask-border-slice"?: CSSWideKeyword | any; /** * Specifies an image to be used as a mask. An image that is empty, fails to download, is non-existent, or cannot be displayed is ignored and does not mask the element