Bar gauge card feature for sensors (#26585)

* Bar graph card feature for sensors

* use state color

* tweak name

* rename and improve colors

* Update src/panels/lovelace/card-features/hui-progress-bar-card-feature.ts

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

* rename to Bar gauge

* name fix

* Force dark-only themes to be in dark mode (#26583)

* Fetch translations for switch-as-x domains (#26566)

* Fetch translations for switch-as-x domains

* no cache

* Migrate ha-progress-ring to webawesome (#26542)

* Migrate all sl-animation usages to wa-animation (#26544)

* Remove unused shoelace animation import (#26584)

* Bump actions/checkout from 4.2.2 to 5.0.0 (#26586)

Bumps [actions/checkout](https://github.com/actions/checkout) from 4.2.2 to 5.0.0.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v4.2.2...v5.0.0)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-version: 5.0.0
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add date card feature (#26531)

* Add date card feature

* Rename from "date" to "date-set"

* Better label

* Fix

* Parse date for datetime

* Show accurate state of show_header_toggle in entities card editor (#26564)

* Add clipboard support to condition card conditions (#26535)

* Add copy paste support to condition card conditions

* Don't clear the clipboard

* Fix selection

* Add cut and duplicate

* Remove

* Fix event

* Fix picture glance mouse pointer (#26391)

* Fix picture glance mouse pointer

* More action updates

* Capitalize "Samba" as the name of the Open Source project (#26590)

Capitalize "Samba" as name for the Open Source project

* Update dependency @codemirror/language to v6.11.3 (#26589)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Set default forecast option in weather forecast card editor (#26592)

* Add fan oscillate feature (#26519)

* First working fan-oscillate feature

This a first working impl, need at least to do:
- Tooltip not yet "Yes/No"
- Need implementation verification

* Use same strings as more info label for control tooltip

* Add missing label for editor

* Rename some variables

* Add fan features in gallery

* Fix lint:types by applying suggestions from code review

Co-authored-by: Aidan Timson <aidan@timmo.dev>

* fix lint new line after import

* fix typo

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* fix event value type treating

* remove type magic as suggested

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Update localize.ts

Complete suggestion change to have tooltip

* fix lint by removing unused import

---------

Co-authored-by: Aidan Timson <aidan@timmo.dev>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Lock file maintenance (#26598)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Fix legend in devices-detail-graph (#26596)

* Change Suggest with AI label to Suggest (#26603)

* Automation row remember collapsed status (#26604)

* Summaries overview dashboard (#26594)

* Change categories to lights, climate and security

* Add entities grouped by devices

* Fix garage cover device class

* Rename category to summary

* Add media players categories

* Reduce spacing

* Remove person

* Remove translations

* Use media player cards

* Display entities without device

* Add missing entity category

* Update src/panels/lovelace/strategies/overview/helpers/overview-summaries.ts

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

* Add white space

---------

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

* Fix entities not showing due to JavaScript crash (fixes #25363) (#26599)

* Fix entity UI crash from undefined entity names (fixes #25363)

* Fix mock function type compatibility in test

- Update mock to handle string | undefined parameter
- Maintain test functionality while satisfying type checker

* Simplify approach based on reviewer feedback

- Use String() coercion to preserve numeric entity names (e.g., power strip outlets)
- Single line change instead of complex type validation across multiple files
- Revert stripPrefixFromEntityName to original (no longer needs null handling)
- Remove separate test file, update existing test to expect stringified numbers
- More conservative approach that preserves data rather than replacing with fallbacks

* History chart card feature (#26555)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix space in overview welcome caption (#26618)

* Fix space in overview welcome caption

* Update src/panels/lovelace/strategies/overview/overview-home-view-strategy.ts

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
Co-authored-by: karwosts <32912880+karwosts@users.noreply.github.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Aidan Timson <aidan@timmo.dev>
Co-authored-by: Norbert Rittel <norbert@rittel.de>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: pcan08 <155250376+pcan08@users.noreply.github.com>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
Co-authored-by: Drinor Dalipi <45405217+Drinory@users.noreply.github.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/card-features/hui-bar-gauge-card-feature.ts

@@ -0,0 +1,85 @@
+import { css, LitElement, nothing, html } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceCardFeature } from "../types";
+import type {
+  LovelaceCardFeatureContext,
+  BarGaugeCardFeatureConfig,
+} from "./types";
+
+export const supportsBarGaugeCardFeature = (
+  hass: HomeAssistant,
+  context: LovelaceCardFeatureContext
+) => {
+  const stateObj = context.entity_id
+    ? hass.states[context.entity_id]
+    : undefined;
+  if (!stateObj) return false;
+  const domain = computeDomain(stateObj.entity_id);
+  return domain === "sensor" && stateObj.attributes.unit_of_measurement === "%";
+};
+
+@customElement("hui-bar-gauge-card-feature")
+class HuiBarGaugeCardFeature extends LitElement implements LovelaceCardFeature {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public context!: LovelaceCardFeatureContext;
+
+  @state() private _config?: BarGaugeCardFeatureConfig;
+
+  static getStubConfig(): BarGaugeCardFeatureConfig {
+    return {
+      type: "bar-gauge",
+    };
+  }
+
+  public setConfig(config: BarGaugeCardFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  render() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.context ||
+      !this.context.entity_id ||
+      !this.hass.states[this.context.entity_id] ||
+      !supportsBarGaugeCardFeature(this.hass, this.context)
+    ) {
+      return nothing;
+    }
+    const stateObj = this.hass.states[this.context.entity_id];
+    const value = stateObj.state;
+    return html`<div style="width: ${value}%"></div>
+      <div class="bar-gauge-background"></div>`;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      height: var(--feature-height);
+      border-radius: var(--feature-border-radius);
+      overflow: hidden;
+    }
+    :host > div {
+      height: 100%;
+      background-color: var(--feature-color);
+      transition: width 180ms ease-in-out;
+    }
+    .bar-gauge-background {
+      flex: 1;
+      opacity: 0.2;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-bar-gauge-card-feature": HuiBarGaugeCardFeature;
+  }
+}

src/panels/lovelace/card-features/types.ts

@@ -211,6 +211,10 @@ export interface AreaControlsCardFeatureConfig {
   controls?: AreaControl[];
 }
 
+export interface BarGaugeCardFeatureConfig {
+  type: "bar-gauge";
+}
+
 export type LovelaceCardFeaturePosition = "bottom" | "inline";
 
 export type LovelaceCardFeatureConfig =
@@ -250,7 +254,8 @@ export type LovelaceCardFeatureConfig =
   | ValveOpenCloseCardFeatureConfig
   | ValvePositionCardFeatureConfig
   | WaterHeaterOperationModesCardFeatureConfig
-  | AreaControlsCardFeatureConfig;
+  | AreaControlsCardFeatureConfig
+  | BarGaugeCardFeatureConfig;
 
 export interface LovelaceCardFeatureContext {
   entity_id?: string;

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -34,6 +34,7 @@ import "../card-features/hui-valve-open-close-card-feature";
 import "../card-features/hui-valve-position-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
 import "../card-features/hui-area-controls-card-feature";
+import "../card-features/hui-bar-gauge-card-feature";
 import "../card-features/hui-history-chart-card-feature";
 
 import type { LovelaceCardFeatureConfig } from "../card-features/types";
@@ -44,8 +45,9 @@ import {
 
 const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "alarm-modes",
-  "button",
   "area-controls",
+  "bar-gauge",
+  "button",
   "climate-fan-modes",
   "climate-swing-modes",
   "climate-swing-horizontal-modes",

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -53,6 +53,7 @@ import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
 import { supportsValveOpenCloseCardFeature } from "../../card-features/hui-valve-open-close-card-feature";
 import { supportsValvePositionCardFeature } from "../../card-features/hui-valve-position-card-feature";
+import { supportsBarGaugeCardFeature } from "../../card-features/hui-bar-gauge-card-feature";
 import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
 import type {
   LovelaceCardFeatureConfig,
@@ -70,6 +71,7 @@ type SupportsFeature = (
 const UI_FEATURE_TYPES = [
   "alarm-modes",
   "area-controls",
+  "bar-gauge",
   "button",
   "climate-fan-modes",
   "climate-hvac-modes",
@@ -135,6 +137,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
 > = {
   "alarm-modes": supportsAlarmModesCardFeature,
   "area-controls": supportsAreaControlsCardFeature,
+  "bar-gauge": supportsBarGaugeCardFeature,
   button: supportsButtonCardFeature,
   "climate-fan-modes": supportsClimateFanModesCardFeature,
   "climate-swing-modes": supportsClimateSwingModesCardFeature,

src/translations/en.json

@@ -8069,6 +8069,9 @@
                 },
                 "no_compatible_controls": "No compatible controls available for this area"
               },
+              "bar-gauge": {
+                "label": "Bar gauge"
+              },
               "history-chart": {
                 "label": "History chart"
               }