States for certain domains are not correctly formatted

[jasr1]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug
A clear and concise description of what the bug is.

The entities belonging to the domains: cover, media_player, and lock show their states as lowercase. For example, “closed” instead of “Closed”, and “idle” instead of “Idle”, etc.

Entities belonging to the domains: group, light, binary_sensor, and switch show their states correctly formatted.

Version of the card
Version: 3.3.1

To Reproduce
This is the configuration I used:

entity: cover.jaguar_garage
entity_picture: /local/theme-icons/garage-open-jaguar.svg
label: Jaguar F-Pace
lock:
  duration: 5
  enabled: true
  unlock: double_tap
name: Garage Door 1
show_entity_picture: true
show_label: true
show_state: true
state:
  - color: null
    entity_picture: /local/theme-icons/garage-closed.svg
    styles:
      card:
        - filter: opacity(30%)
      icon:
        - color: var(--apple-gray)
          filter: grayscale(100%)
      state:
        - color: var(--apple-green)
    value: closed
  - styles:
      card:
        - filter: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "opacity(95%)";
              return "opacity(80%)";
            ]]]
        - background: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(254,255,255)";
              return " ";
            ]]]
      label:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      lock:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return "var(--apple-gray)";
            ]]]
      name:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      state:
        - color: var(--apple-red)
    value: open
  - styles:
      card:
        - filter: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "opacity(95%)";
              return "opacity(80%)";
            ]]]
        - background: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(254,255,255)";
              return " ";
            ]]]
      label:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      lock:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return "var(--apple-gray)";
            ]]]
      name:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      state:
        - color: var(--apple-red)
    value: opening
  - styles:
      card:
        - filter: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "opacity(95%)";
              return "opacity(80%)";
            ]]]
        - background: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(254,255,255)";
              return " ";
            ]]]
      label:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      lock:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return "var(--apple-gray)";
            ]]]
      name:
        - color: |
            [[[
              if (states['input_boolean.white'].state == 'on')
                return "rgb(0,0,0)";
              return " ";
            ]]]
      state:
        - color: var(--apple-red)
    value: closing
style: |
  :host {
    padding-left: 8px;
   }
styles:
  card:
    - height: 130px
    - width: 128px
  icon:
    - height: 50px
    - width: 50px
  label:
    - font-family: sf pro
    - font-size: 12px
    - font-weight: 400
    - justify-self: start
    - padding-left: 10px
  lock:
    - color: var(--apple-gray)
  name:
    - font-weight: bold
    - font-size: 14px
    - justify-self: start
    - padding-left: 10px
    - font-family: sf pro display
  state:
    - font-family: sf pro
    - font-size: 14px
    - font-weight: 500
    - justify-self: start
    - padding-left: 10px
    - color: var(--apple-red)
tap_action:
  action: call-service
  haptic: medium
  service: cover.toggle
  service_data:
    entity_id: cover.jaguar_garage
type: 'custom:button-card'

Screenshots
If applicable, add screenshots to help explain your problem.

Expected behavior
A clear and concise description of what you expected to happen.

The states be properly formatted.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]: Firefox
• Version [e.g. 22] 75.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iPhone 11 Pro Max
• OS: [e.g. iOS8.1] 13.4.1
• Browser [e.g. stock browser, safari] Stock
• Version [e.g. 22] Stock

Additional context
Add any other context about the problem here.

[RomRider]

Nice cars ;)
It's fixed, I'll release a new version.

[jasr1]

Nice cars ;)

It's fixed, I'll release a new version.

Thank you and thank you for your hard work!