Improve strategy edit mode

* Fix missing sentence-casing in People settings

* Remove hyphen from "presence detection integration"

.github/copilot-instructions.md

@@ -310,7 +310,11 @@ export class DialogMyFeature
         .heading=${createCloseHeading(this.hass, this._params.title)}
       >
         <!-- Dialog content -->
-        <ha-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
         </ha-button>
         <ha-button @click=${this._submit} slot="primaryAction">

.github/workflows/cast_deployment.yaml

@@ -35,7 +35,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Cast
-        run: yarn run-task build-cast
+        run: ./node_modules/.bin/gulp build-cast
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -70,7 +70,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Cast
-        run: yarn run-task build-cast
+        run: ./node_modules/.bin/gulp build-cast
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/ci.yaml

@@ -35,9 +35,9 @@ jobs:
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
-        run: yarn run-task gen-icons-json build-translations build-locale-data gather-gallery-pages
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.2.3
+        uses: actions/cache@v4.2.4
         with:
           path: |
             node_modules/.cache/prettier
@@ -67,7 +67,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build resources
-        run: yarn run-task gen-icons-json build-translations build-locale-data
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
@@ -85,7 +85,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build Application
-        run: yarn run-task build-app
+        run: ./node_modules/.bin/gulp build-app
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
@@ -109,7 +109,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build Application
-        run: yarn run-task build-hassio
+        run: ./node_modules/.bin/gulp build-hassio
         env:
           IS_TEST: "true"
       - name: Upload bundle stats

.github/workflows/demo_deployment.yaml

@@ -36,7 +36,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Demo
-        run: yarn run-task build-demo
+        run: ./node_modules/.bin/gulp build-demo
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -71,7 +71,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Demo
-        run: yarn run-task build-demo
+        run: ./node_modules/.bin/gulp build-demo
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/design_deployment.yaml

@@ -28,7 +28,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Gallery
-        run: yarn run-task build-gallery
+        run: ./node_modules/.bin/gulp build-gallery
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/design_preview.yaml

@@ -33,7 +33,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Gallery
-        run: yarn run-task build-gallery
+        run: ./node_modules/.bin/gulp build-gallery
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v3.0.0
+        uses: relative-ci/agent-action@v3.0.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2025.03.0
+        uses: home-assistant/wheels@2025.07.0
         with:
           abi: cp313
           tag: musllinux_1_2

CODEOWNERS

@@ -0,0 +1,8 @@
+# People marked here will be automatically requested for a review
+# when the code that they own is touched.
+# https://github.com/blog/2392-introducing-code-owners
+# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+
+# Part of the frontend that mobile developper should review
+src/external_app/ @bgoncal @TimoPtr
+test/external_app/ @bgoncal @TimoPtr

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -1,6 +1,6 @@
 import defineProvider from "@babel/helper-define-polyfill-provider";
 import { join } from "node:path";
-import paths from "../paths";
+import paths from "../paths.cjs";
 
 const POLYFILL_DIR = join(paths.root_dir, "src/resources/polyfills");
 

build-scripts/bundle.cjs

@@ -1,41 +1,42 @@
-import path from "node:path";
-import packageJson from "../package.json" assert { type: "json" };
-import { version } from "./env.ts";
-import paths, { dirname } from "./paths.ts";
+const path = require("path");
+const env = require("./env.cjs");
+const paths = require("./paths.cjs");
+const { dependencies } = require("../package.json");
 
-const dependencies = packageJson.dependencies;
-
-const BABEL_PLUGINS = path.join(dirname, "babel-plugins");
+const BABEL_PLUGINS = path.join(__dirname, "babel-plugins");
 
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
-export const sourceMapURL = () => {
-  const ref = version().endsWith("dev")
+module.exports.sourceMapURL = () => {
+  const ref = env.version().endsWith("dev")
     ? process.env.GITHUB_SHA || "dev"
-    : version();
+    : env.version();
   return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}/`;
 };
 
+// Files from NPM Packages that should not be imported
+module.exports.ignorePackages = () => [];
+
 // Files from NPM packages that we should replace with empty file
-export const emptyPackages = ({ isHassioBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
-    import.meta.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    import.meta.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
-      import.meta.resolve(
+      require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
     isHassioBuild &&
-      import.meta.resolve(
+      require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 
-export const definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
+module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __DEV__: !isProdBuild,
   __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
-  __VERSION__: JSON.stringify(version()),
+  __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
@@ -52,7 +53,7 @@ export const definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
-export const htmlMinifierOptions = {
+module.exports.htmlMinifierOptions = {
   caseSensitive: true,
   collapseWhitespace: true,
   conservativeCollapse: true,
@@ -64,16 +65,16 @@ export const htmlMinifierOptions = {
   },
 };
 
-export const terserOptions = ({ latestBuild, isTestBuild }) => ({
+module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   safari10: !latestBuild,
-  ecma: latestBuild ? (2015 as const) : (5 as const),
+  ecma: latestBuild ? 2015 : 5,
   module: latestBuild,
   format: { comments: false },
   sourceMap: !isTestBuild,
 });
 
 /** @type {import('@rspack/core').SwcLoaderOptions} */
-export const swcOptions = () => ({
+module.exports.swcOptions = () => ({
   jsc: {
     loose: true,
     externalHelpers: true,
@@ -85,16 +86,11 @@ export const swcOptions = () => ({
   },
 });
 
-export const babelOptions = ({
+module.exports.babelOptions = ({
   latestBuild,
   isProdBuild,
   isTestBuild,
   sw,
-}: {
-  latestBuild?: boolean;
-  isProdBuild?: boolean;
-  isTestBuild?: boolean;
-  sw?: boolean;
 }) => ({
   babelrc: false,
   compact: false,
@@ -141,7 +137,7 @@ export const babelOptions = ({
           "@polymer/polymer/lib/utils/html-tag.js": ["html"],
         },
         strictCSS: true,
-        htmlMinifier: htmlMinifierOptions,
+        htmlMinifier: module.exports.htmlMinifierOptions,
         failOnError: false, // we can turn this off in case of false positives
       },
     ],
@@ -164,7 +160,7 @@ export const babelOptions = ({
       // themselves to prevent self-injection.
       plugins: [
         [
-          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.ts"),
+          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
           { method: "usage-global" },
         ],
       ],
@@ -225,20 +221,8 @@ const publicPath = (latestBuild, root = "") =>
   }
   */
 
-export const config = {
-  app({
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-    isTestBuild,
-    isWDS,
-  }: {
-    isProdBuild?: boolean;
-    latestBuild?: boolean;
-    isStatsBuild?: boolean;
-    isTestBuild?: boolean;
-    isWDS?: boolean;
-  }) {
+module.exports.config = {
+  app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
     return {
       name: "frontend" + nameSuffix(latestBuild),
       entry: {
@@ -273,7 +257,7 @@ export const config = {
       outputPath: outputPath(paths.demo_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       defineOverlay: {
-        __VERSION__: JSON.stringify(`DEMO-${version()}`),
+        __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
         __DEMO__: true,
       },
       isProdBuild,
@@ -283,7 +267,7 @@ export const config = {
   },
 
   cast({ isProdBuild, latestBuild }) {
-    const entry: Record<string, string> = {
+    const entry = {
       launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
       media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
     };

build-scripts/env.cjs

@@ -0,0 +1,34 @@
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths.cjs");
+
+const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
+
+module.exports = {
+  isProdBuild() {
+    return (
+      process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
+    );
+  },
+  isStatsBuild() {
+    return isTrue(process.env.STATS);
+  },
+  isTestBuild() {
+    return isTrue(process.env.IS_TEST);
+  },
+  isNetlify() {
+    return isTrue(process.env.NETLIFY);
+  },
+  version() {
+    const version = fs
+      .readFileSync(path.resolve(paths.root_dir, "pyproject.toml"), "utf8")
+      .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
+    if (!version) {
+      throw Error("Version not found");
+    }
+    return version[1];
+  },
+  isDevContainer() {
+    return isTrue(process.env.DEV_CONTAINER);
+  },
+};

build-scripts/env.ts

@@ -1,21 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import paths from "./paths.ts";
-
-const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
-
-export const isProdBuild = () =>
-  process.env.NODE_ENV === "production" || isStatsBuild();
-export const isStatsBuild = () => isTrue(process.env.STATS);
-export const isTestBuild = () => isTrue(process.env.IS_TEST);
-export const isNetlify = () => isTrue(process.env.NETLIFY);
-export const version = () => {
-  const pyProjectVersion = fs
-    .readFileSync(path.resolve(paths.root_dir, "pyproject.toml"), "utf8")
-    .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
-  if (!pyProjectVersion) {
-    throw Error("Version not found");
-  }
-  return pyProjectVersion[1];
-};
-export const isDevContainer = () => isTrue(process.env.DEV_CONTAINER);

build-scripts/gulp/app.js

@@ -0,0 +1,57 @@
+import gulp from "gulp";
+import env from "../env.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./locale-data.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-service-worker-app-dev",
+      "gen-icons-json",
+      "gen-pages-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-app",
+    "rspack-watch-app"
+  )
+);
+
+gulp.task(
+  "build-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-app",
+    "rspack-prod-app",
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
+    // Don't compress running tests
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
+gulp.task(
+  "analyze-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-app"
+  )
+);

build-scripts/gulp/app.ts

@@ -1,54 +0,0 @@
-import { parallel, series } from "gulp";
-import { isStatsBuild, isTestBuild } from "../env.ts";
-import { clean } from "./clean.ts";
-import { compressApp } from "./compress.ts";
-import { genPagesAppDev, genPagesAppProd } from "./entry-html.ts";
-import { copyStaticApp } from "./gather-static.ts";
-import { genIconsJson } from "./gen-icons-json.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackProdApp, rspackWatchApp } from "./rspack.ts";
-import {
-  genServiceWorkerAppDev,
-  genServiceWorkerAppProd,
-} from "./service-worker.ts";
-import { buildTranslations } from "./translations.ts";
-
-// develop-app
-export const developApp = series(
-  async () => {
-    process.env.NODE_ENV = "development";
-  },
-  clean,
-  parallel(
-    genServiceWorkerAppDev,
-    genIconsJson,
-    genPagesAppDev,
-    buildTranslations,
-    buildLocaleData
-  ),
-  copyStaticApp,
-  rspackWatchApp
-);
-
-// build-app
-export const buildApp = series(
-  async () => {
-    process.env.NODE_ENV = "production";
-  },
-  clean,
-  parallel(genIconsJson, buildTranslations, buildLocaleData),
-  copyStaticApp,
-  rspackProdApp,
-  parallel(genPagesAppProd, genServiceWorkerAppProd),
-  // Don't compress running tests
-  ...(isTestBuild() || isStatsBuild() ? [] : [compressApp])
-);
-
-// analyze-app
-export const analyzeApp = series(
-  async () => {
-    process.env.STATS = "1";
-  },
-  clean,
-  rspackProdApp
-);

build-scripts/gulp/cast.js

@@ -0,0 +1,37 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-cast",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-cast",
+    "gen-pages-cast-dev",
+    "rspack-dev-server-cast"
+  )
+);
+
+gulp.task(
+  "build-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-cast",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-cast",
+    "rspack-prod-cast",
+    "gen-pages-cast-prod"
+  )
+);

build-scripts/gulp/cast.ts

@@ -1,38 +0,0 @@
-import { parallel, series } from "gulp";
-import { cleanCast } from "./clean.ts";
-import { genPagesCastDev, genPagesCastProd } from "./entry-html.ts";
-import { copyStaticCast } from "./gather-static.ts";
-import { genIconsJson } from "./gen-icons-json.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackDevServerCast, rspackProdCast } from "./rspack.ts";
-import "./service-worker.ts";
-import {
-  buildTranslations,
-  translationsEnableMergeBackend,
-} from "./translations.ts";
-
-// develop-cast
-export const developCast = series(
-  async () => {
-    process.env.NODE_ENV = "development";
-  },
-  cleanCast,
-  translationsEnableMergeBackend,
-  parallel(genIconsJson, buildTranslations, buildLocaleData),
-  copyStaticCast,
-  genPagesCastDev,
-  rspackDevServerCast
-);
-
-// build-cast
-export const buildCast = series(
-  async () => {
-    process.env.NODE_ENV = "production";
-  },
-  cleanCast,
-  translationsEnableMergeBackend,
-  parallel(genIconsJson, buildTranslations, buildLocaleData),
-  copyStaticCast,
-  rspackProdCast,
-  genPagesCastProd
-);

build-scripts/gulp/clean.js

@@ -0,0 +1,51 @@
+import { deleteSync } from "del";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+import "./translations.js";
+
+gulp.task(
+  "clean",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.app_output_root, paths.build_dir])
+  )
+);
+
+gulp.task(
+  "clean-demo",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.demo_output_root, paths.build_dir])
+  )
+);
+
+gulp.task(
+  "clean-cast",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.cast_output_root, paths.build_dir])
+  )
+);
+
+gulp.task("clean-hassio", async () =>
+  deleteSync([paths.hassio_output_root, paths.build_dir])
+);
+
+gulp.task(
+  "clean-gallery",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([
+      paths.gallery_output_root,
+      paths.gallery_build,
+      paths.build_dir,
+    ])
+  )
+);
+
+gulp.task(
+  "clean-landing-page",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([
+      paths.landingPage_output_root,
+      paths.landingPage_build,
+      paths.build_dir,
+    ])
+  )
+);

build-scripts/gulp/clean.ts

@@ -1,31 +0,0 @@
-import { deleteSync } from "del";
-import { parallel } from "gulp";
-import paths from "../paths.ts";
-import { cleanTranslations } from "./translations.ts";
-
-export const clean = parallel(cleanTranslations, async () =>
-  deleteSync([paths.app_output_root, paths.build_dir])
-);
-
-export const cleanDemo = parallel(cleanTranslations, async () =>
-  deleteSync([paths.demo_output_root, paths.build_dir])
-);
-
-export const cleanCast = parallel(cleanTranslations, async () =>
-  deleteSync([paths.cast_output_root, paths.build_dir])
-);
-
-export const cleanHassio = async () =>
-  deleteSync([paths.hassio_output_root, paths.build_dir]);
-
-export const cleanGallery = parallel(cleanTranslations, async () =>
-  deleteSync([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
-);
-
-export const cleanLandingPage = parallel(cleanTranslations, async () =>
-  deleteSync([
-    paths.landingPage_output_root,
-    paths.landingPage_build,
-    paths.build_dir,
-  ])
-);

build-scripts/gulp/compress.js

@@ -1,10 +1,10 @@
 // Tasks to compress
 
-import { dest, parallel, src } from "gulp";
+import { constants } from "node:zlib";
+import gulp from "gulp";
 import brotli from "gulp-brotli";
 import zopfli from "gulp-zopfli-green";
-import { constants } from "node:zlib";
-import paths from "../paths.ts";
+import paths from "../paths.cjs";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
 const brotliOptions = {
@@ -16,25 +16,27 @@ const brotliOptions = {
 const zopfliOptions = { threshold: 150 };
 
 const compressModern = (rootDir, modernDir, compress) =>
-  src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-    base: rootDir,
-    allowEmpty: true,
-  })
+  gulp
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+      base: rootDir,
+      allowEmpty: true,
+    })
     .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
-    .pipe(dest(rootDir));
+    .pipe(gulp.dest(rootDir));
 
 const compressOther = (rootDir, modernDir, compress) =>
-  src(
-    [
-      `${rootDir}/**/${filesGlob}`,
-      `!${modernDir}/**/${filesGlob}`,
-      `!${rootDir}/{sw-modern,service_worker}.js`,
-      `${rootDir}/{authorize,onboarding}.html`,
-    ],
-    { base: rootDir, allowEmpty: true }
-  )
+  gulp
+    .src(
+      [
+        `${rootDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
+        `!${rootDir}/{sw-modern,service_worker}.js`,
+        `${rootDir}/{authorize,onboarding}.html`,
+      ],
+      { base: rootDir, allowEmpty: true }
+    )
     .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
-    .pipe(dest(rootDir));
+    .pipe(gulp.dest(rootDir));
 
 const compressAppModernBrotli = () =>
   compressModern(paths.app_output_root, paths.app_output_latest, "brotli");
@@ -64,16 +66,21 @@ const compressHassioOtherBrotli = () =>
 const compressHassioOtherZopfli = () =>
   compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
 
-export const compressApp = parallel(
-  compressAppModernBrotli,
-  compressAppOtherBrotli,
-  compressAppModernZopfli,
-  compressAppOtherZopfli
+gulp.task(
+  "compress-app",
+  gulp.parallel(
+    compressAppModernBrotli,
+    compressAppOtherBrotli,
+    compressAppModernZopfli,
+    compressAppOtherZopfli
+  )
 );
-
-export const compressHassio = parallel(
-  compressHassioModernBrotli,
-  compressHassioOtherBrotli,
-  compressHassioModernZopfli,
-  compressHassioOtherZopfli
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
 );

build-scripts/gulp/demo.js

@@ -0,0 +1,54 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-demo",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-demo-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-demo",
+    "rspack-dev-server-demo"
+  )
+);
+
+gulp.task(
+  "build-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    // Cast needs to be backwards compatible and older HA has no translations
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-demo",
+    "rspack-prod-demo",
+    "gen-pages-demo-prod"
+  )
+);
+
+gulp.task(
+  "analyze-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-demo"
+  )
+);

build-scripts/gulp/demo.ts

@@ -1,47 +0,0 @@
-import { parallel, series } from "gulp";
-import { clean, cleanDemo } from "./clean.ts";
-import { genPagesDemoDev, genPagesDemoProd } from "./entry-html.ts";
-import { copyStaticDemo } from "./gather-static.ts";
-import { genIconsJson } from "./gen-icons-json.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackDevServerDemo, rspackProdDemo } from "./rspack.ts";
-import "./service-worker.ts";
-import {
-  buildTranslations,
-  translationsEnableMergeBackend,
-} from "./translations.ts";
-
-// develop-demo
-export const developDemo = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "development";
-  },
-  cleanDemo,
-  translationsEnableMergeBackend,
-  parallel(genIconsJson, genPagesDemoDev, buildTranslations, buildLocaleData),
-  copyStaticDemo,
-  rspackDevServerDemo
-);
-
-// build-demo
-export const buildDemo = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "production";
-  },
-  cleanDemo,
-  // Cast needs to be backwards compatible and older HA has no translations
-  translationsEnableMergeBackend,
-  parallel(genIconsJson, buildTranslations, buildLocaleData),
-  copyStaticDemo,
-  rspackProdDemo,
-  genPagesDemoProd
-);
-
-// analyze-demo
-export const analyzeDemo = series(
-  async function setEnv() {
-    process.env.STATS = "1";
-  },
-  clean,
-  rspackProdDemo
-);

build-scripts/gulp/download-translations.js

@@ -1,10 +1,10 @@
-import { LokaliseApi } from "@lokalise/node-api";
-import { dest, series, src } from "gulp";
-import transform from "gulp-json-transform";
-import JSZip from "jszip";
+import fs from "fs/promises";
+import gulp from "gulp";
+import path from "path";
 import mapStream from "map-stream";
-import fs from "node:fs/promises";
-import path from "node:path";
+import transform from "gulp-json-transform";
+import { LokaliseApi } from "@lokalise/node-api";
+import JSZip from "jszip";
 
 const inDir = "translations";
 const inDirFrontend = `${inDir}/frontend`;
@@ -12,14 +12,11 @@ const inDirBackend = `${inDir}/backend`;
 const srcMeta = "src/translations/translationMetadata.json";
 const encoding = "utf8";
 
-const hasHtml = (data) => /<\S*>/i.test(data);
+function hasHtml(data) {
+  return /<\S*>/i.test(data);
+}
 
-const recursiveCheckHasHtml = (
-  file,
-  data,
-  errors: string[],
-  recKey?: string
-) => {
+function recursiveCheckHasHtml(file, data, errors, recKey) {
   Object.keys(data).forEach(function (key) {
     if (typeof data[key] === "object") {
       const nextRecKey = recKey ? `${recKey}.${key}` : key;
@@ -28,9 +25,9 @@ const recursiveCheckHasHtml = (
       errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
     }
   });
-};
+}
 
-const checkHtml = () => {
+function checkHtml() {
   const errors = [];
 
   return mapStream(function (file, cb) {
@@ -47,9 +44,9 @@ const checkHtml = () => {
     }
     cb(error, file);
   });
-};
+}
 
-const convertBackendTranslationsTransform = (data, _file) => {
+function convertBackendTranslations(data, _file) {
   const output = { component: {} };
   if (!data.component) {
     return output;
@@ -65,22 +62,25 @@ const convertBackendTranslationsTransform = (data, _file) => {
     });
   });
   return output;
-};
+}
 
-const convertBackendTranslations = () =>
-  src([`${inDirBackend}/*.json`])
-    .pipe(
-      transform((data, file) => convertBackendTranslationsTransform(data, file))
-    )
-    .pipe(dest(inDirBackend));
+gulp.task("convert-backend-translations", function () {
+  return gulp
+    .src([`${inDirBackend}/*.json`])
+    .pipe(transform((data, file) => convertBackendTranslations(data, file)))
+    .pipe(gulp.dest(inDirBackend));
+});
 
-const checkTranslationsHtml = () =>
-  src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`]).pipe(checkHtml());
+gulp.task("check-translations-html", function () {
+  return gulp
+    .src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`])
+    .pipe(checkHtml());
+});
 
-const checkAllFilesExist = async () => {
+gulp.task("check-all-files-exist", async function () {
   const file = await fs.readFile(srcMeta, { encoding });
   const meta = JSON.parse(file);
-  const writings: Promise<void>[] = [];
+  const writings = [];
   Object.keys(meta).forEach((lang) => {
     writings.push(
       fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
@@ -92,14 +92,14 @@ const checkAllFilesExist = async () => {
     );
   });
   await Promise.allSettled(writings);
-};
+});
 
 const lokaliseProjects = {
   backend: "130246255a974bd3b5e8a1.51616605",
   frontend: "3420425759f6d6d241f598.13594006",
 };
 
-const fetchLokalise = async () => {
+gulp.task("fetch-lokalise", async function () {
   let apiKey;
   try {
     apiKey =
@@ -168,11 +168,14 @@ const fetchLokalise = async () => {
         })
     )
   );
-};
+});
 
-export const downloadTranslations = series(
-  fetchLokalise,
-  convertBackendTranslations,
-  checkTranslationsHtml,
-  checkAllFilesExist
+gulp.task(
+  "download-translations",
+  gulp.series(
+    "fetch-lokalise",
+    "convert-backend-translations",
+    "check-translations-html",
+    "check-all-files-exist"
+  )
 );

build-scripts/gulp/entry-html.js

@@ -6,11 +6,12 @@ import {
   getPreUserAgentRegexes,
 } from "browserslist-useragent-regexp";
 import fs from "fs-extra";
+import gulp from "gulp";
 import { minify } from "html-minifier-terser";
 import template from "lodash.template";
 import { dirname, extname, resolve } from "node:path";
-import { htmlMinifierOptions, terserOptions } from "../bundle.ts";
-import paths from "../paths.ts";
+import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
+import paths from "../paths.cjs";
 
 // macOS companion app has no way to obtain the Safari version used by WKWebView,
 // and it is not in the default user agent string. So we add an additional regex
@@ -33,9 +34,9 @@ const getCommonTemplateVars = () => {
     mobileToDesktop: true,
     throwOnMissing: true,
   });
-  const minSafariVersion =
-    browserRegexes.find((regex) => regex.family === "safari")
-      ?.matchedVersions[0][0] ?? 18;
+  const minSafariVersion = browserRegexes.find(
+    (regex) => regex.family === "safari"
+  )?.matchedVersions[0][0];
   const minMacOSVersion = SAFARI_TO_MACOS[minSafariVersion];
   if (!minMacOSVersion) {
     throw Error(
@@ -105,10 +106,10 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: (entries as string[]).map(
+          latestEntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
-          es5EntryJS: (entries as string[]).map(
+          es5EntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_es5/${entry}.js`
           ),
           latestCustomPanelJS: `${publicRoot}/frontend_latest/custom-panel.js`,
@@ -127,7 +128,7 @@ const genPagesProdTask =
     inputRoot,
     outputRoot,
     outputLatest,
-    outputES5?: string,
+    outputES5,
     inputSub = "src/html"
   ) =>
   async () => {
@@ -138,18 +139,14 @@ const genPagesProdTask =
       ? fs.readJsonSync(resolve(outputES5, "manifest.json"))
       : {};
     const commonVars = getCommonTemplateVars();
-    const minifiedHTML: Promise<void>[] = [];
+    const minifiedHTML = [];
     for (const [page, entries] of Object.entries(pageEntries)) {
       const content = renderTemplate(
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: (entries as string[]).map(
-            (entry) => latestManifest[`${entry}.js`]
-          ),
-          es5EntryJS: (entries as string[]).map(
-            (entry) => es5Manifest[`${entry}.js`]
-          ),
+          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
+          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
           latestCustomPanelJS: latestManifest["custom-panel.js"],
           es5CustomPanelJS: es5Manifest["custom-panel.js"],
         }
@@ -170,18 +167,20 @@ const APP_PAGE_ENTRIES = {
   "index.html": ["core", "app"],
 };
 
-export const genPagesAppDev = genPagesDevTask(
-  APP_PAGE_ENTRIES,
-  paths.root_dir,
-  paths.app_output_root
+gulp.task(
+  "gen-pages-app-dev",
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.root_dir, paths.app_output_root)
 );
 
-export const genPagesAppProd = genPagesProdTask(
-  APP_PAGE_ENTRIES,
-  paths.root_dir,
-  paths.app_output_root,
-  paths.app_output_latest,
-  paths.app_output_es5
+gulp.task(
+  "gen-pages-app-prod",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.root_dir,
+    paths.app_output_root,
+    paths.app_output_latest,
+    paths.app_output_es5
+  )
 );
 
 const CAST_PAGE_ENTRIES = {
@@ -191,82 +190,104 @@ const CAST_PAGE_ENTRIES = {
   "receiver.html": ["receiver"],
 };
 
-export const genPagesCastDev = genPagesDevTask(
-  CAST_PAGE_ENTRIES,
-  paths.cast_dir,
-  paths.cast_output_root
+gulp.task(
+  "gen-pages-cast-dev",
+  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
 );
 
-export const genPagesCastProd = genPagesProdTask(
-  CAST_PAGE_ENTRIES,
-  paths.cast_dir,
-  paths.cast_output_root,
-  paths.cast_output_latest,
-  paths.cast_output_es5
+gulp.task(
+  "gen-pages-cast-prod",
+  genPagesProdTask(
+    CAST_PAGE_ENTRIES,
+    paths.cast_dir,
+    paths.cast_output_root,
+    paths.cast_output_latest,
+    paths.cast_output_es5
+  )
 );
 
 const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
 
-export const genPagesDemoDev = genPagesDevTask(
-  DEMO_PAGE_ENTRIES,
-  paths.demo_dir,
-  paths.demo_output_root
+gulp.task(
+  "gen-pages-demo-dev",
+  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
 );
 
-export const genPagesDemoProd = genPagesProdTask(
-  DEMO_PAGE_ENTRIES,
-  paths.demo_dir,
-  paths.demo_output_root,
-  paths.demo_output_latest,
-  paths.demo_output_es5
+gulp.task(
+  "gen-pages-demo-prod",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
+    paths.demo_output_latest,
+    paths.demo_output_es5
+  )
 );
 
 const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-export const genPagesGalleryDev = genPagesDevTask(
-  GALLERY_PAGE_ENTRIES,
-  paths.gallery_dir,
-  paths.gallery_output_root
+gulp.task(
+  "gen-pages-gallery-dev",
+  genPagesDevTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root
+  )
 );
 
-export const genPagesGalleryProd = genPagesProdTask(
-  GALLERY_PAGE_ENTRIES,
-  paths.gallery_dir,
-  paths.gallery_output_root,
-  paths.gallery_output_latest
+gulp.task(
+  "gen-pages-gallery-prod",
+  genPagesProdTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root,
+    paths.gallery_output_latest
+  )
 );
 
 const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-export const genPagesLandingPageDev = genPagesDevTask(
-  LANDING_PAGE_PAGE_ENTRIES,
-  paths.landingPage_dir,
-  paths.landingPage_output_root
+gulp.task(
+  "gen-pages-landing-page-dev",
+  genPagesDevTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root
+  )
 );
 
-export const genPagesLandingPageProd = genPagesProdTask(
-  LANDING_PAGE_PAGE_ENTRIES,
-  paths.landingPage_dir,
-  paths.landingPage_output_root,
-  paths.landingPage_output_latest,
-  paths.landingPage_output_es5
+gulp.task(
+  "gen-pages-landing-page-prod",
+  genPagesProdTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root,
+    paths.landingPage_output_latest,
+    paths.landingPage_output_es5
+  )
 );
 
 const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
-export const genPagesHassioDev = genPagesDevTask(
-  HASSIO_PAGE_ENTRIES,
-  paths.hassio_dir,
-  paths.hassio_output_root,
-  "src",
-  paths.hassio_publicPath
+gulp.task(
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    "src",
+    paths.hassio_publicPath
+  )
 );
 
-export const genPagesHassioProd = genPagesProdTask(
-  HASSIO_PAGE_ENTRIES,
-  paths.hassio_dir,
-  paths.hassio_output_root,
-  paths.hassio_output_latest,
-  paths.hassio_output_es5,
-  "src"
+gulp.task(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    paths.hassio_output_es5,
+    "src"
+  )
 );

build-scripts/gulp/fetch-nightly-translations.js

@@ -1,14 +1,14 @@
-// Task to download the latest 00Lokalise translations from the nightly workflow artifacts
+// Task to download the latest Lokalise translations from the nightly workflow artifacts
 
 import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
 import { retry } from "@octokit/plugin-retry";
 import { Octokit } from "@octokit/rest";
 import { deleteAsync } from "del";
-import { series } from "gulp";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import gulp from "gulp";
 import jszip from "jszip";
-import { mkdir, readFile, writeFile } from "node:fs/promises";
-import path from "node:path";
-import process from "node:process";
+import path from "path";
+import process from "process";
 import { extract } from "tar";
 
 const MAX_AGE = 24; // hours
@@ -22,13 +22,12 @@ const TOKEN_FILE = path.posix.join(EXTRACT_DIR, "token.json");
 const ARTIFACT_FILE = path.posix.join(EXTRACT_DIR, "artifact.json");
 
 let allowTokenSetup = false;
-
-export const allowSetupFetchNightlyTranslations = (done) => {
+gulp.task("allow-setup-fetch-nightly-translations", (done) => {
   allowTokenSetup = true;
   done();
-};
+});
 
-export const fetchNightlyTranslations = async () => {
+gulp.task("fetch-nightly-translations", async function () {
   // Skip all when environment flag is set (assumes translations are already in place)
   if (process.env?.SKIP_FETCH_NIGHTLY_TRANSLATIONS) {
     console.log("Skipping fetch due to environment signal");
@@ -55,7 +54,7 @@ export const fetchNightlyTranslations = async () => {
 
   // To store file writing promises
   const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
-  const writings: Promise<void>[] = [];
+  const writings = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
   // otherwise look for a saved user token or generate a new one if none
@@ -88,7 +87,7 @@ export const fetchNightlyTranslations = async () => {
       });
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
-        createExtractDir.then(() =>
+        createExtractDir.then(
           writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
@@ -132,13 +131,13 @@ export const fetchNightlyTranslations = async () => {
     throw Error("Latest nightly workflow run has no translations artifact");
   }
   writings.push(
-    createExtractDir.then(() =>
+    createExtractDir.then(
       writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
     )
   );
 
   // Remove the current translations
-  const deleteCurrent = Promise.all(writings).then(() =>
+  const deleteCurrent = Promise.all(writings).then(
     deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
   );
 
@@ -149,22 +148,24 @@ export const fetchNightlyTranslations = async () => {
     artifact_id: latestArtifact.id,
     archive_format: "zip",
   });
-  // @ts-ignore OctokitResponse<unknown, 302> doesn't allow to check for 200
   if (downloadResponse.status !== 200) {
     throw Error("Failure downloading translations artifact");
   }
 
   // Artifact is a tarball, but GitHub adds it to a zip file
   console.log("Unpacking downloaded translations...");
-  const zip = await jszip.loadAsync(downloadResponse.data as any);
+  const zip = await jszip.loadAsync(downloadResponse.data);
   await deleteCurrent;
   const extractStream = zip.file(/.*/)[0].nodeStream().pipe(extract());
   await new Promise((resolve, reject) => {
     extractStream.on("close", resolve).on("error", reject);
   });
-};
+});
 
-export const setupAndFetchNightlyTranslations = series(
-  allowSetupFetchNightlyTranslations,
-  fetchNightlyTranslations
+gulp.task(
+  "setup-and-fetch-nightly-translations",
+  gulp.series(
+    "allow-setup-fetch-nightly-translations",
+    "fetch-nightly-translations"
+  )
 );

build-scripts/gulp/gallery.js

@@ -1,23 +1,19 @@
+import fs from "fs";
 import { glob } from "glob";
-import { parallel, series, watch } from "gulp";
+import gulp from "gulp";
 import yaml from "js-yaml";
 import { marked } from "marked";
-import fs from "node:fs";
-import path from "node:path";
-import paths from "../paths.ts";
-import { cleanGallery } from "./clean.ts";
-import { genPagesGalleryDev, genPagesGalleryProd } from "./entry-html.ts";
-import { copyStaticGallery } from "./gather-static.ts";
-import { genIconsJson } from "./gen-icons-json.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackDevServerGallery, rspackProdGallery } from "./rspack.ts";
-import {
-  buildTranslations,
-  translationsEnableMergeBackend,
-} from "./translations.ts";
+import path from "path";
+import paths from "../paths.cjs";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./rspack.js";
 
-// gather-gallery-pages
-export const gatherGalleryPages = async function gatherPages() {
+gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
   const files = await glob(path.resolve(pageDir, "**/*"));
 
@@ -26,7 +22,7 @@ export const gatherGalleryPages = async function gatherPages() {
 
   let content = "export const PAGES = {\n";
 
-  const processed = new Set<string>();
+  const processed = new Set();
 
   for (const file of files) {
     if (fs.lstatSync(file).isDirectory()) {
@@ -51,9 +47,7 @@ export const gatherGalleryPages = async function gatherPages() {
 
       if (descriptionContent.startsWith("---")) {
         const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = yaml.load(
-          descriptionContent.substring(3, metadataEnd)
-        ) as any;
+        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
         descriptionContent = descriptionContent
           .substring(metadataEnd + 3)
           .trim();
@@ -63,9 +57,7 @@ export const gatherGalleryPages = async function gatherPages() {
       if (descriptionContent === "") {
         hasDescription = false;
       } else {
-        // eslint-disable-next-line no-await-in-loop
-        descriptionContent = await marked(descriptionContent);
-        descriptionContent = descriptionContent.replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
         fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
         fs.writeFileSync(
           path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -103,10 +95,7 @@ export const gatherGalleryPages = async function gatherPages() {
     pagesToProcess[category].add(page);
   }
 
-  for (const group of Object.values(sidebar) as {
-    category: string;
-    pages?: string[];
-  }[]) {
+  for (const group of Object.values(sidebar)) {
     const toProcess = pagesToProcess[group.category];
     delete pagesToProcess[group.category];
 
@@ -129,7 +118,7 @@ export const gatherGalleryPages = async function gatherPages() {
       group.pages = [];
     }
     for (const page of Array.from(toProcess).sort()) {
-      group.pages.push(page as string);
+      group.pages.push(page);
     }
   }
 
@@ -137,7 +126,7 @@ export const gatherGalleryPages = async function gatherPages() {
     sidebar.push({
       category,
       header: category,
-      pages: Array.from(pages as Set<string>).sort(),
+      pages: Array.from(pages).sort(),
     });
   }
 
@@ -148,48 +137,55 @@ export const gatherGalleryPages = async function gatherPages() {
     content,
     "utf-8"
   );
-};
+});
 
-// develop-gallery
-export const developGallery = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "development";
-  },
-  cleanGallery,
-  translationsEnableMergeBackend,
-  parallel(
-    genIconsJson,
-    buildTranslations,
-    buildLocaleData,
-    gatherGalleryPages
-  ),
-  copyStaticGallery,
-  genPagesGalleryDev,
-  parallel(rspackDevServerGallery, async function watchMarkdownFiles() {
-    watch(
-      [
-        path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
-        path.resolve(paths.gallery_dir, "sidebar.js"),
-      ],
-      series(gatherGalleryPages)
-    );
-  })
+gulp.task(
+  "develop-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-gallery",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gather-gallery-pages"
+    ),
+    "copy-static-gallery",
+    "gen-pages-gallery-dev",
+    gulp.parallel(
+      "rspack-dev-server-gallery",
+      async function watchMarkdownFiles() {
+        gulp.watch(
+          [
+            path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
+            path.resolve(paths.gallery_dir, "sidebar.js"),
+          ],
+          gulp.series("gather-gallery-pages")
+        );
+      }
+    )
+  )
 );
 
-// build-gallery
-export const buildGallery = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "production";
-  },
-  cleanGallery,
-  translationsEnableMergeBackend,
-  parallel(
-    genIconsJson,
-    buildTranslations,
-    buildLocaleData,
-    gatherGalleryPages
-  ),
-  copyStaticGallery,
-  rspackProdGallery,
-  genPagesGalleryProd
+gulp.task(
+  "build-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-gallery",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gather-gallery-pages"
+    ),
+    "copy-static-gallery",
+    "rspack-prod-gallery",
+    "gen-pages-gallery-prod"
+  )
 );

build-scripts/gulp/gather-static.js

@@ -1,8 +1,9 @@
 // Gulp task to gather all static files.
 
 import fs from "fs-extra";
-import path from "node:path";
-import paths from "../paths.ts";
+import gulp from "gulp";
+import path from "path";
+import paths from "../paths.cjs";
 
 const npmPath = (...parts) =>
   path.resolve(paths.root_dir, "node_modules", ...parts);
@@ -16,7 +17,7 @@ const genStaticPath =
   (...parts) =>
     path.resolve(staticDir, ...parts);
 
-const copyTranslations = (staticDir) => {
+function copyTranslations(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
   // Translation output
@@ -24,23 +25,23 @@ const copyTranslations = (staticDir) => {
     polyPath("build/translations/output"),
     staticPath("translations")
   );
-};
+}
 
-const copyLocaleData = (staticDir) => {
+function copyLocaleData(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
   // Locale data output
   fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
-};
+}
 
-const copyMdiIcons = (staticDir) => {
+function copyMdiIcons(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
   // MDI icons output
   fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
-};
+}
 
-const copyPolyfills = (staticDir) => {
+function copyPolyfills(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
   // For custom panels using ES5 builds that don't use Babel 7+
@@ -69,9 +70,9 @@ const copyPolyfills = (staticDir) => {
     npmPath("dialog-polyfill/dialog-polyfill.css"),
     staticPath("polyfills/")
   );
-};
+}
 
-const copyFonts = (staticDir) => {
+function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
   fs.copySync(
@@ -81,14 +82,14 @@ const copyFonts = (staticDir) => {
       filter: (src) => !src.includes(".") || src.endsWith(".woff2"),
     }
   );
-};
+}
 
-const copyQrScannerWorker = (staticDir) => {
+function copyQrScannerWorker(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
-};
+}
 
-const copyMapPanel = (staticDir) => {
+function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("leaflet/dist/leaflet.css"),
@@ -102,38 +103,43 @@ const copyMapPanel = (staticDir) => {
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")
   );
-};
+}
 
-const copyZXingWasm = (staticDir) => {
+function copyZXingWasm(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("zxing-wasm/dist/reader/zxing_reader.wasm"),
     staticPath("js")
   );
-};
+}
 
-export const copyTranslationsApp = async () => {
+gulp.task("copy-locale-data", async () => {
+  const staticDir = paths.app_output_static;
+  copyLocaleData(staticDir);
+});
+
+gulp.task("copy-translations-app", async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
-};
+});
 
-export const copyTranslationsSupervisor = async () => {
+gulp.task("copy-translations-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyTranslations(staticDir);
-};
+});
 
-export const copyTranslationsLandingPage = async () => {
+gulp.task("copy-translations-landing-page", async () => {
   const staticDir = paths.landingPage_output_static;
   copyTranslations(staticDir);
-};
+});
 
-export const copyStaticSupervisor = async () => {
+gulp.task("copy-static-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
   copyFonts(staticDir);
-};
+});
 
-export const copyStaticApp = async () => {
+gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
   fs.copySync(polyPath("public"), paths.app_output_root);
@@ -149,9 +155,9 @@ export const copyStaticApp = async () => {
   // Qr Scanner assets
   copyZXingWasm(staticDir);
   copyQrScannerWorker(staticDir);
-};
+});
 
-export const copyStaticDemo = async () => {
+gulp.task("copy-static-demo", async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
@@ -165,9 +171,9 @@ export const copyStaticDemo = async () => {
   copyTranslations(paths.demo_output_static);
   copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
-};
+});
 
-export const copyStaticCast = async () => {
+gulp.task("copy-static-cast", async () => {
   // Copy app static files
   fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
@@ -178,9 +184,9 @@ export const copyStaticCast = async () => {
   copyTranslations(paths.cast_output_static);
   copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
-};
+});
 
-export const copyStaticGallery = async () => {
+gulp.task("copy-static-gallery", async () => {
   // Copy app static files
   fs.copySync(polyPath("public/static"), paths.gallery_output_static);
   // Copy gallery static files
@@ -194,9 +200,9 @@ export const copyStaticGallery = async () => {
   copyTranslations(paths.gallery_output_static);
   copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
-};
+});
 
-export const copyStaticLandingPage = async () => {
+gulp.task("copy-static-landing-page", async () => {
   // Copy landing-page static files
   fs.copySync(
     path.resolve(paths.landingPage_dir, "public"),
@@ -205,4 +211,4 @@ export const copyStaticLandingPage = async () => {
 
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
-};
+});

build-scripts/gulp/gen-icons-json.js

@@ -1,7 +1,8 @@
-import fs from "node:fs";
-import path from "node:path";
+import fs from "fs";
+import gulp from "gulp";
 import hash from "object-hash";
-import paths from "../paths.ts";
+import path from "path";
+import paths from "../paths.cjs";
 
 const ICON_PACKAGE_PATH = path.resolve("node_modules/@mdi/svg/");
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
@@ -20,7 +21,7 @@ const getMeta = () => {
       encoding,
     });
     return {
-      path: svg.match(/ d="([^"]+)"/)?.[1],
+      path: svg.match(/ d="([^"]+)"/)[1],
       name: icon.name,
       tags: icon.tags,
       aliases: icon.aliases,
@@ -54,14 +55,14 @@ const orderMeta = (meta) => {
 };
 
 const splitBySize = (meta) => {
-  const chunks: any[] = [];
+  const chunks = [];
   const CHUNK_SIZE = 50000;
 
   let curSize = 0;
   let startKey;
-  let icons: any[] = [];
+  let icons = [];
 
-  Object.values(meta).forEach((icon: any) => {
+  Object.values(meta).forEach((icon) => {
     if (startKey === undefined) {
       startKey = icon.name;
     }
@@ -93,10 +94,10 @@ const findDifferentiator = (curString, prevString) => {
       return curString.substring(0, i + 1);
     }
   }
-  throw new Error(`Cannot find differentiator; ${curString}; ${prevString}`);
+  throw new Error("Cannot find differentiator", curString, prevString);
 };
 
-export const genIconsJson = (done) => {
+gulp.task("gen-icons-json", (done) => {
   const meta = getMeta();
 
   const metaAndRemoved = addRemovedMeta(meta);
@@ -105,7 +106,7 @@ export const genIconsJson = (done) => {
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
-  const parts: any[] = [];
+  const parts = [];
 
   let lastEnd;
   split.forEach((chunk) => {
@@ -152,13 +153,13 @@ export const genIconsJson = (done) => {
   );
 
   done();
-};
+});
 
-export const genDummyIconsJson = (done) => {
+gulp.task("gen-dummy-icons-json", (done) => {
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
 
   fs.writeFileSync(path.resolve(OUTPUT_DIR, "iconList.json"), "[]");
   done();
-};
+});

build-scripts/gulp/hassio.js

@@ -0,0 +1,45 @@
+import gulp from "gulp";
+import env from "../env.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "gen-pages-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-watch-hassio"
+  )
+);
+
+gulp.task(
+  "build-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-prod-hassio",
+    "gen-pages-hassio-prod",
+    ...// Don't compress running tests
+    (env.isTestBuild() ? [] : ["compress-hassio"])
+  )
+);

build-scripts/gulp/hassio.ts

@@ -1,45 +0,0 @@
-import { series } from "gulp";
-import { isTestBuild } from "../env.ts";
-import { cleanHassio } from "./clean.ts";
-import { compressHassio } from "./compress.ts";
-import { genPagesHassioDev, genPagesHassioProd } from "./entry-html.ts";
-import {
-  copyStaticSupervisor,
-  copyTranslationsSupervisor,
-} from "./gather-static.ts";
-import { genDummyIconsJson } from "./gen-icons-json.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackProdHassio, rspackWatchHassio } from "./rspack.ts";
-import { buildSupervisorTranslations } from "./translations.ts";
-
-// develop-hassio
-export const developHassio = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "development";
-  },
-  cleanHassio,
-  genDummyIconsJson,
-  genPagesHassioDev,
-  buildSupervisorTranslations,
-  copyTranslationsSupervisor,
-  buildLocaleData,
-  copyStaticSupervisor,
-  rspackWatchHassio
-);
-
-// build-hassio
-export const buildHassio = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "production";
-  },
-  cleanHassio,
-  genDummyIconsJson,
-  buildSupervisorTranslations,
-  copyTranslationsSupervisor,
-  buildLocaleData,
-  copyStaticSupervisor,
-  rspackProdHassio,
-  genPagesHassioProd,
-  ...// Don't compress running tests
-  (isTestBuild() ? [] : [compressHassio])
-);

build-scripts/gulp/index.mjs

@@ -0,0 +1,17 @@
+import "./app.js";
+import "./cast.js";
+import "./clean.js";
+import "./compress.js";
+import "./demo.js";
+import "./download-translations.js";
+import "./entry-html.js";
+import "./fetch-nightly-translations.js";
+import "./gallery.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./hassio.js";
+import "./landing-page.js";
+import "./locale-data.js";
+import "./rspack.js";
+import "./service-worker.js";
+import "./translations.js";

build-scripts/gulp/index.ts

@@ -1,42 +0,0 @@
-import { analyzeApp, buildApp, developApp } from "./app";
-import { buildCast, developCast } from "./cast";
-import { analyzeDemo, buildDemo, developDemo } from "./demo";
-import { downloadTranslations } from "./download-translations";
-import { setupAndFetchNightlyTranslations } from "./fetch-nightly-translations";
-import { buildGallery, developGallery, gatherGalleryPages } from "./gallery";
-import { genIconsJson } from "./gen-icons-json";
-import { buildHassio, developHassio } from "./hassio";
-import { buildLandingPage, developLandingPage } from "./landing-page";
-import { buildLocaleData } from "./locale-data";
-import { buildTranslations } from "./translations";
-
-export default {
-  "develop-app": developApp,
-  "build-app": buildApp,
-  "analyze-app": analyzeApp,
-
-  "develop-cast": developCast,
-  "build-cast": buildCast,
-
-  "develop-demo": developDemo,
-  "build-demo": buildDemo,
-  "analyze-demo": analyzeDemo,
-
-  "develop-gallery": developGallery,
-  "build-gallery": buildGallery,
-  "gather-gallery-pages": gatherGalleryPages,
-
-  "develop-hassio": developHassio,
-  "build-hassio": buildHassio,
-
-  "develop-landing-page": developLandingPage,
-  "build-landing-page": buildLandingPage,
-
-  "setup-and-fetch-nightly-translations": setupAndFetchNightlyTranslations,
-  "download-translations": downloadTranslations,
-  "build-translations": buildTranslations,
-
-  "gen-icons-json": genIconsJson,
-
-  "build-locale-data": buildLocaleData,
-};

build-scripts/gulp/landing-page.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-landing-page",
+    "translations-enable-merge-backend",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "gen-pages-landing-page-dev",
+    "rspack-watch-landing-page"
+  )
+);
+
+gulp.task(
+  "build-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-landing-page",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "rspack-prod-landing-page",
+    "gen-pages-landing-page-prod"
+  )
+);

build-scripts/gulp/landing-page.ts

@@ -1,46 +0,0 @@
-import { series } from "gulp";
-import { cleanLandingPage } from "./clean.ts";
-import "./compress.ts";
-import {
-  genPagesLandingPageDev,
-  genPagesLandingPageProd,
-} from "./entry-html.ts";
-import {
-  copyStaticLandingPage,
-  copyTranslationsLandingPage,
-} from "./gather-static.ts";
-import { buildLocaleData } from "./locale-data.ts";
-import { rspackProdLandingPage, rspackWatchLandingPage } from "./rspack.ts";
-import {
-  buildLandingPageTranslations,
-  translationsEnableMergeBackend,
-} from "./translations.ts";
-
-// develop-landing-page
-export const developLandingPage = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "development";
-  },
-  cleanLandingPage,
-  translationsEnableMergeBackend,
-  buildLandingPageTranslations,
-  copyTranslationsLandingPage,
-  buildLocaleData,
-  copyStaticLandingPage,
-  genPagesLandingPageDev,
-  rspackWatchLandingPage
-);
-
-// build-landing-page
-export const buildLandingPage = series(
-  async function setEnv() {
-    process.env.NODE_ENV = "production";
-  },
-  cleanLandingPage,
-  buildLandingPageTranslations,
-  copyTranslationsLandingPage,
-  buildLocaleData,
-  copyStaticLandingPage,
-  rspackProdLandingPage,
-  genPagesLandingPageProd
-);

build-scripts/gulp/locale-data.js

@@ -1,8 +1,8 @@
 import { deleteSync } from "del";
-import { series } from "gulp";
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import gulp from "gulp";
 import { join, resolve } from "node:path";
-import paths from "../paths.ts";
+import paths from "../paths.cjs";
 
 const formatjsDir = join(paths.root_dir, "node_modules", "@formatjs");
 const outDir = join(paths.build_dir, "locale-data");
@@ -31,7 +31,7 @@ const convertToJSON = async (
       join(formatjsDir, pkg, subDir, `${language}.js`),
       "utf-8"
     );
-  } catch (e: any) {
+  } catch (e) {
     // Ignore if language is missing (i.e. not supported by @formatjs)
     if (e.code === "ENOENT" && skipMissing) {
       console.warn(`Skipped missing data for language ${lang} from ${pkg}`);
@@ -54,16 +54,16 @@ const convertToJSON = async (
   await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
-const cleanLocaleData = async () => deleteSync([outDir]);
+gulp.task("clean-locale-data", async () => deleteSync([outDir]));
 
-const createLocaleData = async () => {
+gulp.task("create-locale-data", async () => {
   const translationMeta = JSON.parse(
     await readFile(
       resolve(paths.translations_src, "translationMetadata.json"),
       "utf-8"
     )
   );
-  const conversions: any[] = [];
+  const conversions = [];
   for (const pkg of Object.keys(INTL_POLYFILLS)) {
     // eslint-disable-next-line no-await-in-loop
     await mkdir(join(outDir, pkg), { recursive: true });
@@ -81,6 +81,9 @@ const createLocaleData = async () => {
     )
   );
   await Promise.all(conversions);
-};
+});
 
-export const buildLocaleData = series(cleanLocaleData, createLocaleData);
+gulp.task(
+  "build-locale-data",
+  gulp.series("clean-locale-data", "create-locale-data")
+);

build-scripts/gulp/rspack.js

@@ -1,13 +1,13 @@
 // Tasks to run rspack.
 
+import fs from "fs";
+import path from "path";
+import log from "fancy-log";
+import gulp from "gulp";
 import rspack from "@rspack/core";
 import { RspackDevServer } from "@rspack/dev-server";
-import log from "fancy-log";
-import { series, watch } from "gulp";
-import fs from "node:fs";
-import path from "node:path";
-import { isDevContainer, isStatsBuild, isTestBuild } from "../env.ts";
-import paths from "../paths.ts";
+import env from "../env.cjs";
+import paths from "../paths.cjs";
 import {
   createAppConfig,
   createCastConfig,
@@ -15,17 +15,7 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
-} from "../rspack.ts";
-import {
-  copyTranslationsApp,
-  copyTranslationsLandingPage,
-  copyTranslationsSupervisor,
-} from "./gather-static.ts";
-import {
-  buildLandingPageTranslations,
-  buildSupervisorTranslations,
-  buildTranslations,
-} from "./translations.ts";
+} from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -39,14 +29,6 @@ const isWsl =
     .toLocaleLowerCase()
     .includes("microsoft");
 
-interface RunDevServer {
-  compiler: any;
-  contentBase: string;
-  port: number;
-  listenHost?: string;
-  proxy?: any;
-}
-
 /**
  * @param {{
  *   compiler: import("@rspack/core").Compiler,
@@ -59,12 +41,12 @@ const runDevServer = async ({
   compiler,
   contentBase,
   port,
-  listenHost,
-  proxy,
-}: RunDevServer) => {
+  listenHost = undefined,
+  proxy = undefined,
+}) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
-    listenHost = isDevContainer() ? "0.0.0.0" : "localhost";
+    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
   }
   const server = new RspackDevServer(
     {
@@ -86,7 +68,7 @@ const runDevServer = async ({
   log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };
 
-const doneHandler = (done?: (value?: unknown) => void) => (err, stats) => {
+const doneHandler = (done) => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -115,46 +97,49 @@ const prodBuild = (conf) =>
     );
   });
 
-export const rspackWatchApp = () => {
+gulp.task("rspack-watch-app", () => {
   // This command will run forever because we don't close compiler
   rspack(
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
   ).watch({ poll: isWsl }, doneHandler());
-  watch(
+  gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    series(buildTranslations, copyTranslationsApp)
+    gulp.series("build-translations", "copy-translations-app")
   );
-};
+});
 
-export const rspackProdApp = () =>
+gulp.task("rspack-prod-app", () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
-      isStatsBuild: isStatsBuild(),
-      isTestBuild: isTestBuild(),
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
-  );
+  )
+);
 
-export const rspackDevServerDemo = () =>
+gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
     compiler: rspack(
       createDemoConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.demo_output_root,
     port: 8090,
-  });
+  })
+);
 
-export const rspackProdDemo = () =>
+gulp.task("rspack-prod-demo", () =>
   prodBuild(
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
-      isStatsBuild: isStatsBuild(),
+      isStatsBuild: env.isStatsBuild(),
     })
-  );
+  )
+);
 
-export const rspackDevServerCast = () =>
+gulp.task("rspack-dev-server-cast", () =>
   runDevServer({
     compiler: rspack(
       createCastConfig({ isProdBuild: false, latestBuild: true })
@@ -163,16 +148,18 @@ export const rspackDevServerCast = () =>
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  });
+  })
+);
 
-export const rspackProdCast = () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
     })
-  );
+  )
+);
 
-export const rspackWatchHassio = () => {
+gulp.task("rspack-watch-hassio", () => {
   // This command will run forever because we don't close compiler
   rspack(
     createHassioConfig({
@@ -181,22 +168,23 @@ export const rspackWatchHassio = () => {
     })
   ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
 
-  watch(
+  gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    series(buildSupervisorTranslations, copyTranslationsSupervisor)
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
   );
-};
+});
 
-export const rspackProdHassio = () =>
+gulp.task("rspack-prod-hassio", () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
-      isStatsBuild: isStatsBuild(),
-      isTestBuild: isTestBuild(),
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
-  );
+  )
+);
 
-export const rspackDevServerGallery = () =>
+gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
     compiler: rspack(
       createGalleryConfig({ isProdBuild: false, latestBuild: true })
@@ -204,17 +192,19 @@ export const rspackDevServerGallery = () =>
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",
-  });
+  })
+);
 
-export const rspackProdGallery = () =>
+gulp.task("rspack-prod-gallery", () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
       latestBuild: true,
     })
-  );
+  )
+);
 
-export const rspackWatchLandingPage = () => {
+gulp.task("rspack-watch-landing-page", () => {
   // This command will run forever because we don't close compiler
   rspack(
     process.env.ES5
@@ -222,17 +212,21 @@ export const rspackWatchLandingPage = () => {
       : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
   ).watch({ poll: isWsl }, doneHandler());
 
-  watch(
+  gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    series(buildLandingPageTranslations, copyTranslationsLandingPage)
+    gulp.series(
+      "build-landing-page-translations",
+      "copy-translations-landing-page"
+    )
   );
-};
+});
 
-export const rspackProdLandingPage = () =>
+gulp.task("rspack-prod-landing-page", () =>
   prodBuild(
     bothBuilds(createLandingPageConfig, {
       isProdBuild: true,
-      isStatsBuild: isStatsBuild(),
-      isTestBuild: isTestBuild(),
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
-  );
+  )
+);

build-scripts/gulp/service-worker.js

@@ -1,10 +1,11 @@
 // Generate service workers
 
 import { deleteAsync } from "del";
+import gulp from "gulp";
 import { mkdir, readFile, symlink, writeFile } from "node:fs/promises";
 import { basename, join, relative } from "node:path";
 import { injectManifest } from "workbox-build";
-import paths from "../paths.ts";
+import paths from "../paths.cjs";
 
 const SW_MAP = {
   [paths.app_output_latest]: "modern",
@@ -22,7 +23,7 @@ self.addEventListener('install', (event) => {
 });
   `.trim() + "\n";
 
-export const genServiceWorkerAppDev = async () => {
+gulp.task("gen-service-worker-app-dev", async () => {
   await mkdir(paths.app_output_root, { recursive: true });
   await Promise.all(
     Object.values(SW_MAP).map((build) =>
@@ -31,9 +32,9 @@ export const genServiceWorkerAppDev = async () => {
       })
     )
   );
-};
+});
 
-export const genServiceWorkerAppProd = () =>
+gulp.task("gen-service-worker-app-prod", () =>
   Promise.all(
     Object.entries(SW_MAP).map(async ([outPath, build]) => {
       const manifest = JSON.parse(
@@ -82,4 +83,5 @@ export const genServiceWorkerAppProd = () =>
         await symlink(basename(swDest), swOld);
       }
     })
-  );
+  )
+);

build-scripts/gulp/translations.js

@@ -2,7 +2,7 @@
 
 import { deleteAsync } from "del";
 import { glob } from "glob";
-import { src as glupSrc, dest as gulpDest, parallel, series } from "gulp";
+import gulp from "gulp";
 import rename from "gulp-rename";
 import merge from "lodash.merge";
 import { createHash } from "node:crypto";
@@ -10,12 +10,9 @@ import { mkdir, readFile } from "node:fs/promises";
 import { basename, join } from "node:path";
 import { PassThrough, Transform } from "node:stream";
 import { finished } from "node:stream/promises";
-import { isProdBuild } from "../env.ts";
-import paths from "../paths.ts";
-import {
-  allowSetupFetchNightlyTranslations,
-  fetchNightlyTranslations,
-} from "./fetch-nightly-translations.ts";
+import env from "../env.cjs";
+import paths from "../paths.cjs";
+import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
@@ -26,20 +23,18 @@ const TEST_LOCALE = "en-x-test";
 
 let mergeBackend = false;
 
-// translations-enable-merge-backend
-export const translationsEnableMergeBackend = parallel(async () => {
-  mergeBackend = true;
-}, allowSetupFetchNightlyTranslations);
+gulp.task(
+  "translations-enable-merge-backend",
+  gulp.parallel(async () => {
+    mergeBackend = true;
+  }, "allow-setup-fetch-nightly-translations")
+);
 
 // Transform stream to apply a function on Vinyl JSON files (buffer mode only).
 // The provided function can either return a new object, or an array of
 // [object, subdirectory] pairs for fragmentizing the JSON.
 class CustomJSON extends Transform {
-  _func: any;
-
-  _reviver: any;
-
-  constructor(func, reviver: any = null) {
+  constructor(func, reviver = null) {
     super({ objectMode: true });
     this._func = func;
     this._reviver = reviver;
@@ -61,17 +56,9 @@ class CustomJSON extends Transform {
 
 // Transform stream to merge Vinyl JSON files (buffer mode only).
 class MergeJSON extends Transform {
-  _objects: any[] = [];
+  _objects = [];
 
-  _stem: any;
-
-  _startObj: any;
-
-  _reviver: any;
-
-  _outFile: any;
-
-  constructor(stem, startObj = {}, reviver: any = null) {
+  constructor(stem, startObj = {}, reviver = null) {
     super({ objectMode: true, allowHalfOpen: false });
     this._stem = stem;
     this._startObj = structuredClone(startObj);
@@ -124,12 +111,11 @@ const testReviver = (_key, value) =>
 const KEY_REFERENCE = /\[%key:([^%]+)%\]/;
 const lokaliseTransform = (data, path, original = data) => {
   const output = {};
-  for (const entry of Object.entries(data)) {
-    const [key, value] = entry as [string, string];
+  for (const [key, value] of Object.entries(data)) {
     if (typeof value === "object") {
       output[key] = lokaliseTransform(value, path, original);
     } else {
-      output[key] = value?.replace(KEY_REFERENCE, (_match, lokalise_key) => {
+      output[key] = value.replace(KEY_REFERENCE, (_match, lokalise_key) => {
         const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
             throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
@@ -146,17 +132,18 @@ const lokaliseTransform = (data, path, original = data) => {
   return output;
 };
 
-export const cleanTranslations = () => deleteAsync([workDir]);
+gulp.task("clean-translations", () => deleteAsync([workDir]));
 
 const makeWorkDir = () => mkdir(workDir, { recursive: true });
 
 const createTestTranslation = () =>
-  isProdBuild()
+  env.isProdBuild()
     ? Promise.resolve()
-    : glupSrc(EN_SRC)
+    : gulp
+        .src(EN_SRC)
         .pipe(new CustomJSON(null, testReviver))
         .pipe(rename(`${TEST_LOCALE}.json`))
-        .pipe(gulpDest(workDir));
+        .pipe(gulp.dest(workDir));
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -168,10 +155,11 @@ const createTestTranslation = () =>
  * the Lokalise update to translations/en.json will not happen immediately.
  */
 const createMasterTranslation = () =>
-  glupSrc([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+  gulp
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
-    .pipe(gulpDest(workDir));
+    .pipe(gulp.dest(workDir));
 
 const FRAGMENTS = ["base"];
 
@@ -198,12 +186,12 @@ const createTranslations = async () => {
   // each locale, then fragmentizes and flattens the data for final output.
   const translationFiles = await glob([
     `${inFrontendDir}/!(en).json`,
-    ...(isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
+    ...(env.isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
   ]);
   const hashStream = new Transform({
     objectMode: true,
     transform: async (file, _, callback) => {
-      const hash = isProdBuild()
+      const hash = env.isProdBuild()
         ? createHash("md5").update(file.contents).digest("hex")
         : "dev";
       HASHES.set(file.stem, hash);
@@ -242,7 +230,7 @@ const createTranslations = async () => {
         })
       )
     )
-    .pipe(gulpDest(outDir));
+    .pipe(gulp.dest(outDir));
 
   // Send the English master downstream first, then for each other locale
   // generate merged JSON data to continue piping. It begins with the master
@@ -252,15 +240,15 @@ const createTranslations = async () => {
   // TODO: This is a naive interpretation of BCP47 that should be improved.
   //       Will be OK for now as long as we don't have anything more complicated
   // than a base translation + region.
-  const masterStream = glupSrc(`${workDir}/en.json`).pipe(
-    new PassThrough({ objectMode: true })
-  );
+  const masterStream = gulp
+    .src(`${workDir}/en.json`)
+    .pipe(new PassThrough({ objectMode: true }));
   masterStream.pipe(hashStream, { end: false });
   const mergesFinished = [finished(masterStream)];
   for (const translationFile of translationFiles) {
     const locale = basename(translationFile, ".json");
     const subtags = locale.split("-");
-    const mergeFiles: string[] = [];
+    const mergeFiles = [];
     for (let i = 1; i <= subtags.length; i++) {
       const lang = subtags.slice(0, i).join("-");
       if (lang === TEST_LOCALE) {
@@ -272,9 +260,9 @@ const createTranslations = async () => {
         }
       }
     }
-    const mergeStream = glupSrc(mergeFiles, { allowEmpty: true }).pipe(
-      new MergeJSON(locale, enMaster, emptyReviver)
-    );
+    const mergeStream = gulp
+      .src(mergeFiles, { allowEmpty: true })
+      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
     mergesFinished.push(finished(mergeStream));
     mergeStream.pipe(hashStream, { end: false });
   }
@@ -287,11 +275,12 @@ const createTranslations = async () => {
 };
 
 const writeTranslationMetaData = () =>
-  glupSrc([`${paths.translations_src}/translationMetadata.json`])
+  gulp
+    .src([`${paths.translations_src}/translationMetadata.json`])
     .pipe(
       new CustomJSON((meta) => {
         // Add the test translation in development.
-        if (!isProdBuild()) {
+        if (!env.isProdBuild()) {
           meta[TEST_LOCALE] = { nativeName: "Translation Test" };
         }
         // Filter out locales without a native name, and add the hashes.
@@ -311,22 +300,28 @@ const writeTranslationMetaData = () =>
         };
       })
     )
-    .pipe(gulpDest(workDir));
+    .pipe(gulp.dest(workDir));
 
-export const buildTranslations = series(
-  parallel(fetchNightlyTranslations, series(cleanTranslations, makeWorkDir)),
-  createTestTranslation,
-  createMasterTranslation,
-  createTranslations,
-  writeTranslationMetaData
+gulp.task(
+  "build-translations",
+  gulp.series(
+    gulp.parallel(
+      "fetch-nightly-translations",
+      gulp.series("clean-translations", makeWorkDir)
+    ),
+    createTestTranslation,
+    createMasterTranslation,
+    createTranslations,
+    writeTranslationMetaData
+  )
 );
 
-export const buildSupervisorTranslations = series(
-  setFragment("supervisor"),
-  buildTranslations
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(setFragment("supervisor"), "build-translations")
 );
 
-export const buildLandingPageTranslations = series(
-  setFragment("landing-page"),
-  buildTranslations
+gulp.task(
+  "build-landing-page-translations",
+  gulp.series(setFragment("landing-page"), "build-translations")
 );

build-scripts/list-plugins-and-polyfills.js

@@ -5,11 +5,10 @@ import { version as babelVersion } from "@babel/core";
 import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
-
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
 // eslint-disable-next-line import/no-relative-packages
 import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
-import { babelOptions } from "./bundle.ts";
+import { babelOptions } from "./bundle.cjs";
 
 const detailsOpen = (heading) =>
   `<details>\n<summary><h4>${heading}</h4></summary>\n`;
@@ -51,12 +50,6 @@ for (const buildType of ["Modern", "Legacy"]) {
   const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
   const presetEnvOpts = babelOpts.presets[0][1];
 
-  if (typeof presetEnvOpts !== "object") {
-    throw new Error(
-      "The first preset in babelOptions is not an object. This is unexpected."
-    );
-  }
-
   // Invoking preset-env in debug mode will log the included plugins
   console.log(detailsOpen(`${buildType} Build Babel Plugins`));
   presetEnv.default(dummyAPI, {

build-scripts/paths.cjs

@@ -0,0 +1,63 @@
+const path = require("path");
+
+module.exports = {
+  root_dir: path.resolve(__dirname, ".."),
+
+  build_dir: path.resolve(__dirname, "../build"),
+  app_output_root: path.resolve(__dirname, "../hass_frontend"),
+  app_output_static: path.resolve(__dirname, "../hass_frontend/static"),
+  app_output_latest: path.resolve(
+    __dirname,
+    "../hass_frontend/frontend_latest"
+  ),
+  app_output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+
+  demo_dir: path.resolve(__dirname, "../demo"),
+  demo_output_root: path.resolve(__dirname, "../demo/dist"),
+  demo_output_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output_latest: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
+
+  cast_dir: path.resolve(__dirname, "../cast"),
+  cast_output_root: path.resolve(__dirname, "../cast/dist"),
+  cast_output_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output_latest: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
+
+  gallery_dir: path.resolve(__dirname, "../gallery"),
+  gallery_build: path.resolve(__dirname, "../gallery/build"),
+  gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output_latest: path.resolve(
+    __dirname,
+    "../gallery/dist/frontend_latest"
+  ),
+  gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
+
+  landingPage_dir: path.resolve(__dirname, "../landing-page"),
+  landingPage_build: path.resolve(__dirname, "../landing-page/build"),
+  landingPage_output_root: path.resolve(__dirname, "../landing-page/dist"),
+  landingPage_output_latest: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_latest"
+  ),
+  landingPage_output_es5: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_es5"
+  ),
+  landingPage_output_static: path.resolve(
+    __dirname,
+    "../landing-page/dist/static"
+  ),
+
+  hassio_dir: path.resolve(__dirname, "../hassio"),
+  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
+  hassio_output_latest: path.resolve(
+    __dirname,
+    "../hassio/build/frontend_latest"
+  ),
+  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
+  hassio_publicPath: "/api/hassio/app",
+
+  translations_src: path.resolve(__dirname, "../src/translations"),
+};

build-scripts/paths.ts

@@ -1,63 +0,0 @@
-import path, { dirname as pathDirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-export const dirname = pathDirname(fileURLToPath(import.meta.url));
-
-export default {
-  root_dir: path.resolve(dirname, ".."),
-
-  build_dir: path.resolve(dirname, "../build"),
-  app_output_root: path.resolve(dirname, "../hass_frontend"),
-  app_output_static: path.resolve(dirname, "../hass_frontend/static"),
-  app_output_latest: path.resolve(dirname, "../hass_frontend/frontend_latest"),
-  app_output_es5: path.resolve(dirname, "../hass_frontend/frontend_es5"),
-
-  demo_dir: path.resolve(dirname, "../demo"),
-  demo_output_root: path.resolve(dirname, "../demo/dist"),
-  demo_output_static: path.resolve(dirname, "../demo/dist/static"),
-  demo_output_latest: path.resolve(dirname, "../demo/dist/frontend_latest"),
-  demo_output_es5: path.resolve(dirname, "../demo/dist/frontend_es5"),
-
-  cast_dir: path.resolve(dirname, "../cast"),
-  cast_output_root: path.resolve(dirname, "../cast/dist"),
-  cast_output_static: path.resolve(dirname, "../cast/dist/static"),
-  cast_output_latest: path.resolve(dirname, "../cast/dist/frontend_latest"),
-  cast_output_es5: path.resolve(dirname, "../cast/dist/frontend_es5"),
-
-  gallery_dir: path.resolve(dirname, "../gallery"),
-  gallery_build: path.resolve(dirname, "../gallery/build"),
-  gallery_output_root: path.resolve(dirname, "../gallery/dist"),
-  gallery_output_latest: path.resolve(
-    dirname,
-    "../gallery/dist/frontend_latest"
-  ),
-  gallery_output_static: path.resolve(dirname, "../gallery/dist/static"),
-
-  landingPage_dir: path.resolve(dirname, "../landing-page"),
-  landingPage_build: path.resolve(dirname, "../landing-page/build"),
-  landingPage_output_root: path.resolve(dirname, "../landing-page/dist"),
-  landingPage_output_latest: path.resolve(
-    dirname,
-    "../landing-page/dist/frontend_latest"
-  ),
-  landingPage_output_es5: path.resolve(
-    dirname,
-    "../landing-page/dist/frontend_es5"
-  ),
-  landingPage_output_static: path.resolve(
-    dirname,
-    "../landing-page/dist/static"
-  ),
-
-  hassio_dir: path.resolve(dirname, "../hassio"),
-  hassio_output_root: path.resolve(dirname, "../hassio/build"),
-  hassio_output_static: path.resolve(dirname, "../hassio/build/static"),
-  hassio_output_latest: path.resolve(
-    dirname,
-    "../hassio/build/frontend_latest"
-  ),
-  hassio_output_es5: path.resolve(dirname, "../hassio/build/frontend_es5"),
-  hassio_publicPath: "/api/hassio/app",
-
-  translations_src: path.resolve(dirname, "../src/translations"),
-};

build-scripts/rspack.cjs

@@ -1,25 +1,20 @@
-import filterStats from "@bundle-stats/plugin-webpack-filter";
-import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
-import { DefinePlugin, NormalModuleReplacementPlugin } from "@rspack/core";
-import { defineConfig } from "@rspack/cli";
-import log from "fancy-log";
-import { existsSync } from "node:fs";
-import path from "node:path";
-import { WebpackManifestPlugin } from "rspack-manifest-plugin";
-import TerserPlugin from "terser-webpack-plugin";
-import { StatsWriterPlugin } from "webpack-stats-plugin";
-// @ts-ignore
-import WebpackBar from "webpackbar/rspack";
-import {
-  babelOptions,
-  config,
-  definedVars,
-  emptyPackages,
-  sourceMapURL,
-  swcOptions,
-  terserOptions,
-} from "./bundle.ts";
-import paths from "./paths.ts";
+const { existsSync } = require("fs");
+const path = require("path");
+const rspack = require("@rspack/core");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const filterStats = require("@bundle-stats/plugin-webpack-filter");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const TerserPlugin = require("terser-webpack-plugin");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
+const log = require("fancy-log");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const WebpackBar = require("webpackbar/rspack");
+const paths = require("./paths.cjs");
+const bundle = require("./bundle.cjs");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -35,7 +30,7 @@ class LogStartCompilePlugin {
   }
 }
 
-export const createRspackConfig = ({
+const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -47,23 +42,12 @@ export const createRspackConfig = ({
   isTestBuild,
   isHassioBuild,
   dontHash,
-}: {
-  name: string;
-  entry: any;
-  outputPath: string;
-  publicPath: string;
-  defineOverlay?: Record<string, any>;
-  isProdBuild?: boolean;
-  latestBuild?: boolean;
-  isStatsBuild?: boolean;
-  isTestBuild?: boolean;
-  isHassioBuild?: boolean;
-  dontHash?: Set<string>;
 }) => {
   if (!dontHash) {
     dontHash = new Set();
   }
-  return defineConfig({
+  const ignorePackages = bundle.ignorePackages({ latestBuild });
+  return {
     name,
     mode: isProdBuild ? "production" : "development",
     target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
@@ -86,7 +70,7 @@ export const createRspackConfig = ({
             {
               loader: "babel-loader",
               options: {
-                ...babelOptions({
+                ...bundle.babelOptions({
                   latestBuild,
                   isProdBuild,
                   isTestBuild,
@@ -98,7 +82,7 @@ export const createRspackConfig = ({
             },
             {
               loader: "builtin:swc-loader",
-              options: swcOptions(),
+              options: bundle.swcOptions(),
             },
           ],
           resolve: {
@@ -119,7 +103,7 @@ export const createRspackConfig = ({
         new TerserPlugin({
           parallel: true,
           extractComments: true,
-          terserOptions: terserOptions({ latestBuild, isTestBuild }),
+          terserOptions: bundle.terserOptions({ latestBuild, isTestBuild }),
         }),
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
@@ -138,7 +122,7 @@ export const createRspackConfig = ({
               !chunk.canBeInitial() &&
               !new RegExp(
                 `^.+-work${latestBuild ? "(?:let|er)" : "let"}$`
-              ).test(chunk?.name || ""),
+              ).test(chunk.name),
       },
     },
     plugins: [
@@ -147,11 +131,44 @@ export const createRspackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      new DefinePlugin(
-        definedVars({ isProdBuild, latestBuild, defineOverlay })
+      new rspack.DefinePlugin(
+        bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
-      new NormalModuleReplacementPlugin(
-        new RegExp(emptyPackages({ isHassioBuild }).join("|")),
+      new rspack.IgnorePlugin({
+        checkResource(resource, context) {
+          // Only use ignore to intercept imports that we don't control
+          // inside node_module dependencies.
+          if (
+            !context.includes("/node_modules/") ||
+            // calling define.amd will call require("!!webpack amd options")
+            resource.startsWith("!!webpack") ||
+            // loaded by webpack dev server but doesn't exist.
+            resource === "webpack/hot" ||
+            resource.startsWith("@swc/helpers")
+          ) {
+            return false;
+          }
+          let fullPath;
+          try {
+            fullPath = resource.startsWith(".")
+              ? path.resolve(context, resource)
+              : require.resolve(resource);
+          } catch (err) {
+            console.error(
+              "Error in Home Assistant ignore plugin",
+              resource,
+              context
+            );
+            throw err;
+          }
+
+          return ignorePackages.some((toIgnorePath) =>
+            fullPath.startsWith(toIgnorePath)
+          );
+        },
+      }),
+      new rspack.NormalModuleReplacementPlugin(
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -167,9 +184,7 @@ export const createRspackConfig = ({
       isProdBuild &&
         isStatsBuild &&
         new RsdoctorRspackPlugin({
-          output: {
-            reportDir: path.join(paths.build_dir, "rsdoctor"),
-          },
+          reportDir: path.join(paths.build_dir, "rsdoctor"),
           features: ["plugins", "bundle"],
           supports: {
             generateTileGraph: true,
@@ -204,9 +219,7 @@ export const createRspackConfig = ({
     output: {
       module: latestBuild,
       filename: ({ chunk }) =>
-        !isProdBuild ||
-        isStatsBuild ||
-        (chunk?.name && dontHash.has(chunk.name))
+        !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
           : "[name].[contenthash].js",
       chunkFilename:
@@ -237,7 +250,7 @@ export const createRspackConfig = ({
                   // dev tools, and they stay happy getting 404s with valid requests.
                   return `/unknown${path.resolve("/", info.resourcePath)}`;
                 }
-                return new URL(info.resourcePath, sourceMapURL()).href;
+                return new URL(info.resourcePath, bundle.sourceMapURL()).href;
               }
             : undefined,
         ])
@@ -247,51 +260,35 @@ export const createRspackConfig = ({
       layers: true,
       outputModule: true,
     },
-  });
+  };
 };
 
-export const createAppConfig = ({
+const createAppConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
   isTestBuild,
-}: {
-  isProdBuild?: boolean;
-  latestBuild?: boolean;
-  isStatsBuild?: boolean;
-  isTestBuild?: boolean;
 }) =>
   createRspackConfig(
-    config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
+    bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
-export const createDemoConfig = ({
-  isProdBuild,
-  latestBuild,
-  isStatsBuild,
-}: {
-  isProdBuild?: boolean;
-  latestBuild?: boolean;
-  isStatsBuild?: boolean;
-}) =>
-  createRspackConfig(config.demo({ isProdBuild, latestBuild, isStatsBuild }));
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+  );
 
-export const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(config.cast({ isProdBuild, latestBuild }));
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-export const createHassioConfig = ({
+const createHassioConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
   isTestBuild,
-}: {
-  isProdBuild?: boolean;
-  latestBuild?: boolean;
-  isStatsBuild?: boolean;
-  isTestBuild?: boolean;
 }) =>
   createRspackConfig(
-    config.hassio({
+    bundle.config.hassio({
       isProdBuild,
       latestBuild,
       isStatsBuild,
@@ -299,8 +296,18 @@ export const createHassioConfig = ({
     })
   );
 
-export const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(config.gallery({ isProdBuild, latestBuild }));
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
-export const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(config.landingPage({ isProdBuild, latestBuild }));
+const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
+
+module.exports = {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
+  createRspackConfig,
+  createLandingPageConfig,
+};

build-scripts/runTask.ts

@@ -1,42 +0,0 @@
-// run-build.ts
-import { series } from "gulp";
-import { availableParallelism } from "node:os";
-import tasks from "./gulp/index.ts";
-
-process.env.UV_THREADPOOL_SIZE = availableParallelism().toString();
-
-const runGulpTask = async (runTasks: string[]) => {
-  try {
-    for (const taskName of runTasks) {
-      if (tasks[taskName] === undefined) {
-        console.error(`Gulp task "${taskName}" does not exist.`);
-        console.log("Available tasks:");
-        Object.keys(tasks).forEach((task) => {
-          console.log(`  - ${task}`);
-        });
-        process.exit(1);
-      }
-    }
-
-    await new Promise((resolve, reject) => {
-      series(...runTasks.map((taskName) => tasks[taskName]))((err?: Error) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve(null);
-        }
-      });
-    });
-
-    process.exit(0);
-  } catch (error: any) {
-    console.error(`Error running Gulp task "${runTasks}":`, error);
-    process.exit(1);
-  }
-};
-
-// Get the task name from command line arguments
-// TODO arg validation
-const tasksToRun = process.argv.slice(2);
-
-runGulpTask(tasksToRun);

cast/script/build_cast

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task build-cast
+./node_modules/.bin/gulp build-cast

cast/script/develop_cast

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task develop-cast
+./node_modules/.bin/gulp develop-cast

cast/src/launcher/layout/hc-cast.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
@@ -20,6 +18,7 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -63,12 +62,20 @@ class HcCast extends LitElement {
               <p class="question action-item">
                 Stay logged in?
                 <span>
-                  <mwc-button @click=${this._handleSaveTokens}>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSaveTokens}
+                  >
                     YES
-                  </mwc-button>
-                  <mwc-button @click=${this._handleSkipSaveTokens}>
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSkipSaveTokens}
+                  >
                     NO
-                  </mwc-button>
+                  </ha-button>
                 </span>
               </p>
             `
@@ -78,10 +85,10 @@ class HcCast extends LitElement {
           : !this.castManager.status
             ? html`
                 <p class="center-item">
-                  <mwc-button raised @click=${this._handleLaunch}>
-                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                  <ha-button @click=${this._handleLaunch}>
+                    <ha-svg-icon slot="start" .path=${mdiCast}></ha-svg-icon>
                     Start Casting
-                  </mwc-button>
+                  </ha-button>
                 </p>
               `
             : html`
@@ -121,14 +128,22 @@ class HcCast extends LitElement {
         <div class="card-actions">
           ${this.castManager.status
             ? html`
-                <mwc-button @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
+                <ha-button appearance="plain" @click=${this._handleLaunch}>
+                  <ha-svg-icon
+                    slot="start"
+                    .path=${mdiCastConnected}
+                  ></ha-svg-icon>
                   Manage
-                </mwc-button>
+                </ha-button>
               `
             : ""}
           <div class="spacer"></div>
-          <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+          <ha-button
+            variant="danger"
+            appearance="plain"
+            @click=${this._handleLogout}
+            >Log out</ha-button
+          >
         </div>
       </hc-layout>
     `;
@@ -245,13 +260,6 @@ class HcCast extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    mwc-button ha-svg-icon {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-      height: 18px;
-    }
-
     ha-list-item ha-icon,
     ha-list-item ha-svg-icon {
       padding: 12px;

cast/src/launcher/layout/hc-connect.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
 import type {
   Auth,
@@ -28,6 +27,7 @@ import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
 import "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-button";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -83,11 +83,14 @@ export class HcConnect extends LitElement {
             Unable to connect to ${tokens!.hassUrl}.
           </div>
           <div class="card-actions">
-            <a href="/">
-              <mwc-button> Retry </mwc-button>
-            </a>
+            <ha-button appearance="plain" href="/">Retry</ha-button>
             <div class="spacer"></div>
-            <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+            <ha-button
+              appearance="plain"
+              variant="danger"
+              @click=${this._handleLogout}
+              >Log out</ha-button
+            >
           </div>
         </hc-layout>
       `;
@@ -128,16 +131,19 @@ export class HcConnect extends LitElement {
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
-            <mwc-button @click=${this._handleDemo}>
+            <ha-button appearance="plain" @click=${this._handleDemo}>
               Show Demo
               <ha-svg-icon
+                slot="end"
                 .path=${this.castManager.castState === "CONNECTED"
                   ? mdiCastConnected
                   : mdiCast}
               ></ha-svg-icon>
-            </mwc-button>
+            </ha-button>
             <div class="spacer"></div>
-            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
+            <ha-button appearance="plain" @click=${this._handleConnect}
+              >Authorize</ha-button
+            >
           </div>
         </hc-layout>
       `;
@@ -309,10 +315,6 @@ export class HcConnect extends LitElement {
       color: darkred;
     }
 
-    mwc-button ha-svg-icon {
-      margin-left: 8px;
-    }
-
     .spacer {
       flex: 1;
     }

demo/script/build_demo

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task build-demo
+./node_modules/.bin/gulp build-demo

demo/script/develop_demo

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task develop-demo
+./node_modules/.bin/gulp develop-demo

demo/script/size_stats

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task analyze-demo
+./node_modules/.bin/gulp analyze-demo

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

@@ -89,11 +89,14 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           )}
         </div>
         <div class="actions small-hidden">
-          <a href="https://www.home-assistant.io" target="_blank">
-            <ha-button>
-              ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
-            </ha-button>
-          </a>
+          <ha-button
+            appearance="plain"
+            size="small"
+            href="https://www.home-assistant.io"
+            target="_blank"
+          >
+            ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
+          </ha-button>
         </div>
       </ha-card>
     `;

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
         padding-top: 48px;
       }
       .ohf-logo {
-        margin: max(var(--safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;

eslint.config.mjs

@@ -56,6 +56,15 @@ export default tseslint.config(
         },
       },
     },
+
+    settings: {
+      "import/resolver": {
+        webpack: {
+          config: "./rspack.config.cjs",
+        },
+      },
+    },
+
     rules: {
       "class-methods-use-this": "off",
       "new-cap": "off",
@@ -178,12 +187,5 @@ export default tseslint.config(
       ],
       "no-use-before-define": "off",
     },
-    settings: {
-      "import/resolver": {
-        node: {
-          extensions: [".ts", ".js"],
-        },
-      },
-    },
   }
 );

gallery/script/build_gallery

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task build-gallery
+./node_modules/.bin/gulp build-gallery

gallery/script/develop_gallery

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task develop-gallery
+./node_modules/.bin/gulp develop-gallery

gallery/src/components/demo-black-white-row.ts

@@ -1,11 +1,11 @@
-import "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
+import type { HaButton } from "../../../src/components/ha-button";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
@@ -25,12 +25,9 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="light"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
                 Submit
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
         </div>
@@ -40,12 +37,9 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="dark"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
                 Submit
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
           ${this.value
@@ -74,7 +68,7 @@ class DemoBlackWhiteRow extends LitElement {
   }
 
   handleSubmit(ev) {
-    const content = (ev.target as Button).closest(".content")!;
+    const content = (ev.target as HaButton).closest(".content")!;
     fireEvent(this, "submitted" as any, {
       slot: content.classList.contains("light") ? "light" : "dark",
     });

gallery/src/pages/components/ha-alert.markdown

@@ -147,13 +147,13 @@ The `title ` option should not be used without a description.
 
 <ha-alert alert-type="success">
   This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action">Undo</ha-button>
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success">
   This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action">Undo</ha-button>
 </ha-alert>
 ```
 

gallery/src/pages/components/ha-alert.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-logo-svg";
 
 const alerts: {
@@ -78,13 +78,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
+    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
   },
   {
     title: "Slotted icon",
@@ -108,7 +108,7 @@ const alerts: {
     title: "Slotted action",
     description: "Alert with slotted action",
     type: "info",
-    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action">action</ha-button>`,
   },
   {
     description: "Dismissable information (RTL)",
@@ -120,7 +120,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action">restart</ha-button>`,
     rtl: true,
   },
   {
@@ -211,7 +211,7 @@ export class DemoHaAlert extends LitElement {
       max-height: 24px;
       width: 24px;
     }
-    mwc-button {
+    ha-button {
       --mdc-theme-primary: var(--primary-text-color);
     }
   `;

gallery/src/pages/components/ha-button.markdown

@@ -0,0 +1,67 @@
+---
+title: Button
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Button `<ha-button>`
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-button>
+    simple button
+  </ha-button>
+  <ha-button appearance="plain">
+    plain button
+  </ha-button>
+  <ha-button appearance="filled">
+    filled button
+  </ha-button>
+
+  <ha-button size="small">
+    small
+  </ha-button>
+</div>
+
+```html
+<ha-button> simple button </ha-button>
+
+<ha-button size="small"> small </ha-button>
+```
+
+### API
+
+This component is based on the webawesome button component.
+Check the [webawesome documentation](https://webawesome.com/docs/components/button/) for more details.
+
+**Slots**
+
+- default slot: Label of the button
+  ` - no default
+- `start`: The prefix container (usually for icons).
+  ` - no default
+- `end`: The suffix container (usually for icons).
+  ` - no default
+
+**Properties/Attributes**
+
+| Name       | Type                                           | Default  | Description                                                                       |
+| ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
+| appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
+| variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
+| size       | "small"/"medium"                               | "medium" | Sets the button size.                                                             |
+| loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
+| disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
+
+**CSS Custom Properties**
+
+- `--ha-button-height` - Height of the button.
+- `--ha-button-border-radius` - Border radius of the button. Defaults to `var(--ha-border-radius-pill)`.

gallery/src/pages/components/ha-button.ts

@@ -0,0 +1,171 @@
+import { mdiHome } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { titleCase } from "../../../../src/common/string/title-case";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+const appearances = ["accent", "filled", "plain"];
+const variants = ["brand", "danger", "neutral", "warning", "success"];
+
+@customElement("demo-components-ha-button")
+export class DemoHaButton extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-button in ${mode}">
+              <div class="card-content">
+                ${variants.map(
+                  (variant) => html`
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                          >
+                            <ha-svg-icon
+                              .path=${mdiHomeAssistant}
+                              slot="start"
+                            ></ha-svg-icon>
+                            ${titleCase(`${variant} ${appearance}`)}
+                            <ha-svg-icon
+                              .path=${mdiHome}
+                              slot="end"
+                            ></ha-svg-icon>
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            size="small"
+                          >
+                            ${titleCase(`${variant} ${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            loading
+                          >
+                            <ha-svg-icon
+                              .path=${mdiHomeAssistant}
+                              slot="start"
+                            ></ha-svg-icon>
+                            ${titleCase(`${variant} ${appearance}`)}
+                            <ha-svg-icon
+                              .path=${mdiHome}
+                              slot="end"
+                            ></ha-svg-icon>
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                  `
+                )}
+                ${variants.map(
+                  (variant) => html`
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .variant=${variant}
+                            .appearance=${appearance}
+                            disabled
+                          >
+                            ${titleCase(`${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .variant=${variant}
+                            .appearance=${appearance}
+                            size="small"
+                            disabled
+                          >
+                            ${titleCase(`${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    .button {
+      padding: unset;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .card-content div {
+      display: flex;
+      gap: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-button": DemoHaButton;
+  }
+}

gallery/src/pages/components/ha-form.ts

@@ -1,5 +1,4 @@
 /* eslint-disable lit/no-template-arrow */
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";

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

@@ -0,0 +1,32 @@
+---
+title: Progress Button
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Progress Button `<ha-progress-button>`
+
+### API
+
+This component is a wrapper around `<ha-button>` that adds support for showing progress
+
+**Slots**
+
+- default slot: Label of the button
+  ` - no default
+
+**Properties/Attributes**
+
+| Name       | Type                                           | Default   | Description                                        |
+| ---------- | ---------------------------------------------- | --------- | -------------------------------------------------- |
+| label      | string                                         | "accent"  | Sets the button label.                             |
+| disabled   | Boolean                                        | false     | Disables the button if true.                       |
+| progress   | Boolean                                        | false     | Shows a progress indicator on the button.          |
+| appearance | "accent"/"filled"/"plain"                      | "accent"  | Sets the button appearance.                        |
+| variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"   | Sets the button color variant. "brand" is default. |
+| iconPath   | string                                         | undefined | Sets the icon path for the button.                 |

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

@@ -0,0 +1,139 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+@customElement("demo-components-ha-progress-button")
+export class DemoHaProgressButton extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-progress-button in ${mode}">
+              <div class="card-content">
+                <ha-progress-button @click=${this._clickedSuccess}>
+                  Success
+                </ha-progress-button>
+                <ha-progress-button @click=${this._clickedFail}>
+                  Fail
+                </ha-progress-button>
+                <ha-progress-button size="small" @click=${this._clickedSuccess}>
+                  small
+                </ha-progress-button>
+                <ha-progress-button
+                  appearance="filled"
+                  @click=${this._clickedSuccess}
+                >
+                  filled
+                </ha-progress-button>
+                <ha-progress-button
+                  appearance="plain"
+                  @click=${this._clickedSuccess}
+                >
+                  plain
+                </ha-progress-button>
+                <ha-progress-button
+                  variant="warning"
+                  @click=${this._clickedSuccess}
+                >
+                  warning
+                </ha-progress-button>
+                <ha-progress-button
+                  variant="neutral"
+                  @click=${this._clickedSuccess}
+                  label="with icon"
+                  .iconPath=${mdiHomeAssistant}
+                >
+                  With Icon
+                </ha-progress-button>
+                <ha-progress-button progress @click=${this._clickedSuccess}>
+                  progress
+                </ha-progress-button>
+                <ha-progress-button disabled @click=${this._clickedSuccess}>
+                  disabled
+                </ha-progress-button>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  private async _clickedSuccess(ev: CustomEvent): Promise<void> {
+    console.log("Clicked success");
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    setTimeout(() => {
+      button.actionSuccess();
+      button.progress = false;
+    }, 1000);
+  }
+
+  private async _clickedFail(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    setTimeout(() => {
+      button.actionError();
+      button.progress = false;
+    }, 1000);
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    .button {
+      padding: unset;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .card-content div {
+      display: flex;
+      gap: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-progress-button": DemoHaProgressButton;
+  }
+}

gallery/src/pages/components/ha-selector.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";

gallery/src/pages/lovelace/tile-card.ts

@@ -11,6 +11,7 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
+import { FanEntityFeature } from "../../../../src/data/fan";
 
 const ENTITIES = [
   getEntity("switch", "tv_outlet", "on", {
@@ -100,6 +101,12 @@ const ENTITIES = [
       ClimateEntityFeature.FAN_MODE +
       ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
   }),
+  getEntity("fan", "fan_direction", "on", {
+    friendly_name: "Ceiling fan",
+    device_class: "fan",
+    direction: "reverse",
+    supported_features: [FanEntityFeature.DIRECTION],
+  }),
 ];
 
 const CONFIGS = [
@@ -261,6 +268,15 @@ const CONFIGS = [
   - type: target-temperature
     `,
   },
+  {
+    heading: "Fan direction feature",
+    config: `
+- type: tile
+  entity: fan.fan_direction
+  features:
+  - type: fan-direction
+    `,
+  },
 ];
 
 @customElement("demo-lovelace-tile-card")

gallery/src/pages/misc/util-long-press.ts

@@ -1,7 +1,7 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
@@ -13,12 +13,16 @@ export class DemoUtilLongPress extends LitElement {
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
-            <mwc-button
+            <ha-button
+              appearance="plain"
               @action=${this._handleAction}
-              .actionHandler=${actionHandler({})}
+              .actionHandler=${actionHandler({
+                hasHold: true,
+                hasDoubleClick: true,
+              })}
             >
               (long) press me!
-            </mwc-button>
+            </ha-button>
 
             <textarea></textarea>
 

gulpfile.js

@@ -0,0 +1,4 @@
+import { availableParallelism } from "node:os";
+import "./build-scripts/gulp/index.mjs";
+
+process.env.UV_THREADPOOL_SIZE = availableParallelism();

hassio/script/build_hassio

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task build-hassio
+./node_modules/.bin/gulp build-hassio

hassio/script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task develop-hassio
+./node_modules/.bin/gulp develop-hassio

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

@@ -99,7 +99,8 @@ class HassioAddonNetwork extends LitElement {
           : nothing}
         <div class="card-actions">
           <ha-progress-button
-            class="warning"
+            variant="danger"
+            appearance="plain"
             .disabled=${this.disabled}
             @click=${this._resetTapped}
           >

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

@@ -25,6 +25,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
@@ -187,12 +188,13 @@ class HassioAddonInfo extends LitElement {
                 "addon.dashboard.protection_mode.content"
               )}
               <ha-button
+                variant="danger"
                 slot="action"
-                .label=${this.supervisor.localize(
-                  "addon.dashboard.protection_mode.enable"
-                )}
                 @click=${this._protectionToggled}
               >
+                ${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
               </ha-button>
             </ha-alert>
           `
@@ -692,14 +694,16 @@ class HassioAddonInfo extends LitElement {
               ? this._computeIsRunning
                 ? html`
                     <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                       @click=${this._stopClicked}
                       .disabled=${systemManaged && !this.controlEnabled}
                     >
                       ${this.supervisor.localize("addon.dashboard.stop")}
                     </ha-progress-button>
                     <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                       @click=${this._restartClicked}
                     >
                       ${this.supervisor.localize("addon.dashboard.restart")}
@@ -709,48 +713,19 @@ class HassioAddonInfo extends LitElement {
                     <ha-progress-button
                       @click=${this._startClicked}
                       .progress=${this.addon.state === "startup"}
+                      appearance="plain"
                     >
                       ${this.supervisor.localize("addon.dashboard.start")}
                     </ha-progress-button>
                   `
-              : html`
-                  <ha-progress-button
-                    .disabled=${!this.addon.available}
-                    @click=${this._installClicked}
-                  >
-                    ${this.supervisor.localize("addon.dashboard.install")}
-                  </ha-progress-button>
-                `}
+              : nothing}
           </div>
           <div>
             ${this.addon.version
-              ? html` ${this._computeShowWebUI
-                    ? html`
-                        <a
-                          href=${this._pathWebui!}
-                          tabindex="-1"
-                          target="_blank"
-                          rel="noopener"
-                        >
-                          <ha-button>
-                            ${this.supervisor.localize(
-                              "addon.dashboard.open_web_ui"
-                            )}
-                          </ha-button>
-                        </a>
-                      `
-                    : nothing}
-                  ${this._computeShowIngressUI
-                    ? html`
-                        <ha-button @click=${this._openIngress}>
-                          ${this.supervisor.localize(
-                            "addon.dashboard.open_web_ui"
-                          )}
-                        </ha-button>
-                      `
-                    : nothing}
+              ? html`
                   <ha-progress-button
-                    class="warning"
+                    variant="danger"
+                    appearance="plain"
                     @click=${this._uninstallClicked}
                     .disabled=${systemManaged && !this.controlEnabled}
                   >
@@ -759,14 +734,47 @@ class HassioAddonInfo extends LitElement {
                   ${this.addon.build
                     ? html`
                         <ha-progress-button
-                          class="warning"
+                          variant="danger"
+                          appearance="plain"
                           @click=${this._rebuildClicked}
                         >
                           ${this.supervisor.localize("addon.dashboard.rebuild")}
                         </ha-progress-button>
                       `
-                    : nothing}`
-              : nothing}
+                    : nothing}
+                  ${this._computeShowWebUI || this._computeShowIngressUI
+                    ? html`
+                        <ha-button
+                          href=${ifDefined(
+                            !this._computeShowIngressUI
+                              ? this._pathWebui!
+                              : nothing
+                          )}
+                          target=${ifDefined(
+                            !this._computeShowIngressUI ? "_blank" : nothing
+                          )}
+                          rel=${ifDefined(
+                            !this._computeShowIngressUI ? "noopener" : nothing
+                          )}
+                          @click=${!this._computeShowWebUI
+                            ? this._openIngress
+                            : undefined}
+                        >
+                          ${this.supervisor.localize(
+                            "addon.dashboard.open_web_ui"
+                          )}
+                        </ha-button>
+                      `
+                    : nothing}
+                `
+              : html`
+                  <ha-progress-button
+                    .disabled=${!this.addon.available}
+                    @click=${this._installClicked}
+                  >
+                    ${this.supervisor.localize("addon.dashboard.install")}
+                  </ha-progress-button>
+                `}
           </div>
         </div>
       </ha-card>
@@ -1146,15 +1154,17 @@ class HassioAddonInfo extends LitElement {
           ),
           dismissText: this.supervisor.localize("common.cancel"),
         });
+        button.actionError();
         button.progress = false;
         return;
       }
     } catch (err: any) {
+      button.actionError();
+      button.progress = false;
       showAlertDialog(this, {
         title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
       });
-      button.progress = false;
       return;
     }
 
@@ -1168,11 +1178,15 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
+      button.actionError();
+      button.progress = false;
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
       });
+      return;
     }
+    button.actionSuccess();
     button.progress = false;
   }
 
@@ -1228,6 +1242,7 @@ class HassioAddonInfo extends LitElement {
         path: "uninstall",
       };
       fireEvent(this, "hass-api-called", eventdata);
+      button.actionSuccess();
     } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
@@ -1235,6 +1250,7 @@ class HassioAddonInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
+      button.actionError();
     }
     button.progress = false;
   }

hassio/src/addon-view/info/hassio-addon-system-managed.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";

hassio/src/backups/hassio-backups.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
 
 import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
@@ -17,6 +16,7 @@ import type {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-svg-icon";
@@ -241,12 +241,13 @@ export class HassioBackups extends LitElement {
               <div class="header-btns">
                 ${!this.narrow
                   ? html`
-                      <mwc-button
+                      <ha-button
+                        appearance="plain"
+                        variant="danger"
                         @click=${this._deleteSelected}
-                        class="warning"
                       >
                         ${this.supervisor.localize("backup.delete_selected")}
-                      </mwc-button>
+                      </ha-button>
                     `
                   : html`
                       <ha-icon-button
@@ -408,7 +409,7 @@ export class HassioBackups extends LitElement {
           margin-inline-end: -12px;
           margin-inline-start: initial;
         }
-        .header-btns > mwc-button,
+        .header-btns > ha-button,
         .header-btns > ha-icon-button {
           margin: 8px;
         }

hassio/src/dashboard/hassio-update.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import type { HassioHassOSInfo } from "../../../src/data/hassio/host";
@@ -109,10 +108,9 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href="/hassio/update-available/${key}">
-            <mwc-button .label=${this.supervisor.localize("common.show")}>
-            </mwc-button>
-          </a>
+          <ha-button appearance="plain" href="/hassio/update-available/${key}">
+            ${this.supervisor.localize("common.show")}
+          </ha-button>
         </div>
       </ha-card>
     `;

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

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -77,20 +77,21 @@ class HassioBackupLocationDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
-        <mwc-button
+        <ha-button
+          appearance="plain"
           slot="secondaryAction"
           @click=${this.closeDialog}
           dialogInitialFocus
         >
           ${this._dialogParams.supervisor.localize("common.cancel")}
-        </mwc-button>
-        <mwc-button
+        </ha-button>
+        <ha-button
           .disabled=${this._waiting || !this._data}
           slot="primaryAction"
           @click=${this._changeMount}
         >
           ${this._dialogParams.supervisor.localize("common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

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

@@ -8,7 +8,6 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";

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

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
@@ -69,16 +68,20 @@ class HassioCreateBackupDialog extends LitElement {
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
           ${this._dialogParams.supervisor.localize("common.close")}
-        </mwc-button>
-        <mwc-button
+        </ha-button>
+        <ha-button
           .disabled=${this._creatingBackup}
           slot="primaryAction"
           @click=${this._createBackup}
         >
           ${this._dialogParams.supervisor.localize("backup.create")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-spinner";
@@ -20,8 +21,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import type { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";
 
 const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
-  const speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / speed;
+  // Assume a speed of 30 MB/s.
+  const moveTime = (supervisor.host.disk_used * 1000) / 60 / 30;
   const rebootTime = (supervisor.host.startup_time * 4) / 60;
   return Math.ceil((moveTime + rebootTime) / 10) * 10;
 });
@@ -109,17 +110,18 @@ class HassioDatadiskDialog extends LitElement {
                       "dialog.datadisk_move.no_devices"
                     )}
 
-              <mwc-button
-                slot="secondaryAction"
+              <ha-button
+                appearance="plain"
+                slot="primaryAction"
                 @click=${this.closeDialog}
                 dialogInitialFocus
               >
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.cancel"
                 )}
-              </mwc-button>
+              </ha-button>
 
-              <mwc-button
+              <ha-button
                 .disabled=${!this.selectedDevice}
                 slot="primaryAction"
                 @click=${this._moveDatadisk}
@@ -127,7 +129,7 @@ class HassioDatadiskDialog extends LitElement {
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.move"
                 )}
-              </mwc-button>`}
+              </ha-button>`}
       </ha-dialog>
     `;
   }

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -15,7 +15,6 @@ import "../../../../src/components/ha-list";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -154,16 +153,16 @@ export class DialogHassioNetwork
                       )}
                     </p>`
                   : ""}
-                <mwc-button
+                <ha-button
+                  appearance="plain"
+                  size="small"
                   class="scan"
                   @click=${this._scanForAP}
                   .disabled=${this._scanning}
+                  .loading=${this._scanning}
                 >
-                  ${this._scanning
-                    ? html`<ha-spinner aria-label="Scanning" size="small">
-                      </ha-spinner>`
-                    : this.supervisor.localize("dialog.network.scan_ap")}
-                </mwc-button>
+                  ${this.supervisor.localize("dialog.network.scan_ap")}
+                </ha-button>
                 ${this._accessPoints &&
                 this._accessPoints.accesspoints &&
                 this._accessPoints.accesspoints.length !== 0
@@ -270,16 +269,16 @@ export class DialogHassioNetwork
           : ""}
       </div>
       <div class="buttons">
-        <mwc-button
-          .label=${this.supervisor.localize("common.cancel")}
-          @click=${this.closeDialog}
+        <ha-button @click=${this.closeDialog} appearance="plain">
+          ${this.supervisor.localize("common.cancel")}
+        </ha-button>
+        <ha-button
+          @click=${this._updateNetwork}
+          .disabled=${!this._dirty}
+          .loading=${this._processing}
         >
-        </mwc-button>
-        <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
-          ${this._processing
-            ? html`<ha-spinner size="small"> </ha-spinner>`
-            : this.supervisor.localize("common.save")}
-        </mwc-button>
+          ${this.supervisor.localize("common.save")}
+        </ha-button>
       </div>`;
   }
 
@@ -584,11 +583,7 @@ export class DialogHassioNetwork
           }
         }
 
-        mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        mwc-button.scan {
+        ha-button.scan {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;
@@ -609,8 +604,8 @@ export class DialogHassioNetwork
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
           display: flex;
           justify-content: space-between;
-          padding: 8px;
-          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+          padding: 16px;
+          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
           background-color: var(--mdc-theme-surface, #fff);
         }
         .warning {

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

@@ -1,13 +1,14 @@
-import "@material/mwc-button/mwc-button";
-import { mdiDelete } from "@mdi/js";
+import { mdiDelete, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../src/components/ha-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   addHassioDockerRegistry,
@@ -84,16 +85,19 @@ class HassioRegistriesDialog extends LitElement {
                 dialogInitialFocus
               ></ha-form>
               <div class="action">
-                <mwc-button
+                <ha-button
                   ?disabled=${Boolean(
                     !this._input.registry ||
                       !this._input.username ||
                       !this._input.password
                   )}
                   @click=${this._addNewRegistry}
+                  appearance="filled"
+                  size="small"
                 >
+                  <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                   ${this.supervisor.localize("dialog.registries.add_registry")}
-                </mwc-button>
+                </ha-button>
               </div>
             `
           : html`${this._registries?.length
@@ -126,11 +130,17 @@ class HassioRegistriesDialog extends LitElement {
                     </ha-alert>
                   `}
               <div class="action">
-                <mwc-button @click=${this._addRegistry} dialogInitialFocus>
+                <ha-button
+                  @click=${this._addRegistry}
+                  dialogInitialFocus
+                  appearance="filled"
+                  size="small"
+                >
+                  <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                   ${this.supervisor.localize(
                     "dialog.registries.add_new_registry"
                   )}
-                </mwc-button>
+                </ha-button>
               </div> `}
       </ha-dialog>
     `;

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

@@ -1,5 +1,4 @@
-import "@material/mwc-button/mwc-button";
-import { mdiDelete, mdiDeleteOff } from "@mdi/js";
+import { mdiDelete, mdiDeleteOff, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,10 +6,15 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-md-list";
+import "../../../../src/components/ha-md-list-item";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-textfield";
+import type { HaTextField } from "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-tooltip";
 import type {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -24,10 +28,6 @@ import {
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-md-list";
-import "../../../../src/components/ha-md-list-item";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -159,18 +159,22 @@ class HassioRepositoriesDialog extends LitElement {
               @keydown=${this._handleKeyAdd}
               dialogInitialFocus
             ></ha-textfield>
-            <mwc-button @click=${this._addRepository}>
-              ${this._processing
-                ? html`<ha-spinner size="small"></ha-spinner>`
-                : this._dialogParams!.supervisor.localize(
-                    "dialog.repositories.add"
-                  )}
-            </mwc-button>
+            <ha-button
+              .loading=${this._processing}
+              @click=${this._addRepository}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
+              ${this._dialogParams!.supervisor.localize(
+                "dialog.repositories.add"
+              )}
+            </ha-button>
           </div>
         </div>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+        <ha-button slot="primaryAction" @click=${this.closeDialog}>
           ${this._dialogParams?.supervisor.localize("common.close")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }
@@ -191,16 +195,11 @@ class HassioRepositoriesDialog extends LitElement {
           border-radius: 4px;
           margin-top: 4px;
         }
-        mwc-button {
+        ha-button {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;
         }
-        ha-spinner {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
         div.delete ha-icon-button {
           color: var(--error-color);
         }

hassio/src/system/hassio-core-info.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
-
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
@@ -70,12 +69,12 @@ class HassioCoreInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.core.update_available
                 ? html`
-                    <a href="/hassio/update-available/core">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      href="/hassio/update-available/core"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>
@@ -95,7 +94,7 @@ class HassioCoreInfo extends LitElement {
         <div class="card-actions">
           <ha-progress-button
             slot="primaryAction"
-            class="warning"
+            variant="danger"
             @click=${this._coreRestart}
             .title=${this.supervisor.localize("common.restart_name", {
               name: "Core",
@@ -188,11 +187,6 @@ class HassioCoreInfo extends LitElement {
           white-space: normal;
           color: var(--secondary-text-color);
         }
-
-        .warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
         ha-button-menu {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;

hassio/src/system/hassio-host-info.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -8,10 +6,11 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
@@ -77,24 +76,28 @@ class HassioHostInfo extends LitElement {
                   <span slot="description">
                     ${this.supervisor.host.hostname}
                   </span>
-                  <mwc-button
-                    .label=${this.supervisor.localize("system.host.change")}
+                  <ha-button
                     @click=${this._changeHostnameClicked}
+                    appearance="plain"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                 </ha-settings-row>`
               : ""}
             ${this.supervisor.host.features.includes("network")
-              ? html` <ha-settings-row>
+              ? html`<ha-settings-row>
                   <span slot="heading">
                     ${this.supervisor.localize("system.host.ip_address")}
                   </span>
                   <span slot="description"> ${primaryIpAddress} </span>
-                  <mwc-button
-                    .label=${this.supervisor.localize("system.host.change")}
+                  <ha-button
                     @click=${this._changeNetworkClicked}
+                    appearance="plain"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                 </ha-settings-row>`
               : ""}
 
@@ -108,12 +111,13 @@ class HassioHostInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.os.update_available
                 ? html`
-                    <a href="/hassio/update-available/os">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      href="/hassio/update-available/os"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>
@@ -139,16 +143,12 @@ class HassioHostInfo extends LitElement {
               : ""}
           </div>
           <div>
-            ${this.supervisor.host.disk_life_time !== "" &&
-            this.supervisor.host.disk_life_time >= 10
+            ${this.supervisor.host.disk_life_time !== null
               ? html` <ha-settings-row>
                   <span slot="heading">
-                    ${this.supervisor.localize(
-                      "system.host.emmc_lifetime_used"
-                    )}
+                    ${this.supervisor.localize("system.host.lifetime_used")}
                   </span>
                   <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10} % -
                     ${this.supervisor.host.disk_life_time} %
                   </span>
                 </ha-settings-row>`
@@ -167,7 +167,7 @@ class HassioHostInfo extends LitElement {
         <div class="card-actions">
           ${this.supervisor.host.features.includes("reboot")
             ? html`
-                <ha-progress-button class="warning" @click=${this._hostReboot}>
+                <ha-progress-button variant="danger" @click=${this._hostReboot}>
                   ${this.supervisor.localize("system.host.reboot_host")}
                 </ha-progress-button>
               `
@@ -175,7 +175,7 @@ class HassioHostInfo extends LitElement {
           ${this.supervisor.host.features.includes("shutdown")
             ? html`
                 <ha-progress-button
-                  class="warning"
+                  variant="danger"
                   @click=${this._hostShutdown}
                 >
                   ${this.supervisor.localize("system.host.shutdown_host")}
@@ -431,10 +431,6 @@ class HassioHostInfo extends LitElement {
           color: var(--secondary-text-color);
         }
 
-        .warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
         ha-button-menu {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;

hassio/src/system/hassio-supervisor-info.ts

@@ -5,6 +5,7 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@@ -80,12 +81,13 @@ class HassioSupervisorInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.supervisor.update_available
                 ? html`
-                    <a href="/hassio/update-available/supervisor">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      href="/hassio/update-available/supervisor"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>
@@ -156,24 +158,28 @@ class HassioSupervisorInfo extends LitElement {
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
                   )}
-                  <mwc-button
+                  <ha-button
                     slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unsupportedDialog}
+                    variant="warning"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                 </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
               ? html`<ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "system.supervisor.unhealthy_title"
                   )}
-                  <mwc-button
+                  <ha-button
+                    variant="danger"
+                    size="small"
                     slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unhealthyDialog}
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                 </ha-alert>`
               : ""}
           </div>
@@ -448,9 +454,6 @@ class HassioSupervisorInfo extends LitElement {
           white-space: normal;
           color: var(--secondary-text-color);
         }
-        ha-alert mwc-button {
-          --mdc-theme-primary: var(--primary-text-color);
-        }
         a {
           text-decoration: none;
         }

hassio/src/system/hassio-supervisor-log.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";

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

@@ -208,14 +208,16 @@ class UpdateAvailableCard extends LitElement {
               <div class="card-actions">
                 ${changelog
                   ? html`
-                      <a href=${changelog} target="_blank" rel="noreferrer">
-                        <ha-button
-                          .label=${this.supervisor.localize(
-                            "update_available.open_release_notes"
-                          )}
-                        >
-                        </ha-button>
-                      </a>
+                      <ha-button
+                        href=${changelog}
+                        target="_blank"
+                        rel="noreferrer"
+                        appearance="plain"
+                      >
+                        ${this.supervisor.localize(
+                          "update_available.open_release_notes"
+                        )}
+                      </ha-button>
                     `
                   : nothing}
                 <span></span>

landing-page/script/build_landing_page

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task build-landing-page
+./node_modules/.bin/gulp build-landing-page

landing-page/script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-yarn run-task develop-landing-page
+./node_modules/.bin/gulp develop-landing-page

landing-page/src/components/landing-page-logs.ts

@@ -1,29 +1,28 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
-
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import type {
   LandingPageKeys,
   LocalizeFunc,
 } from "../../../src/common/translations/localize";
+import { waitForSeconds } from "../../../src/common/util/wait";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-ansi-to-html";
+import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-svg-icon";
-import "../../../src/components/ha-ansi-to-html";
-import "../../../src/components/ha-alert";
-import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
+import { fileDownload } from "../../../src/util/file_download";
 import {
   getObserverLogs,
   downloadUrl as observerLogsDownloadUrl,
 } from "../data/observer";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { fileDownload } from "../../../src/util/file_download";
 import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
-import { waitForSeconds } from "../../../src/common/util/wait";
 import { ASSUME_CORE_START_SECONDS } from "../ha-landing-page";
 
 const ERROR_CHECK = /^[\d\s-:]+(ERROR|CRITICAL)(.*)/gm;
@@ -65,7 +64,7 @@ class LandingPageLogs extends LitElement {
   protected render() {
     return html`
       <div class="actions">
-        <ha-button @click=${this._toggleLogDetails}>
+        <ha-button appearance="plain" @click=${this._toggleLogDetails}>
           ${this.localize(this._show ? "hide_details" : "show_details")}
         </ha-button>
         ${this._show
@@ -82,7 +81,11 @@ class LandingPageLogs extends LitElement {
               alert-type="error"
               .title=${this.localize("logs.fetch_error")}
             >
-              <ha-button @click=${this._startLogStream}>
+              <ha-button
+                size="small"
+                variant="danger"
+                @click=${this._startLogStream}
+              >
                 ${this.localize("logs.retry")}
               </ha-button>
             </ha-alert>
@@ -105,14 +108,13 @@ class LandingPageLogs extends LitElement {
               !this._scrolledToBottomController.value) ||
             false,
         })}"
+        size="small"
+        appearance="filled"
         @click=${this._scrollToBottom}
       >
-        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
         ${this.localize("logs.scroll_down_button")}
-        <ha-svg-icon
-          .path=${mdiArrowCollapseDown}
-          slot="trailingIcon"
-        ></ha-svg-icon>
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
       </ha-button>
     `;
   }
@@ -309,21 +311,14 @@ class LandingPageLogs extends LitElement {
       }
 
       .new-logs-indicator {
-        --mdc-theme-primary: var(--text-primary-color);
-
         overflow: hidden;
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        bottom: 4px;
+        left: 4px;
         height: 0;
-        background-color: var(--primary-color);
-        border-radius: 8px;
 
         transition: height 0.4s ease-out;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
       }
 
       .new-logs-indicator.visible {

landing-page/src/components/landing-page-network.ts

@@ -67,6 +67,7 @@ class LandingPageNetwork extends LitElement {
           ${ALTERNATIVE_DNS_SERVERS.map(
             ({ translationKey }, key) =>
               html`<ha-button
+                size="small"
                 .index=${key}
                 .disabled=${!dnsPrimaryInterfaceNameservers}
                 @click=${this._setDns}

package.json

@@ -20,14 +20,14 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
-    "run-task": "tsx ./build-scripts/runTask.ts"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.27.6",
+    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.2",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
@@ -46,12 +46,12 @@
     "@formatjs/intl-numberformat": "8.15.4",
     "@formatjs/intl-pluralrules": "5.4.4",
     "@formatjs/intl-relativetimeformat": "11.4.11",
-    "@fullcalendar/core": "6.1.18",
-    "@fullcalendar/daygrid": "6.1.18",
-    "@fullcalendar/interaction": "6.1.18",
-    "@fullcalendar/list": "6.1.18",
-    "@fullcalendar/luxon3": "6.1.18",
-    "@fullcalendar/timegrid": "6.1.18",
+    "@fullcalendar/core": "6.1.19",
+    "@fullcalendar/daygrid": "6.1.19",
+    "@fullcalendar/interaction": "6.1.19",
+    "@fullcalendar/list": "6.1.19",
+    "@fullcalendar/luxon3": "6.1.19",
+    "@fullcalendar/timegrid": "6.1.19",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -61,7 +61,6 @@
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
-    "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
     "@material/mwc-dialog": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
@@ -88,10 +87,10 @@
     "@shoelace-style/shoelace": "2.20.1",
     "@swc/helpers": "0.5.17",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "3.8.1",
+    "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.9",
-    "@vaadin/vaadin-themable-mixin": "24.7.9",
+    "@vaadin/combo-box": "24.8.5",
+    "@vaadin/vaadin-themable-mixin": "24.8.5",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -100,19 +99,20 @@
     "barcode-detector": "3.0.5",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.44.0",
+    "core-js": "3.45.0",
     "cropperjs": "1.6.2",
+    "culori": "4.0.2",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
-    "echarts": "5.6.0",
+    "echarts": "6.0.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.7",
+    "hls.js": "1.6.9",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -123,7 +123,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.1",
-    "marked": "16.1.1",
+    "marked": "16.1.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -153,27 +153,27 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.0",
     "@babel/preset-env": "7.28.0",
-    "@bundle-stats/plugin-webpack-filter": "4.21.0",
-    "@lokalise/node-api": "14.9.1",
+    "@bundle-stats/plugin-webpack-filter": "4.21.2",
+    "@lokalise/node-api": "15.0.0",
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.1.8",
-    "@rspack/cli": "1.4.8",
-    "@rspack/core": "1.4.8",
+    "@rsdoctor/rspack-plugin": "1.2.1",
+    "@rspack/cli": "1.4.11",
+    "@rspack/core": "1.4.11",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
+    "@types/culori": "4.0.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
     "@types/leaflet-draw": "1.0.12",
     "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.6.2",
+    "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
-    "@types/node": "22.15.16",
     "@types/qrcode": "1.5.5",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
@@ -184,16 +184,17 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.31.0",
+    "eslint": "9.33.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-lit": "2.1.1",
-    "eslint-plugin-lit-a11y": "5.1.0",
+    "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.1.4",
     "eslint-plugin-wc": "3.0.1",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.0",
+    "fs-extra": "11.3.1",
     "glob": "11.0.3",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
@@ -203,7 +204,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.2",
+    "lint-staged": "16.1.5",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -216,9 +217,8 @@
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
-    "tsx": "4.19.4",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.37.0",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.39.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -231,10 +231,11 @@
     "lit-html": "3.3.1",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
-    "@fullcalendar/daygrid": "6.1.18",
+    "@fullcalendar/daygrid": "6.1.19",
     "globals": "16.3.0",
     "tslib": "2.8.1",
-    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
+    "@vaadin/vaadin-themable-mixin": "24.8.5"
   },
   "packageManager": "yarn@4.9.2"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250625.0"
+version      = "20250730.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

rspack.config.cjs

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+// Needs to remain CommonJS until eslint-import-resolver-webpack supports ES modules
+const rspack = require("./build-scripts/rspack.cjs");
+const env = require("./build-scripts/env.cjs");
+
+// This file exists because we haven't migrated the stats script yet
+
+const configs = [
+  rspack.createAppConfig({
+    isProdBuild: env.isProdBuild(),
+    isStatsBuild: env.isStatsBuild(),
+    isTestBuild: env.isTestBuild(),
+    latestBuild: true,
+  }),
+];
+
+if (env.isProdBuild() && !env.isStatsBuild()) {
+  configs.push(
+    rspack.createAppConfig({
+      isProdBuild: env.isProdBuild(),
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+      latestBuild: false,
+    })
+  );
+}
+
+module.exports = configs;

script/build_frontend

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-yarn run-task build-app
+./node_modules/.bin/gulp build-app

script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-yarn run-task develop-app
+./node_modules/.bin/gulp develop-app

script/setup_translations

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-yarn run-task setup-and-fetch-nightly-translations
+./node_modules/.bin/gulp setup-and-fetch-nightly-translations

script/size_stats

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-yarn run-task analyze-app
+./node_modules/.bin/gulp analyze-app

script/translations_download

@@ -8,4 +8,4 @@ set -eu -o pipefail
 
 cd "$(dirname "$0")/.."
 
-yarn run-task download-translations
+./node_modules/.bin/gulp download-translations

src/auth/ha-auth-flow.ts

@@ -1,5 +1,4 @@
 /* eslint-disable lit/prefer-static-styles */
-import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -7,6 +6,7 @@ import { keyed } from "lit/directives/keyed";
 import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
+import "../components/ha-button";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
@@ -173,15 +173,14 @@ export class HaAuthFlow extends LitElement {
         return html`
           ${this._renderStep(this.step)}
           <div class="action">
-            <mwc-button
-              raised
+            <ha-button
               @click=${this._handleSubmit}
               .disabled=${this._submitting}
             >
               ${this.step.type === "form"
                 ? this.localize("ui.panel.page-authorize.form.next")
                 : this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
           </div>
         `;
       case "error":
@@ -192,9 +191,9 @@ export class HaAuthFlow extends LitElement {
             })}
           </ha-alert>
           <div class="action">
-            <mwc-button raised @click=${this._startOver}>
+            <ha-button @click=${this._startOver}>
               ${this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
           </div>
         `;
       case "loading":
@@ -238,10 +237,11 @@ export class HaAuthFlow extends LitElement {
               @value-changed=${this._stepDataChanged}
             ></ha-auth-form>`
           )}
-          ${this.clientId === genClientId() &&
-          !["select_mfa_module", "mfa"].includes(step.step_id)
-            ? html`
-                <div class="space-between">
+
+          <div class="space-between">
+            ${this.clientId === genClientId() &&
+            !["select_mfa_module", "mfa"].includes(step.step_id)
+              ? html`
                   <ha-formfield
                     class="store-token"
                     .label=${this.localize(
@@ -253,18 +253,16 @@ export class HaAuthFlow extends LitElement {
                       @change=${this._storeTokenChanged}
                     ></ha-checkbox>
                   </ha-formfield>
-                  <a
-                    class="forgot-password"
-                    href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    >${this.localize(
-                      "ui.panel.page-authorize.forgot_password"
-                    )}</a
-                  >
-                </div>
-              `
-            : ""}
+                `
+              : ""}
+            <a
+              class="forgot-password"
+              href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+              target="_blank"
+              rel="noreferrer noopener"
+              >${this.localize("ui.panel.page-authorize.forgot_password")}</a
+            >
+          </div>
         `;
       default:
         return nothing;

src/common/color/palette.ts

@@ -0,0 +1,115 @@
+import { formatHex, oklch, wcagLuminance, type Oklch } from "culori";
+
+const MIN_LUMINANCE = 0.3;
+const MAX_LUMINANCE = 0.6;
+
+/**
+ * Normalizes the luminance of a given color to ensure it falls within the specified minimum and maximum luminance range.
+ * This helps to keep everything readable and accessible, especially for text and UI elements.
+ *
+ * This function converts the input color to the OKLCH color space, calculates its luminance,
+ * and adjusts the lightness component if the luminance is outside the allowed range.
+ * The adjustment is performed using a binary search to find the appropriate lightness value.
+ * If the color is already within the range, it is returned unchanged.
+ *
+ * @param color - css color string
+ * @returns The normalized color as a hex string, or the original color if normalization is not needed.
+ * @throws If the provided color is invalid or cannot be parsed.
+ */
+export const normalizeLuminance = (color: string): string => {
+  const baseOklch = oklch(color);
+
+  if (baseOklch === undefined) {
+    throw new Error("Invalid color provided");
+  }
+
+  const luminance = wcagLuminance(baseOklch);
+
+  if (luminance >= MIN_LUMINANCE && luminance <= MAX_LUMINANCE) {
+    return color;
+  }
+  const targetLuminance =
+    luminance < MIN_LUMINANCE ? MIN_LUMINANCE : MAX_LUMINANCE;
+
+  function findLightness(lowL = 0, highL = 1, iterations = 10) {
+    if (iterations <= 0) {
+      return (lowL + highL) / 2;
+    }
+
+    const midL = (lowL + highL) / 2;
+    const testColor = { ...baseOklch, l: midL } as Oklch;
+    const testLuminance = wcagLuminance(testColor);
+
+    if (Math.abs(testLuminance - targetLuminance) < 0.01) {
+      return midL;
+    }
+    if (testLuminance < targetLuminance) {
+      return findLightness(midL, highL, iterations--);
+    }
+    return findLightness(lowL, midL, iterations--);
+  }
+
+  baseOklch.l = findLightness();
+
+  return formatHex(baseOklch) || color;
+};
+
+/**
+ * Generates a color palette based on a base color using the OKLCH color space.
+ *
+ * The palette consists of multiple shades, both lighter and darker than the base color,
+ * calculated by adjusting the lightness and chroma values. Each shade is labeled and
+ * returned as a tuple containing the shade name and its hexadecimal color value.
+ *
+ * @param baseColor - The base color in a HEX format.
+ * @param label - A string label used to name each color variant in the palette.
+ * @param steps - An array of numbers representing the percentage steps for generating shades (default: [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95]).
+ * @returns An array of tuples, each containing the shade name and its corresponding hex color value.
+ * @throws If the provided base color is invalid or cannot be parsed by the `oklch` function.
+ */
+export const generateColorPalette = (
+  baseColor: string,
+  label: string,
+  steps = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95]
+) => {
+  const baseOklch = oklch(baseColor);
+
+  if (baseOklch === undefined) {
+    throw new Error("Invalid base color provided");
+  }
+
+  return steps.map((step) => {
+    const name = `color-${label}-${step}`;
+
+    // Base color at 50%
+    if (step === 50) {
+      return [name, formatHex(baseOklch)];
+    }
+
+    // For darker shades (below 50%)
+    if (step < 50) {
+      const darkFactor = step / 50;
+
+      // Adjust lightness and chroma to create darker variants
+      const darker = {
+        ...baseOklch,
+        l: baseOklch.l * darkFactor, // darkening
+        c: baseOklch.c * (0.9 + 0.1 * darkFactor), // Slightly adjust chroma
+      };
+
+      return [name, formatHex(darker)];
+    }
+
+    // For lighter shades (above 50%)
+    const lightFactor = (step - 50) / 45; // Normalized from 0 to 1
+
+    // Adjust lightness and reduce chroma for lighter variants
+    const lighter = {
+      ...baseOklch,
+      l: Math.min(1, baseOklch.l + (1 - baseOklch.l) * lightFactor), // Increase lightness
+      c: baseOklch.c * Math.max(0, 1 - lightFactor * 0.7), // Gradually reduce chroma
+    };
+
+    return [name, formatHex(lighter)];
+  });
+};