Fix devtools header

Safe area: Fix dashboard hui-root
Safe area: sidebar and notification drawer (#26853 )
2026-05-27 11:37:06 +00:00 · 2025-09-09 12:00:34 +01:00 · 2025-09-09 11:55:11 +01:00 · 2025-09-09 11:59:24 +02:00 · 2025-09-09 11:30:19 +03:00 · 2025-09-09 10:53:06 +03:00
686 changed files with 25965 additions and 10964 deletions
@@ -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">
@@ -21,12 +21,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -56,12 +56,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -24,9 +24,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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
@@ -58,16 +58,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
      - 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:
@@ -76,16 +76,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
      - 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
@@ -100,16 +100,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
      - 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
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -22,12 +22,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -57,12 +57,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -16,10 +16,10 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -21,10 +21,10 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}

@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@v5.0.0
+        uses: actions/labeler@v6.0.1
        with:
          sync-labels: true
@@ -20,15 +20,15 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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 }}
@@ -23,10 +23,10 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -55,7 +55,7 @@ jobs:
          script/release

      - name: Upload release assets
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: |
            dist/*.whl
@@ -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
@@ -90,9 +90,9 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -107,7 +107,7 @@ jobs:
      - name: Tar folder
        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

@@ -119,9 +119,9 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -136,6 +136,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
@@ -9,10 +9,10 @@ jobs:
  check-authorization:
    runs-on: ubuntu-latest
    # Only run if this is a Task issue type (from the issue form)
-    if: github.event.issue.issue_type == 'Task'
+    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v9.1.0
+        uses: actions/stale@v10.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Upload Translations
        run: |
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
@@ -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
@@ -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");

@@ -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"),
    };
@@ -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);
+  },
+};
@@ -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);
@@ -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"
+  )
+);
@@ -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
-);
@@ -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"
+  )
+);
@@ -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
-);
@@ -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,
+    ])
+  )
+);
@@ -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,
-  ])
-);
@@ -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
+  )
 );
@@ -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"
+  )
+);
@@ -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
-);
@@ -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"
+  )
 );
@@ -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"
+  )
 );
@@ -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"
+  )
 );
@@ -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"
+  )
 );
@@ -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);
-};
+});
@@ -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();
-};
+});
@@ -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"])
+  )
+);
@@ -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])
-);
@@ -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";
@@ -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,
-};
@@ -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"
+  )
+);
@@ -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
-);
@@ -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")
+);
@@ -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(),
    })
-  );
+  )
+);
@@ -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);
      }
    })
-  );
+  )
+);
@@ -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")
 );
@@ -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, {
@@ -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"),
+};
@@ -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"),
-};
@@ -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,
+};
@@ -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);
@@ -14,5 +14,5 @@
  "name": "Home Assistant Cast",
  "short_name": "HA Cast",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task build-cast
+./node_modules/.bin/gulp build-cast
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task develop-cast
+./node_modules/.bin/gulp develop-cast
@@ -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;
@@ -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;
    }
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    const media = loadRequestData.media;
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
  loadRequestData.media.contentId =
    "https://cast.home-assistant.io/images/google-nest-hub.png";
  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };

 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
  // @ts-ignore
  (ev: ReceivedMessage<HassMessage>) => {
    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
      playerManager.stop();
    } else {
      showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    if (
      loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
 );

 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
@@ -75,5 +75,5 @@
  "name": "Home Assistant Demo",
  "short_name": "HA Demo",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task build-demo
+./node_modules/.bin/gulp build-demo
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task develop-demo
+./node_modules/.bin/gulp develop-demo
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task analyze-demo
+./node_modules/.bin/gulp analyze-demo
@@ -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>
    `;
@@ -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-top, 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;
@@ -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"],
-        },
-      },
-    },
  }
 );
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task build-gallery
+./node_modules/.bin/gulp build-gallery
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task develop-gallery
+./node_modules/.bin/gulp develop-gallery
@@ -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",
    });
@@ -1,10 +1,11 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
+import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";

@customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -21,11 +22,13 @@ class DemoMoreInfo extends LitElement {
      <div class="root">
        <div id="card">
          <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
+            ${!computeShowNewMoreInfo(state)
+              ? html`<state-card-content
+                  .stateObj=${state}
+                  .hass=${this.hass}
+                  in-dialog
+                ></state-card-content>`
+              : nothing}

            <more-info-content
              .hass=${this.hass}
@@ -1106,7 +1106,7 @@ export default {
      friendly_name: "Philips Hue",
      entity_picture: null,
      description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
      submit_caption: "I have pressed the button",
    },
    last_changed: "2018-07-19T10:44:46.515160+00:00",
@@ -18,7 +18,6 @@ import { HaDeviceAction } from "../../../../src/panels/config/automation/action/
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
 import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
@@ -32,7 +31,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
  { name: "Service", actions: [HaServiceAction.defaultConfig] },
  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
@@ -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>
 ```

@@ -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);
    }
  `;
@@ -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)`.
@@ -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;
+  }
+}
@@ -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";
@@ -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.                 |
@@ -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;
+  }
+}
@@ -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";
@@ -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,15 @@ const ENTITIES = [
      ClimateEntityFeature.FAN_MODE +
      ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
  }),
+  getEntity("fan", "fan_demo", "on", {
+    friendly_name: "Ceiling fan",
+    device_class: "fan",
+    direction: "reverse",
+    supported_features:
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED +
+      FanEntityFeature.OSCILLATE,
+  }),
 ];

 const CONFIGS = [
@@ -261,6 +271,33 @@ const CONFIGS = [
  - type: target-temperature
    `,
  },
+  {
+    heading: "Fan direction feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-direction
+    `,
+  },
+  {
+    heading: "Fan speed feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-speed
+    `,
+  },
+  {
+    heading: "Fan oscillate feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-oscillate
+    `,
+  },
 ];

@customElement("demo-lovelace-tile-card")
@@ -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>

@@ -0,0 +1,3 @@
+---
+title: Fan
+---
@@ -0,0 +1,50 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { FanEntityFeature } from "../../../../src/data/fan";
+
+const ENTITIES = [
+  getEntity("fan", "fan", "on", {
+    friendly_name: "Fan",
+    device_class: "fan",
+    supported_features:
+      FanEntityFeature.OSCILLATE +
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED,
+  }),
+];
+
+@customElement("demo-more-info-fan")
+class DemoMoreInfoFan extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-fan": DemoMoreInfoFan;
+  }
+}
@@ -0,0 +1,4 @@
+import { availableParallelism } from "node:os";
+import "./build-scripts/gulp/index.mjs";
+
+process.env.UV_THREADPOOL_SIZE = availableParallelism();
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task build-hassio
+./node_modules/.bin/gulp build-hassio
@@ -6,4 +6,4 @@ set -e

 cd "$(dirname "$0")/../.."

-yarn run-task develop-hassio
+./node_modules/.bin/gulp develop-hassio
@@ -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}
          >
@@ -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,10 +713,60 @@ 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>
                  `
+              : nothing}
+          </div>
+          <div>
+            ${this.addon.version
+              ? html`
+                  <ha-progress-button
+                    variant="danger"
+                    appearance="plain"
+                    @click=${this._uninstallClicked}
+                    .disabled=${systemManaged && !this.controlEnabled}
+                  >
+                    ${this.supervisor.localize("addon.dashboard.uninstall")}
+                  </ha-progress-button>
+                  ${this.addon.build
+                    ? html`
+                        <ha-progress-button
+                          variant="danger"
+                          appearance="plain"
+                          @click=${this._rebuildClicked}
+                        >
+                          ${this.supervisor.localize("addon.dashboard.rebuild")}
+                        </ha-progress-button>
+                      `
+                    : 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}
@@ -722,58 +776,12 @@ class HassioAddonInfo extends LitElement {
                  </ha-progress-button>
                `}
          </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}
-                  <ha-progress-button
-                    class="warning"
-                    @click=${this._uninstallClicked}
-                    .disabled=${systemManaged && !this.controlEnabled}
-                  >
-                    ${this.supervisor.localize("addon.dashboard.uninstall")}
-                  </ha-progress-button>
-                  ${this.addon.build
-                    ? html`
-                        <ha-progress-button
-                          class="warning"
-                          @click=${this._rebuildClicked}
-                        >
-                          ${this.supervisor.localize("addon.dashboard.rebuild")}
-                        </ha-progress-button>
-                      `
-                    : nothing}`
-              : nothing}
-          </div>
        </div>
      </ha-card>

      ${this.addon.long_description
        ? html`
-            <ha-card outlined>
+            <ha-card class="long-description" outlined>
              <div class="card-content">
                <ha-markdown
                  .content=${this.addon.long_description}
@@ -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;
  }
@@ -1317,6 +1333,9 @@ class HassioAddonInfo extends LitElement {
        .description a {
          color: var(--primary-color);
        }
+        .long-description {
+          direction: ltr;
+        }
        ha-assist-chip {
          --md-sys-color-primary: var(--text-primary-color);
          --md-sys-color-on-surface: var(--text-primary-color);
@@ -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";
@@ -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;
        }
@@ -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>
    `;
@@ -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>
    `;
  }
@@ -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";
@@ -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>
    `;
  }
@@ -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>
    `;
  }
@@ -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 {
@@ -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>
    `;
@@ -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);
        }
@@ -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;
@@ -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;
--- a/Show More
+++ b/Show More