20231205.0

demo/src/custom-cards/ha-demo-card.ts

@@ -39,7 +39,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html`<ha-circular-progress
+                  indeterminate
+                ></ha-circular-progress>`
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

gallery/src/pages/components/ha-circular-progress.markdown

@@ -0,0 +1,4 @@
+---
+title: Circular Progress
+subtitle: Can be used to indicate an ongoing task.
+---

gallery/src/pages/components/ha-circular-progress.ts

@@ -0,0 +1,64 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-circular-progress";
+import "@material/web/progress/circular-progress";
+import { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-circular-progress")
+export class DemoHaCircularProgress extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic circular progress">
+        <div class="card-content">
+          <ha-circular-progress indeterminate></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Different circular progress sizes">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            size="tiny"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="small"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="medium"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="large"
+          ></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Circular progress with an aria-label">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            aria-label="Doing something..."
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            .ariaLabel=${"Doing something..."}
+          ></ha-circular-progress></div
+      ></ha-card>`;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-circular-progress": DemoHaCircularProgress;
+  }
+}

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -20,7 +20,7 @@ class HassioAddonConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
     }
     const hasConfiguration =
       (this.addon.options && Object.keys(this.addon.options).length) ||

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -34,7 +34,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
     }
     return html`
       <div class="content">

hassio/src/addon-view/info/hassio-addon-info-tab.ts

@@ -22,7 +22,7 @@ class HassioAddonInfoDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
     }
 
     return html`

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -18,7 +18,9 @@ class HassioAddonLogDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <ha-circular-progress active></ha-circular-progress> `;
+      return html`
+        <ha-circular-progress indeterminate></ha-circular-progress>
+      `;
     }
     return html`
       <div class="content">

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -95,7 +95,7 @@ class HassioBackupDialog
           </ha-header-bar>
         </div>
         ${this._restoringBackup
-          ? html`<ha-circular-progress active></ha-circular-progress>`
+          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
           : html`
               <supervisor-backup-content
                 .hass=${this.hass}

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -57,7 +57,7 @@ class HassioCreateBackupDialog extends LitElement {
         )}
       >
         ${this._creatingBackup
-          ? html`<ha-circular-progress active></ha-circular-progress>`
+          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -71,7 +71,11 @@ class HassioDatadiskDialog extends LitElement {
         ?hideActions=${this.moving}
       >
         ${this.moving
-          ? html` <ha-circular-progress alt="Moving" size="large" active>
+          ? html` <ha-circular-progress
+                aria-label="Moving"
+                size="large"
+                indeterminate
+              >
               </ha-circular-progress>
               <p class="progress-text">
                 ${this.dialogParams.supervisor.localize(

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -155,7 +155,11 @@ export class DialogHassioNetwork
                   .disabled=${this._scanning}
                 >
                   ${this._scanning
-                    ? html`<ha-circular-progress active size="small">
+                    ? html`<ha-circular-progress
+                        aria-label="Scanning"
+                        indeterminate
+                        size="small"
+                      >
                       </ha-circular-progress>`
                     : this.supervisor.localize("dialog.network.scan_ap")}
                 </mwc-button>
@@ -274,7 +278,7 @@ export class DialogHassioNetwork
         </mwc-button>
         <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
-            ? html`<ha-circular-progress active size="small">
+            ? html`<ha-circular-progress indeterminate size="small">
               </ha-circular-progress>`
             : this.supervisor.localize("common.save")}
         </mwc-button>

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -158,7 +158,7 @@ class HassioRepositoriesDialog extends LitElement {
             <mwc-button @click=${this._addRepository}>
               ${this._processing
                 ? html`<ha-circular-progress
-                    active
+                    indeterminate
                     size="small"
                   ></ha-circular-progress>`
                 : this._dialogParams!.supervisor.localize(

hassio/src/update-available/update-available-card.ts

@@ -174,7 +174,11 @@ class UpdateAvailableCard extends LitElement {
                       `
                     : ""}
                 `
-              : html`<ha-circular-progress alt="Updating" size="large" active>
+              : html`<ha-circular-progress
+                    aria-label="Updating"
+                    size="large"
+                    indeterminate
+                  >
                   </ha-circular-progress>
                   <p class="progress-text">
                     ${this.supervisor.localize("update_available.updating", {

package.json

@@ -60,7 +60,6 @@
     "@material/mwc-base": "0.27.0",
     "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
-    "@material/mwc-circular-progress": "0.27.0",
     "@material/mwc-dialog": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-fab": "0.27.0",
@@ -91,8 +90,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.2.4",
-    "@vaadin/vaadin-themable-mixin": "24.2.4",
+    "@vaadin/combo-box": "24.2.5",
+    "@vaadin/vaadin-themable-mixin": "24.2.5",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -120,14 +119,13 @@
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "10.0.0",
+    "marked": "11.0.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
-    "resize-observer-polyfill": "1.5.1",
     "roboto-fontface": "0.10.0",
     "rrule": "2.8.1",
     "sortablejs": "1.15.1",
@@ -194,7 +192,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "chai": "4.3.10",
     "del": "7.1.0",
-    "eslint": "8.54.0",
+    "eslint": "8.55.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.0.0",
@@ -206,7 +204,7 @@
     "eslint-plugin-unused-imports": "3.0.0",
     "eslint-plugin-wc": "2.0.4",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20231204.0"
+version      = "20231205.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/buttons/ha-progress-button.ts

@@ -45,7 +45,7 @@ export class HaProgressButton extends LitElement {
                     ? html`
                         <ha-circular-progress
                           size="small"
-                          active
+                          indeterminate
                         ></ha-circular-progress>
                       `
                     : ""}

src/components/chart/ha-chart-base.ts

@@ -469,13 +469,15 @@ export class HaChartBase extends LitElement {
       .chartTooltip li {
         display: flex;
         white-space: pre-line;
+        word-break: break-word;
         align-items: center;
         line-height: 16px;
         padding: 4px 0;
       }
       .chartTooltip .title {
         text-align: center;
         font-weight: 500;
+        word-break: break-word;
         direction: ltr;
       }
       .chartTooltip .footer {

src/components/ha-circular-progress.ts

@@ -1,54 +1,44 @@
-import { CircularProgress } from "@material/mwc-circular-progress";
-import { CSSResultGroup, css } from "lit";
+import "element-internals-polyfill";
+import { MdCircularProgress } from "@material/web/progress/circular-progress";
+import { CSSResult, PropertyValues, css } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
-// @ts-ignore
-export class HaCircularProgress extends CircularProgress {
-  @property({ type: Boolean })
-  public active = false;
-
-  @property()
-  public alt = "Loading";
-
-  @property()
-  public size: "tiny" | "small" | "medium" | "large" = "medium";
-
-  // @ts-ignore
-  public set density(_) {
-    // just a dummy
-  }
-
-  public get density() {
-    switch (this.size) {
-      case "tiny":
-        return -8;
-      case "small":
-        return -5;
-      case "medium":
-        return 0;
-      case "large":
-        return 5;
-      default:
-        return 0;
+export class HaCircularProgress extends MdCircularProgress {
+  @property({ attribute: "aria-label", type: String }) public ariaLabel =
+    "Loading";
+
+  @property() public size: "tiny" | "small" | "medium" | "large" = "medium";
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (changedProps.has("size")) {
+      switch (this.size) {
+        case "tiny":
+          this.style.setProperty("--md-circular-progress-size", "16px");
+          break;
+        case "small":
+          this.style.setProperty("--md-circular-progress-size", "28px");
+          break;
+        // medium is default size
+        case "medium":
+          this.style.setProperty("--md-circular-progress-size", "48px");
+          break;
+        case "large":
+          this.style.setProperty("--md-circular-progress-size", "68px");
+          break;
+      }
     }
   }
 
-  // @ts-ignore
-  public set indeterminate(_) {
-    // just a dummy
-  }
-
-  public get indeterminate() {
-    return this.active;
-  }
-
-  static get styles(): CSSResultGroup {
+  static get styles(): CSSResult[] {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
-          overflow: hidden;
+          --md-sys-color-primary: var(--primary-color);
+          --md-circular-progress-size: 48px;
         }
       `,
     ];

src/components/ha-control-circular-slider.ts

@@ -618,6 +618,7 @@ export class HaControlCircularSlider extends LitElement {
         --control-circular-slider-high-color: var(
           --control-circular-slider-color
         );
+        --control-circular-slider-interaction-margin: 12px;
         width: 320px;
         display: block;
       }
@@ -633,7 +634,9 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke: transparent;
         stroke-linecap: round;
-        stroke-width: 48px;
+        stroke-width: calc(
+          24px + 2 * var(--control-circular-slider-interaction-margin)
+        );
         cursor: pointer;
       }
       #display {