@coinbase/cds-mcp-server 8.41.0 → 8.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/ContainedAssetCard.txt +1 -1
  3. package/mcp-docs/mobile/components/ContentCard.txt +220 -174
  4. package/mcp-docs/mobile/components/ContentCardBody.txt +127 -19
  5. package/mcp-docs/mobile/components/ContentCardFooter.txt +63 -1
  6. package/mcp-docs/mobile/components/ContentCardHeader.txt +71 -16
  7. package/mcp-docs/mobile/components/DataCard.txt +723 -0
  8. package/mcp-docs/mobile/components/FloatingAssetCard.txt +1 -1
  9. package/mcp-docs/mobile/components/MediaCard.txt +526 -0
  10. package/mcp-docs/mobile/components/MessagingCard.txt +1025 -0
  11. package/mcp-docs/mobile/components/Scrubber.txt +140 -0
  12. package/mcp-docs/mobile/routes.txt +6 -3
  13. package/mcp-docs/web/components/ContentCard.txt +419 -327
  14. package/mcp-docs/web/components/ContentCardBody.txt +91 -16
  15. package/mcp-docs/web/components/ContentCardFooter.txt +231 -165
  16. package/mcp-docs/web/components/ContentCardHeader.txt +237 -177
  17. package/mcp-docs/web/components/DataCard.txt +800 -0
  18. package/mcp-docs/web/components/MediaCard.txt +559 -0
  19. package/mcp-docs/web/components/MessagingCard.txt +1054 -0
  20. package/mcp-docs/web/components/ReferenceLine.txt +1 -0
  21. package/mcp-docs/web/components/Scrubber.txt +106 -0
  22. package/mcp-docs/web/routes.txt +3 -0
  23. package/package.json +1 -1
package/mcp-docs/web/components/ContentCard.txt CHANGED
@@ -10,84 +10,154 @@ import { ContentCard } from '@coinbase/cds-web/cards/ContentCard'
10
10
 
11
11
  ## Examples
12
12
 
13
- ### Text only
13
+ ContentCard is a flexible, composable card component built with `ContentCardHeader`, `ContentCardBody`, and `ContentCardFooter` sub-components. It can display various content layouts including text, media, and interactive elements.
14
14
 
15
- These are our most basic Content Cards.
15
+ :::note Semantic HTML
16
+ ContentCard and its sub-components render semantic HTML elements by default:
17
+
18
+ - `ContentCard` renders as `<article>`
19
+ - `ContentCardHeader` renders as `<header>`
20
+ - `ContentCardFooter` renders as `<footer>`
21
+
22
+ You can override these defaults using the `as` prop on each component.
23
+ :::
24
+
25
+ ### Basic Examples
26
+
27
+ ContentCard uses sub-components for flexible layout. Combine `ContentCardHeader`, `ContentCardBody`, and `ContentCardFooter` to create your card structure.
16
28
 
17
29
  ```jsx live
18
30
  function Example() {
19
31
  return (
20
- <VStack bordered borderRadius="400" maxWidth={375}>
32
+ <VStack gap={2} maxWidth={375}>
21
33
  <ContentCard>
22
34
  <ContentCardHeader
23
- end={
24
- <IconButton
25
- transparent
26
- accessibilityLabel="More information about coinDesk card news"
27
- name="more"
28
- variant="secondary"
29
- />
30
- }
31
- meta={
32
- <Box marginLeft={-1}>
33
- <Text as="span" font="label2" color="fgMuted" marginLeft={-1} numberOfLines={1}>
34
- ・News・5 hrs
35
- </Text>
36
- </Box>
35
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
36
+ title="CoinDesk"
37
+ subtitle="News"
38
+ actions={
39
+ <HStack gap={0}>
40
+ <IconButton
41
+ transparent
42
+ accessibilityLabel="favorite"
43
+ name="star"
44
+ variant="secondary"
45
+ />
46
+ <IconButton
47
+ transparent
48
+ accessibilityLabel="More options"
49
+ name="more"
50
+ variant="secondary"
51
+ />
52
+ </HStack>
37
53
  }
38
- title="Description"
39
54
  />
40
55
  <ContentCardBody
41
- body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
56
+ title="Ethereum Network Shatters Records With Hashrate Climbing to 464 EH/s"
57
+ description="This is a description of the record-breaking hashrate milestone."
42
58
  label={
43
59
  <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
44
- <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
45
- BTC
60
+ <Text as="p" color="fgMuted" font="label2" numberOfLines={1}>
61
+ $3,081.01
46
62
  </Text>
47
- <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
48
- ↗ 5.12%
63
+ <Text as="p" color="fgPositive" font="label2">
64
+ ↗ 6.37%
49
65
  </Text>
50
66
  </HStack>
51
67
  }
52
68
  />
69
+ <ContentCardFooter>
70
+ <RemoteImageGroup shape="circle" size={32}>
71
+ <RemoteImage src={assets.eth.imageUrl} />
72
+ <RemoteImage src={assets.btc.imageUrl} />
73
+ </RemoteImageGroup>
74
+ <Button compact variant="secondary">
75
+ Share
76
+ </Button>
77
+ </ContentCardFooter>
53
78
  </ContentCard>
79
+ </VStack>
80
+ );
81
+ }
82
+ ```
83
+
84
+ ### Media Placement
85
+
86
+ Use the `mediaPlacement` prop on `ContentCardBody` to control where media is positioned relative to the content.
87
+
88
+ ```jsx live
89
+ function Example() {
90
+ const exampleMedia = (
91
+ <RemoteImage alt="Ethereum background" source={ethBackground} width="100%" />
92
+ );
93
+
94
+ return (
95
+ <VStack gap={2} maxWidth={375}>
96
+ <Text as="h3" font="headline">
97
+ mediaPlacement: top (default)
98
+ </Text>
54
99
  <ContentCard>
55
100
  <ContentCardHeader
56
- meta={
57
- <Box marginLeft={-1}>
58
- <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
59
- ・News・5 hrs
60
- </Text>
61
- </Box>
62
- }
63
- title="Brian Armstrong"
101
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
102
+ title="CoinDesk"
103
+ subtitle="News"
64
104
  />
65
105
  <ContentCardBody
66
- body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
67
- label={
68
- <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
69
- <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
70
- BTC
71
- </Text>
72
- <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
73
- ↗ 5.12%
74
- </Text>
75
- </HStack>
76
- }
77
- media={
78
- <img
79
- alt=""
80
- aria-hidden="true"
81
- src="/img/card/content_card_basic.png"
82
- style={{
83
- objectFit: 'cover',
84
- cursor: 'pointer',
85
- borderRadius: '24px',
86
- }}
87
- width="100%"
88
- />
89
- }
90
- mediaPosition="right"
106
+ title="Media at top"
107
+ description="The media appears above the text content."
108
+ media={exampleMedia}
109
+ mediaPlacement="top"
110
+ />
111
+ </ContentCard>
112
+
113
+ <Text as="h3" font="headline">
114
+ mediaPlacement: bottom
115
+ </Text>
116
+ <ContentCard>
117
+ <ContentCardHeader
118
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
119
+ title="CoinDesk"
120
+ subtitle="News"
121
+ />
122
+ <ContentCardBody
123
+ title="Media at bottom"
124
+ description="The media appears below the text content."
125
+ media={exampleMedia}
126
+ mediaPlacement="bottom"
127
+ />
128
+ </ContentCard>
129
+
130
+ <Text as="h3" font="headline">
131
+ mediaPlacement: end
132
+ </Text>
133
+ <ContentCard>
134
+ <ContentCardHeader
135
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
136
+ title="CoinDesk"
137
+ subtitle="News"
138
+ />
139
+ <ContentCardBody
140
+ title="Media at end"
141
+ description="The media appears to the right of the text content."
142
+ media={exampleMedia}
143
+ mediaPlacement="end"
144
+ />
145
+ </ContentCard>
146
+
147
+ <Text as="h3" font="headline">
148
+ mediaPlacement: start
149
+ </Text>
150
+ <ContentCard>
151
+ <ContentCardHeader
152
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
153
+ title="CoinDesk"
154
+ subtitle="News"
155
+ />
156
+ <ContentCardBody
157
+ title="Media at start"
158
+ description="The media appears to the left of the text content."
159
+ media={exampleMedia}
160
+ mediaPlacement="start"
91
161
  />
92
162
  </ContentCard>
93
163
  </VStack>
@@ -95,72 +165,111 @@ function Example() {
95
165
  }
96
166
  ```
97
167
 
98
- ### Rewards Content Card
168
+ ### With Background
99
169
 
100
- This is an example of Content Cards being used for rewards.
170
+ Apply a background color to the card using the `background` prop. When using a background, consider using `variant="tertiary"` on buttons.
101
171
 
102
172
  ```jsx live
103
173
  function Example() {
104
- const opIcon = (
105
- <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
106
- <g clipPath="url(#clip0_3440_332)">
107
- <circle cx="16" cy="16" fill="#FF0420" r="16" />
108
- <path
109
- clipRule="evenodd"
110
- d="M7.05376 20.238C7.76564 20.7575 8.6789 21.0172 9.79355 21.0172C11.1424 21.0172 12.2195 20.7064 13.0251 20.085C13.8306 19.4543 14.3973 18.5036 14.7252 17.2329C14.9219 16.4538 15.0904 15.6515 15.231 14.826C15.2778 14.5292 15.3012 14.2834 15.3012 14.0886C15.3012 13.4394 15.1373 12.8829 14.8095 12.4191C14.4816 11.9461 14.032 11.5936 13.4606 11.3617C12.8893 11.1206 12.243 11 11.5217 11C8.87092 11 7.22705 12.2753 6.59011 14.826C6.3653 15.7628 6.19202 16.5651 6.07025 17.2329C6.02342 17.5297 6 17.7801 6 17.9842C6 18.9581 6.35125 19.7094 7.05376 20.238ZM11.325 18.5546C10.9597 18.8607 10.5148 19.0137 9.99025 19.0137C9.09104 19.0137 8.64143 18.5871 8.64143 17.7337C8.64143 17.5297 8.66016 17.3349 8.69763 17.1494C8.86624 16.2498 9.03483 15.4892 9.20344 14.8677C9.36267 14.237 9.62494 13.7686 9.99025 13.4626C10.3649 13.1565 10.8145 13.0034 11.3391 13.0034C12.2289 13.0034 12.6738 13.4255 12.6738 14.2695C12.6738 14.4735 12.6551 14.673 12.6176 14.8677C12.5052 15.517 12.3413 16.2776 12.1259 17.1494C11.9666 17.7801 11.6997 18.2485 11.325 18.5546Z"
111
- fill="white"
112
- fillRule="evenodd"
174
+ const exampleMedia = (
175
+ <RemoteImage
176
+ alt="Ethereum background"
177
+ src={ethBackground}
178
+ style={{ objectFit: 'cover', borderRadius: '24px' }}
179
+ width="100%"
180
+ />
181
+ );
182
+
183
+ return (
184
+ <VStack gap={2} maxWidth={375}>
185
+ <ContentCard background="bgAlternate">
186
+ <ContentCardHeader
187
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
188
+ title="CoinDesk"
189
+ subtitle="News"
113
190
  />
114
- <path
115
- clipRule="evenodd"
116
- d="M16.488 20.7807C16.5442 20.8456 16.6238 20.878 16.7269 20.878H18.6377C18.7314 20.878 18.8203 20.8456 18.9046 20.7807C18.9889 20.7157 19.0405 20.6323 19.0592 20.5302L19.7055 17.4833H21.6023C22.8293 17.4833 23.7941 17.2283 24.4966 16.7182C25.2085 16.208 25.6815 15.4196 25.9157 14.353C25.9719 14.1025 26 13.8614 26 13.6295C26 12.8226 25.6815 12.2058 25.0446 11.7791C24.417 11.3525 23.5834 11.1391 22.5436 11.1391H18.8063C18.7127 11.1391 18.6236 11.1716 18.5394 11.2365C18.4551 11.3014 18.4035 11.3849 18.3848 11.4869L16.4459 20.5302C16.4271 20.623 16.4412 20.7064 16.488 20.7807ZM22.7263 15.2434C22.4359 15.4567 22.0941 15.5634 21.7006 15.5634H20.0849L20.6188 13.073H22.3048C22.6888 13.073 22.9605 13.1472 23.1197 13.2956C23.2789 13.4347 23.3586 13.6388 23.3586 13.9078C23.3586 14.0283 23.3445 14.1675 23.3164 14.3251C23.2227 14.724 23.026 15.0301 22.7263 15.2434Z"
117
- fill="white"
118
- fillRule="evenodd"
191
+ <ContentCardBody
192
+ title="Card with Background"
193
+ description="This card has an alternate background color."
194
+ media={exampleMedia}
119
195
  />
120
- </g>
121
- <defs>
122
- <clipPath id="clip0_3440_332">
123
- <rect fill="white" height="32" width="32" />
124
- </clipPath>
125
- </defs>
126
- </svg>
196
+ <ContentCardFooter>
197
+ <RemoteImageGroup shape="circle" size={32}>
198
+ <RemoteImage src={assets.eth.imageUrl} />
199
+ <RemoteImage src={assets.btc.imageUrl} />
200
+ </RemoteImageGroup>
201
+ <Button compact variant="tertiary">
202
+ Share
203
+ </Button>
204
+ </ContentCardFooter>
205
+ </ContentCard>
206
+
207
+ <ContentCard background="bgAlternate">
208
+ <ContentCardHeader
209
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
210
+ title="CoinDesk"
211
+ subtitle="News"
212
+ />
213
+ <ContentCardBody
214
+ title="No Media with Background"
215
+ description="This card has no media element."
216
+ />
217
+ <ContentCardFooter gap={4} justifyContent="space-between" paddingTop={0.5}>
218
+ <IconCounterButton accessibilityLabel="like, 99 likes" count={99} icon="heart" />
219
+ <IconCounterButton
220
+ accessibilityLabel="comment, 4200 comments"
221
+ count={4200}
222
+ icon="comment"
223
+ />
224
+ <IconCounterButton
225
+ accessibilityLabel="share, 32 shares"
226
+ count={32}
227
+ icon="arrowsHorizontal"
228
+ />
229
+ </ContentCardFooter>
230
+ </ContentCard>
231
+ </VStack>
127
232
  );
233
+ }
234
+ ```
235
+
236
+ ### Rewards Card Example
237
+
238
+ Example showing a rewards-style content card with claim button.
239
+
240
+ ```jsx live
241
+ function Example() {
128
242
  return (
129
- <VStack bordered borderRadius="400" maxWidth={375}>
243
+ <VStack gap={2} maxWidth={375}>
130
244
  <ContentCard gap={3}>
131
245
  <ContentCardBody
132
- body={
246
+ title={
133
247
  <Text as="p" font="body" paddingTop={0.5}>
134
248
  Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s
135
249
  </Text>
136
250
  }
137
251
  label={
138
252
  <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
139
- <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
253
+ <Text as="p" color="fgMuted" font="label2" numberOfLines={1}>
140
254
  BTC
141
255
  </Text>
142
- <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
256
+ <Text as="p" color="fgPositive" font="label2">
143
257
  ↗ 5.12%
144
258
  </Text>
145
259
  </HStack>
146
260
  }
147
261
  media={
148
- <img
149
- alt=""
150
- aria-hidden="true"
151
- src="/img/components/card/content_card_rewards.png"
152
- style={{
153
- objectFit: 'cover',
154
- cursor: 'pointer',
155
- borderRadius: '24px',
156
- }}
262
+ <RemoteImage
263
+ alt="Rewards banner"
264
+ src={ethBackground}
265
+ style={{ objectFit: 'cover', borderRadius: '24px' }}
157
266
  width="100%"
158
267
  />
159
268
  }
160
269
  />
161
- <ContentCardFooter>
270
+ <ContentCardFooter alignItems="center">
162
271
  <HStack alignItems="center" gap={1}>
163
- <Box>{opIcon}</Box>
272
+ <Avatar src={assets.btc.imageUrl} size="xl" />
164
273
  <VStack>
165
274
  <TextLegal as="span" color="fgMuted">
166
275
  Reward
@@ -180,92 +289,75 @@ function Example() {
180
289
  }
181
290
  ```
182
291
 
183
- ### Custom
292
+ ### Accessibility
293
+
294
+ #### Interactive Cards
295
+
296
+ When making ContentCard interactive, wrap it in a `Pressable` component and handle accessibility carefully to avoid nested interactive elements.
297
+
298
+ **The Problem**: If you wrap ContentCard in a `Pressable` and also have interactive elements inside (like buttons), the card becomes a clickable container with nested interactive elements. This creates accessibility issues for screen reader users.
184
299
 
185
- Example of a content card with a tweet.
300
+ **The Solution**: Use `as="div"` on the Pressable wrapper and add a separate action button inside the card. This allows:
301
+
302
+ - Regular users to click anywhere on the card
303
+ - Screen reader users to navigate through card content and focus on individual interactive elements
304
+ - Keyboard users to tab to the action button
186
305
 
187
306
  ```jsx live
188
- function Example() {
189
- const anotherContentCard = (
190
- <ContentCard
307
+ function AccessibleCard() {
308
+ return (
309
+ <Pressable
310
+ as="div"
191
311
  background="bgAlternate"
192
- borderRadius="400"
193
- paddingHorizontal={1.5}
194
- paddingVertical={1.5}
312
+ borderRadius={500}
313
+ onClick={() => alert('Card clicked - navigating...')}
314
+ width="fit-content"
195
315
  >
196
- <ContentCardHeader
197
- avatar={
198
- <Avatar
199
- alt="Mat Dryhurst"
200
- name="Mat Dryhurst"
201
- shape="circle"
202
- size="s"
203
- src="/img/card/content_card_custom_avatar_2.png"
204
- />
205
- }
206
- meta={
207
- <Box marginLeft={-1}>
208
- <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
209
- @matdryhurst・7 mo
210
- </Text>
211
- </Box>
212
- }
213
- title="Mat Dryhurst"
214
- />
215
- <ContentCardBody body="A bunch of massive youtubers are quitting, citing exhuastion and an algorithm that punishes a variety of output." />
216
- </ContentCard>
217
- );
218
- return (
219
- <VStack alignItems="center" maxWidth={375} bordered borderRadius={400}>
220
- <ContentCard>
316
+ <ContentCard maxWidth={375}>
221
317
  <ContentCardHeader
222
- avatar="/img/card/content_card_custom_avatar_1.png"
223
- meta={
224
- <Box marginLeft={-1}>
225
- <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
226
- ・News・5 hrs
227
- </Text>
228
- </Box>
229
- }
230
- title="Description"
231
- end={
232
- <IconButton
233
- transparent
234
- accessibilityLabel="More information about coinDesk card news"
235
- name="more"
236
- variant="secondary"
237
- />
238
- }
318
+ subtitle="News"
319
+ thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
320
+ title="CoinDesk"
239
321
  />
240
322
  <ContentCardBody
241
- body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
242
- gap={1.5}
243
- label={
244
- <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
245
- <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
246
- BTC
247
- </Text>
248
- <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
249
- ↗ 5.12%
250
- </Text>
251
- </HStack>
252
- }
253
- paddingBottom={3}
254
- paddingStart={5}
255
- >
256
- {anotherContentCard}
257
- </ContentCardBody>
258
- <ContentCardFooter>
259
- <IconCounterButton count={20} icon="heart" />
260
- <IconCounterButton count={40} icon="comment" />
261
- <IconCounterButton count={32} icon="wireTransfer" />
323
+ title="Accessible Interactive Card"
324
+ description="Card with both card-level click and internal action button"
325
+ />
326
+ <ContentCardFooter alignItems="center">
327
+ <Text as="span" color="fgMuted" font="legal">
328
+ 2 hours ago
329
+ </Text>
330
+ <Button
331
+ compact
332
+ variant="tertiary"
333
+ onClick={(event) => {
334
+ event.stopPropagation();
335
+ alert('Button clicked - navigating...');
336
+ }}
337
+ >
338
+ View Details
339
+ </Button>
262
340
  </ContentCardFooter>
263
341
  </ContentCard>
264
- </VStack>
342
+ </Pressable>
265
343
  );
266
344
  }
267
345
  ```
268
346
 
347
+ **Key points:**
348
+
349
+ - Use `as="div"` on the Pressable to avoid rendering as a semantic button
350
+ - When using `as="div"`, the Pressable remains keyboard focusable. Set `tabIndex={-1}` to remove it from the tab order if needed
351
+ - Call `event.stopPropagation()` at the beginning of the event handler method passed into the `onClick` prop for action buttons. This will prevent two click events from firing if the user directly clicks the action button.
352
+
353
+ :::warning Avoid Nested Interactive Elements
354
+ When ContentCard is wrapped in an interactive Pressable, avoid placing too many interactive elements inside the card. Each interactive element should have a clear, distinct purpose. If the card has many actions, consider using a non-interactive card layout instead.
355
+ :::
356
+
357
+ #### Color Contrast
358
+
359
+ When customizing card backgrounds, ensure sufficient color contrast between text and background colors. Use tools like the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify your color combinations meet WCAG guidelines.
360
+
269
361
  ## Props
270
362
 
271
363
  | Prop | Type | Required | Default | Description |
@@ -328,7 +420,7 @@ function Example() {
328
420
  | `aria-valuemin` | `number \| undefined` | No | `-` | Defines the minimum allowed value for a range widget. |
329
421
  | `aria-valuenow` | `number \| undefined` | No | `-` | Defines the current value for a range widget. |
330
422
  | `aria-valuetext` | `string \| undefined` | No | `-` | Defines the human readable text alternative of aria-valuenow for a range widget. |
331
- | `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `div` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
423
+ | `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `article` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
332
424
  | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
333
425
  | `autoCapitalize` | `off \| none \| on \| sentences \| words \| characters \| (string & {}) \| undefined` | No | `-` | - |
334
426
  | `autoCorrect` | `string \| undefined` | No | `-` | - |
@@ -424,166 +516,166 @@ function Example() {
424
516
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
425
517
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
426
518
  | `nonce` | `string \| undefined` | No | `-` | - |
427
- | `onAbort` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
428
- | `onAbortCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
429
- | `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
430
- | `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
431
- | `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
432
- | `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
433
- | `onAnimationStart` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
434
- | `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
435
- | `onAuxClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
436
- | `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
437
- | `onBeforeInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
438
- | `onBeforeInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
439
- | `onBlur` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
440
- | `onBlurCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
441
- | `onCanPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
442
- | `onCanPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
443
- | `onCanPlayThrough` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
444
- | `onCanPlayThroughCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
445
- | `onChange` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
446
- | `onChangeCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
447
- | `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
448
- | `onClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
449
- | `onCompositionEnd` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
450
- | `onCompositionEndCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
451
- | `onCompositionStart` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
452
- | `onCompositionStartCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
453
- | `onCompositionUpdate` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
454
- | `onCompositionUpdateCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
455
- | `onContextMenu` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
456
- | `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
457
- | `onCopy` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
458
- | `onCopyCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
459
- | `onCut` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
460
- | `onCutCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
461
- | `onDoubleClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
462
- | `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
463
- | `onDrag` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
464
- | `onDragCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
465
- | `onDragEnd` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
466
- | `onDragEndCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
467
- | `onDragEnter` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
468
- | `onDragEnterCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
469
- | `onDragExit` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
470
- | `onDragExitCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
471
- | `onDragLeave` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
472
- | `onDragLeaveCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
473
- | `onDragOver` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
474
- | `onDragOverCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
475
- | `onDragStart` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
476
- | `onDragStartCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
477
- | `onDrop` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
478
- | `onDropCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
479
- | `onDurationChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
480
- | `onDurationChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
481
- | `onEmptied` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
482
- | `onEmptiedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
483
- | `onEncrypted` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
484
- | `onEncryptedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
485
- | `onEnded` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
486
- | `onEndedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
487
- | `onError` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
488
- | `onErrorCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
489
- | `onFocus` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
490
- | `onFocusCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
491
- | `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
492
- | `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
493
- | `onInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
494
- | `onInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
495
- | `onInvalid` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
496
- | `onInvalidCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
497
- | `onKeyDown` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
498
- | `onKeyDownCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
499
- | `onKeyPress` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
500
- | `onKeyPressCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
501
- | `onKeyUp` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
502
- | `onKeyUpCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
503
- | `onLoad` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
504
- | `onLoadCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
505
- | `onLoadStart` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
506
- | `onLoadStartCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
507
- | `onLoadedData` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
508
- | `onLoadedDataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
509
- | `onLoadedMetadata` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
510
- | `onLoadedMetadataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
511
- | `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
512
- | `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
513
- | `onMouseDown` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
514
- | `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
515
- | `onMouseEnter` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
516
- | `onMouseLeave` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
517
- | `onMouseMove` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
518
- | `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
519
- | `onMouseOut` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
520
- | `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
521
- | `onMouseOver` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
522
- | `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
523
- | `onMouseUp` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
524
- | `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
525
- | `onPaste` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
526
- | `onPasteCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
527
- | `onPause` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
528
- | `onPauseCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
529
- | `onPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
530
- | `onPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
531
- | `onPlaying` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
532
- | `onPlayingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
533
- | `onPointerCancel` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
534
- | `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
535
- | `onPointerDown` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
536
- | `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
537
- | `onPointerEnter` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
538
- | `onPointerLeave` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
539
- | `onPointerMove` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
540
- | `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
541
- | `onPointerOut` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
542
- | `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
543
- | `onPointerOver` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
544
- | `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
545
- | `onPointerUp` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
546
- | `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
547
- | `onProgress` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
548
- | `onProgressCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
549
- | `onRateChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
550
- | `onRateChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
551
- | `onReset` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
552
- | `onResetCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
553
- | `onResize` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
554
- | `onResizeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
555
- | `onScroll` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
556
- | `onScrollCapture` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
557
- | `onSeeked` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
558
- | `onSeekedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
559
- | `onSeeking` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
560
- | `onSeekingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
561
- | `onSelect` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
562
- | `onSelectCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
563
- | `onStalled` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
564
- | `onStalledCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
565
- | `onSubmit` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
566
- | `onSubmitCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
567
- | `onSuspend` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
568
- | `onSuspendCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
569
- | `onTimeUpdate` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
570
- | `onTimeUpdateCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
571
- | `onTouchCancel` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
572
- | `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
573
- | `onTouchEnd` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
574
- | `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
575
- | `onTouchMove` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
576
- | `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
577
- | `onTouchStart` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
578
- | `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
579
- | `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
580
- | `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
581
- | `onVolumeChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
582
- | `onVolumeChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
583
- | `onWaiting` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
584
- | `onWaitingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
585
- | `onWheel` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
586
- | `onWheelCapture` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
519
+ | `onAbort` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
520
+ | `onAbortCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
521
+ | `onAnimationEnd` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
522
+ | `onAnimationEndCapture` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
523
+ | `onAnimationIteration` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
524
+ | `onAnimationIterationCapture` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
525
+ | `onAnimationStart` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
526
+ | `onAnimationStartCapture` | `AnimationEventHandler<HTMLElement> \| undefined` | No | `-` | - |
527
+ | `onAuxClick` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
528
+ | `onAuxClickCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
529
+ | `onBeforeInput` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
530
+ | `onBeforeInputCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
531
+ | `onBlur` | `FocusEventHandler<HTMLElement> \| undefined` | No | `-` | - |
532
+ | `onBlurCapture` | `FocusEventHandler<HTMLElement> \| undefined` | No | `-` | - |
533
+ | `onCanPlay` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
534
+ | `onCanPlayCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
535
+ | `onCanPlayThrough` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
536
+ | `onCanPlayThroughCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
537
+ | `onChange` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
538
+ | `onChangeCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
539
+ | `onClick` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
540
+ | `onClickCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
541
+ | `onCompositionEnd` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
542
+ | `onCompositionEndCapture` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
543
+ | `onCompositionStart` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
544
+ | `onCompositionStartCapture` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
545
+ | `onCompositionUpdate` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
546
+ | `onCompositionUpdateCapture` | `CompositionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
547
+ | `onContextMenu` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
548
+ | `onContextMenuCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
549
+ | `onCopy` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
550
+ | `onCopyCapture` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
551
+ | `onCut` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
552
+ | `onCutCapture` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
553
+ | `onDoubleClick` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
554
+ | `onDoubleClickCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
555
+ | `onDrag` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
556
+ | `onDragCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
557
+ | `onDragEnd` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
558
+ | `onDragEndCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
559
+ | `onDragEnter` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
560
+ | `onDragEnterCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
561
+ | `onDragExit` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
562
+ | `onDragExitCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
563
+ | `onDragLeave` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
564
+ | `onDragLeaveCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
565
+ | `onDragOver` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
566
+ | `onDragOverCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
567
+ | `onDragStart` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
568
+ | `onDragStartCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
569
+ | `onDrop` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
570
+ | `onDropCapture` | `DragEventHandler<HTMLElement> \| undefined` | No | `-` | - |
571
+ | `onDurationChange` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
572
+ | `onDurationChangeCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
573
+ | `onEmptied` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
574
+ | `onEmptiedCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
575
+ | `onEncrypted` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
576
+ | `onEncryptedCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
577
+ | `onEnded` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
578
+ | `onEndedCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
579
+ | `onError` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
580
+ | `onErrorCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
581
+ | `onFocus` | `FocusEventHandler<HTMLElement> \| undefined` | No | `-` | - |
582
+ | `onFocusCapture` | `FocusEventHandler<HTMLElement> \| undefined` | No | `-` | - |
583
+ | `onGotPointerCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
584
+ | `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
585
+ | `onInput` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
586
+ | `onInputCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
587
+ | `onInvalid` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
588
+ | `onInvalidCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
589
+ | `onKeyDown` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
590
+ | `onKeyDownCapture` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
591
+ | `onKeyPress` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
592
+ | `onKeyPressCapture` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
593
+ | `onKeyUp` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
594
+ | `onKeyUpCapture` | `KeyboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
595
+ | `onLoad` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
596
+ | `onLoadCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
597
+ | `onLoadStart` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
598
+ | `onLoadStartCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
599
+ | `onLoadedData` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
600
+ | `onLoadedDataCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
601
+ | `onLoadedMetadata` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
602
+ | `onLoadedMetadataCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
603
+ | `onLostPointerCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
604
+ | `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
605
+ | `onMouseDown` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
606
+ | `onMouseDownCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
607
+ | `onMouseEnter` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
608
+ | `onMouseLeave` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
609
+ | `onMouseMove` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
610
+ | `onMouseMoveCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
611
+ | `onMouseOut` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
612
+ | `onMouseOutCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
613
+ | `onMouseOver` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
614
+ | `onMouseOverCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
615
+ | `onMouseUp` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
616
+ | `onMouseUpCapture` | `MouseEventHandler<HTMLElement> \| undefined` | No | `-` | - |
617
+ | `onPaste` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
618
+ | `onPasteCapture` | `ClipboardEventHandler<HTMLElement> \| undefined` | No | `-` | - |
619
+ | `onPause` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
620
+ | `onPauseCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
621
+ | `onPlay` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
622
+ | `onPlayCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
623
+ | `onPlaying` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
624
+ | `onPlayingCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
625
+ | `onPointerCancel` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
626
+ | `onPointerCancelCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
627
+ | `onPointerDown` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
628
+ | `onPointerDownCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
629
+ | `onPointerEnter` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
630
+ | `onPointerLeave` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
631
+ | `onPointerMove` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
632
+ | `onPointerMoveCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
633
+ | `onPointerOut` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
634
+ | `onPointerOutCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
635
+ | `onPointerOver` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
636
+ | `onPointerOverCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
637
+ | `onPointerUp` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
638
+ | `onPointerUpCapture` | `PointerEventHandler<HTMLElement> \| undefined` | No | `-` | - |
639
+ | `onProgress` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
640
+ | `onProgressCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
641
+ | `onRateChange` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
642
+ | `onRateChangeCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
643
+ | `onReset` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
644
+ | `onResetCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
645
+ | `onResize` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
646
+ | `onResizeCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
647
+ | `onScroll` | `UIEventHandler<HTMLElement> \| undefined` | No | `-` | - |
648
+ | `onScrollCapture` | `UIEventHandler<HTMLElement> \| undefined` | No | `-` | - |
649
+ | `onSeeked` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
650
+ | `onSeekedCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
651
+ | `onSeeking` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
652
+ | `onSeekingCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
653
+ | `onSelect` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
654
+ | `onSelectCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
655
+ | `onStalled` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
656
+ | `onStalledCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
657
+ | `onSubmit` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
658
+ | `onSubmitCapture` | `FormEventHandler<HTMLElement> \| undefined` | No | `-` | - |
659
+ | `onSuspend` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
660
+ | `onSuspendCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
661
+ | `onTimeUpdate` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
662
+ | `onTimeUpdateCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
663
+ | `onTouchCancel` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
664
+ | `onTouchCancelCapture` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
665
+ | `onTouchEnd` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
666
+ | `onTouchEndCapture` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
667
+ | `onTouchMove` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
668
+ | `onTouchMoveCapture` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
669
+ | `onTouchStart` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
670
+ | `onTouchStartCapture` | `TouchEventHandler<HTMLElement> \| undefined` | No | `-` | - |
671
+ | `onTransitionEnd` | `TransitionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
672
+ | `onTransitionEndCapture` | `TransitionEventHandler<HTMLElement> \| undefined` | No | `-` | - |
673
+ | `onVolumeChange` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
674
+ | `onVolumeChangeCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
675
+ | `onWaiting` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
676
+ | `onWaitingCapture` | `ReactEventHandler<HTMLElement> \| undefined` | No | `-` | - |
677
+ | `onWheel` | `WheelEventHandler<HTMLElement> \| undefined` | No | `-` | - |
678
+ | `onWheelCapture` | `WheelEventHandler<HTMLElement> \| undefined` | No | `-` | - |
587
679
  | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
588
680
  | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
589
681
  | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |