Unable to set class name in Jasonette Template

Question

I have a Jasonette "app" that gets a simple dataset from the server and displays it in a list. The data is a set of people names, each with the word "YES", "NO", "MAYBE", or null:

{
    "date":"2018-11-07",
    "dateFormatted":"Wednesday, November 7th",
    "responses":[
        {"name":"Jonathan","response":"NO"},
        {"name":"Mark","response":"YES"},
        {"name":"Stuart","response":"YES"},
        {"name":"Jack","response":"MAYBE"},
        {"name":"David","response":null}
    ]
}

Here is the code for the app, copied from one of the featured sample applications:

{
  "@": "http://web.jasonette.com/items/926",
  "title": "OSTT Mincha",
  "collection": {
    "@": "responses@https://example.com/status.json"
  },
  "adapter": {
    "title": "{{name}}",
    "description": "{{response}}"
  },
  "style": {
    "background": "#ffffff",
    "header": {
      "background": "#ffffff",
      "color": "#2a2a2a"
    },
    "item": {
      "title": "#bc9458",
      "description": "#001000"
    }
  }
}

Now, I want to color-code the response rows, with "YES" having a green background, "NO" having red, and "MAYBE" having yellow.

I tried to modify the "Basic ListView Mixin" sample to add classes that would add those backgrounds, like this:

{
  "$jason": {
    "head": {
      "title": "Basic ListView Mixin",
      "type": "mixin",
      "data": {
        "collection": {
          "@": "$document.collection"
        },
        "style": {
          "@": "$document.style"
        },
        "styles": {
          "YES": {
            "background": "#dff0d8"
          },
          "NO": {
            "background": "#f2dede"
          },
          "MAYBE": {
            "background": "#fcf8e3"
          }
        }
      },
      "templates": {
        "body": {
          "header": {
            "title": {
              "@": "$document.title"
            },
            "style": {
              "background": "{{style.header.background}}",
              "color": "{{style.header.color}}"
            }
          },
          "background": "{{style.background}}",
          "sections": [
            {
              "items": {
                "{{#each collection}}": {
                  "type": "horizontal",
                  "style": {
                    "padding": "10",
                    "spacing": "10"
                  },
                  "components": [
                    {
                      "type": "vertical",
                      "components": [
                        {
                          "type": "label",
                          "style": {
                            "font": "HelveticaNeue-Bold",
                            "size": "12",
                            "color": "{{$root.style.item.title}}"
                          },
                          "class": "{{$document.adapter.description}}",
                          "text": {
                            "@": "$document.adapter.title"
                          }
                        },
                        {
                          "type": "label",
                          "text": {
                            "@": "$document.adapter.description"
                          },
                          "style": {
                            "font": "Helvetica",
                            "size": "11",
                            "color": "{{$root.style.item.description}}"
                          },
                          "class": "{{$document.adapter.description}}"
                        }
                      ]
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    }
  }
}

The problem is that in the output, I don't see the classes applied. Instead, the class value is {{$document.adapter.description}} - the raw template value.

According to my reading of the documentation, template values should be allowed to appear here. Why is this template value not being replaced?