v1.3.2.5

AlertTicker Card — v1.3.2.5

✨ New Features

🔁 on_change + conditions now work together (#83)

Two related fixes that make on_change: true + conditions behave as expected:

1 — Primary state guard

When state and operator are defined alongside on_change: true, they now act as a current-state filter. The alert fires on any state change, but is only shown while the entity is actually in the declared state. This suppresses alerts on idle / paused / buffering transitions when only playing is meaningful.

2 — Single-object conditions accepted

conditions can now be written as a single inline object as well as a list — previously a single object was silently ignored.

# Fires on every track change, visible only while the speaker is playing
alerts:
  - entity: media_player.living_room_speaker
    operator: "="
    state: playing
    on_change: true
    conditions:
      entity: media_player.all_speakers
      operator: "="
      state: playing
    auto_dismiss_after: 15
    theme: music
    message: "{{ state_attr('media_player.living_room_speaker','media_artist') }} – {{ state_attr('media_player.living_room_speaker','media_title') }}"

---

🎨 Per-alert custom accent color (#143)

New color property on each alert. Overrides the card border and badge color for that specific alert, independent of its theme. Works with any CSS color value.

alerts:
  - entity: sensor.front_door
    theme: door
    color: "#ff4500"
    message: "Front door open"
  - entity: sensor.smoke
    theme: alarm
    color: "var(--error-color)"
    message: "Smoke detected"

Available as a color picker + text field in the visual editor under the icon section of each alert — always visible, no toggles required. Leave empty to use the theme's default color.

---

🐛 Bug Fixes

Bottom border clipped on some themes (#141)

Themes that render an outer border (emergency, prism, and others) occasionally showed the bottom border clipped. The sub-pixel rounding of box-sizing: content-box borders caused the bottom edge to fall fractionally outside .atc-inner-clip's overflow: hidden boundary.

Fixed by adding transform: translateZ(0) to .atc-inner-clip, promoting it to a compositor layer with integer pixel snapping.

---

{state} placeholder not replaced in the ticker scrolling theme (#140)

The ticker theme was rendering a.message raw, skipping the _resolveMessage() call that all other themes use. As a result, {state}, {name}, {entity}, {device}, {timer}, and Jinja2 templates were displayed literally instead of being evaluated.

Fixed by routing the ticker item message through _resolveMessage(), consistent with all other themes.

---

Snooze menu and history panel appear behind adjacent cards (#142)

isolation: isolate (added in v1.3.2.4 to fix #127) created a stacking context that trapped the menu's z-index inside the card, causing it to render behind neighboring cards.

Fixed by toggling a CSS class atc-popup-open on :host while any popup is open. The class overrides isolation to auto and adds position: relative; z-index: 9999, making the card a stacking context root at z-index 9999 in the masonry/grid layout — above all sibling cards at z-index: auto. isolation: isolate is restored the moment the popup closes, so the #127 fix remains fully intact.

---

📦 Update Instructions

1. Download alert-ticker-card.js and alert-ticker-card-editor.js
2. Replace both files in your www/ folder (or the path you set in Resources)
3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
4. Clear the HA frontend cache if the editor still shows the old version

HACS users: update from the HACS panel — no manual steps needed.

---

Full changelog: CHANGELOG.md

---

☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!