@rarui/components 1.19.0 → 1.20.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.
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.18.0",
2
+ "version": "1.19.0",
3
3
  "tags": [
4
4
  {
5
5
  "name": "rarui-avatar",
@@ -3317,113 +3317,116 @@
3317
3317
  "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/layout/box) for more details.",
3318
3318
  "attributes": [
3319
3319
  {
3320
- "name": "background-color",
3321
- "description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
3320
+ "name": "gap",
3321
+ "description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
3322
3322
  "values": [
3323
3323
  {
3324
- "name": "$background"
3325
- },
3326
- {
3327
- "name": "$brand"
3324
+ "name": "$2xl"
3328
3325
  },
3329
3326
  {
3330
- "name": "$brand-hover"
3327
+ "name": "$2xs"
3331
3328
  },
3332
3329
  {
3333
- "name": "$brand-press"
3330
+ "name": "$3xl"
3334
3331
  },
3335
3332
  {
3336
- "name": "$brand-subdued"
3333
+ "name": "$3xs"
3337
3334
  },
3338
3335
  {
3339
- "name": "$disabled"
3336
+ "name": "$4xl"
3340
3337
  },
3341
3338
  {
3342
- "name": "$error"
3339
+ "name": "$4xs"
3343
3340
  },
3344
3341
  {
3345
- "name": "$error-hover"
3342
+ "name": "$5xl"
3346
3343
  },
3347
3344
  {
3348
- "name": "$error-press"
3345
+ "name": "$6xl"
3349
3346
  },
3350
3347
  {
3351
- "name": "$error-subdued"
3348
+ "name": "$7xl"
3352
3349
  },
3353
3350
  {
3354
- "name": "$hover"
3351
+ "name": "$8xl"
3355
3352
  },
3356
3353
  {
3357
- "name": "$info"
3354
+ "name": "$lg"
3358
3355
  },
3359
3356
  {
3360
- "name": "$info-hover"
3357
+ "name": "$md"
3361
3358
  },
3362
3359
  {
3363
- "name": "$info-press"
3360
+ "name": "$none"
3364
3361
  },
3365
3362
  {
3366
- "name": "$info-subdued"
3363
+ "name": "$s"
3367
3364
  },
3368
3365
  {
3369
- "name": "$invert"
3366
+ "name": "$xl"
3370
3367
  },
3371
3368
  {
3372
- "name": "$invert-disabled"
3373
- },
3369
+ "name": "$xs"
3370
+ }
3371
+ ]
3372
+ },
3373
+ {
3374
+ "name": "grid-gap",
3375
+ "description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
3376
+ "values": [
3374
3377
  {
3375
- "name": "$invert-hover"
3378
+ "name": "$2xl"
3376
3379
  },
3377
3380
  {
3378
- "name": "$invert-press"
3381
+ "name": "$2xs"
3379
3382
  },
3380
3383
  {
3381
- "name": "$invert-secondary"
3384
+ "name": "$3xl"
3382
3385
  },
3383
3386
  {
3384
- "name": "$overlay"
3387
+ "name": "$3xs"
3385
3388
  },
3386
3389
  {
3387
- "name": "$press"
3390
+ "name": "$4xl"
3388
3391
  },
3389
3392
  {
3390
- "name": "$primary"
3393
+ "name": "$4xs"
3391
3394
  },
3392
3395
  {
3393
- "name": "$secondary"
3396
+ "name": "$5xl"
3394
3397
  },
3395
3398
  {
3396
- "name": "$success"
3399
+ "name": "$6xl"
3397
3400
  },
3398
3401
  {
3399
- "name": "$success-hover"
3402
+ "name": "$7xl"
3400
3403
  },
3401
3404
  {
3402
- "name": "$success-press"
3405
+ "name": "$8xl"
3403
3406
  },
3404
3407
  {
3405
- "name": "$success-subdued"
3408
+ "name": "$lg"
3406
3409
  },
3407
3410
  {
3408
- "name": "$transparent"
3411
+ "name": "$md"
3409
3412
  },
3410
3413
  {
3411
- "name": "$warning"
3414
+ "name": "$none"
3412
3415
  },
3413
3416
  {
3414
- "name": "$warning-hover"
3417
+ "name": "$s"
3415
3418
  },
3416
3419
  {
3417
- "name": "$warning-press"
3420
+ "name": "$xl"
3418
3421
  },
3419
3422
  {
3420
- "name": "$warning-subdued"
3423
+ "name": "$xs"
3421
3424
  }
3422
3425
  ]
3423
3426
  },
3424
3427
  {
3425
- "name": "fill",
3426
- "description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
3428
+ "name": "background-color",
3429
+ "description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
3427
3430
  "values": [
3428
3431
  {
3429
3432
  "name": "$background"
@@ -3440,9 +3443,6 @@
3440
3443
  {
3441
3444
  "name": "$brand-subdued"
3442
3445
  },
3443
- {
3444
- "name": "$currentColor"
3445
- },
3446
3446
  {
3447
3447
  "name": "$disabled"
3448
3448
  },
@@ -3530,8 +3530,8 @@
3530
3530
  ]
3531
3531
  },
3532
3532
  {
3533
- "name": "border-color",
3534
- "description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$disabled\",\n \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
3533
+ "name": "color",
3534
+ "description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
3535
3535
  "values": [
3536
3536
  {
3537
3537
  "name": "$brand"
@@ -3540,10 +3540,10 @@
3540
3540
  "name": "$brand-alt"
3541
3541
  },
3542
3542
  {
3543
- "name": "$disabled"
3543
+ "name": "$currentColor"
3544
3544
  },
3545
3545
  {
3546
- "name": "$divider"
3546
+ "name": "$disabled"
3547
3547
  },
3548
3548
  {
3549
3549
  "name": "$error"
@@ -3558,34 +3558,58 @@
3558
3558
  "name": "$invert-disabled"
3559
3559
  },
3560
3560
  {
3561
- "name": "$primary"
3561
+ "name": "$invert-secondary"
3562
3562
  },
3563
3563
  {
3564
- "name": "$secondary"
3564
+ "name": "$on-brand"
3565
3565
  },
3566
3566
  {
3567
- "name": "$subdued"
3567
+ "name": "$on-error"
3568
3568
  },
3569
3569
  {
3570
- "name": "$success"
3570
+ "name": "$on-info"
3571
3571
  },
3572
3572
  {
3573
- "name": "$transparent"
3573
+ "name": "$on-success"
3574
+ },
3575
+ {
3576
+ "name": "$on-warning"
3577
+ },
3578
+ {
3579
+ "name": "$primary"
3580
+ },
3581
+ {
3582
+ "name": "$secondary"
3583
+ },
3584
+ {
3585
+ "name": "$success"
3574
3586
  },
3575
3587
  {
3576
3588
  "name": "$warning"
3589
+ },
3590
+ {
3591
+ "name": "$warning-alt"
3577
3592
  }
3578
3593
  ]
3579
3594
  },
3580
3595
  {
3581
- "name": "color",
3582
- "description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
3596
+ "name": "fill",
3597
+ "description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
3583
3598
  "values": [
3599
+ {
3600
+ "name": "$background"
3601
+ },
3584
3602
  {
3585
3603
  "name": "$brand"
3586
3604
  },
3587
3605
  {
3588
- "name": "$brand-alt"
3606
+ "name": "$brand-hover"
3607
+ },
3608
+ {
3609
+ "name": "$brand-press"
3610
+ },
3611
+ {
3612
+ "name": "$brand-subdued"
3589
3613
  },
3590
3614
  {
3591
3615
  "name": "$currentColor"
@@ -3596,32 +3620,50 @@
3596
3620
  {
3597
3621
  "name": "$error"
3598
3622
  },
3623
+ {
3624
+ "name": "$error-hover"
3625
+ },
3626
+ {
3627
+ "name": "$error-press"
3628
+ },
3629
+ {
3630
+ "name": "$error-subdued"
3631
+ },
3632
+ {
3633
+ "name": "$hover"
3634
+ },
3599
3635
  {
3600
3636
  "name": "$info"
3601
3637
  },
3602
3638
  {
3603
- "name": "$invert"
3639
+ "name": "$info-hover"
3604
3640
  },
3605
3641
  {
3606
- "name": "$invert-disabled"
3642
+ "name": "$info-press"
3607
3643
  },
3608
3644
  {
3609
- "name": "$invert-secondary"
3645
+ "name": "$info-subdued"
3610
3646
  },
3611
3647
  {
3612
- "name": "$on-brand"
3648
+ "name": "$invert"
3613
3649
  },
3614
3650
  {
3615
- "name": "$on-error"
3651
+ "name": "$invert-disabled"
3616
3652
  },
3617
3653
  {
3618
- "name": "$on-info"
3654
+ "name": "$invert-hover"
3619
3655
  },
3620
3656
  {
3621
- "name": "$on-success"
3657
+ "name": "$invert-press"
3622
3658
  },
3623
3659
  {
3624
- "name": "$on-warning"
3660
+ "name": "$invert-secondary"
3661
+ },
3662
+ {
3663
+ "name": "$overlay"
3664
+ },
3665
+ {
3666
+ "name": "$press"
3625
3667
  },
3626
3668
  {
3627
3669
  "name": "$primary"
@@ -3632,11 +3674,29 @@
3632
3674
  {
3633
3675
  "name": "$success"
3634
3676
  },
3677
+ {
3678
+ "name": "$success-hover"
3679
+ },
3680
+ {
3681
+ "name": "$success-press"
3682
+ },
3683
+ {
3684
+ "name": "$success-subdued"
3685
+ },
3686
+ {
3687
+ "name": "$transparent"
3688
+ },
3635
3689
  {
3636
3690
  "name": "$warning"
3637
3691
  },
3638
3692
  {
3639
- "name": "$warning-alt"
3693
+ "name": "$warning-hover"
3694
+ },
3695
+ {
3696
+ "name": "$warning-press"
3697
+ },
3698
+ {
3699
+ "name": "$warning-subdued"
3640
3700
  }
3641
3701
  ]
3642
3702
  },
@@ -3956,93 +4016,189 @@
3956
4016
  ]
3957
4017
  },
3958
4018
  {
3959
- "name": "box-shadow",
3960
- "description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bottom-1\",\n \"md\": \"$bottom-2\",\n \"lg\": \"$bottom-3\",\n \"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
4019
+ "name": "border-width-x",
4020
+ "description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
3961
4021
  "values": [
3962
4022
  {
3963
- "name": "$bottom-1"
4023
+ "name": "$1"
3964
4024
  },
3965
4025
  {
3966
- "name": "$bottom-2"
4026
+ "name": "$2"
3967
4027
  },
3968
4028
  {
3969
- "name": "$bottom-3"
4029
+ "name": "$3"
3970
4030
  },
3971
4031
  {
3972
- "name": "$bottom-4"
4032
+ "name": "$4"
3973
4033
  },
3974
4034
  {
3975
- "name": "$bottom-5"
4035
+ "name": "$5"
3976
4036
  },
3977
4037
  {
3978
4038
  "name": "$none"
4039
+ }
4040
+ ]
4041
+ },
4042
+ {
4043
+ "name": "border-width-y",
4044
+ "description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
4045
+ "values": [
4046
+ {
4047
+ "name": "$1"
3979
4048
  },
3980
4049
  {
3981
- "name": "$top-1"
4050
+ "name": "$2"
3982
4051
  },
3983
4052
  {
3984
- "name": "$top-2"
4053
+ "name": "$3"
3985
4054
  },
3986
4055
  {
3987
- "name": "$top-3"
4056
+ "name": "$4"
3988
4057
  },
3989
4058
  {
3990
- "name": "$top-4"
4059
+ "name": "$5"
3991
4060
  },
3992
4061
  {
3993
- "name": "$top-5"
4062
+ "name": "$none"
3994
4063
  }
3995
4064
  ]
3996
4065
  },
3997
4066
  {
3998
- "name": "padding",
3999
- "description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4067
+ "name": "border-color",
4068
+ "description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$disabled\",\n \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
4000
4069
  "values": [
4001
4070
  {
4002
- "name": "$2xl"
4003
- },
4004
- {
4005
- "name": "$2xs"
4071
+ "name": "$brand"
4006
4072
  },
4007
4073
  {
4008
- "name": "$3xl"
4074
+ "name": "$brand-alt"
4009
4075
  },
4010
4076
  {
4011
- "name": "$3xs"
4077
+ "name": "$disabled"
4012
4078
  },
4013
4079
  {
4014
- "name": "$4xl"
4080
+ "name": "$divider"
4015
4081
  },
4016
4082
  {
4017
- "name": "$4xs"
4083
+ "name": "$error"
4018
4084
  },
4019
4085
  {
4020
- "name": "$5xl"
4086
+ "name": "$info"
4021
4087
  },
4022
4088
  {
4023
- "name": "$6xl"
4089
+ "name": "$invert"
4024
4090
  },
4025
4091
  {
4026
- "name": "$7xl"
4092
+ "name": "$invert-disabled"
4027
4093
  },
4028
4094
  {
4029
- "name": "$8xl"
4095
+ "name": "$primary"
4030
4096
  },
4031
4097
  {
4032
- "name": "$lg"
4098
+ "name": "$secondary"
4033
4099
  },
4034
4100
  {
4035
- "name": "$md"
4101
+ "name": "$subdued"
4036
4102
  },
4037
4103
  {
4038
- "name": "$none"
4104
+ "name": "$success"
4039
4105
  },
4040
4106
  {
4041
- "name": "$s"
4107
+ "name": "$transparent"
4042
4108
  },
4043
4109
  {
4044
- "name": "$xl"
4045
- },
4110
+ "name": "$warning"
4111
+ }
4112
+ ]
4113
+ },
4114
+ {
4115
+ "name": "box-shadow",
4116
+ "description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bottom-1\",\n \"md\": \"$bottom-2\",\n \"lg\": \"$bottom-3\",\n \"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
4117
+ "values": [
4118
+ {
4119
+ "name": "$bottom-1"
4120
+ },
4121
+ {
4122
+ "name": "$bottom-2"
4123
+ },
4124
+ {
4125
+ "name": "$bottom-3"
4126
+ },
4127
+ {
4128
+ "name": "$bottom-4"
4129
+ },
4130
+ {
4131
+ "name": "$bottom-5"
4132
+ },
4133
+ {
4134
+ "name": "$none"
4135
+ },
4136
+ {
4137
+ "name": "$top-1"
4138
+ },
4139
+ {
4140
+ "name": "$top-2"
4141
+ },
4142
+ {
4143
+ "name": "$top-3"
4144
+ },
4145
+ {
4146
+ "name": "$top-4"
4147
+ },
4148
+ {
4149
+ "name": "$top-5"
4150
+ }
4151
+ ]
4152
+ },
4153
+ {
4154
+ "name": "padding",
4155
+ "description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4156
+ "values": [
4157
+ {
4158
+ "name": "$2xl"
4159
+ },
4160
+ {
4161
+ "name": "$2xs"
4162
+ },
4163
+ {
4164
+ "name": "$3xl"
4165
+ },
4166
+ {
4167
+ "name": "$3xs"
4168
+ },
4169
+ {
4170
+ "name": "$4xl"
4171
+ },
4172
+ {
4173
+ "name": "$4xs"
4174
+ },
4175
+ {
4176
+ "name": "$5xl"
4177
+ },
4178
+ {
4179
+ "name": "$6xl"
4180
+ },
4181
+ {
4182
+ "name": "$7xl"
4183
+ },
4184
+ {
4185
+ "name": "$8xl"
4186
+ },
4187
+ {
4188
+ "name": "$lg"
4189
+ },
4190
+ {
4191
+ "name": "$md"
4192
+ },
4193
+ {
4194
+ "name": "$none"
4195
+ },
4196
+ {
4197
+ "name": "$s"
4198
+ },
4199
+ {
4200
+ "name": "$xl"
4201
+ },
4046
4202
  {
4047
4203
  "name": "$xs"
4048
4204
  }
@@ -4550,8 +4706,41 @@
4550
4706
  ]
4551
4707
  },
4552
4708
  {
4553
- "name": "gap",
4554
- "description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4709
+ "name": "z-index",
4710
+ "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$100\",\n \"md\": \"$200\",\n \"lg\": \"$300\",\n \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
4711
+ "values": [
4712
+ {
4713
+ "name": "$100"
4714
+ },
4715
+ {
4716
+ "name": "$200"
4717
+ },
4718
+ {
4719
+ "name": "$300"
4720
+ },
4721
+ {
4722
+ "name": "$400"
4723
+ },
4724
+ {
4725
+ "name": "$500"
4726
+ },
4727
+ {
4728
+ "name": "$600"
4729
+ },
4730
+ {
4731
+ "name": "$700"
4732
+ },
4733
+ {
4734
+ "name": "$800"
4735
+ },
4736
+ {
4737
+ "name": "$900"
4738
+ }
4739
+ ]
4740
+ },
4741
+ {
4742
+ "name": "p",
4743
+ "description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4555
4744
  "values": [
4556
4745
  {
4557
4746
  "name": "$2xl"
@@ -4604,8 +4793,8 @@
4604
4793
  ]
4605
4794
  },
4606
4795
  {
4607
- "name": "grid-gap",
4608
- "description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4796
+ "name": "pl",
4797
+ "description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4609
4798
  "values": [
4610
4799
  {
4611
4800
  "name": "$2xl"
@@ -4658,1003 +4847,1091 @@
4658
4847
  ]
4659
4848
  },
4660
4849
  {
4661
- "name": "z-index",
4662
- "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$100\",\n \"md\": \"$200\",\n \"lg\": \"$300\",\n \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
4850
+ "name": "pr",
4851
+ "description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4663
4852
  "values": [
4664
4853
  {
4665
- "name": "$100"
4854
+ "name": "$2xl"
4666
4855
  },
4667
4856
  {
4668
- "name": "$200"
4857
+ "name": "$2xs"
4669
4858
  },
4670
4859
  {
4671
- "name": "$300"
4860
+ "name": "$3xl"
4672
4861
  },
4673
4862
  {
4674
- "name": "$400"
4863
+ "name": "$3xs"
4675
4864
  },
4676
4865
  {
4677
- "name": "$500"
4866
+ "name": "$4xl"
4678
4867
  },
4679
4868
  {
4680
- "name": "$600"
4869
+ "name": "$4xs"
4681
4870
  },
4682
4871
  {
4683
- "name": "$700"
4872
+ "name": "$5xl"
4684
4873
  },
4685
4874
  {
4686
- "name": "$800"
4875
+ "name": "$6xl"
4687
4876
  },
4688
4877
  {
4689
- "name": "$900"
4690
- }
4691
- ]
4692
- },
4693
- {
4694
- "name": "line-height",
4695
- "default": "base",
4696
- "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
4697
- "values": [
4878
+ "name": "$7xl"
4879
+ },
4698
4880
  {
4699
- "name": "$body-l"
4881
+ "name": "$8xl"
4700
4882
  },
4701
4883
  {
4702
- "name": "$body-m"
4884
+ "name": "$lg"
4703
4885
  },
4704
4886
  {
4705
- "name": "$body-s"
4887
+ "name": "$md"
4706
4888
  },
4707
4889
  {
4708
- "name": "$body-xl"
4890
+ "name": "$none"
4709
4891
  },
4710
4892
  {
4711
- "name": "$body-xs"
4893
+ "name": "$s"
4712
4894
  },
4713
4895
  {
4714
- "name": "$body-xxs"
4896
+ "name": "$xl"
4715
4897
  },
4716
4898
  {
4717
- "name": "$button-l"
4899
+ "name": "$xs"
4900
+ }
4901
+ ]
4902
+ },
4903
+ {
4904
+ "name": "pt",
4905
+ "description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4906
+ "values": [
4907
+ {
4908
+ "name": "$2xl"
4718
4909
  },
4719
4910
  {
4720
- "name": "$button-m"
4911
+ "name": "$2xs"
4721
4912
  },
4722
4913
  {
4723
- "name": "$button-s"
4914
+ "name": "$3xl"
4724
4915
  },
4725
4916
  {
4726
- "name": "$heading-hero"
4917
+ "name": "$3xs"
4727
4918
  },
4728
4919
  {
4729
- "name": "$heading-l"
4920
+ "name": "$4xl"
4730
4921
  },
4731
4922
  {
4732
- "name": "$heading-m"
4923
+ "name": "$4xs"
4733
4924
  },
4734
4925
  {
4735
- "name": "$heading-s"
4926
+ "name": "$5xl"
4736
4927
  },
4737
4928
  {
4738
- "name": "$heading-xl"
4929
+ "name": "$6xl"
4739
4930
  },
4740
4931
  {
4741
- "name": "$heading-xs"
4932
+ "name": "$7xl"
4742
4933
  },
4743
4934
  {
4744
- "name": "$label-l"
4935
+ "name": "$8xl"
4745
4936
  },
4746
4937
  {
4747
- "name": "$label-m"
4938
+ "name": "$lg"
4748
4939
  },
4749
4940
  {
4750
- "name": "$label-s"
4751
- }
4752
- ]
4753
- },
4754
- {
4755
- "name": "font-weight",
4756
- "description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bold\",\n \"md\": \"$medium\",\n \"lg\": \"$regular\",\n \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
4757
- "values": [
4941
+ "name": "$md"
4942
+ },
4758
4943
  {
4759
- "name": "$bold"
4944
+ "name": "$none"
4760
4945
  },
4761
4946
  {
4762
- "name": "$medium"
4947
+ "name": "$s"
4763
4948
  },
4764
4949
  {
4765
- "name": "$regular"
4950
+ "name": "$xl"
4766
4951
  },
4767
4952
  {
4768
- "name": "$semiBold"
4953
+ "name": "$xs"
4769
4954
  }
4770
4955
  ]
4771
4956
  },
4772
4957
  {
4773
- "name": "font-size",
4774
- "description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
4958
+ "name": "pb",
4959
+ "description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4775
4960
  "values": [
4776
4961
  {
4777
- "name": "$body-l"
4962
+ "name": "$2xl"
4778
4963
  },
4779
4964
  {
4780
- "name": "$body-m"
4965
+ "name": "$2xs"
4781
4966
  },
4782
4967
  {
4783
- "name": "$body-s"
4968
+ "name": "$3xl"
4784
4969
  },
4785
4970
  {
4786
- "name": "$body-xl"
4971
+ "name": "$3xs"
4787
4972
  },
4788
4973
  {
4789
- "name": "$body-xs"
4974
+ "name": "$4xl"
4790
4975
  },
4791
4976
  {
4792
- "name": "$body-xxs"
4977
+ "name": "$4xs"
4793
4978
  },
4794
4979
  {
4795
- "name": "$button-l"
4980
+ "name": "$5xl"
4796
4981
  },
4797
4982
  {
4798
- "name": "$button-m"
4983
+ "name": "$6xl"
4799
4984
  },
4800
4985
  {
4801
- "name": "$button-s"
4986
+ "name": "$7xl"
4802
4987
  },
4803
4988
  {
4804
- "name": "$heading-hero"
4989
+ "name": "$8xl"
4805
4990
  },
4806
4991
  {
4807
- "name": "$heading-l"
4992
+ "name": "$lg"
4808
4993
  },
4809
4994
  {
4810
- "name": "$heading-m"
4995
+ "name": "$md"
4811
4996
  },
4812
4997
  {
4813
- "name": "$heading-s"
4998
+ "name": "$none"
4814
4999
  },
4815
5000
  {
4816
- "name": "$heading-xl"
4817
- },
4818
- {
4819
- "name": "$heading-xs"
4820
- },
4821
- {
4822
- "name": "$label-l"
5001
+ "name": "$s"
4823
5002
  },
4824
5003
  {
4825
- "name": "$label-m"
5004
+ "name": "$xl"
4826
5005
  },
4827
5006
  {
4828
- "name": "$label-s"
5007
+ "name": "$xs"
4829
5008
  }
4830
5009
  ]
4831
5010
  },
4832
5011
  {
4833
- "name": "font-family",
4834
- "description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body\",\n \"md\": \"$button\",\n \"lg\": \"$heading\",\n \"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
5012
+ "name": "px",
5013
+ "description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4835
5014
  "values": [
4836
5015
  {
4837
- "name": "$body"
5016
+ "name": "$2xl"
4838
5017
  },
4839
5018
  {
4840
- "name": "$button"
5019
+ "name": "$2xs"
4841
5020
  },
4842
5021
  {
4843
- "name": "$heading"
4844
- }
4845
- ]
4846
- },
4847
- {
4848
- "name": "width",
4849
- "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
4850
- "values": [
5022
+ "name": "$3xl"
5023
+ },
4851
5024
  {
4852
- "name": "auto"
5025
+ "name": "$3xs"
4853
5026
  },
4854
5027
  {
4855
- "name": "fit-content"
5028
+ "name": "$4xl"
4856
5029
  },
4857
5030
  {
4858
- "name": "intrinsic"
5031
+ "name": "$4xs"
4859
5032
  },
4860
5033
  {
4861
- "name": "max-content"
5034
+ "name": "$5xl"
4862
5035
  },
4863
5036
  {
4864
- "name": "min-content"
5037
+ "name": "$6xl"
4865
5038
  },
4866
5039
  {
4867
- "name": "min-intrinsic"
5040
+ "name": "$7xl"
4868
5041
  },
4869
5042
  {
4870
- "name": "stretch"
4871
- }
4872
- ]
4873
- },
4874
- {
4875
- "name": "height",
4876
- "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
4877
- "values": [
5043
+ "name": "$8xl"
5044
+ },
4878
5045
  {
4879
- "name": "auto"
5046
+ "name": "$lg"
4880
5047
  },
4881
5048
  {
4882
- "name": "fit-content"
5049
+ "name": "$md"
4883
5050
  },
4884
5051
  {
4885
- "name": "max-content"
5052
+ "name": "$none"
4886
5053
  },
4887
5054
  {
4888
- "name": "min-content"
5055
+ "name": "$s"
4889
5056
  },
4890
5057
  {
4891
- "name": "stretch"
5058
+ "name": "$xl"
5059
+ },
5060
+ {
5061
+ "name": "$xs"
4892
5062
  }
4893
5063
  ]
4894
5064
  },
4895
5065
  {
4896
- "name": "max-width",
4897
- "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
5066
+ "name": "py",
5067
+ "description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4898
5068
  "values": [
4899
5069
  {
4900
- "name": "fit-content"
5070
+ "name": "$2xl"
4901
5071
  },
4902
5072
  {
4903
- "name": "intrinsic"
5073
+ "name": "$2xs"
4904
5074
  },
4905
5075
  {
4906
- "name": "max-content"
5076
+ "name": "$3xl"
4907
5077
  },
4908
5078
  {
4909
- "name": "min-content"
5079
+ "name": "$3xs"
4910
5080
  },
4911
5081
  {
4912
- "name": "none"
5082
+ "name": "$4xl"
4913
5083
  },
4914
5084
  {
4915
- "name": "stretch"
4916
- }
4917
- ]
4918
- },
4919
- {
4920
- "name": "max-height",
4921
- "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
4922
- "values": [
5085
+ "name": "$4xs"
5086
+ },
4923
5087
  {
4924
- "name": "fit-content"
5088
+ "name": "$5xl"
4925
5089
  },
4926
5090
  {
4927
- "name": "intrinsic"
5091
+ "name": "$6xl"
4928
5092
  },
4929
5093
  {
4930
- "name": "max-content"
5094
+ "name": "$7xl"
4931
5095
  },
4932
5096
  {
4933
- "name": "min-content"
5097
+ "name": "$8xl"
4934
5098
  },
4935
5099
  {
4936
- "name": "none"
5100
+ "name": "$lg"
4937
5101
  },
4938
5102
  {
4939
- "name": "stretch"
5103
+ "name": "$md"
5104
+ },
5105
+ {
5106
+ "name": "$none"
5107
+ },
5108
+ {
5109
+ "name": "$s"
5110
+ },
5111
+ {
5112
+ "name": "$xl"
5113
+ },
5114
+ {
5115
+ "name": "$xs"
4940
5116
  }
4941
5117
  ]
4942
5118
  },
4943
5119
  {
4944
- "name": "min-width",
4945
- "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
5120
+ "name": "padding-x",
5121
+ "description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
4946
5122
  "values": [
4947
5123
  {
4948
- "name": "auto"
5124
+ "name": "$2xl"
4949
5125
  },
4950
5126
  {
4951
- "name": "fit-content"
5127
+ "name": "$2xs"
4952
5128
  },
4953
5129
  {
4954
- "name": "intrinsic"
5130
+ "name": "$3xl"
4955
5131
  },
4956
5132
  {
4957
- "name": "max-content"
5133
+ "name": "$3xs"
4958
5134
  },
4959
5135
  {
4960
- "name": "min-content"
5136
+ "name": "$4xl"
4961
5137
  },
4962
5138
  {
4963
- "name": "min-intrinsic"
5139
+ "name": "$4xs"
4964
5140
  },
4965
5141
  {
4966
- "name": "stretch"
4967
- }
4968
- ]
4969
- },
4970
- {
4971
- "name": "min-height",
4972
- "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
4973
- "values": [
5142
+ "name": "$5xl"
5143
+ },
4974
5144
  {
4975
- "name": "auto"
5145
+ "name": "$6xl"
4976
5146
  },
4977
5147
  {
4978
- "name": "fit-content"
5148
+ "name": "$7xl"
4979
5149
  },
4980
5150
  {
4981
- "name": "intrinsic"
5151
+ "name": "$8xl"
4982
5152
  },
4983
5153
  {
4984
- "name": "max-content"
5154
+ "name": "$lg"
4985
5155
  },
4986
5156
  {
4987
- "name": "min-content"
5157
+ "name": "$md"
4988
5158
  },
4989
5159
  {
4990
- "name": "stretch"
5160
+ "name": "$none"
5161
+ },
5162
+ {
5163
+ "name": "$s"
5164
+ },
5165
+ {
5166
+ "name": "$xl"
5167
+ },
5168
+ {
5169
+ "name": "$xs"
4991
5170
  }
4992
5171
  ]
4993
5172
  },
4994
5173
  {
4995
- "name": "bottom",
4996
- "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
4997
- "values": []
4998
- },
4999
- {
5000
- "name": "left",
5001
- "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
5002
- "values": []
5003
- },
5004
- {
5005
- "name": "right",
5006
- "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
5007
- "values": []
5008
- },
5009
- {
5010
- "name": "top",
5011
- "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
5012
- "values": []
5013
- },
5014
- {
5015
- "name": "flex",
5016
- "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
5174
+ "name": "padding-y",
5175
+ "description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5017
5176
  "values": [
5018
5177
  {
5019
- "name": "auto"
5178
+ "name": "$2xl"
5020
5179
  },
5021
5180
  {
5022
- "name": "content"
5181
+ "name": "$2xs"
5023
5182
  },
5024
5183
  {
5025
- "name": "fit-content"
5184
+ "name": "$3xl"
5026
5185
  },
5027
5186
  {
5028
- "name": "max-content"
5187
+ "name": "$3xs"
5029
5188
  },
5030
5189
  {
5031
- "name": "min-content"
5190
+ "name": "$4xl"
5032
5191
  },
5033
5192
  {
5034
- "name": "none"
5193
+ "name": "$4xs"
5035
5194
  },
5036
5195
  {
5037
- "name": "stretch"
5038
- }
5039
- ]
5040
- },
5041
- {
5042
- "name": "grid-template-areas",
5043
- "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
5044
- "values": []
5045
- },
5046
- {
5047
- "name": "grid-template-columns",
5048
- "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
5049
- "values": [
5196
+ "name": "$5xl"
5197
+ },
5050
5198
  {
5051
- "name": "auto"
5199
+ "name": "$6xl"
5052
5200
  },
5053
5201
  {
5054
- "name": "max-content"
5202
+ "name": "$7xl"
5055
5203
  },
5056
5204
  {
5057
- "name": "min-content"
5205
+ "name": "$8xl"
5058
5206
  },
5059
5207
  {
5060
- "name": "none"
5208
+ "name": "$lg"
5061
5209
  },
5062
5210
  {
5063
- "name": "subgrid"
5211
+ "name": "$md"
5212
+ },
5213
+ {
5214
+ "name": "$none"
5215
+ },
5216
+ {
5217
+ "name": "$s"
5218
+ },
5219
+ {
5220
+ "name": "$xl"
5221
+ },
5222
+ {
5223
+ "name": "$xs"
5064
5224
  }
5065
5225
  ]
5066
5226
  },
5067
5227
  {
5068
- "name": "grid-template-rows",
5069
- "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
5228
+ "name": "m",
5229
+ "description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5070
5230
  "values": [
5071
5231
  {
5072
- "name": "auto"
5232
+ "name": "$2xl"
5073
5233
  },
5074
5234
  {
5075
- "name": "max-content"
5235
+ "name": "$2xs"
5076
5236
  },
5077
5237
  {
5078
- "name": "min-content"
5238
+ "name": "$3xl"
5079
5239
  },
5080
5240
  {
5081
- "name": "none"
5241
+ "name": "$3xs"
5082
5242
  },
5083
5243
  {
5084
- "name": "subgrid"
5085
- }
5086
- ]
5087
- },
5088
- {
5089
- "name": "grid-area",
5090
- "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
5091
- "values": []
5092
- },
5093
- {
5094
- "name": "flex-shrink",
5095
- "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
5096
- "values": []
5097
- },
5098
- {
5099
- "name": "flex-grow",
5100
- "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
5101
- "values": []
5102
- },
5103
- {
5104
- "name": "order",
5105
- "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
5106
- "values": []
5107
- },
5108
- {
5109
- "name": "transition-delay",
5110
- "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
5111
- "type": "string"
5112
- },
5113
- {
5114
- "name": "transition-property",
5115
- "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"none\",\n \"lg\": \"all\",\n \"xl\": \"none\"\n}\n```\n\n- all\n- none",
5116
- "values": [
5244
+ "name": "$4xl"
5245
+ },
5117
5246
  {
5118
- "name": "all"
5247
+ "name": "$4xs"
5119
5248
  },
5120
5249
  {
5121
- "name": "none"
5122
- }
5123
- ]
5124
- },
5125
- {
5126
- "name": "background-image",
5127
- "description": "The **`background-image`** CSS property sets one or more background images on an element.\n\n\n**Initial value**: `none`",
5128
- "values": []
5129
- },
5130
- {
5131
- "name": "background-position",
5132
- "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"left\",\n \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
5133
- "values": [
5250
+ "name": "$5xl"
5251
+ },
5134
5252
  {
5135
- "name": "bottom"
5253
+ "name": "$6xl"
5136
5254
  },
5137
5255
  {
5138
- "name": "center"
5256
+ "name": "$7xl"
5139
5257
  },
5140
5258
  {
5141
- "name": "left"
5259
+ "name": "$8xl"
5142
5260
  },
5143
5261
  {
5144
- "name": "right"
5262
+ "name": "$auto"
5145
5263
  },
5146
5264
  {
5147
- "name": "top"
5265
+ "name": "$lg"
5266
+ },
5267
+ {
5268
+ "name": "$md"
5269
+ },
5270
+ {
5271
+ "name": "$none"
5272
+ },
5273
+ {
5274
+ "name": "$s"
5275
+ },
5276
+ {
5277
+ "name": "$xl"
5278
+ },
5279
+ {
5280
+ "name": "$xs"
5148
5281
  }
5149
5282
  ]
5150
5283
  },
5151
5284
  {
5152
- "name": "background-position-x",
5153
- "description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"left\",\n \"lg\": \"right\",\n \"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
5285
+ "name": "mr",
5286
+ "description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5154
5287
  "values": [
5155
5288
  {
5156
- "name": "center"
5289
+ "name": "$2xl"
5157
5290
  },
5158
5291
  {
5159
- "name": "left"
5292
+ "name": "$2xs"
5160
5293
  },
5161
5294
  {
5162
- "name": "right"
5295
+ "name": "$3xl"
5163
5296
  },
5164
5297
  {
5165
- "name": "x-end"
5298
+ "name": "$3xs"
5166
5299
  },
5167
5300
  {
5168
- "name": "x-start"
5301
+ "name": "$4xl"
5302
+ },
5303
+ {
5304
+ "name": "$4xs"
5305
+ },
5306
+ {
5307
+ "name": "$5xl"
5308
+ },
5309
+ {
5310
+ "name": "$6xl"
5311
+ },
5312
+ {
5313
+ "name": "$7xl"
5314
+ },
5315
+ {
5316
+ "name": "$8xl"
5317
+ },
5318
+ {
5319
+ "name": "$auto"
5320
+ },
5321
+ {
5322
+ "name": "$lg"
5323
+ },
5324
+ {
5325
+ "name": "$md"
5326
+ },
5327
+ {
5328
+ "name": "$none"
5329
+ },
5330
+ {
5331
+ "name": "$s"
5332
+ },
5333
+ {
5334
+ "name": "$xl"
5335
+ },
5336
+ {
5337
+ "name": "$xs"
5169
5338
  }
5170
5339
  ]
5171
5340
  },
5172
5341
  {
5173
- "name": "background-position-y",
5174
- "description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"top\",\n \"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
5342
+ "name": "ml",
5343
+ "description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5175
5344
  "values": [
5176
5345
  {
5177
- "name": "bottom"
5346
+ "name": "$2xl"
5178
5347
  },
5179
5348
  {
5180
- "name": "center"
5349
+ "name": "$2xs"
5181
5350
  },
5182
5351
  {
5183
- "name": "top"
5352
+ "name": "$3xl"
5184
5353
  },
5185
5354
  {
5186
- "name": "y-end"
5355
+ "name": "$3xs"
5187
5356
  },
5188
5357
  {
5189
- "name": "y-start"
5358
+ "name": "$4xl"
5359
+ },
5360
+ {
5361
+ "name": "$4xs"
5362
+ },
5363
+ {
5364
+ "name": "$5xl"
5365
+ },
5366
+ {
5367
+ "name": "$6xl"
5368
+ },
5369
+ {
5370
+ "name": "$7xl"
5371
+ },
5372
+ {
5373
+ "name": "$8xl"
5374
+ },
5375
+ {
5376
+ "name": "$auto"
5377
+ },
5378
+ {
5379
+ "name": "$lg"
5380
+ },
5381
+ {
5382
+ "name": "$md"
5383
+ },
5384
+ {
5385
+ "name": "$none"
5386
+ },
5387
+ {
5388
+ "name": "$s"
5389
+ },
5390
+ {
5391
+ "name": "$xl"
5392
+ },
5393
+ {
5394
+ "name": "$xs"
5190
5395
  }
5191
5396
  ]
5192
5397
  },
5193
5398
  {
5194
- "name": "background-blend-mode",
5195
- "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"color\",\n \"md\": \"color-burn\",\n \"lg\": \"color-dodge\",\n \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
5399
+ "name": "mt",
5400
+ "description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5196
5401
  "values": [
5197
5402
  {
5198
- "name": "color"
5403
+ "name": "$2xl"
5199
5404
  },
5200
5405
  {
5201
- "name": "color-burn"
5406
+ "name": "$2xs"
5202
5407
  },
5203
5408
  {
5204
- "name": "color-dodge"
5409
+ "name": "$3xl"
5205
5410
  },
5206
5411
  {
5207
- "name": "darken"
5412
+ "name": "$3xs"
5208
5413
  },
5209
5414
  {
5210
- "name": "difference"
5415
+ "name": "$4xl"
5211
5416
  },
5212
5417
  {
5213
- "name": "exclusion"
5418
+ "name": "$4xs"
5214
5419
  },
5215
5420
  {
5216
- "name": "hard-light"
5421
+ "name": "$5xl"
5217
5422
  },
5218
5423
  {
5219
- "name": "hue"
5424
+ "name": "$6xl"
5220
5425
  },
5221
5426
  {
5222
- "name": "lighten"
5427
+ "name": "$7xl"
5223
5428
  },
5224
5429
  {
5225
- "name": "luminosity"
5430
+ "name": "$8xl"
5226
5431
  },
5227
5432
  {
5228
- "name": "multiply"
5433
+ "name": "$auto"
5229
5434
  },
5230
5435
  {
5231
- "name": "normal"
5436
+ "name": "$lg"
5232
5437
  },
5233
5438
  {
5234
- "name": "overlay"
5439
+ "name": "$md"
5235
5440
  },
5236
5441
  {
5237
- "name": "saturation"
5442
+ "name": "$none"
5238
5443
  },
5239
5444
  {
5240
- "name": "screen"
5445
+ "name": "$s"
5241
5446
  },
5242
5447
  {
5243
- "name": "soft-light"
5448
+ "name": "$xl"
5449
+ },
5450
+ {
5451
+ "name": "$xs"
5244
5452
  }
5245
5453
  ]
5246
5454
  },
5247
5455
  {
5248
- "name": "background-repeat",
5249
- "description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"no-repeat\",\n \"md\": \"repeat\",\n \"lg\": \"repeat-x\",\n \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
5456
+ "name": "mb",
5457
+ "description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5250
5458
  "values": [
5251
5459
  {
5252
- "name": "no-repeat"
5460
+ "name": "$2xl"
5253
5461
  },
5254
5462
  {
5255
- "name": "repeat"
5463
+ "name": "$2xs"
5256
5464
  },
5257
5465
  {
5258
- "name": "repeat-x"
5466
+ "name": "$3xl"
5259
5467
  },
5260
5468
  {
5261
- "name": "repeat-y"
5469
+ "name": "$3xs"
5262
5470
  },
5263
5471
  {
5264
- "name": "round"
5472
+ "name": "$4xl"
5265
5473
  },
5266
5474
  {
5267
- "name": "space"
5475
+ "name": "$4xs"
5476
+ },
5477
+ {
5478
+ "name": "$5xl"
5479
+ },
5480
+ {
5481
+ "name": "$6xl"
5482
+ },
5483
+ {
5484
+ "name": "$7xl"
5485
+ },
5486
+ {
5487
+ "name": "$8xl"
5488
+ },
5489
+ {
5490
+ "name": "$auto"
5491
+ },
5492
+ {
5493
+ "name": "$lg"
5494
+ },
5495
+ {
5496
+ "name": "$md"
5497
+ },
5498
+ {
5499
+ "name": "$none"
5500
+ },
5501
+ {
5502
+ "name": "$s"
5503
+ },
5504
+ {
5505
+ "name": "$xl"
5506
+ },
5507
+ {
5508
+ "name": "$xs"
5268
5509
  }
5269
5510
  ]
5270
5511
  },
5271
5512
  {
5272
- "name": "background-size",
5273
- "description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"contain\",\n \"lg\": \"cover\",\n \"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
5513
+ "name": "mx",
5514
+ "description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5274
5515
  "values": [
5275
5516
  {
5276
- "name": "auto"
5517
+ "name": "$2xl"
5277
5518
  },
5278
5519
  {
5279
- "name": "contain"
5520
+ "name": "$2xs"
5521
+ },
5522
+ {
5523
+ "name": "$3xl"
5524
+ },
5525
+ {
5526
+ "name": "$3xs"
5527
+ },
5528
+ {
5529
+ "name": "$4xl"
5530
+ },
5531
+ {
5532
+ "name": "$4xs"
5533
+ },
5534
+ {
5535
+ "name": "$5xl"
5536
+ },
5537
+ {
5538
+ "name": "$6xl"
5539
+ },
5540
+ {
5541
+ "name": "$7xl"
5542
+ },
5543
+ {
5544
+ "name": "$8xl"
5545
+ },
5546
+ {
5547
+ "name": "$auto"
5548
+ },
5549
+ {
5550
+ "name": "$lg"
5551
+ },
5552
+ {
5553
+ "name": "$md"
5554
+ },
5555
+ {
5556
+ "name": "$none"
5557
+ },
5558
+ {
5559
+ "name": "$s"
5560
+ },
5561
+ {
5562
+ "name": "$xl"
5280
5563
  },
5281
5564
  {
5282
- "name": "cover"
5565
+ "name": "$xs"
5283
5566
  }
5284
5567
  ]
5285
5568
  },
5286
5569
  {
5287
- "name": "display",
5288
- "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"block\",\n \"md\": \"contents\",\n \"lg\": \"flex\",\n \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
5570
+ "name": "my",
5571
+ "description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5289
5572
  "values": [
5290
5573
  {
5291
- "name": "block"
5574
+ "name": "$2xl"
5292
5575
  },
5293
5576
  {
5294
- "name": "contents"
5577
+ "name": "$2xs"
5295
5578
  },
5296
5579
  {
5297
- "name": "flex"
5580
+ "name": "$3xl"
5298
5581
  },
5299
5582
  {
5300
- "name": "flow"
5583
+ "name": "$3xs"
5301
5584
  },
5302
5585
  {
5303
- "name": "flow-root"
5586
+ "name": "$4xl"
5304
5587
  },
5305
5588
  {
5306
- "name": "grid"
5589
+ "name": "$4xs"
5307
5590
  },
5308
5591
  {
5309
- "name": "inline"
5592
+ "name": "$5xl"
5310
5593
  },
5311
5594
  {
5312
- "name": "inline-block"
5595
+ "name": "$6xl"
5313
5596
  },
5314
5597
  {
5315
- "name": "inline-flex"
5598
+ "name": "$7xl"
5316
5599
  },
5317
5600
  {
5318
- "name": "inline-grid"
5601
+ "name": "$8xl"
5319
5602
  },
5320
5603
  {
5321
- "name": "inline-list-item"
5604
+ "name": "$auto"
5322
5605
  },
5323
5606
  {
5324
- "name": "inline-table"
5607
+ "name": "$lg"
5325
5608
  },
5326
5609
  {
5327
- "name": "list-item"
5610
+ "name": "$md"
5328
5611
  },
5329
5612
  {
5330
- "name": "none"
5613
+ "name": "$none"
5331
5614
  },
5332
5615
  {
5333
- "name": "ruby"
5616
+ "name": "$s"
5334
5617
  },
5335
5618
  {
5336
- "name": "ruby-base"
5619
+ "name": "$xl"
5337
5620
  },
5338
5621
  {
5339
- "name": "ruby-base-container"
5622
+ "name": "$xs"
5623
+ }
5624
+ ]
5625
+ },
5626
+ {
5627
+ "name": "margin-x",
5628
+ "description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5629
+ "values": [
5630
+ {
5631
+ "name": "$2xl"
5340
5632
  },
5341
5633
  {
5342
- "name": "ruby-text"
5634
+ "name": "$2xs"
5343
5635
  },
5344
5636
  {
5345
- "name": "ruby-text-container"
5637
+ "name": "$3xl"
5346
5638
  },
5347
5639
  {
5348
- "name": "run-in"
5640
+ "name": "$3xs"
5349
5641
  },
5350
5642
  {
5351
- "name": "table"
5643
+ "name": "$4xl"
5352
5644
  },
5353
5645
  {
5354
- "name": "table-caption"
5646
+ "name": "$4xs"
5355
5647
  },
5356
5648
  {
5357
- "name": "table-cell"
5649
+ "name": "$5xl"
5358
5650
  },
5359
5651
  {
5360
- "name": "table-column"
5652
+ "name": "$6xl"
5361
5653
  },
5362
5654
  {
5363
- "name": "table-column-group"
5655
+ "name": "$7xl"
5364
5656
  },
5365
5657
  {
5366
- "name": "table-footer-group"
5658
+ "name": "$8xl"
5367
5659
  },
5368
5660
  {
5369
- "name": "table-header-group"
5661
+ "name": "$auto"
5370
5662
  },
5371
5663
  {
5372
- "name": "table-row"
5664
+ "name": "$lg"
5373
5665
  },
5374
5666
  {
5375
- "name": "table-row-group"
5376
- }
5377
- ]
5378
- },
5379
- {
5380
- "name": "flex-direction",
5381
- "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"row\",\n \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
5382
- "values": [
5667
+ "name": "$md"
5668
+ },
5383
5669
  {
5384
- "name": "column"
5670
+ "name": "$none"
5385
5671
  },
5386
5672
  {
5387
- "name": "column-reverse"
5673
+ "name": "$s"
5388
5674
  },
5389
5675
  {
5390
- "name": "row"
5676
+ "name": "$xl"
5391
5677
  },
5392
5678
  {
5393
- "name": "row-reverse"
5679
+ "name": "$xs"
5394
5680
  }
5395
5681
  ]
5396
5682
  },
5397
5683
  {
5398
- "name": "flex-wrap",
5399
- "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"nowrap\",\n \"md\": \"wrap\",\n \"lg\": \"wrap-reverse\",\n \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
5684
+ "name": "margin-y",
5685
+ "description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
5400
5686
  "values": [
5401
5687
  {
5402
- "name": "nowrap"
5688
+ "name": "$2xl"
5403
5689
  },
5404
5690
  {
5405
- "name": "wrap"
5691
+ "name": "$2xs"
5406
5692
  },
5407
5693
  {
5408
- "name": "wrap-reverse"
5409
- }
5410
- ]
5411
- },
5412
- {
5413
- "name": "flex-basis",
5414
- "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
5415
- "values": [
5694
+ "name": "$3xl"
5695
+ },
5416
5696
  {
5417
- "name": "auto"
5697
+ "name": "$3xs"
5418
5698
  },
5419
5699
  {
5420
- "name": "content"
5700
+ "name": "$4xl"
5421
5701
  },
5422
5702
  {
5423
- "name": "fit-content"
5703
+ "name": "$4xs"
5424
5704
  },
5425
5705
  {
5426
- "name": "max-content"
5706
+ "name": "$5xl"
5427
5707
  },
5428
5708
  {
5429
- "name": "min-content"
5709
+ "name": "$6xl"
5430
5710
  },
5431
5711
  {
5432
- "name": "stretch"
5433
- }
5434
- ]
5435
- },
5436
- {
5437
- "name": "flex-flow",
5438
- "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"nowrap\",\n \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
5439
- "values": [
5712
+ "name": "$7xl"
5713
+ },
5440
5714
  {
5441
- "name": "column"
5715
+ "name": "$8xl"
5442
5716
  },
5443
5717
  {
5444
- "name": "column-reverse"
5718
+ "name": "$auto"
5445
5719
  },
5446
5720
  {
5447
- "name": "nowrap"
5721
+ "name": "$lg"
5448
5722
  },
5449
5723
  {
5450
- "name": "row"
5724
+ "name": "$md"
5451
5725
  },
5452
5726
  {
5453
- "name": "row-reverse"
5727
+ "name": "$none"
5454
5728
  },
5455
5729
  {
5456
- "name": "wrap"
5730
+ "name": "$s"
5457
5731
  },
5458
5732
  {
5459
- "name": "wrap-reverse"
5733
+ "name": "$xl"
5734
+ },
5735
+ {
5736
+ "name": "$xs"
5460
5737
  }
5461
5738
  ]
5462
5739
  },
5463
5740
  {
5464
- "name": "justify-content",
5465
- "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"flex-end\",\n \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
5741
+ "name": "font-family",
5742
+ "description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body\",\n \"md\": \"$button\",\n \"lg\": \"$heading\",\n \"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
5466
5743
  "values": [
5467
5744
  {
5468
- "name": "center"
5469
- },
5470
- {
5471
- "name": "end"
5472
- },
5473
- {
5474
- "name": "flex-end"
5475
- },
5476
- {
5477
- "name": "flex-start"
5745
+ "name": "$body"
5478
5746
  },
5479
5747
  {
5480
- "name": "left"
5748
+ "name": "$button"
5481
5749
  },
5482
5750
  {
5483
- "name": "normal"
5484
- },
5751
+ "name": "$heading"
5752
+ }
5753
+ ]
5754
+ },
5755
+ {
5756
+ "name": "font-size",
5757
+ "description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
5758
+ "values": [
5485
5759
  {
5486
- "name": "right"
5760
+ "name": "$body-l"
5487
5761
  },
5488
5762
  {
5489
- "name": "space-around"
5763
+ "name": "$body-m"
5490
5764
  },
5491
5765
  {
5492
- "name": "space-between"
5766
+ "name": "$body-s"
5493
5767
  },
5494
5768
  {
5495
- "name": "space-evenly"
5769
+ "name": "$body-xl"
5496
5770
  },
5497
5771
  {
5498
- "name": "start"
5772
+ "name": "$body-xs"
5499
5773
  },
5500
5774
  {
5501
- "name": "stretch"
5502
- }
5503
- ]
5504
- },
5505
- {
5506
- "name": "justify-items",
5507
- "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
5508
- "values": [
5509
- {
5510
- "name": "baseline"
5775
+ "name": "$body-xxs"
5511
5776
  },
5512
5777
  {
5513
- "name": "center"
5778
+ "name": "$button-l"
5514
5779
  },
5515
5780
  {
5516
- "name": "end"
5781
+ "name": "$button-m"
5517
5782
  },
5518
5783
  {
5519
- "name": "flex-end"
5784
+ "name": "$button-s"
5520
5785
  },
5521
5786
  {
5522
- "name": "flex-start"
5787
+ "name": "$heading-hero"
5523
5788
  },
5524
5789
  {
5525
- "name": "left"
5790
+ "name": "$heading-l"
5526
5791
  },
5527
5792
  {
5528
- "name": "legacy"
5793
+ "name": "$heading-m"
5529
5794
  },
5530
5795
  {
5531
- "name": "normal"
5796
+ "name": "$heading-s"
5532
5797
  },
5533
5798
  {
5534
- "name": "right"
5799
+ "name": "$heading-xl"
5535
5800
  },
5536
5801
  {
5537
- "name": "self-end"
5802
+ "name": "$heading-xs"
5538
5803
  },
5539
5804
  {
5540
- "name": "self-start"
5805
+ "name": "$label-l"
5541
5806
  },
5542
5807
  {
5543
- "name": "start"
5808
+ "name": "$label-m"
5544
5809
  },
5545
5810
  {
5546
- "name": "stretch"
5811
+ "name": "$label-s"
5547
5812
  }
5548
5813
  ]
5549
5814
  },
5550
5815
  {
5551
- "name": "align-content",
5552
- "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
5816
+ "name": "font-weight",
5817
+ "description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bold\",\n \"md\": \"$medium\",\n \"lg\": \"$regular\",\n \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
5553
5818
  "values": [
5554
5819
  {
5555
- "name": "baseline"
5820
+ "name": "$bold"
5556
5821
  },
5557
5822
  {
5558
- "name": "center"
5823
+ "name": "$medium"
5559
5824
  },
5560
5825
  {
5561
- "name": "end"
5826
+ "name": "$regular"
5562
5827
  },
5563
5828
  {
5564
- "name": "flex-end"
5565
- },
5829
+ "name": "$semiBold"
5830
+ }
5831
+ ]
5832
+ },
5833
+ {
5834
+ "name": "line-height",
5835
+ "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
5836
+ "values": [
5566
5837
  {
5567
- "name": "flex-start"
5838
+ "name": "$body-l"
5568
5839
  },
5569
5840
  {
5570
- "name": "normal"
5841
+ "name": "$body-m"
5571
5842
  },
5572
5843
  {
5573
- "name": "space-around"
5844
+ "name": "$body-s"
5574
5845
  },
5575
5846
  {
5576
- "name": "space-between"
5847
+ "name": "$body-xl"
5577
5848
  },
5578
5849
  {
5579
- "name": "space-evenly"
5850
+ "name": "$body-xs"
5580
5851
  },
5581
5852
  {
5582
- "name": "start"
5853
+ "name": "$body-xxs"
5583
5854
  },
5584
5855
  {
5585
- "name": "stretch"
5586
- }
5587
- ]
5588
- },
5589
- {
5590
- "name": "align-items",
5591
- "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
5592
- "values": [
5856
+ "name": "$button-l"
5857
+ },
5593
5858
  {
5594
- "name": "baseline"
5859
+ "name": "$button-m"
5595
5860
  },
5596
5861
  {
5597
- "name": "center"
5862
+ "name": "$button-s"
5598
5863
  },
5599
5864
  {
5600
- "name": "end"
5865
+ "name": "$heading-hero"
5601
5866
  },
5602
5867
  {
5603
- "name": "flex-end"
5868
+ "name": "$heading-l"
5604
5869
  },
5605
5870
  {
5606
- "name": "flex-start"
5871
+ "name": "$heading-m"
5607
5872
  },
5608
5873
  {
5609
- "name": "normal"
5874
+ "name": "$heading-s"
5610
5875
  },
5611
5876
  {
5612
- "name": "self-end"
5877
+ "name": "$heading-xl"
5613
5878
  },
5614
5879
  {
5615
- "name": "self-start"
5880
+ "name": "$heading-xs"
5616
5881
  },
5617
5882
  {
5618
- "name": "start"
5883
+ "name": "$label-l"
5619
5884
  },
5620
5885
  {
5621
- "name": "stretch"
5886
+ "name": "$label-m"
5887
+ },
5888
+ {
5889
+ "name": "$label-s"
5622
5890
  }
5623
5891
  ]
5624
5892
  },
5625
5893
  {
5626
- "name": "align-self",
5627
- "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"baseline\",\n \"lg\": \"center\",\n \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
5894
+ "name": "width",
5895
+ "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
5628
5896
  "values": [
5629
5897
  {
5630
5898
  "name": "auto"
5631
5899
  },
5632
5900
  {
5633
- "name": "baseline"
5901
+ "name": "fit-content"
5634
5902
  },
5635
5903
  {
5636
- "name": "center"
5904
+ "name": "intrinsic"
5637
5905
  },
5638
5906
  {
5639
- "name": "end"
5907
+ "name": "max-content"
5640
5908
  },
5641
5909
  {
5642
- "name": "flex-end"
5910
+ "name": "min-content"
5643
5911
  },
5644
5912
  {
5645
- "name": "flex-start"
5913
+ "name": "min-intrinsic"
5646
5914
  },
5647
5915
  {
5648
- "name": "normal"
5916
+ "name": "stretch"
5917
+ }
5918
+ ]
5919
+ },
5920
+ {
5921
+ "name": "height",
5922
+ "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
5923
+ "values": [
5924
+ {
5925
+ "name": "auto"
5649
5926
  },
5650
5927
  {
5651
- "name": "self-end"
5928
+ "name": "fit-content"
5652
5929
  },
5653
5930
  {
5654
- "name": "self-start"
5931
+ "name": "max-content"
5655
5932
  },
5656
5933
  {
5657
- "name": "start"
5934
+ "name": "min-content"
5658
5935
  },
5659
5936
  {
5660
5937
  "name": "stretch"
@@ -5662,1495 +5939,1610 @@
5662
5939
  ]
5663
5940
  },
5664
5941
  {
5665
- "name": "pointer-events",
5666
- "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"auto\",\n \"lg\": \"fill\",\n \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
5942
+ "name": "max-width",
5943
+ "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
5667
5944
  "values": [
5668
5945
  {
5669
- "name": "all"
5946
+ "name": "fit-content"
5670
5947
  },
5671
5948
  {
5672
- "name": "auto"
5949
+ "name": "intrinsic"
5673
5950
  },
5674
5951
  {
5675
- "name": "fill"
5952
+ "name": "max-content"
5676
5953
  },
5677
5954
  {
5678
- "name": "inherit"
5955
+ "name": "min-content"
5679
5956
  },
5680
5957
  {
5681
5958
  "name": "none"
5682
5959
  },
5683
5960
  {
5684
- "name": "painted"
5961
+ "name": "stretch"
5962
+ }
5963
+ ]
5964
+ },
5965
+ {
5966
+ "name": "max-height",
5967
+ "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
5968
+ "values": [
5969
+ {
5970
+ "name": "fit-content"
5685
5971
  },
5686
5972
  {
5687
- "name": "stroke"
5973
+ "name": "intrinsic"
5688
5974
  },
5689
5975
  {
5690
- "name": "visible"
5976
+ "name": "max-content"
5691
5977
  },
5692
5978
  {
5693
- "name": "visibleFill"
5979
+ "name": "min-content"
5694
5980
  },
5695
5981
  {
5696
- "name": "visiblePainted"
5982
+ "name": "none"
5697
5983
  },
5698
5984
  {
5699
- "name": "visibleStroke"
5985
+ "name": "stretch"
5700
5986
  }
5701
5987
  ]
5702
5988
  },
5703
5989
  {
5704
- "name": "position",
5705
- "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"absolute\",\n \"md\": \"fixed\",\n \"lg\": \"relative\",\n \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
5990
+ "name": "min-width",
5991
+ "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
5706
5992
  "values": [
5707
5993
  {
5708
- "name": "absolute"
5994
+ "name": "auto"
5709
5995
  },
5710
5996
  {
5711
- "name": "fixed"
5997
+ "name": "fit-content"
5712
5998
  },
5713
5999
  {
5714
- "name": "relative"
6000
+ "name": "intrinsic"
5715
6001
  },
5716
6002
  {
5717
- "name": "static"
6003
+ "name": "max-content"
5718
6004
  },
5719
6005
  {
5720
- "name": "sticky"
6006
+ "name": "min-content"
6007
+ },
6008
+ {
6009
+ "name": "min-intrinsic"
6010
+ },
6011
+ {
6012
+ "name": "stretch"
5721
6013
  }
5722
6014
  ]
5723
6015
  },
5724
6016
  {
5725
- "name": "border-style",
5726
- "description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"dashed\",\n \"md\": \"dotted\",\n \"lg\": \"double\",\n \"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
6017
+ "name": "min-height",
6018
+ "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
5727
6019
  "values": [
5728
6020
  {
5729
- "name": "dashed"
5730
- },
5731
- {
5732
- "name": "dotted"
5733
- },
5734
- {
5735
- "name": "double"
5736
- },
5737
- {
5738
- "name": "groove"
5739
- },
5740
- {
5741
- "name": "hidden"
6021
+ "name": "auto"
5742
6022
  },
5743
6023
  {
5744
- "name": "inset"
6024
+ "name": "fit-content"
5745
6025
  },
5746
6026
  {
5747
- "name": "none"
6027
+ "name": "intrinsic"
5748
6028
  },
5749
6029
  {
5750
- "name": "outset"
6030
+ "name": "max-content"
5751
6031
  },
5752
6032
  {
5753
- "name": "ridge"
6033
+ "name": "min-content"
5754
6034
  },
5755
6035
  {
5756
- "name": "solid"
6036
+ "name": "stretch"
5757
6037
  }
5758
6038
  ]
5759
6039
  },
5760
6040
  {
5761
- "name": "box-sizing",
5762
- "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"border-box\",\n \"md\": \"content-box\",\n \"lg\": \"border-box\",\n \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
5763
- "values": [
5764
- {
5765
- "name": "border-box"
5766
- },
5767
- {
5768
- "name": "content-box"
5769
- }
5770
- ]
6041
+ "name": "bottom",
6042
+ "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
6043
+ "values": []
5771
6044
  },
5772
6045
  {
5773
- "name": "cursor",
5774
- "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"alias\",\n \"md\": \"all-scroll\",\n \"lg\": \"auto\",\n \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
6046
+ "name": "left",
6047
+ "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
6048
+ "values": []
6049
+ },
6050
+ {
6051
+ "name": "right",
6052
+ "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
6053
+ "values": []
6054
+ },
6055
+ {
6056
+ "name": "top",
6057
+ "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
6058
+ "values": []
6059
+ },
6060
+ {
6061
+ "name": "grid-template-areas",
6062
+ "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
6063
+ "values": []
6064
+ },
6065
+ {
6066
+ "name": "grid-template-columns",
6067
+ "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
5775
6068
  "values": [
5776
- {
5777
- "name": "alias"
5778
- },
5779
- {
5780
- "name": "all-scroll"
5781
- },
5782
6069
  {
5783
6070
  "name": "auto"
5784
6071
  },
5785
6072
  {
5786
- "name": "cell"
5787
- },
5788
- {
5789
- "name": "col-resize"
6073
+ "name": "max-content"
5790
6074
  },
5791
6075
  {
5792
- "name": "context-menu"
6076
+ "name": "min-content"
5793
6077
  },
5794
6078
  {
5795
- "name": "copy"
6079
+ "name": "none"
5796
6080
  },
5797
6081
  {
5798
- "name": "crosshair"
5799
- },
6082
+ "name": "subgrid"
6083
+ }
6084
+ ]
6085
+ },
6086
+ {
6087
+ "name": "grid-template-rows",
6088
+ "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
6089
+ "values": [
5800
6090
  {
5801
- "name": "default"
6091
+ "name": "auto"
5802
6092
  },
5803
6093
  {
5804
- "name": "e-resize"
6094
+ "name": "max-content"
5805
6095
  },
5806
6096
  {
5807
- "name": "ew-resize"
6097
+ "name": "min-content"
5808
6098
  },
5809
6099
  {
5810
- "name": "grab"
6100
+ "name": "none"
5811
6101
  },
5812
6102
  {
5813
- "name": "grabbing"
5814
- },
6103
+ "name": "subgrid"
6104
+ }
6105
+ ]
6106
+ },
6107
+ {
6108
+ "name": "flex-shrink",
6109
+ "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
6110
+ "values": []
6111
+ },
6112
+ {
6113
+ "name": "flex-grow",
6114
+ "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
6115
+ "values": []
6116
+ },
6117
+ {
6118
+ "name": "order",
6119
+ "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
6120
+ "values": []
6121
+ },
6122
+ {
6123
+ "name": "transition-delay",
6124
+ "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
6125
+ "type": "string"
6126
+ },
6127
+ {
6128
+ "name": "transition-property",
6129
+ "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"none\",\n \"lg\": \"all\",\n \"xl\": \"none\"\n}\n```\n\n- all\n- none",
6130
+ "values": [
5815
6131
  {
5816
- "name": "help"
6132
+ "name": "all"
5817
6133
  },
5818
6134
  {
5819
- "name": "move"
5820
- },
6135
+ "name": "none"
6136
+ }
6137
+ ]
6138
+ },
6139
+ {
6140
+ "name": "background-image",
6141
+ "description": "The **`background-image`** CSS property sets one or more background images on an element.\n\n\n**Initial value**: `none`",
6142
+ "values": []
6143
+ },
6144
+ {
6145
+ "name": "background-position-x",
6146
+ "description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"left\",\n \"lg\": \"right\",\n \"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
6147
+ "values": [
5821
6148
  {
5822
- "name": "n-resize"
6149
+ "name": "center"
5823
6150
  },
5824
6151
  {
5825
- "name": "ne-resize"
6152
+ "name": "left"
5826
6153
  },
5827
6154
  {
5828
- "name": "nesw-resize"
6155
+ "name": "right"
5829
6156
  },
5830
6157
  {
5831
- "name": "no-drop"
6158
+ "name": "x-end"
5832
6159
  },
5833
6160
  {
5834
- "name": "none"
5835
- },
6161
+ "name": "x-start"
6162
+ }
6163
+ ]
6164
+ },
6165
+ {
6166
+ "name": "background-position-y",
6167
+ "description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"top\",\n \"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
6168
+ "values": [
5836
6169
  {
5837
- "name": "not-allowed"
6170
+ "name": "bottom"
5838
6171
  },
5839
6172
  {
5840
- "name": "ns-resize"
6173
+ "name": "center"
5841
6174
  },
5842
6175
  {
5843
- "name": "nw-resize"
6176
+ "name": "top"
5844
6177
  },
5845
6178
  {
5846
- "name": "nwse-resize"
6179
+ "name": "y-end"
5847
6180
  },
5848
6181
  {
5849
- "name": "pointer"
5850
- },
6182
+ "name": "y-start"
6183
+ }
6184
+ ]
6185
+ },
6186
+ {
6187
+ "name": "background-blend-mode",
6188
+ "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"color\",\n \"md\": \"color-burn\",\n \"lg\": \"color-dodge\",\n \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
6189
+ "values": [
5851
6190
  {
5852
- "name": "progress"
6191
+ "name": "color"
5853
6192
  },
5854
6193
  {
5855
- "name": "row-resize"
6194
+ "name": "color-burn"
5856
6195
  },
5857
6196
  {
5858
- "name": "s-resize"
6197
+ "name": "color-dodge"
5859
6198
  },
5860
6199
  {
5861
- "name": "se-resize"
6200
+ "name": "darken"
5862
6201
  },
5863
6202
  {
5864
- "name": "sw-resize"
6203
+ "name": "difference"
5865
6204
  },
5866
6205
  {
5867
- "name": "text"
6206
+ "name": "exclusion"
5868
6207
  },
5869
6208
  {
5870
- "name": "vertical-text"
6209
+ "name": "hard-light"
5871
6210
  },
5872
6211
  {
5873
- "name": "w-resize"
6212
+ "name": "hue"
5874
6213
  },
5875
6214
  {
5876
- "name": "wait"
6215
+ "name": "lighten"
5877
6216
  },
5878
6217
  {
5879
- "name": "zoom-in"
6218
+ "name": "luminosity"
5880
6219
  },
5881
6220
  {
5882
- "name": "zoom-out"
5883
- }
5884
- ]
5885
- },
5886
- {
5887
- "name": "overflow",
5888
- "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
5889
- "values": [
6221
+ "name": "multiply"
6222
+ },
5890
6223
  {
5891
- "name": "auto"
6224
+ "name": "normal"
5892
6225
  },
5893
6226
  {
5894
- "name": "clip"
6227
+ "name": "overlay"
5895
6228
  },
5896
6229
  {
5897
- "name": "hidden"
6230
+ "name": "saturation"
5898
6231
  },
5899
6232
  {
5900
- "name": "scroll"
6233
+ "name": "screen"
5901
6234
  },
5902
6235
  {
5903
- "name": "visible"
6236
+ "name": "soft-light"
5904
6237
  }
5905
6238
  ]
5906
6239
  },
5907
6240
  {
5908
- "name": "overflow-x",
5909
- "description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
6241
+ "name": "background-repeat",
6242
+ "description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"no-repeat\",\n \"md\": \"repeat\",\n \"lg\": \"repeat-x\",\n \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
5910
6243
  "values": [
5911
6244
  {
5912
- "name": "auto"
6245
+ "name": "no-repeat"
5913
6246
  },
5914
6247
  {
5915
- "name": "clip"
6248
+ "name": "repeat"
5916
6249
  },
5917
6250
  {
5918
- "name": "hidden"
6251
+ "name": "repeat-x"
5919
6252
  },
5920
6253
  {
5921
- "name": "scroll"
6254
+ "name": "repeat-y"
5922
6255
  },
5923
6256
  {
5924
- "name": "visible"
6257
+ "name": "round"
6258
+ },
6259
+ {
6260
+ "name": "space"
5925
6261
  }
5926
6262
  ]
5927
6263
  },
5928
6264
  {
5929
- "name": "overflow-y",
5930
- "description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
6265
+ "name": "background-size",
6266
+ "description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"contain\",\n \"lg\": \"cover\",\n \"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
5931
6267
  "values": [
5932
6268
  {
5933
6269
  "name": "auto"
5934
6270
  },
5935
6271
  {
5936
- "name": "clip"
5937
- },
5938
- {
5939
- "name": "hidden"
5940
- },
5941
- {
5942
- "name": "scroll"
6272
+ "name": "contain"
5943
6273
  },
5944
6274
  {
5945
- "name": "visible"
6275
+ "name": "cover"
5946
6276
  }
5947
6277
  ]
5948
6278
  },
5949
6279
  {
5950
- "name": "transition-timing-function",
5951
- "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"ease\",\n \"md\": \"ease-in\",\n \"lg\": \"ease-in-out\",\n \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
6280
+ "name": "display",
6281
+ "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"block\",\n \"md\": \"contents\",\n \"lg\": \"flex\",\n \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
5952
6282
  "values": [
5953
6283
  {
5954
- "name": "ease"
6284
+ "name": "block"
5955
6285
  },
5956
6286
  {
5957
- "name": "ease-in"
6287
+ "name": "contents"
5958
6288
  },
5959
6289
  {
5960
- "name": "ease-in-out"
6290
+ "name": "flex"
5961
6291
  },
5962
6292
  {
5963
- "name": "ease-out"
6293
+ "name": "flow"
5964
6294
  },
5965
6295
  {
5966
- "name": "linear"
6296
+ "name": "flow-root"
5967
6297
  },
5968
6298
  {
5969
- "name": "step-end"
6299
+ "name": "grid"
5970
6300
  },
5971
6301
  {
5972
- "name": "step-start"
5973
- }
5974
- ]
5975
- },
5976
- {
5977
- "name": "text-decoration",
5978
- "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"blink\",\n \"lg\": \"dashed\",\n \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
5979
- "values": [
6302
+ "name": "inline"
6303
+ },
5980
6304
  {
5981
- "name": "auto"
6305
+ "name": "inline-block"
5982
6306
  },
5983
6307
  {
5984
- "name": "blink"
6308
+ "name": "inline-flex"
5985
6309
  },
5986
6310
  {
5987
- "name": "dashed"
6311
+ "name": "inline-grid"
5988
6312
  },
5989
6313
  {
5990
- "name": "dotted"
6314
+ "name": "inline-list-item"
5991
6315
  },
5992
6316
  {
5993
- "name": "double"
6317
+ "name": "inline-table"
5994
6318
  },
5995
6319
  {
5996
- "name": "from-font"
6320
+ "name": "list-item"
5997
6321
  },
5998
6322
  {
5999
- "name": "grammar-error"
6323
+ "name": "none"
6000
6324
  },
6001
6325
  {
6002
- "name": "line-through"
6326
+ "name": "ruby"
6003
6327
  },
6004
6328
  {
6005
- "name": "none"
6329
+ "name": "ruby-base"
6006
6330
  },
6007
6331
  {
6008
- "name": "overline"
6332
+ "name": "ruby-base-container"
6009
6333
  },
6010
6334
  {
6011
- "name": "solid"
6335
+ "name": "ruby-text"
6012
6336
  },
6013
6337
  {
6014
- "name": "spelling-error"
6338
+ "name": "ruby-text-container"
6015
6339
  },
6016
6340
  {
6017
- "name": "underline"
6341
+ "name": "run-in"
6018
6342
  },
6019
6343
  {
6020
- "name": "wavy"
6021
- }
6022
- ]
6023
- },
6024
- {
6025
- "name": "text-align",
6026
- "description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"justify\",\n \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
6027
- "values": [
6344
+ "name": "table"
6345
+ },
6028
6346
  {
6029
- "name": "center"
6347
+ "name": "table-caption"
6030
6348
  },
6031
6349
  {
6032
- "name": "end"
6350
+ "name": "table-cell"
6033
6351
  },
6034
6352
  {
6035
- "name": "justify"
6353
+ "name": "table-column"
6036
6354
  },
6037
6355
  {
6038
- "name": "left"
6356
+ "name": "table-column-group"
6039
6357
  },
6040
6358
  {
6041
- "name": "match-parent"
6359
+ "name": "table-footer-group"
6042
6360
  },
6043
6361
  {
6044
- "name": "right"
6362
+ "name": "table-header-group"
6045
6363
  },
6046
6364
  {
6047
- "name": "start"
6365
+ "name": "table-row"
6366
+ },
6367
+ {
6368
+ "name": "table-row-group"
6048
6369
  }
6049
6370
  ]
6050
6371
  },
6051
6372
  {
6052
- "name": "opacity",
6053
- "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
6054
- "values": []
6055
- },
6056
- {
6057
- "name": "vertical-align",
6058
- "description": "The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.\n\n\n**Initial value**: `baseline`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"bottom\",\n \"lg\": \"middle\",\n \"xl\": \"sub\"\n}\n```\n\n- baseline\n- bottom\n- middle\n- sub\n- super\n- text-bottom\n- text-top\n- top",
6373
+ "name": "flex-direction",
6374
+ "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"row\",\n \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
6059
6375
  "values": [
6060
6376
  {
6061
- "name": "baseline"
6062
- },
6063
- {
6064
- "name": "bottom"
6377
+ "name": "column"
6065
6378
  },
6066
6379
  {
6067
- "name": "middle"
6380
+ "name": "column-reverse"
6068
6381
  },
6069
6382
  {
6070
- "name": "sub"
6383
+ "name": "row"
6071
6384
  },
6072
6385
  {
6073
- "name": "super"
6074
- },
6386
+ "name": "row-reverse"
6387
+ }
6388
+ ]
6389
+ },
6390
+ {
6391
+ "name": "flex-wrap",
6392
+ "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"nowrap\",\n \"md\": \"wrap\",\n \"lg\": \"wrap-reverse\",\n \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
6393
+ "values": [
6075
6394
  {
6076
- "name": "text-bottom"
6395
+ "name": "nowrap"
6077
6396
  },
6078
6397
  {
6079
- "name": "text-top"
6398
+ "name": "wrap"
6080
6399
  },
6081
6400
  {
6082
- "name": "top"
6401
+ "name": "wrap-reverse"
6083
6402
  }
6084
6403
  ]
6085
6404
  },
6086
6405
  {
6087
- "name": "white-space",
6088
- "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"break-spaces\",\n \"md\": \"normal\",\n \"lg\": \"nowrap\",\n \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
6406
+ "name": "flex-basis",
6407
+ "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
6089
6408
  "values": [
6090
6409
  {
6091
- "name": "break-spaces"
6410
+ "name": "auto"
6092
6411
  },
6093
6412
  {
6094
- "name": "normal"
6413
+ "name": "content"
6095
6414
  },
6096
6415
  {
6097
- "name": "nowrap"
6416
+ "name": "fit-content"
6098
6417
  },
6099
6418
  {
6100
- "name": "pre"
6419
+ "name": "max-content"
6101
6420
  },
6102
6421
  {
6103
- "name": "pre-line"
6422
+ "name": "min-content"
6104
6423
  },
6105
6424
  {
6106
- "name": "pre-wrap"
6425
+ "name": "stretch"
6107
6426
  }
6108
6427
  ]
6109
6428
  },
6110
6429
  {
6111
- "name": "border-width-x",
6112
- "description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
6430
+ "name": "justify-content",
6431
+ "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"flex-end\",\n \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
6113
6432
  "values": [
6114
6433
  {
6115
- "name": "$1"
6434
+ "name": "center"
6116
6435
  },
6117
6436
  {
6118
- "name": "$2"
6437
+ "name": "end"
6119
6438
  },
6120
6439
  {
6121
- "name": "$3"
6440
+ "name": "flex-end"
6122
6441
  },
6123
6442
  {
6124
- "name": "$4"
6443
+ "name": "flex-start"
6125
6444
  },
6126
6445
  {
6127
- "name": "$5"
6446
+ "name": "left"
6128
6447
  },
6129
6448
  {
6130
- "name": "$none"
6131
- }
6132
- ]
6133
- },
6134
- {
6135
- "name": "border-width-y",
6136
- "description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
6137
- "values": [
6449
+ "name": "normal"
6450
+ },
6138
6451
  {
6139
- "name": "$1"
6452
+ "name": "right"
6140
6453
  },
6141
6454
  {
6142
- "name": "$2"
6455
+ "name": "space-around"
6143
6456
  },
6144
6457
  {
6145
- "name": "$3"
6458
+ "name": "space-between"
6146
6459
  },
6147
6460
  {
6148
- "name": "$4"
6461
+ "name": "space-evenly"
6149
6462
  },
6150
6463
  {
6151
- "name": "$5"
6464
+ "name": "start"
6152
6465
  },
6153
6466
  {
6154
- "name": "$none"
6467
+ "name": "stretch"
6155
6468
  }
6156
6469
  ]
6157
6470
  },
6158
6471
  {
6159
- "name": "padding-x",
6160
- "description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6472
+ "name": "justify-items",
6473
+ "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
6161
6474
  "values": [
6162
6475
  {
6163
- "name": "$2xl"
6164
- },
6165
- {
6166
- "name": "$2xs"
6167
- },
6168
- {
6169
- "name": "$3xl"
6170
- },
6171
- {
6172
- "name": "$3xs"
6476
+ "name": "baseline"
6173
6477
  },
6174
6478
  {
6175
- "name": "$4xl"
6479
+ "name": "center"
6176
6480
  },
6177
6481
  {
6178
- "name": "$4xs"
6482
+ "name": "end"
6179
6483
  },
6180
6484
  {
6181
- "name": "$5xl"
6485
+ "name": "flex-end"
6182
6486
  },
6183
6487
  {
6184
- "name": "$6xl"
6488
+ "name": "flex-start"
6185
6489
  },
6186
6490
  {
6187
- "name": "$7xl"
6491
+ "name": "left"
6188
6492
  },
6189
6493
  {
6190
- "name": "$8xl"
6494
+ "name": "legacy"
6191
6495
  },
6192
6496
  {
6193
- "name": "$lg"
6497
+ "name": "normal"
6194
6498
  },
6195
6499
  {
6196
- "name": "$md"
6500
+ "name": "right"
6197
6501
  },
6198
6502
  {
6199
- "name": "$none"
6503
+ "name": "self-end"
6200
6504
  },
6201
6505
  {
6202
- "name": "$s"
6506
+ "name": "self-start"
6203
6507
  },
6204
6508
  {
6205
- "name": "$xl"
6509
+ "name": "start"
6206
6510
  },
6207
6511
  {
6208
- "name": "$xs"
6512
+ "name": "stretch"
6209
6513
  }
6210
6514
  ]
6211
6515
  },
6212
6516
  {
6213
- "name": "padding-y",
6214
- "description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6517
+ "name": "align-content",
6518
+ "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
6215
6519
  "values": [
6216
6520
  {
6217
- "name": "$2xl"
6521
+ "name": "baseline"
6218
6522
  },
6219
6523
  {
6220
- "name": "$2xs"
6524
+ "name": "center"
6221
6525
  },
6222
6526
  {
6223
- "name": "$3xl"
6527
+ "name": "end"
6224
6528
  },
6225
6529
  {
6226
- "name": "$3xs"
6530
+ "name": "flex-end"
6227
6531
  },
6228
6532
  {
6229
- "name": "$4xl"
6533
+ "name": "flex-start"
6230
6534
  },
6231
6535
  {
6232
- "name": "$4xs"
6536
+ "name": "normal"
6233
6537
  },
6234
6538
  {
6235
- "name": "$5xl"
6539
+ "name": "space-around"
6236
6540
  },
6237
6541
  {
6238
- "name": "$6xl"
6542
+ "name": "space-between"
6239
6543
  },
6240
6544
  {
6241
- "name": "$7xl"
6545
+ "name": "space-evenly"
6242
6546
  },
6243
6547
  {
6244
- "name": "$8xl"
6548
+ "name": "start"
6245
6549
  },
6246
6550
  {
6247
- "name": "$lg"
6248
- },
6551
+ "name": "stretch"
6552
+ }
6553
+ ]
6554
+ },
6555
+ {
6556
+ "name": "align-items",
6557
+ "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
6558
+ "values": [
6249
6559
  {
6250
- "name": "$md"
6560
+ "name": "baseline"
6251
6561
  },
6252
6562
  {
6253
- "name": "$none"
6563
+ "name": "center"
6254
6564
  },
6255
6565
  {
6256
- "name": "$s"
6566
+ "name": "end"
6257
6567
  },
6258
6568
  {
6259
- "name": "$xl"
6569
+ "name": "flex-end"
6260
6570
  },
6261
6571
  {
6262
- "name": "$xs"
6263
- }
6264
- ]
6265
- },
6266
- {
6267
- "name": "p",
6268
- "description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6269
- "values": [
6270
- {
6271
- "name": "$2xl"
6572
+ "name": "flex-start"
6272
6573
  },
6273
6574
  {
6274
- "name": "$2xs"
6575
+ "name": "normal"
6275
6576
  },
6276
6577
  {
6277
- "name": "$3xl"
6578
+ "name": "self-end"
6278
6579
  },
6279
6580
  {
6280
- "name": "$3xs"
6581
+ "name": "self-start"
6281
6582
  },
6282
6583
  {
6283
- "name": "$4xl"
6584
+ "name": "start"
6284
6585
  },
6285
6586
  {
6286
- "name": "$4xs"
6587
+ "name": "stretch"
6588
+ }
6589
+ ]
6590
+ },
6591
+ {
6592
+ "name": "align-self",
6593
+ "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"baseline\",\n \"lg\": \"center\",\n \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
6594
+ "values": [
6595
+ {
6596
+ "name": "auto"
6287
6597
  },
6288
6598
  {
6289
- "name": "$5xl"
6599
+ "name": "baseline"
6290
6600
  },
6291
6601
  {
6292
- "name": "$6xl"
6602
+ "name": "center"
6293
6603
  },
6294
6604
  {
6295
- "name": "$7xl"
6605
+ "name": "end"
6296
6606
  },
6297
6607
  {
6298
- "name": "$8xl"
6608
+ "name": "flex-end"
6299
6609
  },
6300
6610
  {
6301
- "name": "$lg"
6611
+ "name": "flex-start"
6302
6612
  },
6303
6613
  {
6304
- "name": "$md"
6614
+ "name": "normal"
6305
6615
  },
6306
6616
  {
6307
- "name": "$none"
6617
+ "name": "self-end"
6308
6618
  },
6309
6619
  {
6310
- "name": "$s"
6620
+ "name": "self-start"
6311
6621
  },
6312
6622
  {
6313
- "name": "$xl"
6623
+ "name": "start"
6314
6624
  },
6315
6625
  {
6316
- "name": "$xs"
6626
+ "name": "stretch"
6317
6627
  }
6318
6628
  ]
6319
6629
  },
6320
6630
  {
6321
- "name": "pl",
6322
- "description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6631
+ "name": "pointer-events",
6632
+ "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"auto\",\n \"lg\": \"fill\",\n \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
6323
6633
  "values": [
6324
6634
  {
6325
- "name": "$2xl"
6635
+ "name": "all"
6326
6636
  },
6327
6637
  {
6328
- "name": "$2xs"
6638
+ "name": "auto"
6329
6639
  },
6330
6640
  {
6331
- "name": "$3xl"
6641
+ "name": "fill"
6332
6642
  },
6333
6643
  {
6334
- "name": "$3xs"
6644
+ "name": "inherit"
6335
6645
  },
6336
6646
  {
6337
- "name": "$4xl"
6647
+ "name": "none"
6338
6648
  },
6339
6649
  {
6340
- "name": "$4xs"
6650
+ "name": "painted"
6341
6651
  },
6342
6652
  {
6343
- "name": "$5xl"
6653
+ "name": "stroke"
6344
6654
  },
6345
6655
  {
6346
- "name": "$6xl"
6656
+ "name": "visible"
6347
6657
  },
6348
6658
  {
6349
- "name": "$7xl"
6659
+ "name": "visibleFill"
6350
6660
  },
6351
6661
  {
6352
- "name": "$8xl"
6662
+ "name": "visiblePainted"
6353
6663
  },
6354
6664
  {
6355
- "name": "$lg"
6665
+ "name": "visibleStroke"
6666
+ }
6667
+ ]
6668
+ },
6669
+ {
6670
+ "name": "position",
6671
+ "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"absolute\",\n \"md\": \"fixed\",\n \"lg\": \"relative\",\n \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
6672
+ "values": [
6673
+ {
6674
+ "name": "absolute"
6356
6675
  },
6357
6676
  {
6358
- "name": "$md"
6677
+ "name": "fixed"
6359
6678
  },
6360
6679
  {
6361
- "name": "$none"
6680
+ "name": "relative"
6362
6681
  },
6363
6682
  {
6364
- "name": "$s"
6683
+ "name": "static"
6365
6684
  },
6366
6685
  {
6367
- "name": "$xl"
6686
+ "name": "sticky"
6687
+ }
6688
+ ]
6689
+ },
6690
+ {
6691
+ "name": "box-sizing",
6692
+ "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"border-box\",\n \"md\": \"content-box\",\n \"lg\": \"border-box\",\n \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
6693
+ "values": [
6694
+ {
6695
+ "name": "border-box"
6368
6696
  },
6369
6697
  {
6370
- "name": "$xs"
6698
+ "name": "content-box"
6371
6699
  }
6372
6700
  ]
6373
6701
  },
6374
6702
  {
6375
- "name": "pr",
6376
- "description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6703
+ "name": "cursor",
6704
+ "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"alias\",\n \"md\": \"all-scroll\",\n \"lg\": \"auto\",\n \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
6377
6705
  "values": [
6378
6706
  {
6379
- "name": "$2xl"
6707
+ "name": "alias"
6380
6708
  },
6381
6709
  {
6382
- "name": "$2xs"
6710
+ "name": "all-scroll"
6383
6711
  },
6384
6712
  {
6385
- "name": "$3xl"
6713
+ "name": "auto"
6386
6714
  },
6387
6715
  {
6388
- "name": "$3xs"
6716
+ "name": "cell"
6389
6717
  },
6390
6718
  {
6391
- "name": "$4xl"
6719
+ "name": "col-resize"
6392
6720
  },
6393
6721
  {
6394
- "name": "$4xs"
6722
+ "name": "context-menu"
6395
6723
  },
6396
6724
  {
6397
- "name": "$5xl"
6725
+ "name": "copy"
6398
6726
  },
6399
6727
  {
6400
- "name": "$6xl"
6728
+ "name": "crosshair"
6401
6729
  },
6402
6730
  {
6403
- "name": "$7xl"
6731
+ "name": "default"
6404
6732
  },
6405
6733
  {
6406
- "name": "$8xl"
6734
+ "name": "e-resize"
6407
6735
  },
6408
6736
  {
6409
- "name": "$lg"
6737
+ "name": "ew-resize"
6410
6738
  },
6411
6739
  {
6412
- "name": "$md"
6740
+ "name": "grab"
6413
6741
  },
6414
6742
  {
6415
- "name": "$none"
6743
+ "name": "grabbing"
6416
6744
  },
6417
6745
  {
6418
- "name": "$s"
6746
+ "name": "help"
6419
6747
  },
6420
6748
  {
6421
- "name": "$xl"
6749
+ "name": "move"
6422
6750
  },
6423
6751
  {
6424
- "name": "$xs"
6425
- }
6426
- ]
6427
- },
6428
- {
6429
- "name": "pt",
6430
- "description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6431
- "values": [
6752
+ "name": "n-resize"
6753
+ },
6432
6754
  {
6433
- "name": "$2xl"
6755
+ "name": "ne-resize"
6756
+ },
6757
+ {
6758
+ "name": "nesw-resize"
6759
+ },
6760
+ {
6761
+ "name": "no-drop"
6762
+ },
6763
+ {
6764
+ "name": "none"
6765
+ },
6766
+ {
6767
+ "name": "not-allowed"
6434
6768
  },
6435
6769
  {
6436
- "name": "$2xs"
6770
+ "name": "ns-resize"
6437
6771
  },
6438
6772
  {
6439
- "name": "$3xl"
6773
+ "name": "nw-resize"
6440
6774
  },
6441
6775
  {
6442
- "name": "$3xs"
6776
+ "name": "nwse-resize"
6443
6777
  },
6444
6778
  {
6445
- "name": "$4xl"
6779
+ "name": "pointer"
6446
6780
  },
6447
6781
  {
6448
- "name": "$4xs"
6782
+ "name": "progress"
6449
6783
  },
6450
6784
  {
6451
- "name": "$5xl"
6785
+ "name": "row-resize"
6452
6786
  },
6453
6787
  {
6454
- "name": "$6xl"
6788
+ "name": "s-resize"
6455
6789
  },
6456
6790
  {
6457
- "name": "$7xl"
6791
+ "name": "se-resize"
6458
6792
  },
6459
6793
  {
6460
- "name": "$8xl"
6794
+ "name": "sw-resize"
6461
6795
  },
6462
6796
  {
6463
- "name": "$lg"
6797
+ "name": "text"
6464
6798
  },
6465
6799
  {
6466
- "name": "$md"
6800
+ "name": "vertical-text"
6467
6801
  },
6468
6802
  {
6469
- "name": "$none"
6803
+ "name": "w-resize"
6470
6804
  },
6471
6805
  {
6472
- "name": "$s"
6806
+ "name": "wait"
6473
6807
  },
6474
6808
  {
6475
- "name": "$xl"
6809
+ "name": "zoom-in"
6476
6810
  },
6477
6811
  {
6478
- "name": "$xs"
6812
+ "name": "zoom-out"
6479
6813
  }
6480
6814
  ]
6481
6815
  },
6482
6816
  {
6483
- "name": "pb",
6484
- "description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6817
+ "name": "overflow-x",
6818
+ "description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
6485
6819
  "values": [
6486
6820
  {
6487
- "name": "$2xl"
6821
+ "name": "auto"
6488
6822
  },
6489
6823
  {
6490
- "name": "$2xs"
6824
+ "name": "clip"
6491
6825
  },
6492
6826
  {
6493
- "name": "$3xl"
6827
+ "name": "hidden"
6494
6828
  },
6495
6829
  {
6496
- "name": "$3xs"
6830
+ "name": "scroll"
6497
6831
  },
6498
6832
  {
6499
- "name": "$4xl"
6500
- },
6833
+ "name": "visible"
6834
+ }
6835
+ ]
6836
+ },
6837
+ {
6838
+ "name": "overflow-y",
6839
+ "description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
6840
+ "values": [
6501
6841
  {
6502
- "name": "$4xs"
6842
+ "name": "auto"
6503
6843
  },
6504
6844
  {
6505
- "name": "$5xl"
6845
+ "name": "clip"
6506
6846
  },
6507
6847
  {
6508
- "name": "$6xl"
6848
+ "name": "hidden"
6509
6849
  },
6510
6850
  {
6511
- "name": "$7xl"
6851
+ "name": "scroll"
6512
6852
  },
6513
6853
  {
6514
- "name": "$8xl"
6854
+ "name": "visible"
6855
+ }
6856
+ ]
6857
+ },
6858
+ {
6859
+ "name": "transition-timing-function",
6860
+ "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"ease\",\n \"md\": \"ease-in\",\n \"lg\": \"ease-in-out\",\n \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
6861
+ "values": [
6862
+ {
6863
+ "name": "ease"
6515
6864
  },
6516
6865
  {
6517
- "name": "$lg"
6866
+ "name": "ease-in"
6518
6867
  },
6519
6868
  {
6520
- "name": "$md"
6869
+ "name": "ease-in-out"
6521
6870
  },
6522
6871
  {
6523
- "name": "$none"
6872
+ "name": "ease-out"
6524
6873
  },
6525
6874
  {
6526
- "name": "$s"
6875
+ "name": "linear"
6527
6876
  },
6528
6877
  {
6529
- "name": "$xl"
6878
+ "name": "step-end"
6530
6879
  },
6531
6880
  {
6532
- "name": "$xs"
6881
+ "name": "step-start"
6533
6882
  }
6534
6883
  ]
6535
6884
  },
6536
6885
  {
6537
- "name": "px",
6538
- "description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6886
+ "name": "text-align",
6887
+ "description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"justify\",\n \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
6539
6888
  "values": [
6540
6889
  {
6541
- "name": "$2xl"
6542
- },
6543
- {
6544
- "name": "$2xs"
6890
+ "name": "center"
6545
6891
  },
6546
6892
  {
6547
- "name": "$3xl"
6893
+ "name": "end"
6548
6894
  },
6549
6895
  {
6550
- "name": "$3xs"
6896
+ "name": "justify"
6551
6897
  },
6552
6898
  {
6553
- "name": "$4xl"
6899
+ "name": "left"
6554
6900
  },
6555
6901
  {
6556
- "name": "$4xs"
6902
+ "name": "match-parent"
6557
6903
  },
6558
6904
  {
6559
- "name": "$5xl"
6905
+ "name": "right"
6560
6906
  },
6561
6907
  {
6562
- "name": "$6xl"
6563
- },
6908
+ "name": "start"
6909
+ }
6910
+ ]
6911
+ },
6912
+ {
6913
+ "name": "opacity",
6914
+ "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
6915
+ "values": []
6916
+ },
6917
+ {
6918
+ "name": "vertical-align",
6919
+ "description": "The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.\n\n\n**Initial value**: `baseline`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"bottom\",\n \"lg\": \"middle\",\n \"xl\": \"sub\"\n}\n```\n\n- baseline\n- bottom\n- middle\n- sub\n- super\n- text-bottom\n- text-top\n- top",
6920
+ "values": [
6564
6921
  {
6565
- "name": "$7xl"
6922
+ "name": "baseline"
6566
6923
  },
6567
6924
  {
6568
- "name": "$8xl"
6925
+ "name": "bottom"
6569
6926
  },
6570
6927
  {
6571
- "name": "$lg"
6928
+ "name": "middle"
6572
6929
  },
6573
6930
  {
6574
- "name": "$md"
6931
+ "name": "sub"
6575
6932
  },
6576
6933
  {
6577
- "name": "$none"
6934
+ "name": "super"
6578
6935
  },
6579
6936
  {
6580
- "name": "$s"
6937
+ "name": "text-bottom"
6581
6938
  },
6582
6939
  {
6583
- "name": "$xl"
6940
+ "name": "text-top"
6584
6941
  },
6585
6942
  {
6586
- "name": "$xs"
6943
+ "name": "top"
6587
6944
  }
6588
6945
  ]
6589
6946
  },
6590
6947
  {
6591
- "name": "py",
6592
- "description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6948
+ "name": "white-space",
6949
+ "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"break-spaces\",\n \"md\": \"normal\",\n \"lg\": \"nowrap\",\n \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
6593
6950
  "values": [
6594
6951
  {
6595
- "name": "$2xl"
6952
+ "name": "break-spaces"
6596
6953
  },
6597
6954
  {
6598
- "name": "$2xs"
6955
+ "name": "normal"
6599
6956
  },
6600
6957
  {
6601
- "name": "$3xl"
6958
+ "name": "nowrap"
6602
6959
  },
6603
6960
  {
6604
- "name": "$3xs"
6961
+ "name": "pre"
6605
6962
  },
6606
6963
  {
6607
- "name": "$4xl"
6964
+ "name": "pre-line"
6608
6965
  },
6609
6966
  {
6610
- "name": "$4xs"
6967
+ "name": "pre-wrap"
6968
+ }
6969
+ ]
6970
+ },
6971
+ {
6972
+ "name": "flex",
6973
+ "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
6974
+ "values": [
6975
+ {
6976
+ "name": "auto"
6611
6977
  },
6612
6978
  {
6613
- "name": "$5xl"
6979
+ "name": "content"
6614
6980
  },
6615
6981
  {
6616
- "name": "$6xl"
6982
+ "name": "fit-content"
6617
6983
  },
6618
6984
  {
6619
- "name": "$7xl"
6985
+ "name": "max-content"
6620
6986
  },
6621
6987
  {
6622
- "name": "$8xl"
6988
+ "name": "min-content"
6623
6989
  },
6624
6990
  {
6625
- "name": "$lg"
6991
+ "name": "none"
6626
6992
  },
6627
6993
  {
6628
- "name": "$md"
6994
+ "name": "stretch"
6995
+ }
6996
+ ]
6997
+ },
6998
+ {
6999
+ "name": "grid-area",
7000
+ "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
7001
+ "values": []
7002
+ },
7003
+ {
7004
+ "name": "background-position",
7005
+ "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"left\",\n \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
7006
+ "values": [
7007
+ {
7008
+ "name": "bottom"
6629
7009
  },
6630
7010
  {
6631
- "name": "$none"
7011
+ "name": "center"
6632
7012
  },
6633
7013
  {
6634
- "name": "$s"
7014
+ "name": "left"
6635
7015
  },
6636
7016
  {
6637
- "name": "$xl"
7017
+ "name": "right"
6638
7018
  },
6639
7019
  {
6640
- "name": "$xs"
7020
+ "name": "top"
6641
7021
  }
6642
7022
  ]
6643
7023
  },
6644
7024
  {
6645
- "name": "margin-x",
6646
- "description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
7025
+ "name": "flex-flow",
7026
+ "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"nowrap\",\n \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
6647
7027
  "values": [
6648
7028
  {
6649
- "name": "$2xl"
7029
+ "name": "column"
6650
7030
  },
6651
7031
  {
6652
- "name": "$2xs"
7032
+ "name": "column-reverse"
6653
7033
  },
6654
7034
  {
6655
- "name": "$3xl"
7035
+ "name": "nowrap"
6656
7036
  },
6657
7037
  {
6658
- "name": "$3xs"
7038
+ "name": "row"
6659
7039
  },
6660
7040
  {
6661
- "name": "$4xl"
7041
+ "name": "row-reverse"
6662
7042
  },
6663
7043
  {
6664
- "name": "$4xs"
7044
+ "name": "wrap"
6665
7045
  },
6666
7046
  {
6667
- "name": "$5xl"
6668
- },
7047
+ "name": "wrap-reverse"
7048
+ }
7049
+ ]
7050
+ },
7051
+ {
7052
+ "name": "border-style",
7053
+ "description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"dashed\",\n \"md\": \"dotted\",\n \"lg\": \"double\",\n \"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
7054
+ "values": [
6669
7055
  {
6670
- "name": "$6xl"
7056
+ "name": "dashed"
6671
7057
  },
6672
7058
  {
6673
- "name": "$7xl"
7059
+ "name": "dotted"
6674
7060
  },
6675
7061
  {
6676
- "name": "$8xl"
7062
+ "name": "double"
6677
7063
  },
6678
7064
  {
6679
- "name": "$auto"
7065
+ "name": "groove"
6680
7066
  },
6681
7067
  {
6682
- "name": "$lg"
7068
+ "name": "hidden"
6683
7069
  },
6684
7070
  {
6685
- "name": "$md"
7071
+ "name": "inset"
6686
7072
  },
6687
7073
  {
6688
- "name": "$none"
7074
+ "name": "none"
6689
7075
  },
6690
7076
  {
6691
- "name": "$s"
7077
+ "name": "outset"
6692
7078
  },
6693
7079
  {
6694
- "name": "$xl"
7080
+ "name": "ridge"
6695
7081
  },
6696
7082
  {
6697
- "name": "$xs"
7083
+ "name": "solid"
6698
7084
  }
6699
7085
  ]
6700
7086
  },
6701
7087
  {
6702
- "name": "margin-y",
6703
- "description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
7088
+ "name": "overflow",
7089
+ "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
6704
7090
  "values": [
6705
7091
  {
6706
- "name": "$2xl"
7092
+ "name": "auto"
6707
7093
  },
6708
7094
  {
6709
- "name": "$2xs"
7095
+ "name": "clip"
6710
7096
  },
6711
7097
  {
6712
- "name": "$3xl"
7098
+ "name": "hidden"
7099
+ },
7100
+ {
7101
+ "name": "scroll"
6713
7102
  },
6714
7103
  {
6715
- "name": "$3xs"
7104
+ "name": "visible"
7105
+ }
7106
+ ]
7107
+ },
7108
+ {
7109
+ "name": "text-decoration",
7110
+ "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"blink\",\n \"lg\": \"dashed\",\n \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
7111
+ "values": [
7112
+ {
7113
+ "name": "auto"
6716
7114
  },
6717
7115
  {
6718
- "name": "$4xl"
7116
+ "name": "blink"
6719
7117
  },
6720
7118
  {
6721
- "name": "$4xs"
7119
+ "name": "dashed"
6722
7120
  },
6723
7121
  {
6724
- "name": "$5xl"
7122
+ "name": "dotted"
6725
7123
  },
6726
7124
  {
6727
- "name": "$6xl"
7125
+ "name": "double"
6728
7126
  },
6729
7127
  {
6730
- "name": "$7xl"
7128
+ "name": "from-font"
6731
7129
  },
6732
7130
  {
6733
- "name": "$8xl"
7131
+ "name": "grammar-error"
6734
7132
  },
6735
7133
  {
6736
- "name": "$auto"
7134
+ "name": "line-through"
6737
7135
  },
6738
7136
  {
6739
- "name": "$lg"
7137
+ "name": "none"
6740
7138
  },
6741
7139
  {
6742
- "name": "$md"
7140
+ "name": "overline"
6743
7141
  },
6744
7142
  {
6745
- "name": "$none"
7143
+ "name": "solid"
6746
7144
  },
6747
7145
  {
6748
- "name": "$s"
7146
+ "name": "spelling-error"
6749
7147
  },
6750
7148
  {
6751
- "name": "$xl"
7149
+ "name": "underline"
6752
7150
  },
6753
7151
  {
6754
- "name": "$xs"
7152
+ "name": "wavy"
6755
7153
  }
6756
7154
  ]
6757
7155
  },
6758
7156
  {
6759
- "name": "m",
6760
- "description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
7157
+ "name": "as",
7158
+ "default": "div",
7159
+ "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-box\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr",
7160
+ "type": "string",
6761
7161
  "values": [
6762
7162
  {
6763
- "name": "$2xl"
7163
+ "name": "a"
6764
7164
  },
6765
7165
  {
6766
- "name": "$2xs"
7166
+ "name": "abbr"
6767
7167
  },
6768
7168
  {
6769
- "name": "$3xl"
7169
+ "name": "address"
6770
7170
  },
6771
7171
  {
6772
- "name": "$3xs"
7172
+ "name": "area"
6773
7173
  },
6774
7174
  {
6775
- "name": "$4xl"
7175
+ "name": "article"
6776
7176
  },
6777
7177
  {
6778
- "name": "$4xs"
7178
+ "name": "aside"
6779
7179
  },
6780
7180
  {
6781
- "name": "$5xl"
7181
+ "name": "audio"
6782
7182
  },
6783
7183
  {
6784
- "name": "$6xl"
7184
+ "name": "b"
6785
7185
  },
6786
7186
  {
6787
- "name": "$7xl"
7187
+ "name": "base"
6788
7188
  },
6789
7189
  {
6790
- "name": "$8xl"
7190
+ "name": "bdi"
6791
7191
  },
6792
7192
  {
6793
- "name": "$auto"
7193
+ "name": "bdo"
6794
7194
  },
6795
7195
  {
6796
- "name": "$lg"
7196
+ "name": "blockquote"
6797
7197
  },
6798
7198
  {
6799
- "name": "$md"
7199
+ "name": "body"
6800
7200
  },
6801
7201
  {
6802
- "name": "$none"
7202
+ "name": "br"
6803
7203
  },
6804
7204
  {
6805
- "name": "$s"
7205
+ "name": "button"
6806
7206
  },
6807
7207
  {
6808
- "name": "$xl"
7208
+ "name": "canvas"
6809
7209
  },
6810
7210
  {
6811
- "name": "$xs"
6812
- }
6813
- ]
6814
- },
6815
- {
6816
- "name": "mr",
6817
- "description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6818
- "values": [
6819
- {
6820
- "name": "$2xl"
7211
+ "name": "caption"
6821
7212
  },
6822
7213
  {
6823
- "name": "$2xs"
7214
+ "name": "cite"
6824
7215
  },
6825
7216
  {
6826
- "name": "$3xl"
7217
+ "name": "code"
6827
7218
  },
6828
7219
  {
6829
- "name": "$3xs"
7220
+ "name": "col"
6830
7221
  },
6831
7222
  {
6832
- "name": "$4xl"
7223
+ "name": "colgroup"
6833
7224
  },
6834
7225
  {
6835
- "name": "$4xs"
7226
+ "name": "data"
6836
7227
  },
6837
7228
  {
6838
- "name": "$5xl"
7229
+ "name": "datalist"
6839
7230
  },
6840
7231
  {
6841
- "name": "$6xl"
7232
+ "name": "dd"
6842
7233
  },
6843
7234
  {
6844
- "name": "$7xl"
7235
+ "name": "del"
6845
7236
  },
6846
7237
  {
6847
- "name": "$8xl"
7238
+ "name": "details"
6848
7239
  },
6849
7240
  {
6850
- "name": "$auto"
7241
+ "name": "dfn"
6851
7242
  },
6852
7243
  {
6853
- "name": "$lg"
7244
+ "name": "dialog"
6854
7245
  },
6855
7246
  {
6856
- "name": "$md"
7247
+ "name": "div",
7248
+ "description": "(default)"
6857
7249
  },
6858
7250
  {
6859
- "name": "$none"
7251
+ "name": "dl"
6860
7252
  },
6861
7253
  {
6862
- "name": "$s"
7254
+ "name": "dt"
6863
7255
  },
6864
7256
  {
6865
- "name": "$xl"
7257
+ "name": "em"
6866
7258
  },
6867
7259
  {
6868
- "name": "$xs"
6869
- }
6870
- ]
6871
- },
6872
- {
6873
- "name": "ml",
6874
- "description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6875
- "values": [
6876
- {
6877
- "name": "$2xl"
7260
+ "name": "embed"
6878
7261
  },
6879
7262
  {
6880
- "name": "$2xs"
7263
+ "name": "fieldset"
6881
7264
  },
6882
7265
  {
6883
- "name": "$3xl"
7266
+ "name": "figcaption"
6884
7267
  },
6885
7268
  {
6886
- "name": "$3xs"
7269
+ "name": "figure"
6887
7270
  },
6888
7271
  {
6889
- "name": "$4xl"
7272
+ "name": "footer"
6890
7273
  },
6891
7274
  {
6892
- "name": "$4xs"
7275
+ "name": "form"
6893
7276
  },
6894
7277
  {
6895
- "name": "$5xl"
7278
+ "name": "h1"
6896
7279
  },
6897
7280
  {
6898
- "name": "$6xl"
7281
+ "name": "h2"
6899
7282
  },
6900
7283
  {
6901
- "name": "$7xl"
7284
+ "name": "h3"
6902
7285
  },
6903
7286
  {
6904
- "name": "$8xl"
7287
+ "name": "h4"
6905
7288
  },
6906
7289
  {
6907
- "name": "$auto"
7290
+ "name": "h5"
6908
7291
  },
6909
7292
  {
6910
- "name": "$lg"
7293
+ "name": "h6"
6911
7294
  },
6912
7295
  {
6913
- "name": "$md"
7296
+ "name": "head"
6914
7297
  },
6915
7298
  {
6916
- "name": "$none"
7299
+ "name": "header"
6917
7300
  },
6918
7301
  {
6919
- "name": "$s"
7302
+ "name": "hgroup"
6920
7303
  },
6921
7304
  {
6922
- "name": "$xl"
7305
+ "name": "hr"
6923
7306
  },
6924
7307
  {
6925
- "name": "$xs"
6926
- }
6927
- ]
6928
- },
6929
- {
6930
- "name": "mt",
6931
- "description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6932
- "values": [
6933
- {
6934
- "name": "$2xl"
7308
+ "name": "html"
6935
7309
  },
6936
7310
  {
6937
- "name": "$2xs"
7311
+ "name": "i"
6938
7312
  },
6939
7313
  {
6940
- "name": "$3xl"
7314
+ "name": "iframe"
6941
7315
  },
6942
7316
  {
6943
- "name": "$3xs"
7317
+ "name": "img"
6944
7318
  },
6945
7319
  {
6946
- "name": "$4xl"
7320
+ "name": "input"
6947
7321
  },
6948
7322
  {
6949
- "name": "$4xs"
7323
+ "name": "ins"
6950
7324
  },
6951
7325
  {
6952
- "name": "$5xl"
7326
+ "name": "kbd"
6953
7327
  },
6954
7328
  {
6955
- "name": "$6xl"
7329
+ "name": "label"
6956
7330
  },
6957
7331
  {
6958
- "name": "$7xl"
7332
+ "name": "legend"
6959
7333
  },
6960
7334
  {
6961
- "name": "$8xl"
7335
+ "name": "li"
6962
7336
  },
6963
7337
  {
6964
- "name": "$auto"
7338
+ "name": "link"
6965
7339
  },
6966
7340
  {
6967
- "name": "$lg"
7341
+ "name": "main"
6968
7342
  },
6969
7343
  {
6970
- "name": "$md"
7344
+ "name": "map"
6971
7345
  },
6972
7346
  {
6973
- "name": "$none"
7347
+ "name": "mark"
6974
7348
  },
6975
7349
  {
6976
- "name": "$s"
7350
+ "name": "menu"
6977
7351
  },
6978
7352
  {
6979
- "name": "$xl"
7353
+ "name": "meta"
6980
7354
  },
6981
7355
  {
6982
- "name": "$xs"
6983
- }
6984
- ]
6985
- },
6986
- {
6987
- "name": "mb",
6988
- "description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
6989
- "values": [
6990
- {
6991
- "name": "$2xl"
7356
+ "name": "meter"
6992
7357
  },
6993
7358
  {
6994
- "name": "$2xs"
7359
+ "name": "nav"
6995
7360
  },
6996
7361
  {
6997
- "name": "$3xl"
7362
+ "name": "noscript"
6998
7363
  },
6999
7364
  {
7000
- "name": "$3xs"
7365
+ "name": "object"
7001
7366
  },
7002
7367
  {
7003
- "name": "$4xl"
7368
+ "name": "ol"
7004
7369
  },
7005
7370
  {
7006
- "name": "$4xs"
7371
+ "name": "optgroup"
7007
7372
  },
7008
7373
  {
7009
- "name": "$5xl"
7374
+ "name": "option"
7010
7375
  },
7011
7376
  {
7012
- "name": "$6xl"
7377
+ "name": "output"
7013
7378
  },
7014
7379
  {
7015
- "name": "$7xl"
7380
+ "name": "p"
7016
7381
  },
7017
7382
  {
7018
- "name": "$8xl"
7383
+ "name": "picture"
7019
7384
  },
7020
7385
  {
7021
- "name": "$auto"
7386
+ "name": "pre"
7022
7387
  },
7023
7388
  {
7024
- "name": "$lg"
7389
+ "name": "progress"
7025
7390
  },
7026
7391
  {
7027
- "name": "$md"
7392
+ "name": "q"
7028
7393
  },
7029
7394
  {
7030
- "name": "$none"
7395
+ "name": "rarui-box"
7031
7396
  },
7032
7397
  {
7033
- "name": "$s"
7398
+ "name": "rp"
7034
7399
  },
7035
7400
  {
7036
- "name": "$xl"
7401
+ "name": "rt"
7037
7402
  },
7038
7403
  {
7039
- "name": "$xs"
7040
- }
7041
- ]
7042
- },
7043
- {
7044
- "name": "mx",
7045
- "description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
7046
- "values": [
7047
- {
7048
- "name": "$2xl"
7404
+ "name": "ruby"
7049
7405
  },
7050
7406
  {
7051
- "name": "$2xs"
7407
+ "name": "s"
7052
7408
  },
7053
7409
  {
7054
- "name": "$3xl"
7410
+ "name": "samp"
7055
7411
  },
7056
7412
  {
7057
- "name": "$3xs"
7413
+ "name": "script"
7058
7414
  },
7059
7415
  {
7060
- "name": "$4xl"
7416
+ "name": "section"
7061
7417
  },
7062
7418
  {
7063
- "name": "$4xs"
7419
+ "name": "select"
7064
7420
  },
7065
7421
  {
7066
- "name": "$5xl"
7422
+ "name": "slot"
7067
7423
  },
7068
7424
  {
7069
- "name": "$6xl"
7425
+ "name": "small"
7070
7426
  },
7071
7427
  {
7072
- "name": "$7xl"
7428
+ "name": "source"
7073
7429
  },
7074
7430
  {
7075
- "name": "$8xl"
7431
+ "name": "span"
7076
7432
  },
7077
7433
  {
7078
- "name": "$auto"
7434
+ "name": "strong"
7079
7435
  },
7080
7436
  {
7081
- "name": "$lg"
7437
+ "name": "style"
7082
7438
  },
7083
7439
  {
7084
- "name": "$md"
7440
+ "name": "sub"
7085
7441
  },
7086
7442
  {
7087
- "name": "$none"
7443
+ "name": "summary"
7088
7444
  },
7089
7445
  {
7090
- "name": "$s"
7446
+ "name": "sup"
7091
7447
  },
7092
7448
  {
7093
- "name": "$xl"
7449
+ "name": "table"
7094
7450
  },
7095
7451
  {
7096
- "name": "$xs"
7097
- }
7098
- ]
7099
- },
7100
- {
7101
- "name": "my",
7102
- "description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
7103
- "values": [
7104
- {
7105
- "name": "$2xl"
7452
+ "name": "tbody"
7106
7453
  },
7107
7454
  {
7108
- "name": "$2xs"
7455
+ "name": "td"
7109
7456
  },
7110
7457
  {
7111
- "name": "$3xl"
7458
+ "name": "template"
7112
7459
  },
7113
7460
  {
7114
- "name": "$3xs"
7461
+ "name": "textarea"
7115
7462
  },
7116
7463
  {
7117
- "name": "$4xl"
7464
+ "name": "tfoot"
7118
7465
  },
7119
7466
  {
7120
- "name": "$4xs"
7467
+ "name": "th"
7121
7468
  },
7122
7469
  {
7123
- "name": "$5xl"
7470
+ "name": "thead"
7124
7471
  },
7125
7472
  {
7126
- "name": "$6xl"
7473
+ "name": "time"
7127
7474
  },
7128
7475
  {
7129
- "name": "$7xl"
7476
+ "name": "title"
7130
7477
  },
7131
7478
  {
7132
- "name": "$8xl"
7479
+ "name": "tr"
7133
7480
  },
7134
7481
  {
7135
- "name": "$auto"
7482
+ "name": "track"
7136
7483
  },
7137
7484
  {
7138
- "name": "$lg"
7485
+ "name": "u"
7139
7486
  },
7140
7487
  {
7141
- "name": "$md"
7488
+ "name": "ul"
7142
7489
  },
7143
7490
  {
7144
- "name": "$none"
7491
+ "name": "var"
7145
7492
  },
7146
7493
  {
7147
- "name": "$s"
7494
+ "name": "video"
7148
7495
  },
7149
7496
  {
7150
- "name": "$xl"
7497
+ "name": "wbr"
7498
+ }
7499
+ ]
7500
+ }
7501
+ ]
7502
+ },
7503
+ {
7504
+ "name": "rarui-breadcrumb",
7505
+ "description": "## Rarui Breadcrumb\n---\nComponente de navegação hierárquica que permite aos usuários navegar através de uma estrutura de páginas.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb) for more details.",
7506
+ "attributes": [
7507
+ {
7508
+ "name": "items-after-truncate",
7509
+ "default": 10,
7510
+ "description": "Especifica o número de itens do breadcrumb a serem exibidos após o truncamento.\nÚtil para gerenciar a exibição de listas longas de breadcrumb.",
7511
+ "type": "number"
7512
+ }
7513
+ ]
7514
+ },
7515
+ {
7516
+ "name": "rarui-breadcrumb-item",
7517
+ "description": "## Rarui BreadcrumbItem\n---\nItem individual do breadcrumb que pode ser renderizado como link ou botão.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb-item) for more details.",
7518
+ "attributes": [
7519
+ {
7520
+ "name": "name",
7521
+ "description": "Nome do item do breadcrumb exibido como texto.",
7522
+ "type": "string"
7523
+ },
7524
+ {
7525
+ "name": "active",
7526
+ "description": "Indicates whether the breadcrumb item is currently active.\nAn active item is typically styled differently to show that it represents the current page.",
7527
+ "type": "boolean"
7528
+ },
7529
+ {
7530
+ "name": "href",
7531
+ "description": "URL de destino quando o item for um link.",
7532
+ "type": "string"
7533
+ },
7534
+ {
7535
+ "name": "as",
7536
+ "default": "button",
7537
+ "description": "Tipo de elemento a ser renderizado.\n\n- a\n- button",
7538
+ "type": "string",
7539
+ "values": [
7540
+ {
7541
+ "name": "a"
7151
7542
  },
7152
7543
  {
7153
- "name": "$xs"
7544
+ "name": "button",
7545
+ "description": "(default)"
7154
7546
  }
7155
7547
  ]
7156
7548
  }