Add unit to temperature tile number button group (#17841)

* Add unit to temperature tile number button group

* Update gallery

* Use blank before unit

* Hide unit if no space

* Fix build

---------

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

src/components/ha-control-number-buttons.ts

@@ -1,11 +1,19 @@
 import { mdiMinus, mdiPlus } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { fireEvent } from "../common/dom/fire_event";
 import { conditionalClamp } from "../common/number/clamp";
 import { formatNumber } from "../common/number/format_number";
+import { blankBeforeUnit } from "../common/translations/blank_before_unit";
 import { FrontendLocaleData } from "../data/translation";
-import { fireEvent } from "../common/dom/fire_event";
 
 const A11Y_KEY_CODES = new Set([
   "ArrowRight",
@@ -34,6 +42,8 @@ export class HaControlNumberButton extends LitElement {
 
   @property({ type: Number }) public max?: number;
 
+  @property() public unit?: string;
+
   @property({ attribute: "false" })
   public formatOptions: Intl.NumberFormatOptions = {};
 
@@ -114,26 +124,28 @@ export class HaControlNumberButton extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const displayedValue =
+    const value =
       this.value != null
         ? formatNumber(this.value, this.locale, this.formatOptions)
         : "";
+    const unit = this.unit ? `${blankBeforeUnit(this.unit)}${this.unit}` : "";
 
     return html`
       <div class="container">
         <div
           id="input"
           class="value"
-          role="number-button"
+          role="spinbutton"
           .tabIndex=${this.disabled ? "-1" : "0"}
           aria-valuenow=${this.value}
+          aria-valuetext=${`${value}${unit}`}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
           aria-label=${ifDefined(this.label)}
           ?disabled=${this.disabled}
           @keydown=${this._handleKeyDown}
         >
-          ${displayedValue}
+          ${value} ${unit ? html`<span class="unit">${unit}</span>` : nothing}
         </div>
         <button
           class="button minus"
@@ -185,6 +197,8 @@ export class HaControlNumberButton extends LitElement {
         position: relative;
         width: 100%;
         height: 100%;
+        container-type: inline-size;
+        container-name: container;
       }
       .value {
         display: flex;
@@ -249,6 +263,14 @@ export class HaControlNumberButton extends LitElement {
       .button.plus {
         right: 0;
       }
+      .unit {
+        white-space: pre;
+      }
+      @container container (max-width: 100px) {
+        .unit {
+          display: none;
+        }
+      }
     `;
   }
 }