SOLVED: the below code works to update the border color in real-time when the any of the entities are turned on, or all are off.
Hope this helps others!
type: custom:expander-card
title: Disable Motion Alerts
expanded: false
child-margin-top: .7em
padding: 0
clear-children: true
clear: true
title-card-button-overlay: true
title-card-clickable: true
title-card:
type: custom:button-card
entity: input_boolean.bypass_deck_small_motion # Use one entity for tracking
show_name: false
show_icon: false
label: Motion Notification Controls
show_label: true
triggers_update:
- input_boolean.bypass_deck_small_motion
- input_boolean.bypass_patio_motion
- input_boolean.bypass_entry_motion
- input_boolean.bypass_driveway_motion
- input_boolean.bypass_garage_motion
styles:
label:
- font-family: monospace
- font-size: 100%
card:
- border: |
[[[
const entities = [
'input_boolean.bypass_deck_small_motion',
'input_boolean.bypass_patio_motion',
'input_boolean.bypass_entry_motion',
'input_boolean.bypass_driveway_motion',
'input_boolean.bypass_garage_motion'
];
return entities.some(e => states[e]?.state === 'on')
? 'solid 3px orange'
: 'solid 3px grey';
]]]
square: false
cards:
- type: grid
columns: 5
triggers_update:
- input_boolean.bypass_deck_small_motion
- input_boolean.bypass_patio_motion
- input_boolean.bypass_entry_motion
- input_boolean.bypass_driveway_motion
- input_boolean.bypass_garage_motion
cards:
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.bypass_deck_small_motion
name: Small Deck
icon_height: 20px
show_state: false
styles:
name:
- font-size: 75%
state:
- font-size: 50%
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.bypass_patio_motion
name: Patio
icon_height: 40px
show_state: false
styles:
name:
- font-size: 75%
state:
- font-size: 50%
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.bypass_entry_motion
name: Entry
icon_height: 40px
show_state: false
styles:
name:
- font-size: 75%
state:
- font-size: 50%
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.bypass_driveway_motion
name: Driveway
icon_height: 40px
show_state: false
styles:
name:
- font-size: 75%
state:
- font-size: 50%
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.bypass_garage_motion
name: Garage
icon_height: 40px
show_state: false
styles:
name:
- font-size: 75%
state:
- font-size: 50%