@wallarm-org/design-system 2.9.0 → 3.0.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.
- package/dist/components/Avatar/Avatar.d.ts +3 -2
- package/dist/components/Avatar/Avatar.js +79 -60
- package/dist/components/Avatar/AvatarContent.d.ts +6 -0
- package/dist/components/Avatar/AvatarContent.js +47 -0
- package/dist/components/Avatar/AvatarContext.d.ts +4 -0
- package/dist/components/Avatar/AvatarContext.js +5 -0
- package/dist/components/Avatar/AvatarDescription.d.ts +6 -0
- package/dist/components/Avatar/AvatarDescription.js +87 -0
- package/dist/components/Avatar/AvatarFallback.d.ts +2 -2
- package/dist/components/Avatar/AvatarFallback.js +41 -34
- package/dist/components/Avatar/AvatarImage.js +19 -14
- package/dist/components/Avatar/AvatarName.d.ts +6 -0
- package/dist/components/Avatar/AvatarName.js +87 -0
- package/dist/components/Avatar/AvatarOverlay.js +24 -19
- package/dist/components/Avatar/classes.d.ts +17 -2
- package/dist/components/Avatar/classes.js +56 -8
- package/dist/components/Avatar/index.d.ts +3 -0
- package/dist/components/Avatar/index.js +3 -0
- package/dist/components/NavRail/NavRailItem.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/metadata/components.json +944 -99
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "2.9.0",
|
|
3
|
+
"generatedAt": "2026-10-20T06:33:34.957Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -8045,7 +8045,7 @@
|
|
|
8045
8045
|
},
|
|
8046
8046
|
{
|
|
8047
8047
|
"name": "Avatar",
|
|
8048
|
-
"description": "A user's photo on a rounded plate, falling back to initials or an icon while the photo loads,\nwhen it fails, or when there is none.",
|
|
8048
|
+
"description": "A user's photo on a rounded plate, falling back to initials or an icon while the photo loads,\nwhen it fails, or when there is none. Add `AvatarContent` for the user item: plate + name\n(+ description) in one row.",
|
|
8049
8049
|
"importPath": "@wallarm-org/design-system/Avatar",
|
|
8050
8050
|
"props": [
|
|
8051
8051
|
{
|
|
@@ -8320,8 +8320,9 @@
|
|
|
8320
8320
|
},
|
|
8321
8321
|
{
|
|
8322
8322
|
"name": "size",
|
|
8323
|
-
"type": "{
|
|
8324
|
-
"required": false
|
|
8323
|
+
"type": "{ sm: string; md: string; lg: string; }",
|
|
8324
|
+
"required": false,
|
|
8325
|
+
"defaultValue": "lg"
|
|
8325
8326
|
},
|
|
8326
8327
|
{
|
|
8327
8328
|
"name": "as",
|
|
@@ -8366,28 +8367,25 @@
|
|
|
8366
8367
|
{
|
|
8367
8368
|
"name": "size",
|
|
8368
8369
|
"options": [
|
|
8369
|
-
"
|
|
8370
|
-
"
|
|
8370
|
+
"sm",
|
|
8371
|
+
"md",
|
|
8372
|
+
"lg"
|
|
8371
8373
|
],
|
|
8372
|
-
"defaultValue": "
|
|
8374
|
+
"defaultValue": "lg"
|
|
8375
|
+
},
|
|
8376
|
+
{
|
|
8377
|
+
"name": "initials",
|
|
8378
|
+
"options": [
|
|
8379
|
+
"true",
|
|
8380
|
+
"false"
|
|
8381
|
+
],
|
|
8382
|
+
"defaultValue": "false"
|
|
8373
8383
|
}
|
|
8374
8384
|
],
|
|
8375
8385
|
"subComponents": [
|
|
8376
8386
|
{
|
|
8377
|
-
"name": "
|
|
8387
|
+
"name": "AvatarContent",
|
|
8378
8388
|
"props": [
|
|
8379
|
-
{
|
|
8380
|
-
"name": "name",
|
|
8381
|
-
"type": "string | undefined",
|
|
8382
|
-
"required": false,
|
|
8383
|
-
"description": "Initials are taken from this: first letter of the first and of the last word."
|
|
8384
|
-
},
|
|
8385
|
-
{
|
|
8386
|
-
"name": "icon",
|
|
8387
|
-
"type": "ComponentType<SvgIconProps> | undefined",
|
|
8388
|
-
"required": false,
|
|
8389
|
-
"description": "Shown when there are no children and `name` gives no initials."
|
|
8390
|
-
},
|
|
8391
8389
|
{
|
|
8392
8390
|
"name": "defaultChecked",
|
|
8393
8391
|
"type": "boolean | undefined",
|
|
@@ -8661,69 +8659,8 @@
|
|
|
8661
8659
|
]
|
|
8662
8660
|
},
|
|
8663
8661
|
{
|
|
8664
|
-
"name": "
|
|
8662
|
+
"name": "AvatarDescription",
|
|
8665
8663
|
"props": [
|
|
8666
|
-
{
|
|
8667
|
-
"name": "alt",
|
|
8668
|
-
"type": "string | undefined",
|
|
8669
|
-
"required": false,
|
|
8670
|
-
"defaultValue": ""
|
|
8671
|
-
},
|
|
8672
|
-
{
|
|
8673
|
-
"name": "crossOrigin",
|
|
8674
|
-
"type": "CrossOrigin",
|
|
8675
|
-
"required": false
|
|
8676
|
-
},
|
|
8677
|
-
{
|
|
8678
|
-
"name": "decoding",
|
|
8679
|
-
"type": "\"auto\" | \"async\" | \"sync\" | undefined",
|
|
8680
|
-
"required": false
|
|
8681
|
-
},
|
|
8682
|
-
{
|
|
8683
|
-
"name": "fetchPriority",
|
|
8684
|
-
"type": "\"auto\" | \"high\" | \"low\" | undefined",
|
|
8685
|
-
"required": false
|
|
8686
|
-
},
|
|
8687
|
-
{
|
|
8688
|
-
"name": "height",
|
|
8689
|
-
"type": "string | number | undefined",
|
|
8690
|
-
"required": false
|
|
8691
|
-
},
|
|
8692
|
-
{
|
|
8693
|
-
"name": "loading",
|
|
8694
|
-
"type": "\"eager\" | \"lazy\" | undefined",
|
|
8695
|
-
"required": false
|
|
8696
|
-
},
|
|
8697
|
-
{
|
|
8698
|
-
"name": "referrerPolicy",
|
|
8699
|
-
"type": "HTMLAttributeReferrerPolicy | undefined",
|
|
8700
|
-
"required": false
|
|
8701
|
-
},
|
|
8702
|
-
{
|
|
8703
|
-
"name": "sizes",
|
|
8704
|
-
"type": "string | undefined",
|
|
8705
|
-
"required": false
|
|
8706
|
-
},
|
|
8707
|
-
{
|
|
8708
|
-
"name": "src",
|
|
8709
|
-
"type": "string | undefined",
|
|
8710
|
-
"required": false
|
|
8711
|
-
},
|
|
8712
|
-
{
|
|
8713
|
-
"name": "srcSet",
|
|
8714
|
-
"type": "string | undefined",
|
|
8715
|
-
"required": false
|
|
8716
|
-
},
|
|
8717
|
-
{
|
|
8718
|
-
"name": "useMap",
|
|
8719
|
-
"type": "string | undefined",
|
|
8720
|
-
"required": false
|
|
8721
|
-
},
|
|
8722
|
-
{
|
|
8723
|
-
"name": "width",
|
|
8724
|
-
"type": "string | number | undefined",
|
|
8725
|
-
"required": false
|
|
8726
|
-
},
|
|
8727
8664
|
{
|
|
8728
8665
|
"name": "defaultChecked",
|
|
8729
8666
|
"type": "boolean | undefined",
|
|
@@ -8789,6 +8726,11 @@
|
|
|
8789
8726
|
"type": "boolean | undefined",
|
|
8790
8727
|
"required": false
|
|
8791
8728
|
},
|
|
8729
|
+
{
|
|
8730
|
+
"name": "id",
|
|
8731
|
+
"type": "string | undefined",
|
|
8732
|
+
"required": false
|
|
8733
|
+
},
|
|
8792
8734
|
{
|
|
8793
8735
|
"name": "lang",
|
|
8794
8736
|
"type": "string | undefined",
|
|
@@ -8992,14 +8934,19 @@
|
|
|
8992
8934
|
]
|
|
8993
8935
|
},
|
|
8994
8936
|
{
|
|
8995
|
-
"name": "
|
|
8937
|
+
"name": "AvatarFallback",
|
|
8996
8938
|
"props": [
|
|
8997
8939
|
{
|
|
8998
|
-
"name": "
|
|
8999
|
-
"type": "
|
|
8940
|
+
"name": "name",
|
|
8941
|
+
"type": "string | undefined",
|
|
9000
8942
|
"required": false,
|
|
9001
|
-
"description": "
|
|
9002
|
-
|
|
8943
|
+
"description": "Initials are taken from this: first letter of the first and of the last word (first word only at `sm`)."
|
|
8944
|
+
},
|
|
8945
|
+
{
|
|
8946
|
+
"name": "icon",
|
|
8947
|
+
"type": "ComponentType<SvgIconProps> | undefined",
|
|
8948
|
+
"required": false,
|
|
8949
|
+
"description": "Shown when there are no children and `name` gives no initials."
|
|
9003
8950
|
},
|
|
9004
8951
|
{
|
|
9005
8952
|
"name": "defaultChecked",
|
|
@@ -9272,18 +9219,916 @@
|
|
|
9272
9219
|
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
9273
9220
|
}
|
|
9274
9221
|
]
|
|
9275
|
-
}
|
|
9276
|
-
],
|
|
9277
|
-
"examples": [
|
|
9278
|
-
{
|
|
9279
|
-
"name": "Basic",
|
|
9280
|
-
"code": "args => (\n <Avatar data-testid='avatar' {...args}>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n)",
|
|
9281
|
-
"description": "A photo with an initials fallback — the fallback also covers the moment before the photo arrives."
|
|
9282
9222
|
},
|
|
9283
9223
|
{
|
|
9284
|
-
"name": "
|
|
9285
|
-
"
|
|
9286
|
-
|
|
9224
|
+
"name": "AvatarImage",
|
|
9225
|
+
"props": [
|
|
9226
|
+
{
|
|
9227
|
+
"name": "alt",
|
|
9228
|
+
"type": "string | undefined",
|
|
9229
|
+
"required": false,
|
|
9230
|
+
"defaultValue": ""
|
|
9231
|
+
},
|
|
9232
|
+
{
|
|
9233
|
+
"name": "crossOrigin",
|
|
9234
|
+
"type": "CrossOrigin",
|
|
9235
|
+
"required": false
|
|
9236
|
+
},
|
|
9237
|
+
{
|
|
9238
|
+
"name": "decoding",
|
|
9239
|
+
"type": "\"auto\" | \"async\" | \"sync\" | undefined",
|
|
9240
|
+
"required": false
|
|
9241
|
+
},
|
|
9242
|
+
{
|
|
9243
|
+
"name": "fetchPriority",
|
|
9244
|
+
"type": "\"auto\" | \"high\" | \"low\" | undefined",
|
|
9245
|
+
"required": false
|
|
9246
|
+
},
|
|
9247
|
+
{
|
|
9248
|
+
"name": "height",
|
|
9249
|
+
"type": "string | number | undefined",
|
|
9250
|
+
"required": false
|
|
9251
|
+
},
|
|
9252
|
+
{
|
|
9253
|
+
"name": "loading",
|
|
9254
|
+
"type": "\"eager\" | \"lazy\" | undefined",
|
|
9255
|
+
"required": false
|
|
9256
|
+
},
|
|
9257
|
+
{
|
|
9258
|
+
"name": "referrerPolicy",
|
|
9259
|
+
"type": "HTMLAttributeReferrerPolicy | undefined",
|
|
9260
|
+
"required": false
|
|
9261
|
+
},
|
|
9262
|
+
{
|
|
9263
|
+
"name": "sizes",
|
|
9264
|
+
"type": "string | undefined",
|
|
9265
|
+
"required": false
|
|
9266
|
+
},
|
|
9267
|
+
{
|
|
9268
|
+
"name": "src",
|
|
9269
|
+
"type": "string | undefined",
|
|
9270
|
+
"required": false
|
|
9271
|
+
},
|
|
9272
|
+
{
|
|
9273
|
+
"name": "srcSet",
|
|
9274
|
+
"type": "string | undefined",
|
|
9275
|
+
"required": false
|
|
9276
|
+
},
|
|
9277
|
+
{
|
|
9278
|
+
"name": "useMap",
|
|
9279
|
+
"type": "string | undefined",
|
|
9280
|
+
"required": false
|
|
9281
|
+
},
|
|
9282
|
+
{
|
|
9283
|
+
"name": "width",
|
|
9284
|
+
"type": "string | number | undefined",
|
|
9285
|
+
"required": false
|
|
9286
|
+
},
|
|
9287
|
+
{
|
|
9288
|
+
"name": "defaultChecked",
|
|
9289
|
+
"type": "boolean | undefined",
|
|
9290
|
+
"required": false
|
|
9291
|
+
},
|
|
9292
|
+
{
|
|
9293
|
+
"name": "defaultValue",
|
|
9294
|
+
"type": "string | number | readonly string[] | undefined",
|
|
9295
|
+
"required": false
|
|
9296
|
+
},
|
|
9297
|
+
{
|
|
9298
|
+
"name": "suppressContentEditableWarning",
|
|
9299
|
+
"type": "boolean | undefined",
|
|
9300
|
+
"required": false
|
|
9301
|
+
},
|
|
9302
|
+
{
|
|
9303
|
+
"name": "suppressHydrationWarning",
|
|
9304
|
+
"type": "boolean | undefined",
|
|
9305
|
+
"required": false
|
|
9306
|
+
},
|
|
9307
|
+
{
|
|
9308
|
+
"name": "accessKey",
|
|
9309
|
+
"type": "string | undefined",
|
|
9310
|
+
"required": false
|
|
9311
|
+
},
|
|
9312
|
+
{
|
|
9313
|
+
"name": "autoCapitalize",
|
|
9314
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
9315
|
+
"required": false
|
|
9316
|
+
},
|
|
9317
|
+
{
|
|
9318
|
+
"name": "autoFocus",
|
|
9319
|
+
"type": "boolean | undefined",
|
|
9320
|
+
"required": false
|
|
9321
|
+
},
|
|
9322
|
+
{
|
|
9323
|
+
"name": "contentEditable",
|
|
9324
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
9325
|
+
"required": false
|
|
9326
|
+
},
|
|
9327
|
+
{
|
|
9328
|
+
"name": "contextMenu",
|
|
9329
|
+
"type": "string | undefined",
|
|
9330
|
+
"required": false
|
|
9331
|
+
},
|
|
9332
|
+
{
|
|
9333
|
+
"name": "dir",
|
|
9334
|
+
"type": "string | undefined",
|
|
9335
|
+
"required": false
|
|
9336
|
+
},
|
|
9337
|
+
{
|
|
9338
|
+
"name": "draggable",
|
|
9339
|
+
"type": "Booleanish | undefined",
|
|
9340
|
+
"required": false
|
|
9341
|
+
},
|
|
9342
|
+
{
|
|
9343
|
+
"name": "enterKeyHint",
|
|
9344
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
9345
|
+
"required": false
|
|
9346
|
+
},
|
|
9347
|
+
{
|
|
9348
|
+
"name": "hidden",
|
|
9349
|
+
"type": "boolean | undefined",
|
|
9350
|
+
"required": false
|
|
9351
|
+
},
|
|
9352
|
+
{
|
|
9353
|
+
"name": "lang",
|
|
9354
|
+
"type": "string | undefined",
|
|
9355
|
+
"required": false
|
|
9356
|
+
},
|
|
9357
|
+
{
|
|
9358
|
+
"name": "nonce",
|
|
9359
|
+
"type": "string | undefined",
|
|
9360
|
+
"required": false
|
|
9361
|
+
},
|
|
9362
|
+
{
|
|
9363
|
+
"name": "slot",
|
|
9364
|
+
"type": "string | undefined",
|
|
9365
|
+
"required": false
|
|
9366
|
+
},
|
|
9367
|
+
{
|
|
9368
|
+
"name": "spellCheck",
|
|
9369
|
+
"type": "Booleanish | undefined",
|
|
9370
|
+
"required": false
|
|
9371
|
+
},
|
|
9372
|
+
{
|
|
9373
|
+
"name": "tabIndex",
|
|
9374
|
+
"type": "number | undefined",
|
|
9375
|
+
"required": false
|
|
9376
|
+
},
|
|
9377
|
+
{
|
|
9378
|
+
"name": "title",
|
|
9379
|
+
"type": "string | undefined",
|
|
9380
|
+
"required": false
|
|
9381
|
+
},
|
|
9382
|
+
{
|
|
9383
|
+
"name": "translate",
|
|
9384
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
9385
|
+
"required": false
|
|
9386
|
+
},
|
|
9387
|
+
{
|
|
9388
|
+
"name": "radioGroup",
|
|
9389
|
+
"type": "string | undefined",
|
|
9390
|
+
"required": false
|
|
9391
|
+
},
|
|
9392
|
+
{
|
|
9393
|
+
"name": "role",
|
|
9394
|
+
"type": "AriaRole | undefined",
|
|
9395
|
+
"required": false
|
|
9396
|
+
},
|
|
9397
|
+
{
|
|
9398
|
+
"name": "about",
|
|
9399
|
+
"type": "string | undefined",
|
|
9400
|
+
"required": false
|
|
9401
|
+
},
|
|
9402
|
+
{
|
|
9403
|
+
"name": "content",
|
|
9404
|
+
"type": "string | undefined",
|
|
9405
|
+
"required": false
|
|
9406
|
+
},
|
|
9407
|
+
{
|
|
9408
|
+
"name": "datatype",
|
|
9409
|
+
"type": "string | undefined",
|
|
9410
|
+
"required": false
|
|
9411
|
+
},
|
|
9412
|
+
{
|
|
9413
|
+
"name": "inlist",
|
|
9414
|
+
"type": "any",
|
|
9415
|
+
"required": false
|
|
9416
|
+
},
|
|
9417
|
+
{
|
|
9418
|
+
"name": "prefix",
|
|
9419
|
+
"type": "string | undefined",
|
|
9420
|
+
"required": false
|
|
9421
|
+
},
|
|
9422
|
+
{
|
|
9423
|
+
"name": "property",
|
|
9424
|
+
"type": "string | undefined",
|
|
9425
|
+
"required": false
|
|
9426
|
+
},
|
|
9427
|
+
{
|
|
9428
|
+
"name": "rel",
|
|
9429
|
+
"type": "string | undefined",
|
|
9430
|
+
"required": false
|
|
9431
|
+
},
|
|
9432
|
+
{
|
|
9433
|
+
"name": "resource",
|
|
9434
|
+
"type": "string | undefined",
|
|
9435
|
+
"required": false
|
|
9436
|
+
},
|
|
9437
|
+
{
|
|
9438
|
+
"name": "rev",
|
|
9439
|
+
"type": "string | undefined",
|
|
9440
|
+
"required": false
|
|
9441
|
+
},
|
|
9442
|
+
{
|
|
9443
|
+
"name": "typeof",
|
|
9444
|
+
"type": "string | undefined",
|
|
9445
|
+
"required": false
|
|
9446
|
+
},
|
|
9447
|
+
{
|
|
9448
|
+
"name": "vocab",
|
|
9449
|
+
"type": "string | undefined",
|
|
9450
|
+
"required": false
|
|
9451
|
+
},
|
|
9452
|
+
{
|
|
9453
|
+
"name": "autoCorrect",
|
|
9454
|
+
"type": "string | undefined",
|
|
9455
|
+
"required": false
|
|
9456
|
+
},
|
|
9457
|
+
{
|
|
9458
|
+
"name": "autoSave",
|
|
9459
|
+
"type": "string | undefined",
|
|
9460
|
+
"required": false
|
|
9461
|
+
},
|
|
9462
|
+
{
|
|
9463
|
+
"name": "color",
|
|
9464
|
+
"type": "string | undefined",
|
|
9465
|
+
"required": false
|
|
9466
|
+
},
|
|
9467
|
+
{
|
|
9468
|
+
"name": "itemProp",
|
|
9469
|
+
"type": "string | undefined",
|
|
9470
|
+
"required": false
|
|
9471
|
+
},
|
|
9472
|
+
{
|
|
9473
|
+
"name": "itemScope",
|
|
9474
|
+
"type": "boolean | undefined",
|
|
9475
|
+
"required": false
|
|
9476
|
+
},
|
|
9477
|
+
{
|
|
9478
|
+
"name": "itemType",
|
|
9479
|
+
"type": "string | undefined",
|
|
9480
|
+
"required": false
|
|
9481
|
+
},
|
|
9482
|
+
{
|
|
9483
|
+
"name": "itemID",
|
|
9484
|
+
"type": "string | undefined",
|
|
9485
|
+
"required": false
|
|
9486
|
+
},
|
|
9487
|
+
{
|
|
9488
|
+
"name": "itemRef",
|
|
9489
|
+
"type": "string | undefined",
|
|
9490
|
+
"required": false
|
|
9491
|
+
},
|
|
9492
|
+
{
|
|
9493
|
+
"name": "results",
|
|
9494
|
+
"type": "number | undefined",
|
|
9495
|
+
"required": false
|
|
9496
|
+
},
|
|
9497
|
+
{
|
|
9498
|
+
"name": "security",
|
|
9499
|
+
"type": "string | undefined",
|
|
9500
|
+
"required": false
|
|
9501
|
+
},
|
|
9502
|
+
{
|
|
9503
|
+
"name": "unselectable",
|
|
9504
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
9505
|
+
"required": false
|
|
9506
|
+
},
|
|
9507
|
+
{
|
|
9508
|
+
"name": "popover",
|
|
9509
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
9510
|
+
"required": false
|
|
9511
|
+
},
|
|
9512
|
+
{
|
|
9513
|
+
"name": "popoverTargetAction",
|
|
9514
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
9515
|
+
"required": false
|
|
9516
|
+
},
|
|
9517
|
+
{
|
|
9518
|
+
"name": "popoverTarget",
|
|
9519
|
+
"type": "string | undefined",
|
|
9520
|
+
"required": false
|
|
9521
|
+
},
|
|
9522
|
+
{
|
|
9523
|
+
"name": "inert",
|
|
9524
|
+
"type": "boolean | undefined",
|
|
9525
|
+
"required": false,
|
|
9526
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
9527
|
+
},
|
|
9528
|
+
{
|
|
9529
|
+
"name": "inputMode",
|
|
9530
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
9531
|
+
"required": false,
|
|
9532
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
9533
|
+
},
|
|
9534
|
+
{
|
|
9535
|
+
"name": "is",
|
|
9536
|
+
"type": "string | undefined",
|
|
9537
|
+
"required": false,
|
|
9538
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
9539
|
+
},
|
|
9540
|
+
{
|
|
9541
|
+
"name": "exportparts",
|
|
9542
|
+
"type": "string | undefined",
|
|
9543
|
+
"required": false,
|
|
9544
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
9545
|
+
},
|
|
9546
|
+
{
|
|
9547
|
+
"name": "part",
|
|
9548
|
+
"type": "string | undefined",
|
|
9549
|
+
"required": false,
|
|
9550
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
9551
|
+
}
|
|
9552
|
+
]
|
|
9553
|
+
},
|
|
9554
|
+
{
|
|
9555
|
+
"name": "AvatarName",
|
|
9556
|
+
"props": [
|
|
9557
|
+
{
|
|
9558
|
+
"name": "defaultChecked",
|
|
9559
|
+
"type": "boolean | undefined",
|
|
9560
|
+
"required": false
|
|
9561
|
+
},
|
|
9562
|
+
{
|
|
9563
|
+
"name": "defaultValue",
|
|
9564
|
+
"type": "string | number | readonly string[] | undefined",
|
|
9565
|
+
"required": false
|
|
9566
|
+
},
|
|
9567
|
+
{
|
|
9568
|
+
"name": "suppressContentEditableWarning",
|
|
9569
|
+
"type": "boolean | undefined",
|
|
9570
|
+
"required": false
|
|
9571
|
+
},
|
|
9572
|
+
{
|
|
9573
|
+
"name": "suppressHydrationWarning",
|
|
9574
|
+
"type": "boolean | undefined",
|
|
9575
|
+
"required": false
|
|
9576
|
+
},
|
|
9577
|
+
{
|
|
9578
|
+
"name": "accessKey",
|
|
9579
|
+
"type": "string | undefined",
|
|
9580
|
+
"required": false
|
|
9581
|
+
},
|
|
9582
|
+
{
|
|
9583
|
+
"name": "autoCapitalize",
|
|
9584
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
9585
|
+
"required": false
|
|
9586
|
+
},
|
|
9587
|
+
{
|
|
9588
|
+
"name": "autoFocus",
|
|
9589
|
+
"type": "boolean | undefined",
|
|
9590
|
+
"required": false
|
|
9591
|
+
},
|
|
9592
|
+
{
|
|
9593
|
+
"name": "contentEditable",
|
|
9594
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
9595
|
+
"required": false
|
|
9596
|
+
},
|
|
9597
|
+
{
|
|
9598
|
+
"name": "contextMenu",
|
|
9599
|
+
"type": "string | undefined",
|
|
9600
|
+
"required": false
|
|
9601
|
+
},
|
|
9602
|
+
{
|
|
9603
|
+
"name": "dir",
|
|
9604
|
+
"type": "string | undefined",
|
|
9605
|
+
"required": false
|
|
9606
|
+
},
|
|
9607
|
+
{
|
|
9608
|
+
"name": "draggable",
|
|
9609
|
+
"type": "Booleanish | undefined",
|
|
9610
|
+
"required": false
|
|
9611
|
+
},
|
|
9612
|
+
{
|
|
9613
|
+
"name": "enterKeyHint",
|
|
9614
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
9615
|
+
"required": false
|
|
9616
|
+
},
|
|
9617
|
+
{
|
|
9618
|
+
"name": "hidden",
|
|
9619
|
+
"type": "boolean | undefined",
|
|
9620
|
+
"required": false
|
|
9621
|
+
},
|
|
9622
|
+
{
|
|
9623
|
+
"name": "id",
|
|
9624
|
+
"type": "string | undefined",
|
|
9625
|
+
"required": false
|
|
9626
|
+
},
|
|
9627
|
+
{
|
|
9628
|
+
"name": "lang",
|
|
9629
|
+
"type": "string | undefined",
|
|
9630
|
+
"required": false
|
|
9631
|
+
},
|
|
9632
|
+
{
|
|
9633
|
+
"name": "nonce",
|
|
9634
|
+
"type": "string | undefined",
|
|
9635
|
+
"required": false
|
|
9636
|
+
},
|
|
9637
|
+
{
|
|
9638
|
+
"name": "slot",
|
|
9639
|
+
"type": "string | undefined",
|
|
9640
|
+
"required": false
|
|
9641
|
+
},
|
|
9642
|
+
{
|
|
9643
|
+
"name": "spellCheck",
|
|
9644
|
+
"type": "Booleanish | undefined",
|
|
9645
|
+
"required": false
|
|
9646
|
+
},
|
|
9647
|
+
{
|
|
9648
|
+
"name": "tabIndex",
|
|
9649
|
+
"type": "number | undefined",
|
|
9650
|
+
"required": false
|
|
9651
|
+
},
|
|
9652
|
+
{
|
|
9653
|
+
"name": "title",
|
|
9654
|
+
"type": "string | undefined",
|
|
9655
|
+
"required": false
|
|
9656
|
+
},
|
|
9657
|
+
{
|
|
9658
|
+
"name": "translate",
|
|
9659
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
9660
|
+
"required": false
|
|
9661
|
+
},
|
|
9662
|
+
{
|
|
9663
|
+
"name": "radioGroup",
|
|
9664
|
+
"type": "string | undefined",
|
|
9665
|
+
"required": false
|
|
9666
|
+
},
|
|
9667
|
+
{
|
|
9668
|
+
"name": "role",
|
|
9669
|
+
"type": "AriaRole | undefined",
|
|
9670
|
+
"required": false
|
|
9671
|
+
},
|
|
9672
|
+
{
|
|
9673
|
+
"name": "about",
|
|
9674
|
+
"type": "string | undefined",
|
|
9675
|
+
"required": false
|
|
9676
|
+
},
|
|
9677
|
+
{
|
|
9678
|
+
"name": "content",
|
|
9679
|
+
"type": "string | undefined",
|
|
9680
|
+
"required": false
|
|
9681
|
+
},
|
|
9682
|
+
{
|
|
9683
|
+
"name": "datatype",
|
|
9684
|
+
"type": "string | undefined",
|
|
9685
|
+
"required": false
|
|
9686
|
+
},
|
|
9687
|
+
{
|
|
9688
|
+
"name": "inlist",
|
|
9689
|
+
"type": "any",
|
|
9690
|
+
"required": false
|
|
9691
|
+
},
|
|
9692
|
+
{
|
|
9693
|
+
"name": "prefix",
|
|
9694
|
+
"type": "string | undefined",
|
|
9695
|
+
"required": false
|
|
9696
|
+
},
|
|
9697
|
+
{
|
|
9698
|
+
"name": "property",
|
|
9699
|
+
"type": "string | undefined",
|
|
9700
|
+
"required": false
|
|
9701
|
+
},
|
|
9702
|
+
{
|
|
9703
|
+
"name": "rel",
|
|
9704
|
+
"type": "string | undefined",
|
|
9705
|
+
"required": false
|
|
9706
|
+
},
|
|
9707
|
+
{
|
|
9708
|
+
"name": "resource",
|
|
9709
|
+
"type": "string | undefined",
|
|
9710
|
+
"required": false
|
|
9711
|
+
},
|
|
9712
|
+
{
|
|
9713
|
+
"name": "rev",
|
|
9714
|
+
"type": "string | undefined",
|
|
9715
|
+
"required": false
|
|
9716
|
+
},
|
|
9717
|
+
{
|
|
9718
|
+
"name": "typeof",
|
|
9719
|
+
"type": "string | undefined",
|
|
9720
|
+
"required": false
|
|
9721
|
+
},
|
|
9722
|
+
{
|
|
9723
|
+
"name": "vocab",
|
|
9724
|
+
"type": "string | undefined",
|
|
9725
|
+
"required": false
|
|
9726
|
+
},
|
|
9727
|
+
{
|
|
9728
|
+
"name": "autoCorrect",
|
|
9729
|
+
"type": "string | undefined",
|
|
9730
|
+
"required": false
|
|
9731
|
+
},
|
|
9732
|
+
{
|
|
9733
|
+
"name": "autoSave",
|
|
9734
|
+
"type": "string | undefined",
|
|
9735
|
+
"required": false
|
|
9736
|
+
},
|
|
9737
|
+
{
|
|
9738
|
+
"name": "color",
|
|
9739
|
+
"type": "string | undefined",
|
|
9740
|
+
"required": false
|
|
9741
|
+
},
|
|
9742
|
+
{
|
|
9743
|
+
"name": "itemProp",
|
|
9744
|
+
"type": "string | undefined",
|
|
9745
|
+
"required": false
|
|
9746
|
+
},
|
|
9747
|
+
{
|
|
9748
|
+
"name": "itemScope",
|
|
9749
|
+
"type": "boolean | undefined",
|
|
9750
|
+
"required": false
|
|
9751
|
+
},
|
|
9752
|
+
{
|
|
9753
|
+
"name": "itemType",
|
|
9754
|
+
"type": "string | undefined",
|
|
9755
|
+
"required": false
|
|
9756
|
+
},
|
|
9757
|
+
{
|
|
9758
|
+
"name": "itemID",
|
|
9759
|
+
"type": "string | undefined",
|
|
9760
|
+
"required": false
|
|
9761
|
+
},
|
|
9762
|
+
{
|
|
9763
|
+
"name": "itemRef",
|
|
9764
|
+
"type": "string | undefined",
|
|
9765
|
+
"required": false
|
|
9766
|
+
},
|
|
9767
|
+
{
|
|
9768
|
+
"name": "results",
|
|
9769
|
+
"type": "number | undefined",
|
|
9770
|
+
"required": false
|
|
9771
|
+
},
|
|
9772
|
+
{
|
|
9773
|
+
"name": "security",
|
|
9774
|
+
"type": "string | undefined",
|
|
9775
|
+
"required": false
|
|
9776
|
+
},
|
|
9777
|
+
{
|
|
9778
|
+
"name": "unselectable",
|
|
9779
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
9780
|
+
"required": false
|
|
9781
|
+
},
|
|
9782
|
+
{
|
|
9783
|
+
"name": "popover",
|
|
9784
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
9785
|
+
"required": false
|
|
9786
|
+
},
|
|
9787
|
+
{
|
|
9788
|
+
"name": "popoverTargetAction",
|
|
9789
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
9790
|
+
"required": false
|
|
9791
|
+
},
|
|
9792
|
+
{
|
|
9793
|
+
"name": "popoverTarget",
|
|
9794
|
+
"type": "string | undefined",
|
|
9795
|
+
"required": false
|
|
9796
|
+
},
|
|
9797
|
+
{
|
|
9798
|
+
"name": "inert",
|
|
9799
|
+
"type": "boolean | undefined",
|
|
9800
|
+
"required": false,
|
|
9801
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
9802
|
+
},
|
|
9803
|
+
{
|
|
9804
|
+
"name": "inputMode",
|
|
9805
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
9806
|
+
"required": false,
|
|
9807
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
9808
|
+
},
|
|
9809
|
+
{
|
|
9810
|
+
"name": "is",
|
|
9811
|
+
"type": "string | undefined",
|
|
9812
|
+
"required": false,
|
|
9813
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
9814
|
+
},
|
|
9815
|
+
{
|
|
9816
|
+
"name": "exportparts",
|
|
9817
|
+
"type": "string | undefined",
|
|
9818
|
+
"required": false,
|
|
9819
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
9820
|
+
},
|
|
9821
|
+
{
|
|
9822
|
+
"name": "part",
|
|
9823
|
+
"type": "string | undefined",
|
|
9824
|
+
"required": false,
|
|
9825
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
9826
|
+
}
|
|
9827
|
+
]
|
|
9828
|
+
},
|
|
9829
|
+
{
|
|
9830
|
+
"name": "AvatarOverlay",
|
|
9831
|
+
"props": [
|
|
9832
|
+
{
|
|
9833
|
+
"name": "visible",
|
|
9834
|
+
"type": "boolean | undefined",
|
|
9835
|
+
"required": false,
|
|
9836
|
+
"description": "Keep it shown regardless of hover — e.g. a `Loader` while the new photo uploads.",
|
|
9837
|
+
"defaultValue": "false"
|
|
9838
|
+
},
|
|
9839
|
+
{
|
|
9840
|
+
"name": "defaultChecked",
|
|
9841
|
+
"type": "boolean | undefined",
|
|
9842
|
+
"required": false
|
|
9843
|
+
},
|
|
9844
|
+
{
|
|
9845
|
+
"name": "defaultValue",
|
|
9846
|
+
"type": "string | number | readonly string[] | undefined",
|
|
9847
|
+
"required": false
|
|
9848
|
+
},
|
|
9849
|
+
{
|
|
9850
|
+
"name": "suppressContentEditableWarning",
|
|
9851
|
+
"type": "boolean | undefined",
|
|
9852
|
+
"required": false
|
|
9853
|
+
},
|
|
9854
|
+
{
|
|
9855
|
+
"name": "suppressHydrationWarning",
|
|
9856
|
+
"type": "boolean | undefined",
|
|
9857
|
+
"required": false
|
|
9858
|
+
},
|
|
9859
|
+
{
|
|
9860
|
+
"name": "accessKey",
|
|
9861
|
+
"type": "string | undefined",
|
|
9862
|
+
"required": false
|
|
9863
|
+
},
|
|
9864
|
+
{
|
|
9865
|
+
"name": "autoCapitalize",
|
|
9866
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
9867
|
+
"required": false
|
|
9868
|
+
},
|
|
9869
|
+
{
|
|
9870
|
+
"name": "autoFocus",
|
|
9871
|
+
"type": "boolean | undefined",
|
|
9872
|
+
"required": false
|
|
9873
|
+
},
|
|
9874
|
+
{
|
|
9875
|
+
"name": "contentEditable",
|
|
9876
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
9877
|
+
"required": false
|
|
9878
|
+
},
|
|
9879
|
+
{
|
|
9880
|
+
"name": "contextMenu",
|
|
9881
|
+
"type": "string | undefined",
|
|
9882
|
+
"required": false
|
|
9883
|
+
},
|
|
9884
|
+
{
|
|
9885
|
+
"name": "dir",
|
|
9886
|
+
"type": "string | undefined",
|
|
9887
|
+
"required": false
|
|
9888
|
+
},
|
|
9889
|
+
{
|
|
9890
|
+
"name": "draggable",
|
|
9891
|
+
"type": "Booleanish | undefined",
|
|
9892
|
+
"required": false
|
|
9893
|
+
},
|
|
9894
|
+
{
|
|
9895
|
+
"name": "enterKeyHint",
|
|
9896
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
9897
|
+
"required": false
|
|
9898
|
+
},
|
|
9899
|
+
{
|
|
9900
|
+
"name": "hidden",
|
|
9901
|
+
"type": "boolean | undefined",
|
|
9902
|
+
"required": false
|
|
9903
|
+
},
|
|
9904
|
+
{
|
|
9905
|
+
"name": "id",
|
|
9906
|
+
"type": "string | undefined",
|
|
9907
|
+
"required": false
|
|
9908
|
+
},
|
|
9909
|
+
{
|
|
9910
|
+
"name": "lang",
|
|
9911
|
+
"type": "string | undefined",
|
|
9912
|
+
"required": false
|
|
9913
|
+
},
|
|
9914
|
+
{
|
|
9915
|
+
"name": "nonce",
|
|
9916
|
+
"type": "string | undefined",
|
|
9917
|
+
"required": false
|
|
9918
|
+
},
|
|
9919
|
+
{
|
|
9920
|
+
"name": "slot",
|
|
9921
|
+
"type": "string | undefined",
|
|
9922
|
+
"required": false
|
|
9923
|
+
},
|
|
9924
|
+
{
|
|
9925
|
+
"name": "spellCheck",
|
|
9926
|
+
"type": "Booleanish | undefined",
|
|
9927
|
+
"required": false
|
|
9928
|
+
},
|
|
9929
|
+
{
|
|
9930
|
+
"name": "tabIndex",
|
|
9931
|
+
"type": "number | undefined",
|
|
9932
|
+
"required": false
|
|
9933
|
+
},
|
|
9934
|
+
{
|
|
9935
|
+
"name": "title",
|
|
9936
|
+
"type": "string | undefined",
|
|
9937
|
+
"required": false
|
|
9938
|
+
},
|
|
9939
|
+
{
|
|
9940
|
+
"name": "translate",
|
|
9941
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
9942
|
+
"required": false
|
|
9943
|
+
},
|
|
9944
|
+
{
|
|
9945
|
+
"name": "radioGroup",
|
|
9946
|
+
"type": "string | undefined",
|
|
9947
|
+
"required": false
|
|
9948
|
+
},
|
|
9949
|
+
{
|
|
9950
|
+
"name": "role",
|
|
9951
|
+
"type": "AriaRole | undefined",
|
|
9952
|
+
"required": false
|
|
9953
|
+
},
|
|
9954
|
+
{
|
|
9955
|
+
"name": "about",
|
|
9956
|
+
"type": "string | undefined",
|
|
9957
|
+
"required": false
|
|
9958
|
+
},
|
|
9959
|
+
{
|
|
9960
|
+
"name": "content",
|
|
9961
|
+
"type": "string | undefined",
|
|
9962
|
+
"required": false
|
|
9963
|
+
},
|
|
9964
|
+
{
|
|
9965
|
+
"name": "datatype",
|
|
9966
|
+
"type": "string | undefined",
|
|
9967
|
+
"required": false
|
|
9968
|
+
},
|
|
9969
|
+
{
|
|
9970
|
+
"name": "inlist",
|
|
9971
|
+
"type": "any",
|
|
9972
|
+
"required": false
|
|
9973
|
+
},
|
|
9974
|
+
{
|
|
9975
|
+
"name": "prefix",
|
|
9976
|
+
"type": "string | undefined",
|
|
9977
|
+
"required": false
|
|
9978
|
+
},
|
|
9979
|
+
{
|
|
9980
|
+
"name": "property",
|
|
9981
|
+
"type": "string | undefined",
|
|
9982
|
+
"required": false
|
|
9983
|
+
},
|
|
9984
|
+
{
|
|
9985
|
+
"name": "rel",
|
|
9986
|
+
"type": "string | undefined",
|
|
9987
|
+
"required": false
|
|
9988
|
+
},
|
|
9989
|
+
{
|
|
9990
|
+
"name": "resource",
|
|
9991
|
+
"type": "string | undefined",
|
|
9992
|
+
"required": false
|
|
9993
|
+
},
|
|
9994
|
+
{
|
|
9995
|
+
"name": "rev",
|
|
9996
|
+
"type": "string | undefined",
|
|
9997
|
+
"required": false
|
|
9998
|
+
},
|
|
9999
|
+
{
|
|
10000
|
+
"name": "typeof",
|
|
10001
|
+
"type": "string | undefined",
|
|
10002
|
+
"required": false
|
|
10003
|
+
},
|
|
10004
|
+
{
|
|
10005
|
+
"name": "vocab",
|
|
10006
|
+
"type": "string | undefined",
|
|
10007
|
+
"required": false
|
|
10008
|
+
},
|
|
10009
|
+
{
|
|
10010
|
+
"name": "autoCorrect",
|
|
10011
|
+
"type": "string | undefined",
|
|
10012
|
+
"required": false
|
|
10013
|
+
},
|
|
10014
|
+
{
|
|
10015
|
+
"name": "autoSave",
|
|
10016
|
+
"type": "string | undefined",
|
|
10017
|
+
"required": false
|
|
10018
|
+
},
|
|
10019
|
+
{
|
|
10020
|
+
"name": "color",
|
|
10021
|
+
"type": "string | undefined",
|
|
10022
|
+
"required": false
|
|
10023
|
+
},
|
|
10024
|
+
{
|
|
10025
|
+
"name": "itemProp",
|
|
10026
|
+
"type": "string | undefined",
|
|
10027
|
+
"required": false
|
|
10028
|
+
},
|
|
10029
|
+
{
|
|
10030
|
+
"name": "itemScope",
|
|
10031
|
+
"type": "boolean | undefined",
|
|
10032
|
+
"required": false
|
|
10033
|
+
},
|
|
10034
|
+
{
|
|
10035
|
+
"name": "itemType",
|
|
10036
|
+
"type": "string | undefined",
|
|
10037
|
+
"required": false
|
|
10038
|
+
},
|
|
10039
|
+
{
|
|
10040
|
+
"name": "itemID",
|
|
10041
|
+
"type": "string | undefined",
|
|
10042
|
+
"required": false
|
|
10043
|
+
},
|
|
10044
|
+
{
|
|
10045
|
+
"name": "itemRef",
|
|
10046
|
+
"type": "string | undefined",
|
|
10047
|
+
"required": false
|
|
10048
|
+
},
|
|
10049
|
+
{
|
|
10050
|
+
"name": "results",
|
|
10051
|
+
"type": "number | undefined",
|
|
10052
|
+
"required": false
|
|
10053
|
+
},
|
|
10054
|
+
{
|
|
10055
|
+
"name": "security",
|
|
10056
|
+
"type": "string | undefined",
|
|
10057
|
+
"required": false
|
|
10058
|
+
},
|
|
10059
|
+
{
|
|
10060
|
+
"name": "unselectable",
|
|
10061
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
10062
|
+
"required": false
|
|
10063
|
+
},
|
|
10064
|
+
{
|
|
10065
|
+
"name": "popover",
|
|
10066
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
10067
|
+
"required": false
|
|
10068
|
+
},
|
|
10069
|
+
{
|
|
10070
|
+
"name": "popoverTargetAction",
|
|
10071
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
10072
|
+
"required": false
|
|
10073
|
+
},
|
|
10074
|
+
{
|
|
10075
|
+
"name": "popoverTarget",
|
|
10076
|
+
"type": "string | undefined",
|
|
10077
|
+
"required": false
|
|
10078
|
+
},
|
|
10079
|
+
{
|
|
10080
|
+
"name": "inert",
|
|
10081
|
+
"type": "boolean | undefined",
|
|
10082
|
+
"required": false,
|
|
10083
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
10084
|
+
},
|
|
10085
|
+
{
|
|
10086
|
+
"name": "inputMode",
|
|
10087
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
10088
|
+
"required": false,
|
|
10089
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
10090
|
+
},
|
|
10091
|
+
{
|
|
10092
|
+
"name": "is",
|
|
10093
|
+
"type": "string | undefined",
|
|
10094
|
+
"required": false,
|
|
10095
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
10096
|
+
},
|
|
10097
|
+
{
|
|
10098
|
+
"name": "exportparts",
|
|
10099
|
+
"type": "string | undefined",
|
|
10100
|
+
"required": false,
|
|
10101
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
10102
|
+
},
|
|
10103
|
+
{
|
|
10104
|
+
"name": "part",
|
|
10105
|
+
"type": "string | undefined",
|
|
10106
|
+
"required": false,
|
|
10107
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
10108
|
+
}
|
|
10109
|
+
]
|
|
10110
|
+
}
|
|
10111
|
+
],
|
|
10112
|
+
"examples": [
|
|
10113
|
+
{
|
|
10114
|
+
"name": "Basic",
|
|
10115
|
+
"code": "args => (\n <Avatar data-testid='avatar' {...args}>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n)",
|
|
10116
|
+
"description": "A photo with an initials fallback — the fallback also covers the moment before the photo arrives."
|
|
10117
|
+
},
|
|
10118
|
+
{
|
|
10119
|
+
"name": "Sizes",
|
|
10120
|
+
"code": "() => (\n <VStack gap={16} align='start' data-testid='avatar'>\n {SIZES.map(size => (\n <HStack key={size} gap={12} align='center' data-testid={`avatar-${size}`}>\n <Avatar size={size} data-testid={`avatar-${size}-photo`}>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n <Avatar size={size} data-testid={`avatar-${size}-initials`}>\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n <Avatar size={size} data-testid={`avatar-${size}-icon`}>\n <AvatarFallback />\n </Avatar>\n <HStack gap={12} align='center' data-frame-style='branded'>\n <Avatar size={size} data-testid={`avatar-${size}-branded-photo`}>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n <Avatar size={size} data-testid={`avatar-${size}-branded-initials`}>\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n <Avatar size={size} data-testid={`avatar-${size}-branded-icon`}>\n <AvatarFallback />\n </Avatar>\n </HStack>\n <span className='sb-annotation'>{size}</span>\n </HStack>\n ))}\n </VStack>\n)",
|
|
10121
|
+
"description": "`sm` (20px) and `md` (24px, the nav-rail plate) are the compact sizes for user items; `lg` (32px,\nthe default) is for rows and forms. Each row shows a photo, initials and the icon, then the same\nthree inside a Branded frame."
|
|
10122
|
+
},
|
|
10123
|
+
{
|
|
10124
|
+
"name": "WithName",
|
|
10125
|
+
"code": "() => (\n <VStack gap={16} align='start' data-testid='avatar'>\n {(['sm', 'md'] as const).map(size => (\n <VStack key={size} gap={8} align='start' data-testid={`avatar-${size}`}>\n <Avatar size={size} data-testid={`avatar-${size}-photo`}>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Artem Miskevich' />\n <AvatarContent>\n <AvatarName>Artem Miskevich</AvatarName>\n </AvatarContent>\n </Avatar>\n <Avatar size={size} data-testid={`avatar-${size}-initials`}>\n <AvatarFallback name='Artem Miskevich' />\n <AvatarContent>\n <AvatarName>Artem Miskevich</AvatarName>\n </AvatarContent>\n </Avatar>\n <div data-frame-style='branded'>\n <Avatar size={size} data-testid={`avatar-${size}-branded`}>\n <AvatarFallback name='Artem Miskevich' />\n <AvatarContent>\n <AvatarName>Artem Miskevich</AvatarName>\n </AvatarContent>\n </Avatar>\n </div>\n <div className='w-120'>\n <Avatar size={size} data-testid={`avatar-${size}-truncated`}>\n <AvatarFallback name='Maximilian Alexander-Montgomery' />\n <AvatarContent>\n <AvatarName>Maximilian Alexander-Montgomery</AvatarName>\n </AvatarContent>\n </Avatar>\n </div>\n </VStack>\n ))}\n </VStack>\n)",
|
|
10126
|
+
"description": "The user item (Figma 12557:5856): the plate and the name in one row, 6px apart. The name is\n`text-sm` at every size and truncates with an ellipsis when the row is narrow."
|
|
10127
|
+
},
|
|
10128
|
+
{
|
|
10129
|
+
"name": "WithDescription",
|
|
10130
|
+
"code": "() => (\n <VStack gap={16} align='start' data-testid='avatar'>\n <Avatar data-testid='avatar-photo'>\n <AvatarImage src={PHOTO} />\n <AvatarFallback name='Artem Miskevich' />\n <AvatarContent>\n <AvatarName>Artem Miskevich</AvatarName>\n <AvatarDescription>admin@wallarm.com</AvatarDescription>\n </AvatarContent>\n </Avatar>\n <Avatar size='md' data-testid='avatar-md'>\n <AvatarFallback name='Artem Miskevich' />\n <AvatarContent>\n <AvatarName>Artem Miskevich</AvatarName>\n <AvatarDescription>admin@wallarm.com</AvatarDescription>\n </AvatarContent>\n </Avatar>\n <div className='w-160'>\n <Avatar data-testid='avatar-truncated'>\n <AvatarFallback />\n <AvatarContent>\n <AvatarName>Maximilian Alexander-Montgomery</AvatarName>\n <AvatarDescription>maximilian.alexander-montgomery@wallarm.com</AvatarDescription>\n </AvatarContent>\n </Avatar>\n </div>\n </VStack>\n)",
|
|
10131
|
+
"description": "`AvatarDescription` adds a secondary line under the name — the email in the account menu. Both lines truncate."
|
|
9287
10132
|
},
|
|
9288
10133
|
{
|
|
9289
10134
|
"name": "Fallback",
|
|
@@ -9298,7 +10143,7 @@
|
|
|
9298
10143
|
{
|
|
9299
10144
|
"name": "Branded",
|
|
9300
10145
|
"code": "() => (\n <HStack gap={12} align='center' data-frame-style='branded' data-testid='avatar'>\n <Avatar>\n <AvatarFallback />\n </Avatar>\n <Avatar>\n <AvatarFallback name='Ada Lovelace' />\n </Avatar>\n <Avatar data-testid='avatar-branded-photo'>\n <AvatarImage src={PHOTO} />\n <AvatarFallback />\n </Avatar>\n </HStack>\n)",
|
|
9301
|
-
"description": "Inside a Branded frame the empty plate takes the brand tint and stroke,
|
|
10146
|
+
"description": "Inside a Branded frame the empty plate takes the brand tint and stroke, initials and the icon take the brand colour, and a photo is unchanged."
|
|
9302
10147
|
},
|
|
9303
10148
|
{
|
|
9304
10149
|
"name": "ClickToUpload",
|