Skip to content

1.6.1

Latest

Choose a tag to compare

@francois-le-ko4la francois-le-ko4la released this 16 Aug 23:48
· 6 commits to main since this release
847834f

What's new

A bigger release than it looks: combine several bars into one card, themes and per-icon animations reach Template, status_label/badge_icon can drive their own color from a single Jinja condition, a proper keyboard/screen reader pass, and a handful of layout options that couldn't quite do what people needed yet. Fully backward compatible — nothing to change in your existing dashboards.

⭐ Highlights

📊 Combine several bars into one card or Tile feature

entity-progress-multi-card / entity-progress-multi-feature stack several full-featured progress bars (each with its own colors, state and tap actions) into a single card or a single Tile feature row, instead of one card per entity — handy for printer ink cartridges, a set of batteries, or any group of related sensors. A new, thinner bar_size: xsmall helps fit more of them in a tight space.

A small bar is enough on its own for something like a printer cartridge, but not when the number itself matters. Set show_value: true to show each entity's own value right next to its bar.

See multi and show_value.

➡️ [Feature]: Multi-bar card/feature #126 (@EDelsman)

📐 A more compact layout: bar_position: compact_below

name and the value now share one row (value right-justified), freeing the progress bar to use the card's full width on its own row underneath — instead of the bar and the value fighting for the same narrow space, or the value sitting in empty, unused room. See bar_position.

➡️ [Enhancement]: Display value above bar #123 (@davidcoulson)

🎬 Trigger icon animations from a template

icon_animation now accepts a Jinja condition ({ effect, jinja }) instead of relying only on automatic entity-state detection. See icon_animation.

➡️ [Enhancement]: template/condition to trigger the icon animation directly #125 (@FoxP)

🏷️ Status label pill

status_label draws a small rounded status pill in the card's corner ({ jinja, position, color_source }) — colored automatically from whatever color the progress bar currently shows by default (color_source: icon to follow the icon instead), or set your own color directly by returning {label, color} from the template instead of plain text. alert_when.highlight: 'label' reuses the same pill to flash a fixed alert label instead of tinting the border or background. See status_label and alert_when.

🎫 One template, both badge icon and color

badge_icon can now return a {icon, color} object instead of just an icon name — one condition drives both at once.

See badge_icon.

🌈 A hue-picker style bar: bar_color_mode: rainbow_full

The track always shows the theme's complete gradient end to end — not just the filled portion, like rainbow already does — with a small marker sliding along it to show where the current value sits, closer to a hue-picker strip than a traditional progress bar. Works with center_zero too, each arm showing its own half of the gradient in full.

See bar_color_mode.

⏱️ Smarter countdown refresh (and a fix for stalled Template timers)

A Template card's now()-driven countdown (e.g. a secondary: line ticking down a timer) could freeze after its first render — Home Assistant only pushes a fresh now()/utcnow() value once a minute on its own. Add fast_refresh: true to opt that Template card into a forced per-second refresh instead. Not automatic (it re-subscribes every second), and standard cards/badges/features don't need it — they already self-correct on their own. See fast_refresh.

🎨 A friendlier theme picker

The built-in theme list is reordered for readability: battery_adaptive (the one most people reach for) comes first, and each Critical when X/Optimal when X pair now sits together instead of being split into two separate groups.

🎯 A center_zero-aware "Critical when extreme" theme

theme: critical_when_extreme_center brings critical_when_extreme's "danger at both ends, safe in the middle" shape to center_zero — green at zero, red at both extremes, one continuous -100%/100% scale. Handy for a net power flow or a deviation from a setpoint that can swing either way. See theme.md.

🖌️ Theme support for Template

entity-progress-card-template / -badge-template can now pick a built-in theme instead of writing your own color Jinja by hand — the icon and bar color follow your percent: value automatically. bar_color_mode (segment/rainbow/rainbow_full) is available too, for a gradient look instead of a flat color.

📏 A hardened height

Card sizing got a real pass end to end: the min-height-as-a-floor protection (never clip text when the OS/browser text-size accessibility setting is scaled up) now applies consistently everywhere a card can live — Sections, Masonry, or embedded in another card. An explicit height: now always wins outright as a real, exact size everywhere too, instead of just another floor tall content could still outgrow. See height.

➡️ [Bug]: Some parts of the card are not visible on Android #131 (@zkurzyns)

🧹 Consistent hide: behavior

Hiding a field (hide: [icon, name, secondary_info, progress_bar]) now always gives its reserved space back, the same way, in every layout — previously each field followed its own inconsistent rule. An empty value/unit row now collapses too, whatever made it empty. See hide.

📶 Sturdier bar_segments

bar_segments: N's divider lines are real elements now, not a CSS gradient/mask trick — all N segments are the same width now (the two end ones used to read wider), and divider thickness can scale with the bar's own length instead of a fixed size, tunable via --epb-bar-segment-gap hook. See bar_segments.

📱 A compact density

density: compact shrinks the card to the smallest a complete card (icon, name, value, bar) can be in a Sections grid, in one toggle — instead of hand-tuning layout/bar_position/multiline yourself. Flipping it on through the visual editor also pins the card's size outright, restored automatically if you switch it back off. See density.

🃏 Show up when you pick an entity, not just when you search for a card

Home Assistant 2026.6 added an entity-first card picker: pick an entity, and compatible cards show live previews right there instead of you having to search for this card by name first. The Card and Badge now opt in — pick a compatible entity (a numeric sensor, a cover, a light...) and they show up under "Community" with a working config already filled in. Template/Badge Template don't suggest themselves — they need a hand-written Jinja percent: to render anything meaningful.

✍️ More inline styles for Jinja-rendered text

name/secondary/custom_info templates now also accept font-size, font-weight, text-align, width, display, position and z-index (on top of the existing color/background-color) — enough to build simple multi-column layouts directly in a template.
➡️ [Enhancement]: JINJA Should accept more STYLE tags #129 (@emartoni)

♿ Better keyboard and screen reader support

The card and its icon (when either has its own tap action) are now properly reachable and understandable for keyboard and screen-reader users, not just mouse/touch:

  • Tab reaches the card, and separately the icon if it has its own distinct action (icon_tap_action) — each now announces something meaningful (the entity's name and current value for the card, "Icon action" for the icon) instead of a bare, unlabeled "button". A badge, where only the card itself is ever clickable, no longer exposes its icon as a confusing extra stop.
  • Enter/Space activates each one, same as a mouse click.
  • Tabbing to the card or the icon now shows a clear, colored outline (matching the entity's own color, following the card's rounded corners properly) instead of the browser's plain default rectangle.
  • Fixed a structural issue where the card and its icon were both marked as "buttons" nested one inside the other — some screen readers and touch navigation handle that inconsistently. They're independent controls now, side by side rather than one inside the other.

🔧 Improvements

  • The visual editor now remembers a field's value across a mode toggle (standard/entity/Jinja) instead of resetting it to blank — switch min_value/max_value/watermark.low/.high/alert_when.above/.below, badge_icon/badge_color, bar_effect, hide, icon_animation, or status_label away from Jinja and back, and your template is still there.
  • Jinja-capable fields in the editor now show a short hint under the field for what the template is expected to return (a number, a boolean, a string, or an object with specific keys) instead of leaving you to guess from the docs.
  • Several fields in the editor's theme panel (icon/color, bar_orientation, bar_size, bar_segments, bar_scale, bar_color_mode, interpolate) could end up alone in their row instead of sharing it with their usual neighbor, depending on which other options were active — all paired up correctly now.

🐛 Notable fixes

  • The card could fail to load entirely on some older or embedded browsers (kiosk panels), even though 1.5.x worked fine there.
    ➡️ [Browser Support]: #128 (@Slomo5)
  • A renamed device (Settings → Devices → rename) wasn't reflected in the card's name.
    ➡️ [Bug]: Friendly name is not used #130 (@zkurzyns)
  • bar_size: xlarge (or bar_position: below) with the icon hidden could get squeezed into too small a space, cutting the bar off.
    ➡️ [Bug]: Card not rendering correctly with xlarge bar and icon hidden #133 (@Ascathon)
  • alert_when with animation: ping and highlight: background silently stopped ringing.
  • The bar could render as one flat color instead of the expected gradient with certain themes (bar_color_mode: segment/rainbow, real-value themes like temperature/voc/pm25, custom_theme, and center_zero's negative half) — several related scaling bugs, all fixed.
  • center_zero with a theme and bar_color_mode set could leave a gap in the fill instead of a clean edge, for any value past max_value (or below min_value) — the two arms' own gradient size wasn't capped at 100% the way the fill itself already is.
  • The value/unit text next to the bar stayed capped at a narrow width with bar_position: below, overlay or background, even though the bar wasn't actually sharing that row anymore.
  • A Jinja-templated countdown on a Template card could freeze after a few seconds instead of ticking — add fast_refresh: true to get it ticking every second again (see the highlight above for why).
    ➡️ Reported alongside [Bug]: "Run" status not catched #127 (@annaoskarson)
  • A conditional badge_icon/badge_color (only showing while some state holds) could flicker back on right after correctly hiding — any unrelated dashboard update was enough to force it back, ignoring the template's own current result.
  • A Template card with an empty percent (e.g. still waiting on the entity it depends on) never painted its icon/bar/theme at all — now falls back to a plain 0% render instead of staying blank.
  • Hiding name or secondary_info on a horizontal card left an empty gap instead of the card shrinking to fit.
    ➡️ Follow-up to [Enhancement]: JINJA Should accept more STYLE tags #129 (@emartoni)
  • icon_animation silently never triggered on a Template card, even with a condition that always matched.
  • On a narrow horizontal card, the progress bar could shrink to an invisible sliver while the text next to it never gave up any of its own space.
  • Text could get clipped when the OS/browser font-size accessibility setting was scaled up (e.g. Android's system "Font size" option).
    ➡️ [Bug]: Some parts of the card are not visible on Android #131 (@zkurzyns)
  • A percent sensor with custom_theme zones extending past 100% (used on purpose as a color safety margin) could stop the bar from ever filling all the way, even at a real 100% reading.
    ➡️ [Bug]: JINJA Should accept more STYLE tags #129 (@emartoni)
  • Better height handling generally, type: grid and type: entities included (both had a hardcoded ~44.8px row-height guess — wrong the moment secondary_info isn't shown — now gone, replaced by real content-driven sizing; an explicit height: now wins outright there too, square: false for grid) — see the 📏 A hardened height highlight above.
    ➡️ Discord @RKT62
  • The badge's name text could get its descenders (the tails on g, q, j, y) visually clipped — its line-height was pinned to exactly the font-size instead of leaving the same accessibility-safe margin the rest of the card's text already follows (issue #131). Unrelated to font size itself — purely a line-height/clipping bug.
  • The editor's Migrate config button never appeared for a config using the legacy bare-entity-string watermark.low/watermark.high (with a low_attribute/high_attribute sibling key) — it was already auto-migrated and console-warned like every other deprecated option, but the button's own detection check was missing those two specifically, so there was no one-click way to actually rewrite the YAML. See Deprecated Options.
  • The editor's bar_position dropdown still offered "Compact bar below" with layout: vertical, even though it only has a distinct effect with layout: horizontal and silently reverts to default on save - it's no longer in the list once layout: vertical is selected, instead of being offered only to be quietly rewritten away.
  • hide: value/hide: unit never actually worked as a Jinja template — only the static hide: [value, ...] array form did. The template's live result was tracked correctly for icon/name/secondary_info/progress_bar (each has its own CSS class), but value/unit hide by leaving text out of the assembled string instead, and that check only ever read the static config shape - silently blind to a Jinja result. Present since hide itself first accepted a Jinja template.
  • The "nothing left to show, collapse the row" check for a secondary_info driven by custom_info (or a Template's secondary) relied on :has() (Firefox 121+), past this card's documented 94+ floor — silently left a small empty gap on an older browser instead of collapsing the row. Replaced with a JS-computed check, so it now degrades correctly all the way down to the documented floor instead of quietly depending on a newer one. Present since icon_animation's washing-machine/battery-charging modes shipped.
  • bar_segments: N's divider lines relied on round() (Chrome/Edge 114+, Firefox 118+, Safari 16.4+), well past this card's documented 94+ floor — the whole divider layer silently failed to render at all below that, invisible dividers with no console warning or visual clue anything was wrong. Rebuilt without round(); see the 📶 Sturdier bar_segments highlight above. Present since bar_segments itself shipped.
  • A horizontal card that doesn't need the bar's own width (e.g. icon+name/value only) still reported a Sections grid minimum sized for a full card with a bar — see the 📱 A compact density highlight above.
    ➡️ [Enhancement]: Set minimum width to 3 #134 (@FoxP)
  • Clicking the icon lit up the whole card too — fixed by rebuilding the click-feedback layering, modeled on Home Assistant's own native Tile card.
  • bar_effect: gradient/gradient_reverse, the alert blink animation, and icon_animation/alert_when's ping animation could each fail on an older browser (Chrome/Edge < 111, Firefox < 113, Safari < 16.2 — see issue #128) — a flat, un-lightened bar for the first, a glitchy mid-cycle color for the second, not starting at all for ping; all degrade gracefully now. The icon's circular background had the same issue, fixed by simplifying it to a technique that needs no fallback at all. See graphic-effects-compatibility.html for a full side-by-side of what changes on an older browser and how to test it yourself.
  • Template's watermark low/high in { jinja: ... } mode never actually resolved — no subscription was ever wired for it, so the mark just silently never appeared (entity/plain-number modes were unaffected). Present since Template's watermark option shipped.
  • bar_color_mode: rainbow_full's marker didn't mirror with bar_orientation: rtl — the fill visually flipped, the marker stayed put and ended up on the wrong side of it. Present since rainbow_full itself shipped.
  • theme: humidity's comfort zone (40–60%) used to split into a washed-out green/teal band instead of one solid color, and a 95% reading (mold/condensation risk) landed on deep-purple — a color that doesn't read as "alert" the way a 15% reading's red does, understating the actual risk on the humid end. Ranges rebalanced to a symmetric 10/10/10/20 spread on each side of one solid green comfort zone. See theme: humidity.
  • The editor's watermark-related labels used the internal option name (Watermark, Low/High watermark source) instead of the everyday term for what they actually mark on the bar — relabeled to Markers/Low/High marker source. The watermark: YAML key itself is unchanged.
  • round/triangle watermark markers didn't center precisely on their configured value — same pixel-rounding fix bar_segments's own dividers already got.
  • The visual editor's height field had no way to switch from the slider to a free-text value (e.g. auto, calc(...)) — that mode only ever activated if the config already held one, set through YAML. A toggle now exposes it directly.
  • bar_position: overlay's name/secondary_info text ran flush against the card's right edge, unlike the 7px of breathing room it already had on the left — now matches with 10px on the right too.
  • A Jinja-driven icon_animation: { effect, jinja } could briefly fall back to automatic entity-based detection instead of staying off, right after the template's own result changed but before the next push resolved. Present since icon_animation's Jinja mode shipped in 1.6.1-rc2.
  • Jinja-driven badge_icon/badge_color/icon_animation fields could get visually stuck on a value that never matched the final, settled state — a multi-step script/automation (e.g. turning on a helper, then picking an option) makes Home Assistant push one intermediate template result per entity change, not just once for the final state, since the entities an and condition depends on don't change atomically. Now debounced so only the last, settled result is ever rendered.
    ➡️ [Bug]: Cached / invalid Jinja result? #135 (@FoxP)
  • climate/weather entities used without an explicit attribute: rendered as a flat 0% — the card now defaults to the setpoint temperature for climate and the ambient temperature for weather, each shown with the correct unit (climate: the system's configured °C/°F; weather: the unit that specific attribute reports).
  • Clearing theme in the editor could leave it silently stuck — it wrote an empty value instead of removing the key, which could wedge bar_size/bar_segments/bar_color_mode/interpolate as if a theme were still active, even on a config that was already saved that way.
  • A bar_effect/hide chip that became incompatible or hidden while still selected (e.g. after changing bar_color_mode) stayed selected in the saved config with no way to remove it from the editor — it's dropped automatically now.

🧪 Try it: demo dashboard

docs/demo-dashboard.yaml is now a comprehensive, interactive showroom covering essentially every option in this changelog, plus a regression-test view (one card per closed issue) and a "README examples" view reproducing the README's own recipes live. Import it with docs/demo-dashboard-helpers.yaml as a drop-in homeassistant: packages: file, and move the sliders to see everything react live.

📚 Documentation

Wondering how any of this degrades on an older or embedded browser? The graphic-effects-compatibility.html page is a standalone side-by-side of every graphic effect (gradients, ping/blink animations, rainbow_full, …) at both its modern and fallback tier — rendered live, open it directly in the browser you want to check.

The docs got a pass of their own alongside the code this cycle: docs/development.md gains a Quick start chapter (clone, install, build, where to actually see your change), a clearer explanation of why the build targets es2021, and a couple of stale claims corrected; docs/troubleshooting.md's Browser Compatibility section moved up front and got its own heading instead of being buried mid-page; and docs/configuration.md/docs/contributing.md were brought back in sync with everything this release actually shipped.

Thanks to everyone who reported, tested and contributed 🙏

Full Changelog: 1.6.0...1.6.1