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, orstatus_labelaway 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(orbar_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_whenwithanimation: pingandhighlight: backgroundsilently 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 liketemperature/voc/pm25,custom_theme, andcenter_zero's negative half) — several related scaling bugs, all fixed. center_zerowith athemeandbar_color_modeset could leave a gap in the fill instead of a clean edge, for any value pastmax_value(or belowmin_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,overlayorbackground, 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: trueto 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
nameorsecondary_infoon 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_animationsilently 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_themezones 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: gridandtype: entitiesincluded (both had a hardcoded ~44.8px row-height guess — wrong the momentsecondary_infoisn't shown — now gone, replaced by real content-driven sizing; an explicitheight:now wins outright there too,square: falsefor grid) — see the 📏 A hardenedheighthighlight above.
➡️ Discord @RKT62 - The badge's
nametext 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 alow_attribute/high_attributesibling 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_positiondropdown still offered "Compact bar below" withlayout: vertical, even though it only has a distinct effect withlayout: horizontaland silently reverts todefaulton save - it's no longer in the list oncelayout: verticalis selected, instead of being offered only to be quietly rewritten away. hide: value/hide: unitnever actually worked as a Jinja template — only the statichide: [value, ...]array form did. The template's live result was tracked correctly foricon/name/secondary_info/progress_bar(each has its own CSS class), butvalue/unithide 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 sincehideitself first accepted a Jinja template.- The "nothing left to show, collapse the row" check for a
secondary_infodriven bycustom_info(or a Template'ssecondary) 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 sinceicon_animation's washing-machine/battery-charging modes shipped. bar_segments: N's divider lines relied onround()(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 withoutround(); see the 📶 Sturdierbar_segmentshighlight above. Present sincebar_segmentsitself 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
densityhighlight 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 alertblinkanimation, andicon_animation/alert_when'spinganimation 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 forping; 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
watermarklow/highin{ 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'swatermarkoption shipped. bar_color_mode: rainbow_full's marker didn't mirror withbar_orientation: rtl— the fill visually flipped, the marker stayed put and ended up on the wrong side of it. Present sincerainbow_fullitself shipped.theme: humidity's comfort zone (40–60%) used to split into a washed-outgreen/tealband instead of one solid color, and a 95% reading (mold/condensation risk) landed ondeep-purple— a color that doesn't read as "alert" the way a 15% reading'sreddoes, 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. Seetheme: 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 toMarkers/Low/High marker source. Thewatermark:YAML key itself is unchanged. round/trianglewatermark markers didn't center precisely on their configured value — same pixel-rounding fixbar_segments's own dividers already got.- The visual editor's
heightfield 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'sname/secondary_infotext 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 sinceicon_animation's Jinja mode shipped in1.6.1-rc2. - Jinja-driven
badge_icon/badge_color/icon_animationfields 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 anandcondition 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/weatherentities used without an explicitattribute:rendered as a flat 0% — the card now defaults to the setpoint temperature forclimateand the ambient temperature forweather, each shown with the correct unit (climate: the system's configured °C/°F;weather: the unit that specific attribute reports).- Clearing
themein the editor could leave it silently stuck — it wrote an empty value instead of removing the key, which could wedgebar_size/bar_segments/bar_color_mode/interpolateas if a theme were still active, even on a config that was already saved that way. - A
bar_effect/hidechip that became incompatible or hidden while still selected (e.g. after changingbar_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