From 7ba5fe32f807357ec6e70eccca8a9c9b35349878 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 15 Apr 2026 16:53:23 +0200 Subject: [PATCH] Add new html tags to the remote elements (#19723) - Add 72 missing HTML and SVG elements to the remote-dom component registry (48 HTML + 24 SVG), bringing the total from 47 to 119 supported elements - HTML additions include semantic inline text (b, i, u, s, mark, sub, sup, kbd, etc.), description lists, ruby annotations, structural elements (figure, details, dialog), and form utilities (fieldset, progress, meter, optgroup) - SVG additions include containers (svg, g, defs), shapes (path, circle, rect, line, polygon), text (text, tspan), gradients (linearGradient, radialGradient, stop), and utilities (clipPath, mask, foreignObject, marker) - Add htmlTag override to support SVG elements with camelCase names (e.g. clipPath, foreignObject) while keeping custom element tags lowercase per the Web Components spec --- .../generate-remote-dom-elements.ts | 2 +- .../scripts/remote-dom/generators/schemas.ts | 1 + .../src/constants/AllowedHtmlElements.ts | 424 +++- .../src/constants/HtmlTagToRemoteComponent.ts | 15 +- .../constants/SvgPresentationProperties.ts | 22 + .../host/generated/host-component-registry.ts | 156 ++ .../src/host/utils/createHtmlHostWrapper.ts | 8 +- .../src/remote/generated/remote-components.ts | 1912 +++++++++++++++++ .../src/remote/generated/remote-elements.ts | 1640 ++++++++++++++ 9 files changed, 4166 insertions(+), 14 deletions(-) create mode 100644 packages/twenty-front-component-renderer/src/constants/SvgPresentationProperties.ts diff --git a/packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts b/packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts index c3e71b4808..970d370b05 100644 --- a/packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts +++ b/packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts @@ -45,7 +45,7 @@ const getHtmlElementSchemas = (): ComponentSchema[] => { events: element.events ? [...COMMON_HTML_EVENTS, ...element.events] : COMMON_HTML_EVENTS, - htmlTag: extractHtmlTag(element.tag), + htmlTag: element.htmlTag ?? extractHtmlTag(element.tag), })); }; diff --git a/packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts b/packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts index 217dbfa912..0cb9c745b9 100644 --- a/packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts +++ b/packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts @@ -12,6 +12,7 @@ export const HtmlElementConfigZ = z.object({ .regex(/^Html[A-Z]/, 'Name must be PascalCase starting with Html'), properties: z.record(z.string(), PropertySchemaZ), events: z.array(z.string()).optional(), + htmlTag: z.string().optional(), }); export const HtmlElementConfigArrayZ = z.array(HtmlElementConfigZ); diff --git a/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts b/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts index af5923bbd6..acb0b67faa 100644 --- a/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts +++ b/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts @@ -1,13 +1,12 @@ -type PropertySchema = { - type: 'string' | 'number' | 'boolean'; - optional: boolean; -}; +import { type PropertySchema } from './PropertySchema'; +import { SVG_PRESENTATION_PROPERTIES } from './SvgPresentationProperties'; export type AllowedHtmlElement = { tag: string; name: string; properties: Record; events?: string[]; + htmlTag?: string; }; export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [ @@ -249,4 +248,421 @@ export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [ height: { type: 'number', optional: true }, }, }, + + // Semantic inline text + { tag: 'html-b', name: 'HtmlB', properties: {} }, + { tag: 'html-i', name: 'HtmlI', properties: {} }, + { tag: 'html-u', name: 'HtmlU', properties: {} }, + { tag: 'html-s', name: 'HtmlS', properties: {} }, + { tag: 'html-mark', name: 'HtmlMark', properties: {} }, + { tag: 'html-sub', name: 'HtmlSub', properties: {} }, + { tag: 'html-sup', name: 'HtmlSup', properties: {} }, + { tag: 'html-abbr', name: 'HtmlAbbr', properties: {} }, + { tag: 'html-cite', name: 'HtmlCite', properties: {} }, + { tag: 'html-kbd', name: 'HtmlKbd', properties: {} }, + { tag: 'html-samp', name: 'HtmlSamp', properties: {} }, + { tag: 'html-var', name: 'HtmlVar', properties: {} }, + { tag: 'html-dfn', name: 'HtmlDfn', properties: {} }, + { tag: 'html-bdi', name: 'HtmlBdi', properties: {} }, + { + tag: 'html-bdo', + name: 'HtmlBdo', + properties: { + dir: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-data', + name: 'HtmlData', + properties: { + value: { type: 'string', optional: true }, + }, + }, + + // Edited/annotated text + { + tag: 'html-del', + name: 'HtmlDel', + properties: { + cite: { type: 'string', optional: true }, + dateTime: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-ins', + name: 'HtmlIns', + properties: { + cite: { type: 'string', optional: true }, + dateTime: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-q', + name: 'HtmlQ', + properties: { + cite: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-time', + name: 'HtmlTime', + properties: { + dateTime: { type: 'string', optional: true }, + }, + }, + + // Ruby annotations + { tag: 'html-ruby', name: 'HtmlRuby', properties: {} }, + { tag: 'html-rt', name: 'HtmlRt', properties: {} }, + { tag: 'html-rp', name: 'HtmlRp', properties: {} }, + + // Description lists + { tag: 'html-dl', name: 'HtmlDl', properties: {} }, + { tag: 'html-dt', name: 'HtmlDt', properties: {} }, + { tag: 'html-dd', name: 'HtmlDd', properties: {} }, + + // Structural/semantic + { tag: 'html-figure', name: 'HtmlFigure', properties: {} }, + { tag: 'html-figcaption', name: 'HtmlFigcaption', properties: {} }, + { + tag: 'html-details', + name: 'HtmlDetails', + properties: { + open: { type: 'boolean', optional: true }, + }, + }, + { tag: 'html-summary', name: 'HtmlSummary', properties: {} }, + { tag: 'html-address', name: 'HtmlAddress', properties: {} }, + { + tag: 'html-dialog', + name: 'HtmlDialog', + properties: { + open: { type: 'boolean', optional: true }, + }, + }, + { tag: 'html-hgroup', name: 'HtmlHgroup', properties: {} }, + { tag: 'html-search', name: 'HtmlSearch', properties: {} }, + + // Table additions + { tag: 'html-caption', name: 'HtmlCaption', properties: {} }, + { + tag: 'html-colgroup', + name: 'HtmlColgroup', + properties: { + span: { type: 'number', optional: true }, + }, + }, + { + tag: 'html-col', + name: 'HtmlCol', + properties: { + span: { type: 'number', optional: true }, + }, + }, + + // Form additions + { + tag: 'html-fieldset', + name: 'HtmlFieldset', + properties: { + disabled: { type: 'boolean', optional: true }, + name: { type: 'string', optional: true }, + }, + }, + { tag: 'html-legend', name: 'HtmlLegend', properties: {} }, + { + tag: 'html-output', + name: 'HtmlOutput', + properties: { + name: { type: 'string', optional: true }, + htmlFor: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-progress', + name: 'HtmlProgress', + properties: { + value: { type: 'number', optional: true }, + max: { type: 'number', optional: true }, + }, + }, + { + tag: 'html-meter', + name: 'HtmlMeter', + properties: { + value: { type: 'number', optional: true }, + min: { type: 'number', optional: true }, + max: { type: 'number', optional: true }, + low: { type: 'number', optional: true }, + high: { type: 'number', optional: true }, + optimum: { type: 'number', optional: true }, + }, + }, + { + tag: 'html-optgroup', + name: 'HtmlOptgroup', + properties: { + label: { type: 'string', optional: true }, + disabled: { type: 'boolean', optional: true }, + }, + }, + { tag: 'html-datalist', name: 'HtmlDatalist', properties: {} }, + + // Media additions + { tag: 'html-picture', name: 'HtmlPicture', properties: {} }, + { + tag: 'html-track', + name: 'HtmlTrack', + properties: { + src: { type: 'string', optional: true }, + kind: { type: 'string', optional: true }, + srclang: { type: 'string', optional: true }, + label: { type: 'string', optional: true }, + default: { type: 'boolean', optional: true }, + }, + }, + + // Miscellaneous + { tag: 'html-wbr', name: 'HtmlWbr', properties: {} }, + { tag: 'html-menu', name: 'HtmlMenu', properties: {} }, + + // SVG container/structural + { + tag: 'html-svg', + name: 'HtmlSvg', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + viewBox: { type: 'string', optional: true }, + xmlns: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + preserveAspectRatio: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-g', + name: 'HtmlG', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + }, + }, + { tag: 'html-defs', name: 'HtmlDefs', properties: {} }, + { + tag: 'html-symbol', + name: 'HtmlSymbol', + properties: { + viewBox: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-use', + name: 'HtmlUse', + properties: { + href: { type: 'string', optional: true }, + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-clippath', + name: 'HtmlClipPath', + htmlTag: 'clipPath', + properties: { + clipPathUnits: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-mask', + name: 'HtmlMask', + properties: { + maskUnits: { type: 'string', optional: true }, + }, + }, + + // SVG shapes + { + tag: 'html-circle', + name: 'HtmlCircle', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + cx: { type: 'string', optional: true }, + cy: { type: 'string', optional: true }, + r: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-ellipse', + name: 'HtmlEllipse', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + cx: { type: 'string', optional: true }, + cy: { type: 'string', optional: true }, + rx: { type: 'string', optional: true }, + ry: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-rect', + name: 'HtmlRect', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + rx: { type: 'string', optional: true }, + ry: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-line', + name: 'HtmlLine', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + x1: { type: 'string', optional: true }, + y1: { type: 'string', optional: true }, + x2: { type: 'string', optional: true }, + y2: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-path', + name: 'HtmlPath', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + d: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-polygon', + name: 'HtmlPolygon', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + points: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-polyline', + name: 'HtmlPolyline', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + points: { type: 'string', optional: true }, + }, + }, + + // SVG text + { + tag: 'html-text', + name: 'HtmlText', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + dx: { type: 'string', optional: true }, + dy: { type: 'string', optional: true }, + textAnchor: { type: 'string', optional: true }, + dominantBaseline: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-tspan', + name: 'HtmlTspan', + properties: { + ...SVG_PRESENTATION_PROPERTIES, + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + dx: { type: 'string', optional: true }, + dy: { type: 'string', optional: true }, + }, + }, + + // SVG gradients/patterns + { + tag: 'html-lineargradient', + name: 'HtmlLinearGradient', + htmlTag: 'linearGradient', + properties: { + x1: { type: 'string', optional: true }, + y1: { type: 'string', optional: true }, + x2: { type: 'string', optional: true }, + y2: { type: 'string', optional: true }, + gradientUnits: { type: 'string', optional: true }, + gradientTransform: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-radialgradient', + name: 'HtmlRadialGradient', + htmlTag: 'radialGradient', + properties: { + cx: { type: 'string', optional: true }, + cy: { type: 'string', optional: true }, + r: { type: 'string', optional: true }, + fx: { type: 'string', optional: true }, + fy: { type: 'string', optional: true }, + gradientUnits: { type: 'string', optional: true }, + gradientTransform: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-stop', + name: 'HtmlStop', + properties: { + offset: { type: 'string', optional: true }, + stopColor: { type: 'string', optional: true }, + stopOpacity: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-pattern', + name: 'HtmlPattern', + properties: { + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + patternUnits: { type: 'string', optional: true }, + patternTransform: { type: 'string', optional: true }, + }, + }, + + // SVG other + { + tag: 'html-image', + name: 'HtmlImage', + properties: { + href: { type: 'string', optional: true }, + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + preserveAspectRatio: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-foreignobject', + name: 'HtmlForeignObject', + htmlTag: 'foreignObject', + properties: { + x: { type: 'string', optional: true }, + y: { type: 'string', optional: true }, + width: { type: 'string', optional: true }, + height: { type: 'string', optional: true }, + }, + }, + { + tag: 'html-marker', + name: 'HtmlMarker', + properties: { + markerWidth: { type: 'string', optional: true }, + markerHeight: { type: 'string', optional: true }, + refX: { type: 'string', optional: true }, + refY: { type: 'string', optional: true }, + orient: { type: 'string', optional: true }, + markerUnits: { type: 'string', optional: true }, + }, + }, + { tag: 'html-title', name: 'HtmlTitle', properties: {} }, ]; diff --git a/packages/twenty-front-component-renderer/src/constants/HtmlTagToRemoteComponent.ts b/packages/twenty-front-component-renderer/src/constants/HtmlTagToRemoteComponent.ts index 88e56a773d..b7a61a530c 100644 --- a/packages/twenty-front-component-renderer/src/constants/HtmlTagToRemoteComponent.ts +++ b/packages/twenty-front-component-renderer/src/constants/HtmlTagToRemoteComponent.ts @@ -4,24 +4,29 @@ const UTILITY_TAG_MAPPINGS: Record = { 'remote-style': 'RemoteStyle', }; +const getHostTagName = (element: (typeof ALLOWED_HTML_ELEMENTS)[number]) => + element.htmlTag ?? + (element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag); + export const HTML_TAG_TO_REMOTE_COMPONENT: Record = { ...Object.fromEntries( ALLOWED_HTML_ELEMENTS.map((element) => [ - element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag, + getHostTagName(element), element.name, ]), ), ...UTILITY_TAG_MAPPINGS, }; -// Maps standard HTML tag names to their custom element equivalents -// used by the remote DOM polyfill (e.g. "div" → "html-div"). +// Maps standard HTML/SVG tag names to their custom element equivalents +// used by the remote DOM polyfill (e.g. "div" → "html-div", +// "clipPath" → "html-clippath"). // Consumed by the jsx-runtime wrapper so React creates the correct -// custom elements instead of standard HTML tags. +// custom elements instead of standard HTML/SVG tags. export const HTML_TAG_TO_CUSTOM_ELEMENT_TAG: Record = { ...Object.fromEntries( ALLOWED_HTML_ELEMENTS.map((element) => [ - element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag, + getHostTagName(element), element.tag, ]), ), diff --git a/packages/twenty-front-component-renderer/src/constants/SvgPresentationProperties.ts b/packages/twenty-front-component-renderer/src/constants/SvgPresentationProperties.ts new file mode 100644 index 0000000000..b1a6f24541 --- /dev/null +++ b/packages/twenty-front-component-renderer/src/constants/SvgPresentationProperties.ts @@ -0,0 +1,22 @@ +import { type PropertySchema } from './PropertySchema'; + +export const SVG_PRESENTATION_PROPERTIES: Record = { + fill: { type: 'string', optional: true }, + fillOpacity: { type: 'string', optional: true }, + fillRule: { type: 'string', optional: true }, + stroke: { type: 'string', optional: true }, + strokeWidth: { type: 'string', optional: true }, + strokeOpacity: { type: 'string', optional: true }, + strokeLinecap: { type: 'string', optional: true }, + strokeLinejoin: { type: 'string', optional: true }, + strokeDasharray: { type: 'string', optional: true }, + strokeDashoffset: { type: 'string', optional: true }, + strokeMiterlimit: { type: 'string', optional: true }, + opacity: { type: 'string', optional: true }, + transform: { type: 'string', optional: true }, + clipPath: { type: 'string', optional: true }, + clipRule: { type: 'string', optional: true }, + mask: { type: 'string', optional: true }, + filter: { type: 'string', optional: true }, + pointerEvents: { type: 'string', optional: true }, +}; diff --git a/packages/twenty-front-component-renderer/src/host/generated/host-component-registry.ts b/packages/twenty-front-component-renderer/src/host/generated/host-component-registry.ts index dd7bf4dc1e..39910e242f 100644 --- a/packages/twenty-front-component-renderer/src/host/generated/host-component-registry.ts +++ b/packages/twenty-front-component-renderer/src/host/generated/host-component-registry.ts @@ -92,6 +92,162 @@ export const componentRegistry: Map = new Map([ 'html-source', createRemoteComponentRenderer(createHtmlHostWrapper('source')), ], + ['html-b', createRemoteComponentRenderer(createHtmlHostWrapper('b'))], + ['html-i', createRemoteComponentRenderer(createHtmlHostWrapper('i'))], + ['html-u', createRemoteComponentRenderer(createHtmlHostWrapper('u'))], + ['html-s', createRemoteComponentRenderer(createHtmlHostWrapper('s'))], + ['html-mark', createRemoteComponentRenderer(createHtmlHostWrapper('mark'))], + ['html-sub', createRemoteComponentRenderer(createHtmlHostWrapper('sub'))], + ['html-sup', createRemoteComponentRenderer(createHtmlHostWrapper('sup'))], + ['html-abbr', createRemoteComponentRenderer(createHtmlHostWrapper('abbr'))], + ['html-cite', createRemoteComponentRenderer(createHtmlHostWrapper('cite'))], + ['html-kbd', createRemoteComponentRenderer(createHtmlHostWrapper('kbd'))], + ['html-samp', createRemoteComponentRenderer(createHtmlHostWrapper('samp'))], + ['html-var', createRemoteComponentRenderer(createHtmlHostWrapper('var'))], + ['html-dfn', createRemoteComponentRenderer(createHtmlHostWrapper('dfn'))], + ['html-bdi', createRemoteComponentRenderer(createHtmlHostWrapper('bdi'))], + ['html-bdo', createRemoteComponentRenderer(createHtmlHostWrapper('bdo'))], + ['html-data', createRemoteComponentRenderer(createHtmlHostWrapper('data'))], + ['html-del', createRemoteComponentRenderer(createHtmlHostWrapper('del'))], + ['html-ins', createRemoteComponentRenderer(createHtmlHostWrapper('ins'))], + ['html-q', createRemoteComponentRenderer(createHtmlHostWrapper('q'))], + ['html-time', createRemoteComponentRenderer(createHtmlHostWrapper('time'))], + ['html-ruby', createRemoteComponentRenderer(createHtmlHostWrapper('ruby'))], + ['html-rt', createRemoteComponentRenderer(createHtmlHostWrapper('rt'))], + ['html-rp', createRemoteComponentRenderer(createHtmlHostWrapper('rp'))], + ['html-dl', createRemoteComponentRenderer(createHtmlHostWrapper('dl'))], + ['html-dt', createRemoteComponentRenderer(createHtmlHostWrapper('dt'))], + ['html-dd', createRemoteComponentRenderer(createHtmlHostWrapper('dd'))], + [ + 'html-figure', + createRemoteComponentRenderer(createHtmlHostWrapper('figure')), + ], + [ + 'html-figcaption', + createRemoteComponentRenderer(createHtmlHostWrapper('figcaption')), + ], + [ + 'html-details', + createRemoteComponentRenderer(createHtmlHostWrapper('details')), + ], + [ + 'html-summary', + createRemoteComponentRenderer(createHtmlHostWrapper('summary')), + ], + [ + 'html-address', + createRemoteComponentRenderer(createHtmlHostWrapper('address')), + ], + [ + 'html-dialog', + createRemoteComponentRenderer(createHtmlHostWrapper('dialog')), + ], + [ + 'html-hgroup', + createRemoteComponentRenderer(createHtmlHostWrapper('hgroup')), + ], + [ + 'html-search', + createRemoteComponentRenderer(createHtmlHostWrapper('search')), + ], + [ + 'html-caption', + createRemoteComponentRenderer(createHtmlHostWrapper('caption')), + ], + [ + 'html-colgroup', + createRemoteComponentRenderer(createHtmlHostWrapper('colgroup')), + ], + ['html-col', createRemoteComponentRenderer(createHtmlHostWrapper('col'))], + [ + 'html-fieldset', + createRemoteComponentRenderer(createHtmlHostWrapper('fieldset')), + ], + [ + 'html-legend', + createRemoteComponentRenderer(createHtmlHostWrapper('legend')), + ], + [ + 'html-output', + createRemoteComponentRenderer(createHtmlHostWrapper('output')), + ], + [ + 'html-progress', + createRemoteComponentRenderer(createHtmlHostWrapper('progress')), + ], + ['html-meter', createRemoteComponentRenderer(createHtmlHostWrapper('meter'))], + [ + 'html-optgroup', + createRemoteComponentRenderer(createHtmlHostWrapper('optgroup')), + ], + [ + 'html-datalist', + createRemoteComponentRenderer(createHtmlHostWrapper('datalist')), + ], + [ + 'html-picture', + createRemoteComponentRenderer(createHtmlHostWrapper('picture')), + ], + ['html-track', createRemoteComponentRenderer(createHtmlHostWrapper('track'))], + ['html-wbr', createRemoteComponentRenderer(createHtmlHostWrapper('wbr'))], + ['html-menu', createRemoteComponentRenderer(createHtmlHostWrapper('menu'))], + ['html-svg', createRemoteComponentRenderer(createHtmlHostWrapper('svg'))], + ['html-g', createRemoteComponentRenderer(createHtmlHostWrapper('g'))], + ['html-defs', createRemoteComponentRenderer(createHtmlHostWrapper('defs'))], + [ + 'html-symbol', + createRemoteComponentRenderer(createHtmlHostWrapper('symbol')), + ], + ['html-use', createRemoteComponentRenderer(createHtmlHostWrapper('use'))], + [ + 'html-clippath', + createRemoteComponentRenderer(createHtmlHostWrapper('clipPath')), + ], + ['html-mask', createRemoteComponentRenderer(createHtmlHostWrapper('mask'))], + [ + 'html-circle', + createRemoteComponentRenderer(createHtmlHostWrapper('circle')), + ], + [ + 'html-ellipse', + createRemoteComponentRenderer(createHtmlHostWrapper('ellipse')), + ], + ['html-rect', createRemoteComponentRenderer(createHtmlHostWrapper('rect'))], + ['html-line', createRemoteComponentRenderer(createHtmlHostWrapper('line'))], + ['html-path', createRemoteComponentRenderer(createHtmlHostWrapper('path'))], + [ + 'html-polygon', + createRemoteComponentRenderer(createHtmlHostWrapper('polygon')), + ], + [ + 'html-polyline', + createRemoteComponentRenderer(createHtmlHostWrapper('polyline')), + ], + ['html-text', createRemoteComponentRenderer(createHtmlHostWrapper('text'))], + ['html-tspan', createRemoteComponentRenderer(createHtmlHostWrapper('tspan'))], + [ + 'html-lineargradient', + createRemoteComponentRenderer(createHtmlHostWrapper('linearGradient')), + ], + [ + 'html-radialgradient', + createRemoteComponentRenderer(createHtmlHostWrapper('radialGradient')), + ], + ['html-stop', createRemoteComponentRenderer(createHtmlHostWrapper('stop'))], + [ + 'html-pattern', + createRemoteComponentRenderer(createHtmlHostWrapper('pattern')), + ], + ['html-image', createRemoteComponentRenderer(createHtmlHostWrapper('image'))], + [ + 'html-foreignobject', + createRemoteComponentRenderer(createHtmlHostWrapper('foreignObject')), + ], + [ + 'html-marker', + createRemoteComponentRenderer(createHtmlHostWrapper('marker')), + ], + ['html-title', createRemoteComponentRenderer(createHtmlHostWrapper('title'))], ['remote-style', createRemoteComponentRenderer(RemoteStyleRenderer)], ['remote-fragment', RemoteFragmentRenderer], ]); diff --git a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts index 0ac6e7d129..dd12398e24 100644 --- a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts +++ b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts @@ -13,14 +13,14 @@ const EVENT_NAME_MAP: Record = Object.fromEntries( ); const VOID_ELEMENTS = new Set([ - 'input', - 'br', - 'hr', - 'img', 'area', 'base', + 'br', 'col', 'embed', + 'hr', + 'img', + 'input', 'link', 'meta', 'source', diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts index e057085bd5..9027343b24 100644 --- a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts +++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts @@ -47,6 +47,78 @@ import { HtmlVideoElement, HtmlAudioElement, HtmlSourceElement, + HtmlBElement, + HtmlIElement, + HtmlUElement, + HtmlSElement, + HtmlMarkElement, + HtmlSubElement, + HtmlSupElement, + HtmlAbbrElement, + HtmlCiteElement, + HtmlKbdElement, + HtmlSampElement, + HtmlVarElement, + HtmlDfnElement, + HtmlBdiElement, + HtmlBdoElement, + HtmlDataElement, + HtmlDelElement, + HtmlInsElement, + HtmlQElement, + HtmlTimeElement, + HtmlRubyElement, + HtmlRtElement, + HtmlRpElement, + HtmlDlElement, + HtmlDtElement, + HtmlDdElement, + HtmlFigureElement, + HtmlFigcaptionElement, + HtmlDetailsElement, + HtmlSummaryElement, + HtmlAddressElement, + HtmlDialogElement, + HtmlHgroupElement, + HtmlSearchElement, + HtmlCaptionElement, + HtmlColgroupElement, + HtmlColElement, + HtmlFieldsetElement, + HtmlLegendElement, + HtmlOutputElement, + HtmlProgressElement, + HtmlMeterElement, + HtmlOptgroupElement, + HtmlDatalistElement, + HtmlPictureElement, + HtmlTrackElement, + HtmlWbrElement, + HtmlMenuElement, + HtmlSvgElement, + HtmlGElement, + HtmlDefsElement, + HtmlSymbolElement, + HtmlUseElement, + HtmlClipPathElement, + HtmlMaskElement, + HtmlCircleElement, + HtmlEllipseElement, + HtmlRectElement, + HtmlLineElement, + HtmlPathElement, + HtmlPolygonElement, + HtmlPolylineElement, + HtmlTextElement, + HtmlTspanElement, + HtmlLinearGradientElement, + HtmlRadialGradientElement, + HtmlStopElement, + HtmlPatternElement, + HtmlImageElement, + HtmlForeignObjectElement, + HtmlMarkerElement, + HtmlTitleElement, RemoteStyleElement, } from './remote-elements'; @@ -1264,6 +1336,1846 @@ export const HtmlSource = createRemoteComponent( }, }, ); +export const HtmlB = createRemoteComponent('html-b', HtmlBElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlI = createRemoteComponent('html-i', HtmlIElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlU = createRemoteComponent('html-u', HtmlUElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlS = createRemoteComponent('html-s', HtmlSElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlMark = createRemoteComponent('html-mark', HtmlMarkElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlSub = createRemoteComponent('html-sub', HtmlSubElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlSup = createRemoteComponent('html-sup', HtmlSupElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlAbbr = createRemoteComponent('html-abbr', HtmlAbbrElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlCite = createRemoteComponent('html-cite', HtmlCiteElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlKbd = createRemoteComponent('html-kbd', HtmlKbdElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlSamp = createRemoteComponent('html-samp', HtmlSampElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlVar = createRemoteComponent('html-var', HtmlVarElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDfn = createRemoteComponent('html-dfn', HtmlDfnElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlBdi = createRemoteComponent('html-bdi', HtmlBdiElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlBdo = createRemoteComponent('html-bdo', HtmlBdoElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlData = createRemoteComponent('html-data', HtmlDataElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDel = createRemoteComponent('html-del', HtmlDelElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlIns = createRemoteComponent('html-ins', HtmlInsElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlQ = createRemoteComponent('html-q', HtmlQElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlTime = createRemoteComponent('html-time', HtmlTimeElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlRuby = createRemoteComponent('html-ruby', HtmlRubyElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlRt = createRemoteComponent('html-rt', HtmlRtElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlRp = createRemoteComponent('html-rp', HtmlRpElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDl = createRemoteComponent('html-dl', HtmlDlElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDt = createRemoteComponent('html-dt', HtmlDtElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDd = createRemoteComponent('html-dd', HtmlDdElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlFigure = createRemoteComponent( + 'html-figure', + HtmlFigureElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlFigcaption = createRemoteComponent( + 'html-figcaption', + HtmlFigcaptionElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlDetails = createRemoteComponent( + 'html-details', + HtmlDetailsElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlSummary = createRemoteComponent( + 'html-summary', + HtmlSummaryElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlAddress = createRemoteComponent( + 'html-address', + HtmlAddressElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlDialog = createRemoteComponent( + 'html-dialog', + HtmlDialogElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlHgroup = createRemoteComponent( + 'html-hgroup', + HtmlHgroupElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlSearch = createRemoteComponent( + 'html-search', + HtmlSearchElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlCaption = createRemoteComponent( + 'html-caption', + HtmlCaptionElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlColgroup = createRemoteComponent( + 'html-colgroup', + HtmlColgroupElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlCol = createRemoteComponent('html-col', HtmlColElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlFieldset = createRemoteComponent( + 'html-fieldset', + HtmlFieldsetElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlLegend = createRemoteComponent( + 'html-legend', + HtmlLegendElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlOutput = createRemoteComponent( + 'html-output', + HtmlOutputElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlProgress = createRemoteComponent( + 'html-progress', + HtmlProgressElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlMeter = createRemoteComponent('html-meter', HtmlMeterElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlOptgroup = createRemoteComponent( + 'html-optgroup', + HtmlOptgroupElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlDatalist = createRemoteComponent( + 'html-datalist', + HtmlDatalistElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlPicture = createRemoteComponent( + 'html-picture', + HtmlPictureElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlTrack = createRemoteComponent('html-track', HtmlTrackElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlWbr = createRemoteComponent('html-wbr', HtmlWbrElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlMenu = createRemoteComponent('html-menu', HtmlMenuElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlSvg = createRemoteComponent('html-svg', HtmlSvgElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlG = createRemoteComponent('html-g', HtmlGElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlDefs = createRemoteComponent('html-defs', HtmlDefsElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlSymbol = createRemoteComponent( + 'html-symbol', + HtmlSymbolElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlUse = createRemoteComponent('html-use', HtmlUseElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlClipPath = createRemoteComponent( + 'html-clippath', + HtmlClipPathElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlMask = createRemoteComponent('html-mask', HtmlMaskElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlCircle = createRemoteComponent( + 'html-circle', + HtmlCircleElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlEllipse = createRemoteComponent( + 'html-ellipse', + HtmlEllipseElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlRect = createRemoteComponent('html-rect', HtmlRectElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlLine = createRemoteComponent('html-line', HtmlLineElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlPath = createRemoteComponent('html-path', HtmlPathElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlPolygon = createRemoteComponent( + 'html-polygon', + HtmlPolygonElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlPolyline = createRemoteComponent( + 'html-polyline', + HtmlPolylineElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlText = createRemoteComponent('html-text', HtmlTextElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlTspan = createRemoteComponent('html-tspan', HtmlTspanElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlLinearGradient = createRemoteComponent( + 'html-lineargradient', + HtmlLinearGradientElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlRadialGradient = createRemoteComponent( + 'html-radialgradient', + HtmlRadialGradientElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlStop = createRemoteComponent('html-stop', HtmlStopElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlPattern = createRemoteComponent( + 'html-pattern', + HtmlPatternElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlImage = createRemoteComponent('html-image', HtmlImageElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); +export const HtmlForeignObject = createRemoteComponent( + 'html-foreignobject', + HtmlForeignObjectElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlMarker = createRemoteComponent( + 'html-marker', + HtmlMarkerElement, + { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, + }, +); +export const HtmlTitle = createRemoteComponent('html-title', HtmlTitleElement, { + eventProps: { + onClick: { event: 'click' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, + onFocus: { event: 'focus' }, + onBlur: { event: 'blur' }, + onChange: { event: 'change' }, + onInput: { event: 'input' }, + onSubmit: { event: 'submit' }, + onScroll: { event: 'scroll' }, + onWheel: { event: 'wheel' }, + onContextMenu: { event: 'contextmenu' }, + onDrag: { event: 'drag' }, + }, +}); export const RemoteStyle = createRemoteComponent( 'remote-style', RemoteStyleElement, diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts index 60bad229f1..d5a0259d09 100644 --- a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts +++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts @@ -816,6 +816,1502 @@ export const HtmlSourceElement = createRemoteElement< }, events: [...HTML_COMMON_EVENTS_ARRAY], }); +export const HtmlBElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlIElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlUElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlMarkElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSubElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSupElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlAbbrElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlCiteElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlKbdElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSampElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlVarElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDfnElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlBdiElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlBdoProperties = HtmlCommonProperties & { + dir?: string; +}; + +export const HtmlBdoElement = createRemoteElement< + HtmlBdoProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + dir: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlDataProperties = HtmlCommonProperties & { + value?: string; +}; + +export const HtmlDataElement = createRemoteElement< + HtmlDataProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + value: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlDelProperties = HtmlCommonProperties & { + cite?: string; + dateTime?: string; +}; + +export const HtmlDelElement = createRemoteElement< + HtmlDelProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + cite: { type: String }, + dateTime: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlInsProperties = HtmlCommonProperties & { + cite?: string; + dateTime?: string; +}; + +export const HtmlInsElement = createRemoteElement< + HtmlInsProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + cite: { type: String }, + dateTime: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlQProperties = HtmlCommonProperties & { + cite?: string; +}; + +export const HtmlQElement = createRemoteElement< + HtmlQProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + cite: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlTimeProperties = HtmlCommonProperties & { + dateTime?: string; +}; + +export const HtmlTimeElement = createRemoteElement< + HtmlTimeProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + dateTime: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlRubyElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlRtElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlRpElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDlElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDtElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDdElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlFigureElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlFigcaptionElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlDetailsProperties = HtmlCommonProperties & { + open?: boolean; +}; + +export const HtmlDetailsElement = createRemoteElement< + HtmlDetailsProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + open: { type: Boolean }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSummaryElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlAddressElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlDialogProperties = HtmlCommonProperties & { + open?: boolean; +}; + +export const HtmlDialogElement = createRemoteElement< + HtmlDialogProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + open: { type: Boolean }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlHgroupElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlSearchElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlCaptionElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlColgroupProperties = HtmlCommonProperties & { + span?: number; +}; + +export const HtmlColgroupElement = createRemoteElement< + HtmlColgroupProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + span: { type: Number }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlColProperties = HtmlCommonProperties & { + span?: number; +}; + +export const HtmlColElement = createRemoteElement< + HtmlColProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + span: { type: Number }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlFieldsetProperties = HtmlCommonProperties & { + disabled?: boolean; + name?: string; +}; + +export const HtmlFieldsetElement = createRemoteElement< + HtmlFieldsetProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + disabled: { type: Boolean }, + name: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlLegendElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlOutputProperties = HtmlCommonProperties & { + name?: string; + htmlFor?: string; +}; + +export const HtmlOutputElement = createRemoteElement< + HtmlOutputProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + name: { type: String }, + htmlFor: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlProgressProperties = HtmlCommonProperties & { + value?: number; + max?: number; +}; + +export const HtmlProgressElement = createRemoteElement< + HtmlProgressProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + value: { type: Number }, + max: { type: Number }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlMeterProperties = HtmlCommonProperties & { + value?: number; + min?: number; + max?: number; + low?: number; + high?: number; + optimum?: number; +}; + +export const HtmlMeterElement = createRemoteElement< + HtmlMeterProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + value: { type: Number }, + min: { type: Number }, + max: { type: Number }, + low: { type: Number }, + high: { type: Number }, + optimum: { type: Number }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlOptgroupProperties = HtmlCommonProperties & { + label?: string; + disabled?: boolean; +}; + +export const HtmlOptgroupElement = createRemoteElement< + HtmlOptgroupProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + label: { type: String }, + disabled: { type: Boolean }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDatalistElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlPictureElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlTrackProperties = HtmlCommonProperties & { + src?: string; + kind?: string; + srclang?: string; + label?: string; + default?: boolean; +}; + +export const HtmlTrackElement = createRemoteElement< + HtmlTrackProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + src: { type: String }, + kind: { type: String }, + srclang: { type: String }, + label: { type: String }, + default: { type: Boolean }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlWbrElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlMenuElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlSvgProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + viewBox?: string; + xmlns?: string; + width?: string; + height?: string; + preserveAspectRatio?: string; +}; + +export const HtmlSvgElement = createRemoteElement< + HtmlSvgProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + viewBox: { type: String }, + xmlns: { type: String }, + width: { type: String }, + height: { type: String }, + preserveAspectRatio: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlGProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; +}; + +export const HtmlGElement = createRemoteElement< + HtmlGProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlDefsElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlSymbolProperties = HtmlCommonProperties & { + viewBox?: string; +}; + +export const HtmlSymbolElement = createRemoteElement< + HtmlSymbolProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + viewBox: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlUseProperties = HtmlCommonProperties & { + href?: string; + x?: string; + y?: string; + width?: string; + height?: string; +}; + +export const HtmlUseElement = createRemoteElement< + HtmlUseProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + href: { type: String }, + x: { type: String }, + y: { type: String }, + width: { type: String }, + height: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlClipPathProperties = HtmlCommonProperties & { + clipPathUnits?: string; +}; + +export const HtmlClipPathElement = createRemoteElement< + HtmlClipPathProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + clipPathUnits: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlMaskProperties = HtmlCommonProperties & { + maskUnits?: string; +}; + +export const HtmlMaskElement = createRemoteElement< + HtmlMaskProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + maskUnits: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlCircleProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + cx?: string; + cy?: string; + r?: string; +}; + +export const HtmlCircleElement = createRemoteElement< + HtmlCircleProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + cx: { type: String }, + cy: { type: String }, + r: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlEllipseProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + cx?: string; + cy?: string; + rx?: string; + ry?: string; +}; + +export const HtmlEllipseElement = createRemoteElement< + HtmlEllipseProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + cx: { type: String }, + cy: { type: String }, + rx: { type: String }, + ry: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlRectProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + x?: string; + y?: string; + width?: string; + height?: string; + rx?: string; + ry?: string; +}; + +export const HtmlRectElement = createRemoteElement< + HtmlRectProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + x: { type: String }, + y: { type: String }, + width: { type: String }, + height: { type: String }, + rx: { type: String }, + ry: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlLineProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + x1?: string; + y1?: string; + x2?: string; + y2?: string; +}; + +export const HtmlLineElement = createRemoteElement< + HtmlLineProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + x1: { type: String }, + y1: { type: String }, + x2: { type: String }, + y2: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlPathProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + d?: string; +}; + +export const HtmlPathElement = createRemoteElement< + HtmlPathProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + d: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlPolygonProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + points?: string; +}; + +export const HtmlPolygonElement = createRemoteElement< + HtmlPolygonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + points: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlPolylineProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + points?: string; +}; + +export const HtmlPolylineElement = createRemoteElement< + HtmlPolylineProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + points: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlTextProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + x?: string; + y?: string; + dx?: string; + dy?: string; + textAnchor?: string; + dominantBaseline?: string; +}; + +export const HtmlTextElement = createRemoteElement< + HtmlTextProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + x: { type: String }, + y: { type: String }, + dx: { type: String }, + dy: { type: String }, + textAnchor: { type: String }, + dominantBaseline: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlTspanProperties = HtmlCommonProperties & { + fill?: string; + fillOpacity?: string; + fillRule?: string; + stroke?: string; + strokeWidth?: string; + strokeOpacity?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeMiterlimit?: string; + opacity?: string; + transform?: string; + clipPath?: string; + clipRule?: string; + mask?: string; + filter?: string; + pointerEvents?: string; + x?: string; + y?: string; + dx?: string; + dy?: string; +}; + +export const HtmlTspanElement = createRemoteElement< + HtmlTspanProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + stroke: { type: String }, + strokeWidth: { type: String }, + strokeOpacity: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeMiterlimit: { type: String }, + opacity: { type: String }, + transform: { type: String }, + clipPath: { type: String }, + clipRule: { type: String }, + mask: { type: String }, + filter: { type: String }, + pointerEvents: { type: String }, + x: { type: String }, + y: { type: String }, + dx: { type: String }, + dy: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlLinearGradientProperties = HtmlCommonProperties & { + x1?: string; + y1?: string; + x2?: string; + y2?: string; + gradientUnits?: string; + gradientTransform?: string; +}; + +export const HtmlLinearGradientElement = createRemoteElement< + HtmlLinearGradientProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + x1: { type: String }, + y1: { type: String }, + x2: { type: String }, + y2: { type: String }, + gradientUnits: { type: String }, + gradientTransform: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlRadialGradientProperties = HtmlCommonProperties & { + cx?: string; + cy?: string; + r?: string; + fx?: string; + fy?: string; + gradientUnits?: string; + gradientTransform?: string; +}; + +export const HtmlRadialGradientElement = createRemoteElement< + HtmlRadialGradientProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + cx: { type: String }, + cy: { type: String }, + r: { type: String }, + fx: { type: String }, + fy: { type: String }, + gradientUnits: { type: String }, + gradientTransform: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlStopProperties = HtmlCommonProperties & { + offset?: string; + stopColor?: string; + stopOpacity?: string; +}; + +export const HtmlStopElement = createRemoteElement< + HtmlStopProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + offset: { type: String }, + stopColor: { type: String }, + stopOpacity: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlPatternProperties = HtmlCommonProperties & { + x?: string; + y?: string; + width?: string; + height?: string; + patternUnits?: string; + patternTransform?: string; +}; + +export const HtmlPatternElement = createRemoteElement< + HtmlPatternProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + x: { type: String }, + y: { type: String }, + width: { type: String }, + height: { type: String }, + patternUnits: { type: String }, + patternTransform: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlImageProperties = HtmlCommonProperties & { + href?: string; + x?: string; + y?: string; + width?: string; + height?: string; + preserveAspectRatio?: string; +}; + +export const HtmlImageElement = createRemoteElement< + HtmlImageProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + href: { type: String }, + x: { type: String }, + y: { type: String }, + width: { type: String }, + height: { type: String }, + preserveAspectRatio: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlForeignObjectProperties = HtmlCommonProperties & { + x?: string; + y?: string; + width?: string; + height?: string; +}; + +export const HtmlForeignObjectElement = createRemoteElement< + HtmlForeignObjectProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + x: { type: String }, + y: { type: String }, + width: { type: String }, + height: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type HtmlMarkerProperties = HtmlCommonProperties & { + markerWidth?: string; + markerHeight?: string; + refX?: string; + refY?: string; + orient?: string; + markerUnits?: string; +}; + +export const HtmlMarkerElement = createRemoteElement< + HtmlMarkerProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: { + ...HTML_COMMON_PROPERTIES_CONFIG, + markerWidth: { type: String }, + markerHeight: { type: String }, + refX: { type: String }, + refY: { type: String }, + orient: { type: String }, + markerUnits: { type: String }, + }, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); +export const HtmlTitleElement = createRemoteElement< + HtmlCommonProperties, + Record, + Record, + HtmlCommonEvents +>({ + properties: HTML_COMMON_PROPERTIES_CONFIG, + events: [...HTML_COMMON_EVENTS_ARRAY], +}); export type RemoteStyleProperties = { cssText?: string; @@ -880,6 +2376,78 @@ customElements.define('html-iframe', HtmlIframeElement); customElements.define('html-video', HtmlVideoElement); customElements.define('html-audio', HtmlAudioElement); customElements.define('html-source', HtmlSourceElement); +customElements.define('html-b', HtmlBElement); +customElements.define('html-i', HtmlIElement); +customElements.define('html-u', HtmlUElement); +customElements.define('html-s', HtmlSElement); +customElements.define('html-mark', HtmlMarkElement); +customElements.define('html-sub', HtmlSubElement); +customElements.define('html-sup', HtmlSupElement); +customElements.define('html-abbr', HtmlAbbrElement); +customElements.define('html-cite', HtmlCiteElement); +customElements.define('html-kbd', HtmlKbdElement); +customElements.define('html-samp', HtmlSampElement); +customElements.define('html-var', HtmlVarElement); +customElements.define('html-dfn', HtmlDfnElement); +customElements.define('html-bdi', HtmlBdiElement); +customElements.define('html-bdo', HtmlBdoElement); +customElements.define('html-data', HtmlDataElement); +customElements.define('html-del', HtmlDelElement); +customElements.define('html-ins', HtmlInsElement); +customElements.define('html-q', HtmlQElement); +customElements.define('html-time', HtmlTimeElement); +customElements.define('html-ruby', HtmlRubyElement); +customElements.define('html-rt', HtmlRtElement); +customElements.define('html-rp', HtmlRpElement); +customElements.define('html-dl', HtmlDlElement); +customElements.define('html-dt', HtmlDtElement); +customElements.define('html-dd', HtmlDdElement); +customElements.define('html-figure', HtmlFigureElement); +customElements.define('html-figcaption', HtmlFigcaptionElement); +customElements.define('html-details', HtmlDetailsElement); +customElements.define('html-summary', HtmlSummaryElement); +customElements.define('html-address', HtmlAddressElement); +customElements.define('html-dialog', HtmlDialogElement); +customElements.define('html-hgroup', HtmlHgroupElement); +customElements.define('html-search', HtmlSearchElement); +customElements.define('html-caption', HtmlCaptionElement); +customElements.define('html-colgroup', HtmlColgroupElement); +customElements.define('html-col', HtmlColElement); +customElements.define('html-fieldset', HtmlFieldsetElement); +customElements.define('html-legend', HtmlLegendElement); +customElements.define('html-output', HtmlOutputElement); +customElements.define('html-progress', HtmlProgressElement); +customElements.define('html-meter', HtmlMeterElement); +customElements.define('html-optgroup', HtmlOptgroupElement); +customElements.define('html-datalist', HtmlDatalistElement); +customElements.define('html-picture', HtmlPictureElement); +customElements.define('html-track', HtmlTrackElement); +customElements.define('html-wbr', HtmlWbrElement); +customElements.define('html-menu', HtmlMenuElement); +customElements.define('html-svg', HtmlSvgElement); +customElements.define('html-g', HtmlGElement); +customElements.define('html-defs', HtmlDefsElement); +customElements.define('html-symbol', HtmlSymbolElement); +customElements.define('html-use', HtmlUseElement); +customElements.define('html-clippath', HtmlClipPathElement); +customElements.define('html-mask', HtmlMaskElement); +customElements.define('html-circle', HtmlCircleElement); +customElements.define('html-ellipse', HtmlEllipseElement); +customElements.define('html-rect', HtmlRectElement); +customElements.define('html-line', HtmlLineElement); +customElements.define('html-path', HtmlPathElement); +customElements.define('html-polygon', HtmlPolygonElement); +customElements.define('html-polyline', HtmlPolylineElement); +customElements.define('html-text', HtmlTextElement); +customElements.define('html-tspan', HtmlTspanElement); +customElements.define('html-lineargradient', HtmlLinearGradientElement); +customElements.define('html-radialgradient', HtmlRadialGradientElement); +customElements.define('html-stop', HtmlStopElement); +customElements.define('html-pattern', HtmlPatternElement); +customElements.define('html-image', HtmlImageElement); +customElements.define('html-foreignobject', HtmlForeignObjectElement); +customElements.define('html-marker', HtmlMarkerElement); +customElements.define('html-title', HtmlTitleElement); customElements.define('remote-style', RemoteStyleElement); customElements.define('remote-root', RemoteRootElement); customElements.define('remote-fragment', RemoteFragmentElement); @@ -933,6 +2501,78 @@ declare global { 'html-video': InstanceType; 'html-audio': InstanceType; 'html-source': InstanceType; + 'html-b': InstanceType; + 'html-i': InstanceType; + 'html-u': InstanceType; + 'html-s': InstanceType; + 'html-mark': InstanceType; + 'html-sub': InstanceType; + 'html-sup': InstanceType; + 'html-abbr': InstanceType; + 'html-cite': InstanceType; + 'html-kbd': InstanceType; + 'html-samp': InstanceType; + 'html-var': InstanceType; + 'html-dfn': InstanceType; + 'html-bdi': InstanceType; + 'html-bdo': InstanceType; + 'html-data': InstanceType; + 'html-del': InstanceType; + 'html-ins': InstanceType; + 'html-q': InstanceType; + 'html-time': InstanceType; + 'html-ruby': InstanceType; + 'html-rt': InstanceType; + 'html-rp': InstanceType; + 'html-dl': InstanceType; + 'html-dt': InstanceType; + 'html-dd': InstanceType; + 'html-figure': InstanceType; + 'html-figcaption': InstanceType; + 'html-details': InstanceType; + 'html-summary': InstanceType; + 'html-address': InstanceType; + 'html-dialog': InstanceType; + 'html-hgroup': InstanceType; + 'html-search': InstanceType; + 'html-caption': InstanceType; + 'html-colgroup': InstanceType; + 'html-col': InstanceType; + 'html-fieldset': InstanceType; + 'html-legend': InstanceType; + 'html-output': InstanceType; + 'html-progress': InstanceType; + 'html-meter': InstanceType; + 'html-optgroup': InstanceType; + 'html-datalist': InstanceType; + 'html-picture': InstanceType; + 'html-track': InstanceType; + 'html-wbr': InstanceType; + 'html-menu': InstanceType; + 'html-svg': InstanceType; + 'html-g': InstanceType; + 'html-defs': InstanceType; + 'html-symbol': InstanceType; + 'html-use': InstanceType; + 'html-clippath': InstanceType; + 'html-mask': InstanceType; + 'html-circle': InstanceType; + 'html-ellipse': InstanceType; + 'html-rect': InstanceType; + 'html-line': InstanceType; + 'html-path': InstanceType; + 'html-polygon': InstanceType; + 'html-polyline': InstanceType; + 'html-text': InstanceType; + 'html-tspan': InstanceType; + 'html-lineargradient': InstanceType; + 'html-radialgradient': InstanceType; + 'html-stop': InstanceType; + 'html-pattern': InstanceType; + 'html-image': InstanceType; + 'html-foreignobject': InstanceType; + 'html-marker': InstanceType; + 'html-title': InstanceType; 'remote-style': InstanceType; 'remote-root': InstanceType; 'remote-fragment': InstanceType;