Transitions fail in state-switch cards nested under template cards

[qfjp]

A minimum working example is below. This depends on an existing input selector named input_select.template_state_selector_demo (options don't matter, so long as there are two) and lights labeled light.bathroom, light.kitchen, light.bathroom_<x>, and light.kitchen_<x> where x ranges from 1-2 (inclusive).

type: vertical-stack
cards:
  - type: custom:config-template-card
    variables:
      values: states['input_select.template_state_selector_demo'].attributes.options
      value: states['input_select.template_state_selector_demo'].state
      title_case: |
        str => {
          return str.replace(
            /\w\S*/g, text =>
              text.charAt(0).toUpperCase() +
              text.substring(1).toLowerCase()
          );
        }
    entities:
      - input_select.template_state_selector_demo
    card:
      type: horizontal-stack
      title: Template
      cards:
        - type: entities
          title: >-
            ${title_case(values[0].replaceAll("_", " ") + " & " +
            values[1].replaceAll("_", " "))}
          entities:
            - entity: input_select.template_state_selector_demo
        - type: custom:state-switch
          entity: input_select.template_state_selector_demo
          transition: swap-right
          transition_time: 500
          states:
            dummy_state_1:
              type: entities
              title: ${"State = " + title_case(value.replaceAll("_", " "))}
              entities:
                - light.bathroom
                - light.bathroom_1
                - light.bathroom_2
            dummy_state_2:
              type: entities
              title: ${"State = " + title_case(value.replaceAll("_", " "))}
              entities:
                - light.kitchen
                - light.kitchen_1
                - light.kitchen_2
  - type: horizontal-stack
    title: No Template
    cards:
      - type: entities
        entities:
          - entity: input_select.template_state_selector_demo
            icon: mdi:select-remove
      - type: custom:state-switch
        entity: input_select.template_state_selector_demo
        transition: swap-right
        transition_time: 500
        states:
          dummy_state_1:
            type: entities
            title: State 1
            entities:
              - light.bathroom
              - light.bathroom_1
              - light.bathroom_2
          dummy_state_2:
            type: entities
            title: State 2
            entities:
              - light.kitchen
              - light.kitchen_1
              - light.kitchen_2

There are two examples in a vertical stack.

• The first example is a template containing the input selector next to an entity card. Changing the selector will change the card, but will not animate.
• The second example is the same cards built outside of a template. Changing the selector again changes the value of the cards, but the card also animates.

This issue looks like it's the same as issue #104, however the example in that issue was deemed too cumbersome to analyze. Hopefully this one is easier.

[ildar170975]

Transition will definitely fail - config-template-card REDRAWS a whole inner card whenever a monitored entity (here - input_select.template_state_selector_demo) changes. Do not place whole state-switch into CTC, place particular cards only where templates are needed.