Migrate tab-group to webawesome

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

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           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
@@ -61,7 +61,7 @@ jobs:
           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

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         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
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         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
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         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
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         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

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           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
@@ -62,7 +62,7 @@ jobs:
           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

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         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

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         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

.github/workflows/labeler.yaml

@@ -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

.github/workflows/nightly.yaml

@@ -23,12 +23,12 @@ jobs:
         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

.github/workflows/release.yaml

@@ -26,7 +26,7 @@ jobs:
         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
@@ -92,7 +92,7 @@ jobs:
       - name: Checkout the repository
         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
 
@@ -121,7 +121,7 @@ jobs:
       - name: Checkout the repository
         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

.github/workflows/restrict-task-creation.yml

@@ -12,7 +12,7 @@ jobs:
     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;

.github/workflows/stale.yml

@@ -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

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

cast/src/media/entrypoint.ts

@@ -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;
   }

cast/src/receiver/entrypoint.ts

@@ -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();

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 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 {

gallery/src/components/demo-more-info.ts

@@ -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}

gallery/src/data/demo_states.js

@@ -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",

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

@@ -781,7 +781,7 @@ class HassioAddonInfo extends LitElement {
 
       ${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}
@@ -1333,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);

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

@@ -15,6 +15,8 @@ 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-tab-group";
+import "../../../../src/components/ha-tab-group-tab";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -36,7 +38,6 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioNetworkDialogParams } from "./show-dialog-network";
-import "../../../../src/components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -114,19 +115,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
+            ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
                   (device, index) =>
-                    html`<sl-tab
+                    html`<ha-tab-group-tab
                       slot="nav"
                       .id=${device.interface}
                       .panel=${index.toString()}
                       .active=${this._curTabIndex === index}
                     >
                       ${device.interface}
-                    </sl-tab>`
+                    </ha-tab-group-tab>`
                 )}
-              </sl-tab-group>`
+              </ha-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -627,10 +628,10 @@ export class DialogHassioNetwork
           --mdc-list-side-padding: 10px;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

landing-page/src/html/index.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;

package.json

@@ -26,16 +26,15 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@awesome.me/webawesome": "3.0.0-beta.4",
     "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/autocomplete": "6.18.7",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.1",
+    "@codemirror/view": "6.38.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -52,6 +51,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.8.5",
-    "@vaadin/vaadin-themable-mixin": "24.8.5",
+    "@vaadin/combo-box": "24.8.7",
+    "@vaadin/vaadin-themable-mixin": "24.8.7",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -112,7 +112,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.10",
+    "hls.js": "1.6.11",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -122,8 +122,8 @@
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.1",
-    "marked": "16.2.0",
+    "luxon": "3.7.2",
+    "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -159,18 +159,18 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.4.11",
+    "@rspack/core": "1.5.2",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.0",
+    "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.12",
-    "@types/leaflet.markercluster": "1.5.5",
+    "@types/leaflet-draw": "1.0.13",
+    "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
@@ -204,7 +204,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -212,13 +212,13 @@
     "pinst": "3.0.0",
     "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.0.3",
-    "serve": "14.2.4",
+    "serve": "14.2.5",
     "sinon": "21.0.0",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.40.0",
+    "typescript-eslint": "8.42.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -234,8 +234,7 @@
     "@fullcalendar/daygrid": "6.1.19",
     "globals": "16.3.0",
     "tslib": "2.8.1",
-    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@vaadin/vaadin-themable-mixin": "24.8.5"
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.9.3"
+  "packageManager": "yarn@4.9.4"
 }

pyproject.toml

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

src/common/entity/entity_filter.ts

@@ -67,10 +67,7 @@ export const generateEntityFilter = (
     }
 
     if (floors) {
-      if (!floor) {
-        return false;
-      }
-      if (!floors) {
+      if (!floor || !floors.has(floor.floor_id)) {
         return false;
       }
     }

src/components/ha-button-group.ts

@@ -1,82 +0,0 @@
-import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group";
-import { customElement } from "lit/decorators";
-import type { HaButton } from "./ha-button";
-import { StateSet } from "../resources/polyfills/stateset";
-
-export type Appearance = "accent" | "filled" | "outlined" | "plain";
-
-/**
- * Finds an ha-button element either as the current element or within its descendants.
- * @param el - The HTML element to search from
- * @returns The found HaButton element, or null if not found
- */
-function findButton(el: HTMLElement) {
-  const selector = "ha-button";
-  return (el.closest(selector) ?? el.querySelector(selector)) as HaButton;
-}
-
-/**
- * @element ha-button-group
- * @extends {ButtonGroup}
- * @summary
- * Group buttons. Extend Webawesome to be able to work with ha-button tags
- *
- * @documentation https://webawesome.com/components/button-group
- */
-@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods
-export class HaButtonGroup extends ButtonGroup {
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error updateClassNames is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override updateClassNames() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true }),
-    ] as HTMLElement[];
-    this.hasOutlined = false;
-
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-
-      if (button) {
-        if ((button as HaButton).appearance === "outlined")
-          this.hasOutlined = true;
-        if (this.size) button.setAttribute("size", this.size);
-        button.classList.add("wa-button-group__button");
-        button.classList.toggle(
-          "wa-button-group__horizontal",
-          this.orientation === "horizontal"
-        );
-        button.classList.toggle(
-          "wa-button-group__vertical",
-          this.orientation === "vertical"
-        );
-        button.classList.toggle("wa-button-group__button-first", index === 0);
-        button.classList.toggle(
-          "wa-button-group__button-inner",
-          index > 0 && index < slottedElements.length - 1
-        );
-        button.classList.toggle(
-          "wa-button-group__button-last",
-          index === slottedElements.length - 1
-        );
-
-        // use button-group variant
-        button.setAttribute("variant", this.variant);
-      }
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-group": HaButtonGroup;
-  }
-}

src/components/ha-button-toggle-group.ts

@@ -1,11 +1,11 @@
+import "@home-assistant/webawesome/dist/components/button-group/button-group";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";
 import "./ha-button";
-import "./ha-button-group";
+import "./ha-svg-icon";
 
 /**
  * @element ha-button-toggle-group
@@ -37,11 +37,14 @@ export class HaButtonToggleGroup extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-button-group .variant=${this.variant} .size=${this.size}>
+      <wa-button-group childSelector="ha-button">
         ${this.buttons.map(
           (button) =>
             html`<ha-button
+              iconTag="ha-svg-icon"
               class="icon"
+              .variant=${this.variant}
+              .size=${this.size}
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
@@ -55,7 +58,7 @@ export class HaButtonToggleGroup extends LitElement {
                 : button.label}
             </ha-button>`
         )}
-      </ha-button-group>
+      </wa-button-group>
     `;
   }
 

src/components/ha-button.ts

@@ -1,9 +1,7 @@
-import Button from "@awesome.me/webawesome/dist/components/button/button";
+import Button from "@home-assistant/webawesome/dist/components/button/button";
 import { css, type CSSResultGroup } from "lit";
 import { customElement } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 export type Appearance = "accent" | "filled" | "outlined" | "plain";
 
 /**
@@ -35,54 +33,10 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
  * @attr {boolean} disabled - Disables the button and prevents user interaction.
  */
-@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
+@customElement("ha-button")
 export class HaButton extends Button {
   variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error handleLabelSlotChange is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override handleLabelSlotChange() {
-    const nodes = this.labelSlot.assignedNodes({ flatten: true });
-    let hasIconLabel = false;
-    let hasIcon = false;
-    let text = "";
-
-    // If there's only an icon and no text, it's an icon button
-    [...nodes].forEach((node) => {
-      if (
-        node.nodeType === Node.ELEMENT_NODE &&
-        (node as HTMLElement).localName === "ha-svg-icon"
-      ) {
-        hasIcon = true;
-        if (!hasIconLabel)
-          hasIconLabel = (node as HTMLElement).hasAttribute("aria-label");
-      }
-
-      // Concatenate text nodes
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent;
-      }
-    });
-
-    this.isIconButton = text.trim() === "" && hasIcon;
-
-    if (__DEV__ && this.isIconButton && !hasIconLabel) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Icon buttons must have a label for screen readers. Add <ha-svg-icon aria-label="..."> to remove this warning.',
-        this
-      );
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Button.styles,
@@ -262,10 +216,10 @@ export class HaButton extends Button {
         }
 
         .button.has-start {
-          padding-left: 8px;
+          padding-inline-start: 8px;
         }
         .button.has-end {
-          padding-right: 8px;
+          padding-inline-end: 8px;
         }
       `,
     ];

src/components/ha-dialog.ts

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
+        padding: 12px 16px 16px 16px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -100,6 +100,8 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
+        padding-top: var(--safe-area-inset-top);
+        padding-bottom: var(--safe-area-inset-bottom);
       }
       .mdc-dialog__title {
         padding: 16px 16px 0 16px;
@@ -115,15 +117,17 @@ export class HaDialog extends DialogBase {
         padding: var(--dialog-content-padding, 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: max(
-          var(--dialog-content-padding, 24px),
-          var(--safe-area-inset-bottom)
-        );
+        padding-bottom: var(--dialog-content-padding, 24px);
       }
       .mdc-dialog .mdc-dialog__surface {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         margin-top: var(--dialog-surface-margin-top);
+        min-width: calc(
+          var(--mdc-dialog-min-width, 100vw) - var(
+              --safe-area-inset-left
+            ) - var(--safe-area-inset-right)
+        );
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -137,6 +141,24 @@ export class HaDialog extends DialogBase {
         display: flex;
         flex-direction: column;
       }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        .mdc-dialog .mdc-dialog__surface {
+          min-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+          max-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+        }
+      }
+
       .header_title {
         display: flex;
         align-items: center;

src/components/ha-fade-in.ts

@@ -1,4 +1,4 @@
-import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
+import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")

src/components/ha-progress-ring.ts

@@ -1,21 +1,12 @@
-import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring";
+import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring";
 import { css } from "lit";
 import type { CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
-import { StateSet } from "../resources/polyfills/stateset";
 
 @customElement("ha-progress-ring")
 export class HaProgressRing extends ProgressRing {
   @property() public size?: "tiny" | "small" | "medium" | "large";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   public updated(changedProps) {
     super.updated(changedProps);
 

src/components/ha-spinner.ts

@@ -1,10 +1,8 @@
-import Spinner from "@awesome.me/webawesome/dist/components/spinner/spinner";
+import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 @customElement("ha-spinner")
 export class HaSpinner extends Spinner {
   @property() public size?: "tiny" | "small" | "medium" | "large";
@@ -33,14 +31,6 @@ export class HaSpinner extends Spinner {
     }
   }
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Spinner.styles,

src/components/ha-tab-group-tab.ts

@@ -0,0 +1,44 @@
+import Tab from "@home-assistant/webawesome/dist/components/tab/tab";
+import { css, type CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-tab-group-tab")
+// @ts-ignore
+export class HaTabGroupTab extends Tab {
+  static get styles(): CSSResultGroup {
+    return [
+      Tab.styles,
+      css`
+        :host {
+          font-size: var(--ha-font-size-m);
+          --wa-color-brand-on-quiet: var(
+            --ha-tab-active-text-color,
+            var(--primary-color)
+          );
+2
+          --wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet);
+          opacity: 0.8;
+
+          color: inherit;
+        }
+
+        :host([active]:not([disabled])) {
+          opacity: 1;
+        }
+
+        @media (hover: hover) {
+          :host(:hover:not([disabled]):not([active])) .tab {
+            color: var(--wa-color-brand-on-quiet);
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // @ts-ignore
+    "ha-tab-group-tab": HaTabGroupTab;
+  }
+}

src/components/ha-tab-group.ts

@@ -0,0 +1,46 @@
+import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group";
+import { css, type CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-tab-group")
+export class HaTabGroup extends TabGroup {
+  @property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab";
+
+  static get styles(): CSSResultGroup {
+    return [
+      TabGroup.styles,
+      css`
+        :host {
+          --track-width: 2px;
+          --track-color: var(--ha-tab-track-color, var(--divider-color));
+          --indicator-color: var(
+            --ha-tab-indicator-color,
+            var(--primary-color)
+          );
+        }
+
+        .tab-group-top ::slotted(ha-tab-group-tab[active]) {
+          border-block-end: solid var(--track-width) var(--indicator-color);
+          margin-block-end: calc(-1 * var(--track-width));
+        }
+
+        .tab-group-start ::slotted(ha-tab-group-tab[active]) {
+          border-inline-end: solid var(--track-width) var(--indicator-color);
+          margin-inline-end: calc(-1 * var(--track-width));
+        }
+
+        .tab-group-end ::slotted(ha-tab-group-tab[active]) {
+          border-inline-start: solid var(--track-width) var(--indicator-color);
+          margin-inline-start: calc(-1 * var(--track-width));
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // @ts-ignore
+    "ha-tab-group": HaTabGroup;
+  }
+}

src/components/sl-tab-group.ts

@@ -1,88 +0,0 @@
-import TabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component";
-import TabGroupStyles from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.styles";
-import "@shoelace-style/shoelace/dist/components/tab/tab";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-import { DragScrollController } from "../common/controllers/drag-scroll-controller";
-
-@customElement("sl-tab-group")
-// @ts-ignore
-export class HaSlTabGroup extends TabGroup {
-  private _dragScrollController = new DragScrollController(this, {
-    selector: ".tab-group__nav",
-  });
-
-  override setAriaLabels() {
-    // Override the method to prevent setting aria-labels, as we don't use panels
-    // and don't want to set aria-labels for the tabs
-  }
-
-  override getAllPanels() {
-    // Override the method to prevent querying for panels
-    // and return an empty array instead
-    // as we don't use panels
-    return [];
-  }
-
-  // @ts-ignore
-  protected override handleClick(event: MouseEvent) {
-    if (this._dragScrollController.scrolled) {
-      return;
-    }
-    // @ts-ignore
-    super.handleClick(event);
-  }
-
-  static override styles = [
-    TabGroupStyles,
-    css`
-      :host {
-        --sl-spacing-3x-small: 0.125rem;
-        --sl-spacing-2x-small: 0.25rem;
-        --sl-spacing-x-small: 0.5rem;
-        --sl-spacing-small: 0.75rem;
-        --sl-spacing-medium: 1rem;
-        --sl-spacing-large: 1.25rem;
-        --sl-spacing-x-large: 1.75rem;
-        --sl-spacing-2x-large: 2.25rem;
-        --sl-spacing-3x-large: 3rem;
-        --sl-spacing-4x-large: 4.5rem;
-
-        --sl-transition-x-slow: 1000ms;
-        --sl-transition-slow: 500ms;
-        --sl-transition-medium: 250ms;
-        --sl-transition-fast: 150ms;
-        --sl-transition-x-fast: 50ms;
-        --transition-speed: var(--sl-transition-fast);
-        --sl-border-radius-small: 0.1875rem;
-        --sl-border-radius-medium: 0.25rem;
-        --sl-border-radius-large: 0.5rem;
-        --sl-border-radius-x-large: 1rem;
-        --sl-border-radius-circle: 50%;
-        --sl-border-radius-pill: 9999px;
-
-        --sl-color-neutral-600: inherit;
-
-        --sl-font-weight-semibold: var(--ha-font-weight-medium);
-        --sl-font-size-small: var(--ha-font-size-m);
-
-        --sl-color-primary-600: var(
-          --ha-tab-active-text-color,
-          var(--primary-color)
-        );
-        --track-color: var(--ha-tab-track-color, var(--divider-color));
-        --indicator-color: var(--ha-tab-indicator-color, var(--primary-color));
-      }
-      ::slotted(sl-tab:not([active])) {
-        opacity: 0.8;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    // @ts-ignore
-    "sl-tab-group": HaSlTabGroup;
-  }
-}

src/data/bluetooth.ts

@@ -24,11 +24,14 @@ export interface BluetoothConnectionData extends DataTableRowData {
   source: string;
 }
 
+export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
+
 export interface BluetoothScannerDetails {
   source: string;
   connectable: boolean;
   name: string;
   adapter: string;
+  scanner_type?: HaScannerType;
 }
 
 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -55,6 +58,13 @@ export interface BluetoothAllocationsData {
   allocated: string[];
 }
 
+export interface BluetoothScannerState {
+  source: string;
+  adapter: string;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
+}
+
 export const subscribeBluetoothScannersDetailsUpdates = (
   conn: Connection,
   store: Store<BluetoothScannersDetails>
@@ -170,3 +180,20 @@ export const subscribeBluetoothConnectionAllocations = (
     params
   );
 };
+
+export const subscribeBluetoothScannerState = (
+  conn: Connection,
+  callbackFunction: (scannerState: BluetoothScannerState) => void,
+  configEntryId?: string
+): Promise<() => Promise<void>> => {
+  const params: { type: string; config_entry_id?: string } = {
+    type: "bluetooth/subscribe_scanner_state",
+  };
+  if (configEntryId) {
+    params.config_entry_id = configEntryId;
+  }
+  return conn.subscribeMessage<BluetoothScannerState>(
+    (scannerState) => callbackFunction(scannerState),
+    params
+  );
+};

src/data/data_entry_flow.ts

@@ -97,6 +97,7 @@ export interface DataEntryFlowStepMenu {
   step_id: string;
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
+  sort?: boolean;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
 }

src/data/recorder.ts

@@ -2,6 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import { firstWeekday } from "../common/datetime/first_weekday";
 
 export interface RecorderInfo {
   backlog: number | null;
@@ -108,7 +109,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -211,7 +212,14 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar,
+    calendar: period.calendar
+      ? {
+          ...(period.calendar.period === "week"
+            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
+            : {}),
+          ...period.calendar,
+        }
+      : undefined,
     rolling_window: period.rolling_window,
   });
 

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -137,6 +137,12 @@ export interface FlowConfig {
     option: string
   ): string;
 
+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/step-flow-menu.ts

@@ -1,5 +1,5 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -17,9 +18,18 @@ class StepFlowMenu extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this.hass.localize !== changedProps.get("hass")?.localize
+    );
+  }
+
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -30,10 +40,36 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
+    }
+
+    if (this.step.sort) {
+      options = options.sort((a, b) =>
+        stringCompare(
+          translations[a]!,
+          translations[b]!,
+          this.hass.locale.language
+        )
+      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +82,18 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
               <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -73,11 +119,10 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
       }
       .content {
         padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

src/dialogs/more-info/controls/more-info-update.ts

@@ -475,7 +475,6 @@ class MoreInfoUpdate extends LitElement {
       bottom: 0;
       margin: 0 -24px 0 -24px;
       margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
-      padding-bottom: var(--safe-area-inset-bottom);
       box-sizing: border-box;
       display: flex;
       flex-direction: column;

src/dialogs/more-info/controls/more-info-weather.ts

@@ -3,14 +3,18 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-tab-group";
+import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-tooltip";
-import "../../../components/sl-tab-group";
 import type {
   ForecastEvent,
   ModernForecastType,
@@ -28,7 +32,6 @@ import {
   weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -292,106 +295,101 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-      ${forecast
-        ? html`
-            <div class="section">
-              ${this.hass.localize("ui.card.weather.forecast")}:
-            </div>
-            ${supportedForecasts.length > 1
-              ? html`<sl-tab-group
-                  @sl-tab-show=${this._handleForecastTypeChanged}
+
+      <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
+      ${supportedForecasts?.length > 1
+        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
+            ${supportedForecasts.map(
+              (forecastType) =>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                 >
-                  ${supportedForecasts.map(
-                    (forecastType) =>
-                      html`<sl-tab
-                        slot="nav"
-                        .panel=${forecastType}
-                        .active=${this._forecastType === forecastType}
-                      >
-                        ${this.hass!.localize(
-                          `ui.card.weather.${forecastType}`
-                        )}
-                      </sl-tab>`
-                  )}
-                </sl-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
+                </ha-tab-group-tab>`
+            )}
+          </ha-tab-group>`
+        : nothing}
+      <div class="forecast">
+        ${forecast?.length
+          ? forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`
+                    <div>
                       <div>
-                        <div>
-                          ${dayNight
+                        ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                             ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
                                 ${formatDateWeekdayShort(
                                   new Date(item.datetime),
                                   this.hass!.locale,
                                   this.hass!.config
                                 )}
-                                <div class="daynight">
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
-                          ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
-                            `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
+                              `}
                       </div>
-                    `
-                  : nothing
-              )}
-            </div>
-          `
-        : nothing}
+                      ${this._showValue(item.condition)
+                        ? html`
+                            <div class="forecast-image-icon">
+                              ${getWeatherStateIcon(
+                                item.condition!,
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
+                            </div>
+                          `
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
@@ -422,11 +420,11 @@ class MoreInfoWeather extends LitElement {
           font-size: 1.2em;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
 
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }
@@ -589,6 +587,10 @@ class MoreInfoWeather extends LitElement {
         .forecast-icon {
           --mdc-icon-size: 40px;
         }
+
+        .forecast ha-spinner {
+          height: 120px;
+        }
       `,
     ];
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -661,7 +661,10 @@ export class MoreInfoDialog extends LitElement {
         ha-dialog {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: 40px;
+          --dialog-surface-margin-top: max(
+            40px,
+            var(--safe-area-inset-top, 0px)
+          );
           --dialog-content-padding: 0;
         }
 

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -281,11 +281,11 @@ export class QuickBar extends LitElement {
                         class="ha-scrollbar"
                         style=${styleMap({
                           height: this._narrow
-                            ? "calc(100vh - 56px)"
-                            : `${Math.min(
+                            ? "calc(100vh - 56px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
+                            : `calc(${Math.min(
                                 items.length * (commandMode ? 56 : 72) + 26,
                                 500
-                              )}px`,
+                              )}px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))`,
                         })}
                         .items=${items}
                         .renderItem=${this._renderItem}

src/html/authorize.html.template

@@ -35,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/html/index.html.template

@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 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 {

src/html/onboarding.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
@@ -32,6 +33,7 @@
         justify-content: flex-start;
         margin-bottom: 32px;
         margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/layouts/hass-tabs-subpage-data-table.ts

@@ -884,7 +884,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
 
     .filter-dialog-content {
-      height: calc(100vh - 1px - 61px - var(--header-height));
+      height: calc(
+        100vh -
+          70px - var(--header-height, 0px) - var(
+            --safe-area-inset-top,
+            0px
+          ) - var(--safe-area-inset-bottom, 0px)
+      );
       display: flex;
       flex-direction: column;
     }

src/layouts/home-assistant-main.ts

@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --mdc-drawer-width: 56px;
       --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
     :host([expanded]) {
       --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
     :host([modal]) {
       --mdc-drawer-width: unset;
       --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,
     ha-sidebar {

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -3,6 +3,7 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
@@ -66,6 +67,7 @@ export class HaConditionAction extends LitElement implements ActionElement {
               .value=${this.action.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
+              @closed=${stopPropagation}
             >
               ${this._processedTypes(this.hass.localize).map(
                 ([opt, label, icon]) => html`

src/panels/config/automation/ha-automation-picker.ts

@@ -292,7 +292,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           extraTemplate: (automation) =>
             automation.labels.length
               ? html`<ha-data-table-labels
-                  @label-clicked=${this._labelClicked}
+                  @label-clicked=${narrow ? undefined : this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
               : nothing,

src/panels/config/automation/option/ha-automation-option.ts

@@ -317,7 +317,7 @@ export default class HaAutomationOption extends LitElement {
     automationRowsStyles,
     css`
       :host([root]) .rows {
-        padding-right: 8px;
+        padding-inline-end: 8px;
       }
     `,
   ];

src/panels/config/automation/styles.ts

@@ -62,12 +62,15 @@ export const indentStyle = css`
   .card-content.indent,
   .selector-row,
   :host([indent]) ha-form {
-    margin-left: 12px;
-    padding: 12px 0 16px 16px;
-    border-left: 2px solid var(--ha-color-border-neutral-quiet);
+    margin-inline-start: 12px;
+    padding-top: 12px;
+    padding-bottom: 16px;
+    padding-inline-start: 16px;
+    padding-inline-end: 0px;
+    border-inline-start: 2px solid var(--ha-color-border-neutral-quiet);
     border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
     border-radius: 0;
-    border-bottom-left-radius: var(--ha-border-radius-lg);
+    border-end-start-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
   :host([selected]) .card-content.indent,
@@ -175,7 +178,7 @@ export const automationRowsStyles = css`
     gap: 16px;
   }
   .rows.no-sidebar {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .sortable-ghost {
     background: none;

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -239,12 +239,8 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
-            --mdc-dialog-max-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
         ha-switch {

src/panels/config/helpers/dialog-helper-detail.ts

@@ -430,7 +430,13 @@ export class DialogHelperDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-list {
-            height: calc(100vh - 184px);
+            height: calc(
+              100vh -
+                184px - var(--safe-area-inset-top, 0px) - var(
+                  --safe-area-inset-bottom,
+                  0px
+                )
+            );
           }
         }
       `,

src/panels/config/integrations/dialog-add-integration.ts

@@ -461,7 +461,9 @@ class AddIntegrationDialog extends LitElement {
               class="ha-scrollbar"
               style=${styleMap({
                 width: `${this._width}px`,
-                height: this._narrow ? "calc(100vh - 184px)" : "500px",
+                height: this._narrow
+                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
+                  : "500px",
               })}
               @click=${this._integrationPicked}
               @keypress=${this._handleKeyPress}

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -11,13 +11,22 @@ import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-d
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
-import { subscribeBluetoothConnectionAllocations } from "../../../../../data/bluetooth";
+import {
+  subscribeBluetoothConnectionAllocations,
+  subscribeBluetoothScannerState,
+  subscribeBluetoothScannersDetails,
+} from "../../../../../data/bluetooth";
+import type {
+  BluetoothAllocationsData,
+  BluetoothScannerState,
+  BluetoothScannersDetails,
+  HaScannerType,
+} from "../../../../../data/bluetooth";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
 } from "../../../../../util/calculate";
 import "../../../../../components/ha-metric";
-import type { BluetoothAllocationsData } from "../../../../../data/bluetooth";
 
 @customElement("bluetooth-config-dashboard")
 export class BluetoothConfigDashboard extends LitElement {
@@ -29,16 +38,26 @@ export class BluetoothConfigDashboard extends LitElement {
 
   @state() private _connectionAllocationsError?: string;
 
+  @state() private _scannerState?: BluetoothScannerState;
+
+  @state() private _scannerDetails?: BluetoothScannersDetails;
+
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"
   );
 
   private _unsubConnectionAllocations?: (() => Promise<void>) | undefined;
 
+  private _unsubScannerState?: (() => Promise<void>) | undefined;
+
+  private _unsubScannerDetails?: (() => void) | undefined;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass) {
       this._subscribeBluetoothConnectionAllocations();
+      this._subscribeBluetoothScannerState();
+      this._subscribeScannerDetails();
     }
   }
 
@@ -61,12 +80,45 @@ export class BluetoothConfigDashboard extends LitElement {
     }
   }
 
+  private async _subscribeBluetoothScannerState(): Promise<void> {
+    if (this._unsubScannerState || !this._configEntry) {
+      return;
+    }
+    this._unsubScannerState = await subscribeBluetoothScannerState(
+      this.hass.connection,
+      (scannerState) => {
+        this._scannerState = scannerState;
+      },
+      this._configEntry
+    );
+  }
+
+  private _subscribeScannerDetails(): void {
+    if (this._unsubScannerDetails) {
+      return;
+    }
+    this._unsubScannerDetails = subscribeBluetoothScannersDetails(
+      this.hass.connection,
+      (details) => {
+        this._scannerDetails = details;
+      }
+    );
+  }
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubConnectionAllocations) {
       this._unsubConnectionAllocations();
       this._unsubConnectionAllocations = undefined;
     }
+    if (this._unsubScannerState) {
+      this._unsubScannerState();
+      this._unsubScannerState = undefined;
+    }
+    if (this._unsubScannerDetails) {
+      this._unsubScannerDetails();
+      this._unsubScannerDetails = undefined;
+    }
   }
 
   protected render(): TemplateResult {
@@ -78,6 +130,7 @@ export class BluetoothConfigDashboard extends LitElement {
               "ui.panel.config.bluetooth.settings_title"
             )}
           >
+            <div class="card-content">${this._renderScannerState()}</div>
             <div class="card-actions">
               <ha-button @click=${this._openOptionFlow}
                 >${this.hass.localize(
@@ -142,6 +195,118 @@ export class BluetoothConfigDashboard extends LitElement {
   private _getUsedAllocations = (used: number, total: number) =>
     roundWithOneDecimal(getValueInPercentage(used, 0, total));
 
+  private _renderScannerMismatchWarning(
+    scannerState: BluetoothScannerState,
+    scannerType: HaScannerType,
+    formatMode: (mode: string | null) => string
+  ) {
+    const instructions: string[] = [];
+
+    if (scannerType === "remote" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_remote"
+        )
+      );
+    }
+    if (scannerType === "usb" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_usb"
+        )
+      );
+    }
+    if (scannerType === "uart" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_uart"
+        )
+      );
+    }
+
+    return html`<ha-alert alert-type="warning">
+      <div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch",
+          {
+            requested: formatMode(scannerState.requested_mode),
+            current: formatMode(scannerState.current_mode),
+          }
+        )}
+      </div>
+      <ul>
+        ${instructions.map((instruction) => html`<li>${instruction}</li>`)}
+      </ul>
+    </ha-alert>`;
+  }
+
+  private _renderScannerState() {
+    if (!this._configEntry || !this._scannerState) {
+      return html`<div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.no_scanner_state_available"
+        )}
+      </div>`;
+    }
+
+    const scannerState = this._scannerState;
+    // Find the scanner details for this source
+    const scannerDetails = this._scannerDetails?.[scannerState.source];
+    const scannerType: HaScannerType =
+      scannerDetails?.scanner_type ?? "unknown";
+
+    const formatMode = (mode: string | null) => {
+      switch (mode) {
+        case null:
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_none"
+          );
+        case "active":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_active"
+          );
+        case "passive":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_passive"
+          );
+        default:
+          return mode; // Fallback for unknown modes
+      }
+    };
+
+    return html`
+      <div class="scanner-state">
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.current_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.current_mode)}</span
+          >
+        </div>
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.requested_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.requested_mode)}</span
+          >
+        </div>
+        ${scannerState.current_mode !== scannerState.requested_mode
+          ? this._renderScannerMismatchWarning(
+              scannerState,
+              scannerType,
+              formatMode
+            )
+          : nothing}
+      </div>
+    `;
+  }
+
   private _renderConnectionAllocations() {
     if (this._connectionAllocationsError) {
       return html`<ha-alert alert-type="error"
@@ -220,6 +385,18 @@ export class BluetoothConfigDashboard extends LitElement {
           display: flex;
           justify-content: flex-end;
         }
+        .scanner-state {
+          margin-bottom: 16px;
+        }
+        .state-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 4px 0;
+        }
+        .state-value {
+          font-weight: 500;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -34,6 +34,16 @@ const UPDATE_THROTTLE_TIME = 10000;
 const CORE_SOURCE_ID = "ha";
 const CORE_SOURCE_LABEL = "Home Assistant";
 
+const RSSI_COLOR_THRESHOLDS: [number, string][] = [
+  [-70, "--green-color"], // Excellent: > -70 dBm
+  [-75, "--lime-color"], // Good: -70 to -75 dBm
+  [-80, "--yellow-color"], // Okay: -75 to -80 dBm
+  [-85, "--amber-color"], // Marginal: -80 to -85 dBm
+  [-90, "--orange-color"], // Weak: -85 to -90 dBm
+  [-95, "--deep-orange-color"], // Poor: -90 to -95 dBm
+  [-Infinity, "--red-color"], // Very poor: < -95 dBm
+];
+
 @customElement("bluetooth-network-visualization")
 export class BluetoothNetworkVisualization extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -125,6 +135,16 @@ export class BluetoothNetworkVisualization extends LitElement {
     `;
   }
 
+  private _getRssiColorVar = memoizeOne((rssi: number): string => {
+    for (const [threshold, colorVar] of RSSI_COLOR_THRESHOLDS) {
+      if (rssi > threshold) {
+        return colorVar;
+      }
+    }
+    // Fallback (should never reach here)
+    return "--red-color";
+  });
+
   private _formatNetworkData = memoizeOne(
     (
       data: BluetoothDeviceData[],
@@ -206,7 +226,7 @@ export class BluetoothNetworkVisualization extends LitElement {
             symbol: "none",
             lineStyle: {
               width: this._getLineWidth(node.rssi),
-              color: style.getPropertyValue("--primary-color"),
+              color: style.getPropertyValue(this._getRssiColorVar(node.rssi)),
             },
           });
           return;
@@ -227,7 +247,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           lineStyle: {
             width: this._getLineWidth(node.rssi),
             color: device
-              ? style.getPropertyValue("--primary-color")
+              ? style.getPropertyValue(this._getRssiColorVar(node.rssi))
               : style.getPropertyValue("--disabled-color"),
           },
         });

src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts

@@ -8,6 +8,8 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-code-editor";
 import "../../../../../components/ha-dialog";
 import "../../../../../components/ha-dialog-header";
+import "../../../../../components/ha-tab-group";
+import "../../../../../components/ha-tab-group-tab";
 import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
 import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -103,10 +105,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           >
             ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
           </span>
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
             ${tabs.map(
               (tab) => html`
-                <sl-tab
+                <ha-tab-group-tab
                   slot="nav"
                   .panel=${tab}
                   .active=${this._currTab === tab}
@@ -114,10 +116,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                   ${this.hass.localize(
                     `ui.dialogs.zha_manage_device.tabs.${tab}`
                   )}
-                </sl-tab>
+                </ha-tab-group-tab>
               `
             )}
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
@@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           }
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts

@@ -6,6 +6,8 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
+import "../../../../../components/ha-tab-group";
+import "../../../../../components/ha-tab-group-tab";
 import type { Cluster, ZHADevice } from "../../../../../data/zha";
 import { fetchClustersForZhaDevice } from "../../../../../data/zha";
 import { haStyle } from "../../../../../resources/styles";
@@ -13,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types";
 import { computeClusterKey } from "./functions";
 import "./zha-cluster-attributes";
 import "./zha-cluster-commands";
-import "../../../../../components/sl-tab-group";
 
 declare global {
   // for fire event
@@ -91,20 +92,20 @@ export class ZHAManageClusters extends LitElement {
         </div>
         ${this._selectedCluster
           ? html`
-              <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+              <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                 ${tabs.map(
                   (tab) => html`
-                    <sl-tab
+                    <ha-tab-group-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
                       >${this.hass.localize(
                         `ui.panel.config.zha.clusters.tabs.${tab}`
-                      )}</sl-tab
+                      )}</ha-tab-group-tab
                     >
                   `
                 )}
-              </sl-tab-group>
+              </ha-tab-group>
 
               <div class="content" tabindex="-1" dialogInitialFocus>
                 ${cache(
@@ -177,10 +178,10 @@ export class ZHAManageClusters extends LitElement {
           padding-bottom: 10px;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts

@@ -1,11 +1,11 @@
+import "@home-assistant/webawesome/dist/components/animation/animation";
 import { mdiCheckCircleOutline } from "@mdi/js";
-import { customElement, property } from "lit/decorators";
-import "@awesome.me/webawesome/dist/components/animation/animation";
 import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-svg-icon";
 import "../../../../../../components/ha-alert";
+import "../../../../../../components/ha-svg-icon";
 
 @customElement("zwave-js-add-node-added-insecure")
 export class ZWaveJsAddNodeFinished extends LitElement {

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts

@@ -1,15 +1,15 @@
-import "@awesome.me/webawesome/dist/components/animation/animation";
+import "@home-assistant/webawesome/dist/components/animation/animation";
 import { mdiRestart } from "@mdi/js";
 
-import { customElement, property } from "lit/decorators";
 import { css, html, LitElement, nothing } from "lit";
-import type { HomeAssistant } from "../../../../../../types";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import { InclusionStrategy } from "../../../../../../data/zwave_js";
+import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-spinner";
-import "../../../../../../components/ha-button";
 import "../../../../../../components/ha-alert";
+import "../../../../../../components/ha-button";
+import "../../../../../../components/ha-spinner";
 import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin";
 
 @customElement("zwave-js-add-node-searching-devices")

src/panels/config/logs/error-log-card.ts

@@ -243,7 +243,7 @@ class ErrorLogCard extends LitElement {
               ${!streaming || this._error
                 ? html`<ha-icon-button
                     .path=${mdiRefresh}
-                    @click=${this._loadLogs}
+                    @click=${this._handleRefresh}
                     .label=${localize("ui.common.refresh")}
                   ></ha-icon-button>`
                 : nothing}
@@ -715,6 +715,10 @@ class ErrorLogCard extends LitElement {
     this._wrapLines = !this._wrapLines;
   }
 
+  private _handleRefresh() {
+    this._loadLogs();
+  }
+
   private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     let index = ev.detail.index;
     if (this.provider === "core") {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -199,8 +199,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
           "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
         ),
         sortable: true,
-        type: "icon",
         hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.require_admin
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -210,8 +212,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
         title: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
         ),
-        type: "icon",
         hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.show_in_sidebar
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`

src/panels/config/network/supervisor-network.ts

@@ -15,9 +15,10 @@ import "../../../components/ha-password-field";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-spinner";
+import "../../../components/ha-tab-group";
+import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
-import "../../../components/sl-tab-group";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
   type AccessPoint,
@@ -99,19 +100,19 @@ export class HassioNetwork extends LitElement {
           ${this.hass.localize("ui.panel.config.network.supervisor.title")}
           ${this._interfaces.length > 1
             ? html`
-                <sl-tab-group @sl-tab-show=${this._handleTabActivated}
+                <ha-tab-group @wa-tab-show=${this._handleTabActivated}
                   >${this._interfaces.map(
                     (device, i) =>
-                      html`<sl-tab
+                      html`<ha-tab-group-tab
                         slot="nav"
                         .active=${this._curTabIndex === i}
                         .panel=${i.toString()}
                         .id=${device.interface}
                       >
                         ${device.interface}
-                      </sl-tab>`
+                      </ha-tab-group-tab>`
                   )}
-                </sl-tab-group>
+                </ha-tab-group>
               `
             : nothing}
         </div>
@@ -833,13 +834,13 @@ export class HassioNetwork extends LitElement {
           margin-bottom: 16px;
         }
 
-        sl-tab-group {
+        ha-tab-group {
           line-height: var(--ha-line-height-normal);
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -289,6 +289,15 @@ export const showRepairsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.step.${step.step_id}.menu_option_descriptions.${option}`,
+          mergePlaceholders(issue, step)
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(

src/panels/config/script/ha-script-field-row.ts

@@ -335,7 +335,10 @@ export default class HaScriptFieldRow extends LitElement {
           border-bottom-color: var(--divider-color);
         }
         .selector-row {
-          padding: 12px 0 16px 16px;
+          padding-top: 12px;
+          padding-bottom: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: 0px;
         }
       `,
     ];

src/panels/config/voice-assistants/dialog-expose-entity.ts

@@ -242,19 +242,21 @@ class DialogExposeEntity extends LitElement {
         }
         @media all and (max-width: 500px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
-            --mdc-dialog-max-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
             --mdc-dialog-min-height: 100%;
             --mdc-dialog-max-height: 100%;
             --vertical-align-dialog: flex-end;
             --ha-dialog-border-radius: 0px;
           }
           lit-virtualizer {
-            height: calc(100vh - 198px);
+            height: calc(
+              100vh -
+                210px - var(--safe-area-inset-top, 0px) - var(
+                  --safe-area-inset-bottom,
+                  0px
+                )
+            );
           }
           search-input {
             --text-field-suffix-padding-left: unset;

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -137,9 +137,8 @@ class DialogHomeZoneDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
       `,

src/panels/config/zone/dialog-zone-detail.ts

@@ -224,9 +224,8 @@ class DialogZoneDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
         ha-form.passive {

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -1,14 +1,15 @@
+import type { ActionDetail } from "@material/mwc-list";
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { ActionDetail } from "@material/mwc-list";
 import { navigate } from "../../common/navigate";
-import "../../components/ha-menu-button";
 import "../../components/ha-button-menu";
 import "../../components/ha-icon-button";
 import "../../components/ha-list-item";
-import "../../components/sl-tab-group";
+import "../../components/ha-menu-button";
+import "../../components/ha-tab-group";
+import "../../components/ha-tab-group-tab";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
 import "./developer-tools-router";
@@ -50,25 +51,41 @@ class PanelDeveloperTools extends LitElement {
             </ha-list-item>
           </ha-button-menu>
         </div>
-        <sl-tab-group @sl-tab-show=${this._handlePageSelected}>
-          <sl-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
+        <ha-tab-group @wa-tab-show=${this._handlePageSelected}>
+          <ha-tab-group-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
             ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="state" .active=${page === "state"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="state"
+            .active=${page === "state"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.states.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="action" .active=${page === "action"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="action"
+            .active=${page === "action"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="template" .active=${page === "template"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="template"
+            .active=${page === "template"}
+          >
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.templates.title"
             )}
-          </sl-tab>
-          <sl-tab slot="nav" panel="event" .active=${page === "event"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="event"
+            .active=${page === "event"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.events.title")}
-          </sl-tab>
-          <sl-tab
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
             slot="nav"
             panel="statistics"
             .active=${page === "statistics"}
@@ -76,11 +93,14 @@ class PanelDeveloperTools extends LitElement {
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.statistics.title"
             )}
-          </sl-tab>
-          <sl-tab slot="nav" panel="assist" .active=${page === "assist"}
-            >Assist</sl-tab
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="assist"
+            .active=${page === "assist"}
+            >Assist</ha-tab-group-tab
           >
-        </sl-tab-group>
+        </ha-tab-group>
       </div>
       <developer-tools-router
         .route=${this.route}
@@ -163,7 +183,7 @@ class PanelDeveloperTools extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
-        sl-tab-group {
+        ha-tab-group {
           --ha-tab-active-text-color: var(--app-header-text-color, white);
           --ha-tab-indicator-color: var(--app-header-text-color, white);
           --ha-tab-track-color: transparent;

src/panels/developer-tools/state/developer-tools-state.ts

@@ -568,6 +568,10 @@ class HaPanelDevState extends LitElement {
           margin: 0 8px 16px;
         }
 
+        ha-expansion-panel p {
+          padding: 0 8px;
+        }
+
         .inputs {
           width: 100%;
           max-width: 800px;
@@ -579,8 +583,9 @@ class HaPanelDevState extends LitElement {
 
         .button-row {
           display: flex;
-          margin-top: 8px;
+          margin: 8px 0;
           align-items: center;
+          gap: 8px;
         }
 
         :host([narrow]) .state-wrapper {

src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

@@ -36,11 +36,12 @@ export class HuiClockCardDigital extends LitElement {
       locale = { ...locale, time_format: this.config.time_format };
     }
 
+    const h12 = useAmPm(locale);
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
+      hour: h12 ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
+      hourCycle: h12 ? "h12" : "h23",
       timeZone:
         this.config?.time_zone ||
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -7,6 +7,7 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateActive } from "../../../common/entity/state_active";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-state-icon";
@@ -30,15 +31,6 @@ import type {
 } from "./types";
 import type { PersonEntity } from "../../../data/person";
 
-const STATES_OFF = new Set([
-  "closed",
-  "locked",
-  "not_home",
-  "off",
-  "unavailable",
-  "unknown",
-]);
-
 @customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -303,7 +295,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           .disabled=${!hasAction(entityConf.tap_action)}
           .config=${entityConf}
           class=${classMap({
-            "state-on": !STATES_OFF.has(stateObj.state),
+            "state-on": stateActive(stateObj),
           })}
           title=${`${computeStateName(
             stateObj

src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts

@@ -1,7 +1,8 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { getBadgeElementClass } from "../../create-element/create-badge-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@@ -67,17 +68,21 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
         break;
     }
     return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
         ${tabs.map(
           (tab) => html`
-            <sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .panel=${tab}
+              .active=${this._currTab === tab}
+            >
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
               )}
-            </sl-tab>
+            </ha-tab-group-tab>
           `
         )}
-      </sl-tab-group>
+      </ha-tab-group>
       ${content}
     `;
   }
@@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
     return [
       HuiTypedElementEditor.styles,
       css`
-        sl-tab-group {
+        ha-tab-group {
           margin-bottom: 16px;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts

@@ -5,10 +5,11 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -98,8 +99,8 @@ export class HuiCreateDialogBadge
             .path=${mdiClose}
           ></ha-icon-button>
           <span slot="title">${title}</span>
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "badge"}
               panel="badge"
@@ -108,16 +109,16 @@ export class HuiCreateDialogBadge
               ${this.hass!.localize(
                 "ui.panel.lovelace.editor.badge_picker.by_badge"
               )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "entity"}
               panel="entity"
               >${this.hass!.localize(
                 "ui.panel.lovelace.editor.badge_picker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
             >
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         ${cache(
           this._currTab === "badge"
@@ -193,10 +194,10 @@ export class HuiCreateDialogBadge
             --mdc-dialog-min-width: 1000px;
           }
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -1,7 +1,8 @@
 import type { TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { getCardElementClass } from "../../create-element/create-card-element";
@@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
         `;
     }
     return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
         ${displayedTabs.map(
           (tab) => html`
-            <sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .active=${this._currTab === tab}
+              panel=${tab}
+            >
               ${this.hass.localize(
                 `ui.panel.lovelace.editor.edit_card.tab_${tab}`
               )}
-            </sl-tab>
+            </ha-tab-group-tab>
           `
         )}
-      </sl-tab-group>
+      </ha-tab-group>
       ${content}
     `;
   }
@@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
 
   static override styles = [
     css`
-      sl-tab-group {
+      ha-tab-group {
         margin-bottom: 16px;
       }
 
-      sl-tab {
+      ha-tab-group-tab {
         flex: 1;
       }
 
-      sl-tab::part(base) {
+      ha-tab-group-tab::part(base) {
         width: 100%;
         justify-content: center;
       }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -9,7 +9,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -117,8 +118,8 @@ export class HuiCreateDialogCard
           ></ha-icon-button>
           <span slot="title">${title}</span>
 
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "card"}
               panel="card"
@@ -127,16 +128,16 @@ export class HuiCreateDialogCard
               ${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_card"
               )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "entity"}
               panel="entity"
               >${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
             >
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         ${cache(
           this._currTab === "card"
@@ -215,10 +216,10 @@ export class HuiCreateDialogCard
             --mdc-dialog-min-width: 1000px;
           }
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -10,7 +10,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -79,18 +80,22 @@ export class HuiConditionalCardEditor
     const isGuiMode = !this._cardEditorEl || this._GUImode;
 
     return html`
-      <sl-tab-group @sl-tab-show=${this._selectTab}>
-        <sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
+      <ha-tab-group @wa-tab-show=${this._selectTab}>
+        <ha-tab-group-tab
+          slot="nav"
+          panel="conditions"
+          .active=${!this._cardTab}
+        >
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.conditional.conditions"
           )}
-        </sl-tab>
-        <sl-tab slot="nav" panel="card" .active=${this._cardTab}>
+        </ha-tab-group-tab>
+        <ha-tab-group-tab slot="nav" panel="card" .active=${this._cardTab}>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.conditional.card"
           )}
-        </sl-tab>
-      </sl-tab-group>
+        </ha-tab-group-tab>
+      </ha-tab-group>
       ${this._cardTab
         ? html`
             <div class="card">
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor
     return [
       configElementStyle,
       css`
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
 
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -30,7 +30,8 @@ import type {
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-button-arrow-next";
 import "../../../../components/ha-icon-button-arrow-prev";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -123,14 +124,18 @@ export class HuiStackCardEditor
       ></ha-form>
       <div class="card-config">
         <div class="toolbar">
-          <sl-tab-group @sl-tab-show=${this._handleSelectedCard}>
+          <ha-tab-group @wa-tab-show=${this._handleSelectedCard}>
             ${this._config.cards.map(
               (_card, i) =>
-                html`<sl-tab slot="nav" .panel=${i} .active=${i === selected}>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${i}
+                  .active=${i === selected}
+                >
                   ${i + 1}
-                </sl-tab>`
+                </ha-tab-group-tab>`
             )}
-          </sl-tab-group>
+          </ha-tab-group>
           <ha-icon-button
             @click=${this._handleAddCard}
             .path=${mdiPlus}
@@ -229,8 +234,6 @@ export class HuiStackCardEditor
 
   protected async _handleAddCard() {
     this._selectedCard = this._config!.cards.length;
-    await this.updateComplete;
-    this.renderRoot.querySelector("sl-tab-group")!.syncIndicator();
   }
 
   protected _handleSelectedCard(ev) {
@@ -335,7 +338,7 @@ export class HuiStackCardEditor
           justify-content: space-between;
           align-items: center;
         }
-        sl-tab-group {
+        ha-tab-group {
           flex-grow: 1;
           min-width: 0;
           --ha-tab-track-color: var(--card-background-color);

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -17,30 +17,31 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import "../../../../components/sl-tab-group";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
+import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
+import { saveConfig } from "../../../../data/lovelace/config/types";
 import {
   isStrategyView,
   type LovelaceViewConfig,
 } from "../../../../data/lovelace/config/view";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import type { Lovelace } from "../../types";
+import { addSection, deleteSection, moveSection } from "../config-util";
 import {
   findLovelaceContainer,
   updateLovelaceContainer,
 } from "../lovelace-path";
+import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
 import "./hui-section-settings-editor";
 import "./hui-section-visibility-editor";
 import type { EditSectionDialogParams } from "./show-edit-section-dialog";
-import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
-import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
-import { saveConfig } from "../../../../data/lovelace/config/types";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import { addSection, deleteSection, moveSection } from "../config-util";
-import type { Lovelace } from "../../types";
 
 const TABS = ["tab-settings", "tab-visibility"] as const;
 
@@ -195,10 +196,10 @@ export class HuiDialogEditSection
           </ha-button-menu>
           ${!this._yamlMode
             ? html`
-                <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+                <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                   ${TABS.map(
                     (tab) => html`
-                      <sl-tab
+                      <ha-tab-group-tab
                         slot="nav"
                         .panel=${tab}
                         .active=${this._currTab === tab}
@@ -206,10 +207,10 @@ export class HuiDialogEditSection
                         ${this.hass!.localize(
                           `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                         )}
-                      </sl-tab>
+                      </ha-tab-group-tab>
                     `
                   )}
-                </sl-tab-group>
+                </ha-tab-group>
               `
             : nothing}
         </ha-dialog-header>
@@ -433,10 +434,10 @@ export class HuiDialogEditSection
         ha-dialog.yaml-mode {
           --dialog-content-padding: 0;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -20,6 +20,8 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import {
@@ -53,7 +55,6 @@ import "./hui-view-background-editor";
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import type { EditViewDialogParams } from "./show-edit-view-dialog";
-import "../../../../components/sl-tab-group";
 
 const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
 
@@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement {
               `
             : nothing}
           ${!this._yamlMode
-            ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+            ? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                 ${TABS.map(
                   (tab) => html`
-                    <sl-tab
+                    <ha-tab-group-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
@@ -285,10 +286,10 @@ export class HuiDialogEditView extends LitElement {
                       ${this.hass!.localize(
                         `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
                       )}
-                    </sl-tab>
+                    </ha-tab-group-tab>
                   `
                 )}
-              </sl-tab-group>`
+              </ha-tab-group>`
             : nothing}
         </ha-dialog-header>
         ${content}
@@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement {
           font-size: inherit;
           font-weight: inherit;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/hui-root.ts

@@ -45,7 +45,8 @@ import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-svg-icon";
-import "../../components/sl-tab-group";
+import "../../components/ha-tab-group";
+import "../../components/ha-tab-group-tab";
 import { createAreaRegistryEntry } from "../../data/area_registry";
 import type { LovelacePanelConfig } from "../../data/lovelace";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -409,12 +410,12 @@ class HUIRoot extends LitElement {
         !view.visible.some((e) => e.user === this.hass!.user?.id)) ||
         view.visible === false);
 
-    const tabs = html`<sl-tab-group @sl-tab-show=${this._handleViewSelected}>
+    const tabs = html`<ha-tab-group @wa-tab-show=${this._handleViewSelected}>
       ${views.map((view, index) => {
         const hidden =
           !this._editMode && (view.subview || _isTabHiddenForUser(view));
         return html`
-          <sl-tab
+          <ha-tab-group-tab
             slot="nav"
             panel=${index}
             .active=${this._curView === index}
@@ -471,10 +472,10 @@ class HUIRoot extends LitElement {
                   ></ha-icon-button-arrow-next>
                 `
               : nothing}
-          </sl-tab>
+          </ha-tab-group-tab>
         `;
       })}
-    </sl-tab-group>`;
+    </ha-tab-group>`;
 
     const isSubview = curViewConfig?.subview;
     const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -1260,7 +1261,7 @@ class HUIRoot extends LitElement {
           display: flex;
           align-items: center;
         }
-        sl-tab-group {
+        ha-tab-group {
           --ha-tab-indicator-color: var(
             --app-header-selection-bar-color,
             var(--app-header-text-color, white)
@@ -1272,10 +1273,10 @@ class HUIRoot extends LitElement {
           min-width: 0;
           height: 100%;
         }
-        sl-tab-group::part(nav) {
+        ha-tab-group::part(nav) {
           padding: 0;
         }
-        sl-tab-group::part(scroll-button) {
+        ha-tab-group::part(scroll-button) {
           background-color: var(--app-header-background-color);
           background: linear-gradient(
             90deg,
@@ -1284,14 +1285,14 @@ class HUIRoot extends LitElement {
           );
           z-index: 1;
         }
-        sl-tab-group::part(scroll-button--end) {
+        ha-tab-group::part(scroll-button--end) {
           background: linear-gradient(
             270deg,
             var(--app-header-background-color),
             transparent
           );
         }
-        .edit-mode sl-tab-group::part(scroll-button) {
+        .edit-mode ha-tab-group::part(scroll-button) {
           background-color: var(--app-header-edit-background-color, #455a64);
           background: linear-gradient(
             90deg,
@@ -1299,7 +1300,7 @@ class HUIRoot extends LitElement {
             transparent
           );
         }
-        .edit-mode sl-tab-group::part(scroll-button--end) {
+        .edit-mode ha-tab-group::part(scroll-button--end) {
           background: linear-gradient(
             270deg,
             var(--app-header-edit-background-color, #455a64),
@@ -1312,41 +1313,35 @@ class HUIRoot extends LitElement {
         .tab-bar {
           display: flex;
         }
-        .edit-mode sl-tab-group {
+        .edit-mode ha-tab-group {
           flex-grow: 0;
           color: var(--app-header-edit-text-color, #fff);
           --ha-tab-active-text-color: var(--app-header-edit-text-color, #fff);
           --ha-tab-indicator-color: var(--app-header-edit-text-color, #fff);
         }
-        sl-tab {
-          --sl-tab-height: var(--header-height, 56px);
-          height: calc(var(--sl-tab-height) - 2px);
+        ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--header-height, 56px);
         }
-        sl-tab[aria-selected="true"] .edit-icon {
+        ha-tab-group-tab[aria-selected="true"] .edit-icon {
           display: inline-flex;
         }
-        sl-tab::part(base) {
-          padding-inline-start: var(
-            --ha-tab-padding-start,
-            var(--sl-spacing-large)
-          );
-          padding-inline-end: var(
-            --ha-tab-padding-end,
-            var(--sl-spacing-large)
+        ha-tab-group-tab::part(base) {
+          padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l));
+          padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l));
+        }
+        ha-tab-group-tab::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2);
+        }
+        ha-tab-group-tab.icon::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2 - 2px);
+          padding-bottom: calc(
+            (var(--ha-tab-group-tab-height) - 20px) / 2 - 4px
           );
         }
-        sl-tab::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
+        .tab-bar ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--tab-bar-height, 56px);
         }
-        sl-tab.icon::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 4px);
-        }
-        .tab-bar sl-tab {
-          --sl-tab-height: var(--tab-bar-height, 56px);
-        }
-        .edit-mode sl-tab[aria-selected="true"]::part(base) {
+        .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
           padding: 0;
           margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2);
         }

src/resources/polyfills/stateset.ts

@@ -1,57 +0,0 @@
-// A small polyfill for CSSStateSet
-export class StateSet extends Set<string> {
-  private _el: Element;
-
-  private _existing: null | Set<string> = null;
-
-  constructor(el: Element, existing: Set<string> | null = null) {
-    super();
-    this._el = el;
-    this._existing = existing;
-  }
-
-  add(state: string) {
-    super.add(state);
-    const existing = this._existing;
-    if (existing) {
-      try {
-        existing.add(state);
-      } catch {
-        existing.add(`--${state}`);
-      }
-    } else {
-      this._el.setAttribute(`state-${state}`, "");
-    }
-    return this;
-  }
-
-  delete(state: string) {
-    super.delete(state);
-    const existing = this._existing;
-    if (existing) {
-      existing.delete(state);
-      existing.delete(`--${state}`);
-    } else {
-      this._el.removeAttribute(`state-${state}`);
-    }
-    return true;
-  }
-
-  has(state: string) {
-    return super.has(state);
-  }
-
-  clear() {
-    for (const state of this) this.delete(state);
-  }
-}
-const replaceSync = CSSStyleSheet.prototype.replaceSync;
-Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", {
-  value: function (text) {
-    text = text.replace(
-      /:state\(([^)]+)\)/g,
-      ":where(:state($1), :--$1, [state-$1])"
-    );
-    replaceSync.call(this, text);
-  },
-});

src/resources/theme/core.globals.ts

@@ -11,10 +11,11 @@ export const coreStyles = css`
     --ha-border-radius-md: 8px;
     --ha-border-radius-lg: 12px;
     --ha-border-radius-xl: 16px;
-    --ha-border-radius-2xl: 24px;
-    --ha-border-radius-3xl: 28px;
-    --ha-border-radius-4xl: 32px;
-    --ha-border-radius-5xl: 36px;
+    --ha-border-radius-2xl: 20px;
+    --ha-border-radius-3xl: 24px;
+    --ha-border-radius-4xl: 28px;
+    --ha-border-radius-5xl: 32px;
+    --ha-border-radius-6xl: 36px;
     --ha-border-radius-pill: 9999px;
     --ha-border-radius-circle: 50%;
     --ha-border-radius-square: 0;

src/resources/theme/wa.globals.ts

@@ -12,6 +12,12 @@ export const waMainStyles = css`
     --wa-space-l: 24px;
     --wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);
     --wa-form-control-padding-block: 0.75em;
+
+    --wa-font-weight-action: var(--ha-font-weight-medium);
+    --wa-transition-fast: 75ms;
+    --wa-transition-easing: ease;
+    --wa-border-width-l: var(--ha-border-radius-l);
+    --wa-space-xl: 32px;
   }
 `;
 

src/translations/en.json

@@ -1383,7 +1383,6 @@
         "related": "Related",
         "history": "History",
         "logbook": "Logbook",
-        "device_info": "Device info",
         "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]",
         "device_type": {
           "device": "[%key:ui::panel::config::devices::type::device_heading%]",
@@ -1619,7 +1618,7 @@
             "preload_stream": "Preload camera stream",
             "preload_stream_description": "This keeps the camera stream open in the background so it shows quicker. Warning! This is device intensive.",
             "stream_orientation": "Camera stream orientation",
-            "stream_orientation_description": "The orientation transformation to use for the camera stream.",
+            "stream_orientation_description": "The orientation transformation to use for the camera stream.\nWarning: Stream orientation processing occurs on the Home Assistant device and may impact system performance. When possible, configure this setting directly on your camera instead.",
             "stream_orientation_1": "No orientation transform",
             "stream_orientation_2": "Mirror",
             "stream_orientation_3": "Rotate 180",
@@ -5146,7 +5145,7 @@
             "integration": "Integration",
             "config_entry": "Config entry"
           },
-          "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
+          "enabled_description": "Disabled devices and services will not be shown and entities belonging to them will be disabled, too.",
           "open_configuration_url": "Visit",
           "set_up_voice_assistant": "Set up voice assistant",
           "download_diagnostics": "Download diagnostics",
@@ -5743,6 +5742,16 @@
           "no_advertisements_found": "No matching Bluetooth advertisements found",
           "no_connection_slot_allocations": "No connection slot allocations information available",
           "no_active_connection_support": "This adapter does not support making active (GATT) connections.",
+          "no_scanner_state_available": "No scanner state available",
+          "current_scanning_mode": "Current scanning mode",
+          "requested_scanning_mode": "Requested scanning mode",
+          "scanning_mode_none": "none",
+          "scanning_mode_active": "active",
+          "scanning_mode_passive": "passive",
+          "scanner_mode_mismatch": "Scanner requested {requested} mode but is operating in {current} mode. The scanner is in a bad state and needs to be power cycled.",
+          "scanner_mode_mismatch_remote": "For proxies: reboot the device",
+          "scanner_mode_mismatch_usb": "For USB adapters: unplug and plug back in",
+          "scanner_mode_mismatch_uart": "For UART/onboard adapters: power down the system completely and power it back up",
           "address": "Address",
           "name": "Name",
           "source": "Source",
@@ -8755,7 +8764,7 @@
             "all_parameters": "All available parameters",
             "accepts_target": "This action accepts a target, for example: `entity_id: light.bed_light`",
             "no_template_ui_support": "The UI does not support templates, you can still use the YAML editor.",
-            "copy_clipboard_template": "Copy to clipboard (template)",
+            "copy_clipboard_template": "Copy to clipboard as template",
             "errors": {
               "ui": {
                 "no_action": "No action selected, please select an action",

test/common/entity/device_tracker_icon.test.ts

@@ -0,0 +1,124 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { describe, expect, it } from "vitest";
+import { deviceTrackerIcon } from "../../../src/common/entity/device_tracker_icon";
+
+describe("deviceTrackerIcon", () => {
+  const createMockStateObj = (
+    source_type: string,
+    state = "home"
+  ): HassEntity => ({
+    entity_id: "device_tracker.test",
+    state,
+    attributes: { source_type },
+    context: { id: "test", parent_id: null, user_id: null },
+    last_changed: "2023-01-01T00:00:00Z",
+    last_updated: "2023-01-01T00:00:00Z",
+  });
+
+  describe("router source type", () => {
+    it("should return lan-connect icon when home", () => {
+      const stateObj = createMockStateObj("router", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-connect");
+    });
+
+    it("should return lan-disconnect icon when not home", () => {
+      const stateObj = createMockStateObj("router", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+
+    it("should return lan-disconnect icon for any other state", () => {
+      const stateObj = createMockStateObj("router", "office");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+
+    it("should use explicit state parameter over state object state", () => {
+      const stateObj = createMockStateObj("router", "not_home");
+      expect(deviceTrackerIcon(stateObj, "home")).toBe("mdi:lan-connect");
+    });
+  });
+
+  describe("bluetooth source type", () => {
+    it("should return bluetooth-connect icon when home for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth-connect");
+    });
+
+    it("should return bluetooth icon when not home for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth");
+    });
+
+    it("should return bluetooth-connect icon when home for bluetooth_le", () => {
+      const stateObj = createMockStateObj("bluetooth_le", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth-connect");
+    });
+
+    it("should return bluetooth icon when not home for bluetooth_le", () => {
+      const stateObj = createMockStateObj("bluetooth_le", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth");
+    });
+
+    it("should use explicit state parameter for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "not_home");
+      expect(deviceTrackerIcon(stateObj, "home")).toBe("mdi:bluetooth-connect");
+    });
+  });
+
+  describe("other source types", () => {
+    it("should return account icon when home for gps", () => {
+      const stateObj = createMockStateObj("gps", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should return account-arrow-right icon when not home for gps", () => {
+      const stateObj = createMockStateObj("gps", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+
+    it("should return account icon for unknown location with gps", () => {
+      const stateObj = createMockStateObj("gps", "office");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle unknown source type", () => {
+      const stateObj = createMockStateObj("unknown", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle unknown source type when not home", () => {
+      const stateObj = createMockStateObj("unknown", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle missing source_type attribute", () => {
+      const stateObj: HassEntity = {
+        entity_id: "device_tracker.test",
+        state: "home",
+        attributes: {},
+        context: { id: "test", parent_id: null, user_id: null },
+        last_changed: "2023-01-01T00:00:00Z",
+        last_updated: "2023-01-01T00:00:00Z",
+      };
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle undefined state object attributes", () => {
+      const stateObj: HassEntity = {
+        entity_id: "device_tracker.test",
+        state: "not_home",
+        attributes: {},
+        context: { id: "test", parent_id: null, user_id: null },
+        last_changed: "2023-01-01T00:00:00Z",
+        last_updated: "2023-01-01T00:00:00Z",
+      };
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+
+    it("should handle empty string state", () => {
+      const stateObj = createMockStateObj("router", "");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+  });
+});

test/common/entity/entity_filter.test.ts

@@ -0,0 +1,391 @@
+import { describe, expect, it } from "vitest";
+import { generateEntityFilter } from "../../../src/common/entity/entity_filter";
+import type { HomeAssistant } from "../../../src/types";
+
+// Mock HomeAssistant with comprehensive data
+const mockHass: HomeAssistant = {
+  states: {
+    "light.living_room": {
+      entity_id: "light.living_room",
+      state: "on",
+      attributes: { device_class: "light" },
+    },
+    "switch.kitchen": {
+      entity_id: "switch.kitchen",
+      state: "off",
+      attributes: { device_class: "switch" },
+    },
+    "sensor.temperature": {
+      entity_id: "sensor.temperature",
+      state: "22.5",
+      attributes: { device_class: "temperature" },
+    },
+    "binary_sensor.motion": {
+      entity_id: "binary_sensor.motion",
+      state: "off",
+      attributes: { device_class: "motion" },
+    },
+    "climate.thermostat": {
+      entity_id: "climate.thermostat",
+      state: "heat",
+      attributes: {},
+    },
+    "media_player.tv": {
+      entity_id: "media_player.tv",
+      state: "off",
+      attributes: {},
+    },
+    "light.bedroom": {
+      entity_id: "light.bedroom",
+      state: "off",
+      attributes: { device_class: "light" },
+    },
+    "switch.basement": {
+      entity_id: "switch.basement",
+      state: "on",
+      attributes: { device_class: "switch" },
+    },
+    "sensor.humidity": {
+      entity_id: "sensor.humidity",
+      state: "45",
+      attributes: { device_class: "humidity", entity_category: "diagnostic" },
+    },
+    "light.no_area": {
+      entity_id: "light.no_area",
+      state: "off",
+      attributes: { device_class: "light" },
+    },
+  } as any,
+  entities: {
+    "light.living_room": {
+      entity_id: "light.living_room",
+      device_id: "device1",
+      area_id: "living_room",
+      labels: [],
+    },
+    "switch.kitchen": {
+      entity_id: "switch.kitchen",
+      device_id: "device2",
+      area_id: "kitchen",
+      labels: [],
+    },
+    "sensor.temperature": {
+      entity_id: "sensor.temperature",
+      device_id: "device3",
+      area_id: "living_room",
+      labels: [],
+    },
+    "binary_sensor.motion": {
+      entity_id: "binary_sensor.motion",
+      device_id: "device4",
+      area_id: "hallway",
+      labels: [],
+    },
+    "climate.thermostat": {
+      entity_id: "climate.thermostat",
+      device_id: "device5",
+      area_id: "living_room",
+      labels: [],
+    },
+    "media_player.tv": {
+      entity_id: "media_player.tv",
+      device_id: "device6",
+      area_id: "living_room",
+      labels: [],
+    },
+    "light.bedroom": {
+      entity_id: "light.bedroom",
+      device_id: "device7",
+      area_id: "bedroom",
+      labels: [],
+    },
+    "switch.basement": {
+      entity_id: "switch.basement",
+      device_id: "device8",
+      area_id: "basement",
+      labels: [],
+    },
+    "sensor.humidity": {
+      entity_id: "sensor.humidity",
+      device_id: "device9",
+      area_id: "living_room",
+      entity_category: "diagnostic",
+      labels: ["climate", "monitoring"],
+    },
+    "light.no_area": {
+      entity_id: "light.no_area",
+      device_id: "device10",
+      labels: [],
+    },
+  } as any,
+  devices: {
+    device1: { id: "device1", area_id: "living_room" },
+    device2: { id: "device2", area_id: "kitchen" },
+    device3: { id: "device3", area_id: "living_room" },
+    device4: { id: "device4", area_id: "hallway" },
+    device5: { id: "device5", area_id: "living_room" },
+    device6: { id: "device6", area_id: "living_room" },
+    device7: { id: "device7", area_id: "bedroom" },
+    device8: { id: "device8", area_id: "basement" },
+    device9: { id: "device9", area_id: "living_room" },
+    device10: { id: "device10" }, // no area_id
+  } as any,
+  areas: {
+    living_room: {
+      area_id: "living_room",
+      name: "Living Room",
+      floor_id: "main_floor",
+    },
+    kitchen: { area_id: "kitchen", name: "Kitchen", floor_id: "main_floor" },
+    bedroom: { area_id: "bedroom", name: "Bedroom", floor_id: "upper_floor" },
+    basement: {
+      area_id: "basement",
+      name: "Basement",
+      floor_id: "basement_floor",
+    },
+    hallway: { area_id: "hallway", name: "Hallway", floor_id: "main_floor" },
+  } as any,
+  floors: {
+    main_floor: { floor_id: "main_floor", name: "Main Floor" },
+    upper_floor: { floor_id: "upper_floor", name: "Upper Floor" },
+    basement_floor: { floor_id: "basement_floor", name: "Basement Floor" },
+  } as any,
+} as HomeAssistant;
+
+describe("generateEntityFilter", () => {
+  describe("domain filtering", () => {
+    it("should filter entities by single domain", () => {
+      const filter = generateEntityFilter(mockHass, { domain: "light" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple domains", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: ["light", "switch"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      // Non-existent entities return false
+      expect(filter("switch.fan")).toBe(false);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should handle domain as string vs array", () => {
+      const singleFilter = generateEntityFilter(mockHass, { domain: "sensor" });
+      const arrayFilter = generateEntityFilter(mockHass, {
+        domain: ["sensor"],
+      });
+
+      expect(singleFilter("sensor.temperature")).toBe(true);
+      expect(arrayFilter("sensor.temperature")).toBe(true);
+      expect(singleFilter("light.living_room")).toBe(false);
+      expect(arrayFilter("light.living_room")).toBe(false);
+    });
+  });
+
+  describe("device class filtering", () => {
+    it("should filter entities by single device class", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device_class: "temperature",
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false);
+    });
+
+    it("should filter entities by multiple device classes", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device_class: ["temperature", "humidity"],
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+
+    it("should handle entities without device class", () => {
+      const filter = generateEntityFilter(mockHass, { device_class: "test" });
+
+      expect(filter("climate.thermostat")).toBe(false);
+      expect(filter("media_player.tv")).toBe(false);
+    });
+  });
+
+  describe("area filtering", () => {
+    it("should filter entities by single area", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple areas", () => {
+      const filter = generateEntityFilter(mockHass, {
+        area: ["living_room", "kitchen"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+    });
+  });
+
+  describe("floor filtering", () => {
+    // NOTE: The current implementation has a bug where it checks `if (!floors)` instead of `if (!floors.has(floor.floor_id))`
+    // So floor filtering will never actually filter by floor - it only checks if the entity has a floor at all
+    it("should filter entities by floor (tests current buggy behavior)", () => {
+      const filter = generateEntityFilter(mockHass, { floor: "main_floor" });
+
+      // Due to bug, all entities with floors pass (not just main_floor)
+      expect(filter("light.living_room")).toBe(true); // has floor
+      expect(filter("switch.kitchen")).toBe(true); // has floor
+      expect(filter("binary_sensor.motion")).toBe(true); // has floor
+      expect(filter("light.bedroom")).toBe(false); // wrong floor
+      expect(filter("switch.basement")).toBe(false); // wrong floor
+
+      // Entities without floors should fail
+      expect(filter("light.no_area")).toBe(false); // no area = no floor
+    });
+
+    it("should handle multiple floors (tests current buggy behavior)", () => {
+      const filter = generateEntityFilter(mockHass, {
+        floor: ["main_floor", "upper_floor"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("light.bedroom")).toBe(true);
+      expect(filter("switch.basement")).toBe(false);
+
+      // Entities without floors should fail
+      expect(filter("light.no_area")).toBe(false);
+    });
+  });
+
+  describe("device filtering", () => {
+    it("should filter entities by single device", () => {
+      const filter = generateEntityFilter(mockHass, { device: "device1" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple devices", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device: ["device1", "device2"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+  });
+
+  describe("entity category filtering", () => {
+    it("should filter entities by entity category", () => {
+      const filter = generateEntityFilter(mockHass, {
+        entity_category: "diagnostic",
+      });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should filter entities with no entity category", () => {
+      const filter = generateEntityFilter(mockHass, {
+        entity_category: "none",
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false);
+    });
+  });
+
+  describe("label filtering", () => {
+    it("should filter entities by single label", () => {
+      const filter = generateEntityFilter(mockHass, { label: "climate" });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should filter entities by multiple labels", () => {
+      const filter = generateEntityFilter(mockHass, {
+        label: ["climate", "monitoring"],
+      });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+  });
+
+  describe("combined filtering", () => {
+    it("should combine multiple filter criteria with AND logic", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: "light",
+        area: "living_room",
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should handle complex combinations", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: ["sensor", "light"],
+        area: "living_room",
+        device_class: ["temperature", "light"],
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false); // wrong device class
+      expect(filter("light.bedroom")).toBe(false); // wrong area
+    });
+  });
+
+  describe("empty filter criteria", () => {
+    it("should handle empty filter criteria", () => {
+      const filter = generateEntityFilter(mockHass, {});
+
+      // Empty filter should pass all entities that exist in hass.states
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("nonexistent.entity")).toBe(false);
+    });
+
+    it("should handle empty domain array", () => {
+      const filter = generateEntityFilter(mockHass, { domain: [] });
+
+      // Empty domain array means no entities should pass domain filter
+      expect(filter("light.living_room")).toBe(false);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle non-existent entities", () => {
+      const filter = generateEntityFilter(mockHass, { domain: "light" });
+
+      expect(filter("light.nonexistent")).toBe(false);
+      expect(filter("invalid_entity_id")).toBe(false);
+    });
+
+    it("should handle entities without device or area assignments", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      expect(filter("light.no_area")).toBe(false);
+    });
+
+    it("should handle entities with device but no area", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      // light.no_area has device10 which has no area_id
+      expect(filter("light.no_area")).toBe(false);
+    });
+  });
+});