Fix for batteries with long names in energy dashboard (#26972)

* sidebar: account for safe-area top inset in menu height/padding; adjust list height calc

* Defaults

* Defaults

* Restore

* Remove test

* Adjust

* Adjust

* Only apply on smaller layouts

* Fix

* Restore

* Restore

* No default in this case

* Restore

* Gain back some space

* Fix

* Adjust

* Tweak

* Calculate when mobile

* Use fallbacks for calculations and others anyway

.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

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

@@ -149,7 +149,7 @@ class HassioAddonConfig extends LitElement {
       )
   );
 
-  private _filteredShchema = memoizeOne(
+  private _filteredSchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
   );
@@ -161,7 +161,7 @@ class HassioAddonConfig extends LitElement {
       showForm &&
       JSON.stringify(this.addon.schema) !==
         JSON.stringify(
-          this._filteredShchema(this.addon.options, this.addon.schema!)
+          this._filteredSchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -207,7 +207,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredShchema(
+                    : this._filteredSchema(
                         this.addon.options,
                         this.addon.schema!
                       )

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

package.json

@@ -26,8 +26,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@awesome.me/webawesome": "3.0.0-beta.4",
-    "@babel/runtime": "7.28.3",
+    "@babel/runtime": "7.28.4",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.7",
     "@codemirror/commands": "6.8.1",
@@ -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.6",
-    "@vaadin/vaadin-themable-mixin": "24.8.6",
+    "@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",
@@ -122,7 +122,7 @@
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.1",
+    "luxon": "3.7.2",
     "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
@@ -149,7 +149,7 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.3",
+    "@babel/core": "7.28.4",
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
@@ -184,7 +184,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.34.0",
+    "eslint": "9.35.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -212,7 +212,7 @@
     "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",
@@ -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.6"
+    "@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.4"
 }

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-header-bar.ts

@@ -38,6 +38,7 @@ export class HaHeaderBar extends LitElement {
         .mdc-top-app-bar {
           position: static;
           color: var(--mdc-theme-on-primary, #fff);
+          padding: var(--header-bar-padding);
         }
         .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
           flex: 1;

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-sidebar.ts

@@ -666,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     tooltip.style.display = "block";
     tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
-    tooltip.style.left = `${item.offsetLeft + item.clientWidth + 8}px`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
   }
 
   private _hideTooltip() {
@@ -705,9 +705,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           background-color: var(--sidebar-background-color);
           width: 100%;
           box-sizing: border-box;
+          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
         }
         .menu {
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
           box-sizing: border-box;
           display: flex;
           padding: 0 4px;
@@ -725,12 +726,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           );
           font-size: var(--ha-font-size-xl);
           align-items: center;
-          padding-left: calc(4px + var(--safe-area-inset-left));
-          padding-inline-start: calc(4px + var(--safe-area-inset-left));
+          padding-left: calc(4px + var(--safe-area-inset-left, 0px));
+          padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
           padding-inline-end: initial;
+          padding-top: var(--safe-area-inset-top, 0px);
         }
         :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left));
+          width: calc(256px + var(--safe-area-inset-left, 0px));
+        }
+        :host([narrow][expanded]) .menu {
+          width: 100%;
         }
         .menu ha-icon-button {
           color: var(--sidebar-icon-color);
@@ -756,22 +761,23 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-fade-in,
         ha-md-list {
           height: calc(
-            100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
+            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
+              132px - var(--safe-area-inset-bottom, 0px)
           );
         }
 
         ha-fade-in {
+          padding: 4px 0;
+          box-sizing: border-box;
           display: flex;
           justify-content: center;
           align-items: center;
         }
 
         ha-md-list {
-          padding: 4px 0;
-          box-sizing: border-box;
           overflow-x: hidden;
           background: none;
-          margin-left: var(--safe-area-inset-left);
+          margin-left: var(--safe-area-inset-left, 0px);
         }
 
         ha-md-list-item {
@@ -791,7 +797,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
         :host([expanded]) ha-md-list-item {
           width: 248px;
-          width: calc(248px - var(--safe-area-inset-left));
+        }
+        :host([narrow][expanded]) ha-md-list-item {
+          width: calc(240px - var(--safe-area-inset-left, 0px));
         }
 
         ha-md-list-item.selected {

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-top-app-bar-fixed.ts

@@ -8,12 +8,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
   static override styles = [
     styles,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
+        padding-left: var(--safe-area-content-inset-left);
+        padding-right: var(--safe-area-content-inset-right);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);

src/components/ha-top-app-bar.ts

@@ -13,7 +13,7 @@ export class HaTopAppBar extends TopAppBarBase {
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +22,9 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
     `,
   ];

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -244,12 +244,15 @@ export class TopAppBarBaseBase extends BaseElement {
     styles,
     haStyleScrollbar,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .shadow-container {
         position: absolute;
@@ -274,6 +277,9 @@ export class TopAppBarBaseBase extends BaseElement {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
         box-shadow: none;

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/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/notifications/notification-drawer.ts

@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement {
     );
     this.style.setProperty(
       "--mdc-drawer-width",
-      narrow ? window.innerWidth + "px" : "500px"
+      `min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))`
     );
     this._open = true;
   }
@@ -152,24 +152,40 @@ export class HuiNotificationDrawer extends LitElement {
     ha-header-bar {
       --mdc-theme-on-primary: var(--primary-text-color);
       --mdc-theme-primary: var(--primary-background-color);
+      --header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
+        var(--safe-area-inset-left, 0px);
       border-bottom: 1px solid var(--divider-color);
       display: block;
     }
 
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      ha-header-bar {
+        --header-bar-padding: var(--safe-area-inset-top, 0px)
+          var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
+      }
+    }
+
     .notifications {
       overflow-y: auto;
       padding-top: 16px;
-      padding-left: var(--safe-area-inset-left);
-      padding-right: var(--safe-area-inset-right);
-      padding-inline-start: var(--safe-area-inset-left);
-      padding-inline-end: var(--safe-area-inset-right);
-      padding-bottom: var(--safe-area-inset-bottom);
-      height: calc(100% - 1px - var(--header-height));
+      padding-left: var(--safe-area-inset-left, 0px);
+      padding-inline-start: var(--safe-area-inset-left, 0px);
+      padding-bottom: var(--safe-area-inset-bottom, 0px);
+      height: calc(
+        100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
+      );
       box-sizing: border-box;
       background-color: var(--primary-background-color);
       color: var(--primary-text-color);
     }
 
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      .notifications {
+        padding-right: var(--safe-area-inset-right, 0px);
+        padding-inline-end: var(--safe-area-inset-right, 0px);
+      }
+    }
+
     .notification {
       padding: 0 16px 16px;
     }

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/layouts/hass-subpage.ts

@@ -29,31 +29,35 @@ class HassSubpage extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
-        ${this.mainPage || history.state?.root
-          ? html`
-              <ha-menu-button
-                .hassio=${this.supervisor}
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-            `
-          : this.backPath
+        <div class="toolbar-content">
+          ${this.mainPage || history.state?.root
             ? html`
-                <a href=${this.backPath}>
+                <ha-menu-button
+                  .hassio=${this.supervisor}
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                ></ha-menu-button>
+              `
+            : this.backPath
+              ? html`
+                  <a href=${this.backPath}>
+                    <ha-icon-button-arrow-prev
+                      .hass=${this.hass}
+                    ></ha-icon-button-arrow-prev>
+                  </a>
+                `
+              : html`
                   <ha-icon-button-arrow-prev
                     .hass=${this.hass}
+                    @click=${this._backTapped}
                   ></ha-icon-button-arrow-prev>
-                </a>
-              `
-            : html`
-                <ha-icon-button-arrow-prev
-                  .hass=${this.hass}
-                  @click=${this._backTapped}
-                ></ha-icon-button-arrow-prev>
-              `}
+                `}
 
-        <div class="main-title"><slot name="header">${this.header}</slot></div>
-        <slot name="toolbar-icon"></slot>
+          <div class="main-title">
+            <slot name="header">${this.header}</slot>
+          </div>
+          <slot name="toolbar-icon"></slot>
+        </div>
       </div>
       <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
         <slot></slot>
@@ -95,23 +99,28 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
-          display: flex;
-          align-items: center;
-          font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
-          padding: 8px 12px;
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
           background-color: var(--app-header-background-color);
-          font-weight: var(--ha-font-weight-normal);
-          color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
         }
+
+        .toolbar-content {
+          display: flex;
+          align-items: center;
+          font-size: var(--ha-font-size-xl);
+          padding: 8px 12px;
+          font-weight: var(--ha-font-weight-normal);
+          color: var(--app-header-text-color, white);
+        }
         @media (max-width: 599px) {
-          .toolbar {
+          .toolbar-content {
             padding: 4px;
           }
         }
-        .toolbar a {
+        .toolbar-content a {
           color: var(--sidebar-text-color);
           text-decoration: none;
         }
@@ -140,7 +149,9 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          height: calc(
+            100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
+          );
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

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/hass-tabs-subpage.ts

@@ -240,7 +240,10 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);

src/layouts/home-assistant-main.ts

@@ -144,13 +144,13 @@ export class HomeAssistantMain extends LitElement {
       color: var(--primary-text-color);
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      --mdc-drawer-width: 56px;
+      --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
       --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));
+      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px));
     }
     :host([modal]) {
       --mdc-drawer-width: unset;

src/mixins/keyboard-shortcut-mixin.ts

@@ -1,5 +1,6 @@
 import type { LitElement } from "lit";
 import type { Constructor } from "../types";
+import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";
 
 declare global {
   type SupportedShortcuts = Record<string, () => void>;
@@ -17,6 +18,14 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
         !event.altKey &&
         event.key in supportedShortcuts
       ) {
+        // Only capture the event if the user is not focused on an input
+        if (!canOverrideAlphanumericInput(event.composedPath())) {
+          return;
+        }
+        // Don't capture the event if the user is selecting text
+        if (window.getSelection()?.toString()) {
+          return;
+        }
         event.preventDefault();
         supportedShortcuts[event.key]();
         return;

src/panels/config/automation/action/ha-automation-action-editor.ts

@@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "yaml-changed", {
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
       value: migrateAutomationAction(ev.detail.value),
     });
   }

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/condition/ha-automation-condition-editor.ts

@@ -103,7 +103,9 @@ export default class HaAutomationConditionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "yaml-changed", { value: ev.detail.value });
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
+      value: ev.detail.value,
+    });
   }
 
   private _onUiChanged(ev: CustomEvent) {

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

@@ -593,6 +593,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       this.hass
     ) {
       const initData = getAutomationEditorInitData();
+      this._dirty = !!initData;
       let baseConfig: Partial<AutomationConfig> = { description: "" };
       if (!initData || !("use_blueprint" in initData)) {
         baseConfig = {

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/automation/trigger/ha-automation-trigger-editor.ts

@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "yaml-changed", {
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
       value: migrateAutomationTrigger(ev.detail.value),
     });
   }

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/devices/ha-config-devices-dashboard.ts

@@ -6,13 +6,14 @@ import {
   mdiPlus,
   mdiTextureBox,
   mdiCancel,
+  mdiDelete,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
@@ -37,6 +38,7 @@ import type {
   SelectionChangedEvent,
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
+
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
@@ -65,7 +67,10 @@ import type {
   DeviceEntityLookup,
   DeviceRegistryEntry,
 } from "../../../data/device_registry";
-import { updateDeviceRegistryEntry } from "../../../data/device_registry";
+import {
+  updateDeviceRegistryEntry,
+  removeConfigEntryFromDevice,
+} from "../../../data/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
   findBatteryChargingEntity,
@@ -77,7 +82,11 @@ import {
   createLabelRegistryEntry,
   subscribeLabelRegistry,
 } from "../../../data/label_registry";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
+import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -121,6 +130,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _selected: string[] = [];
 
+  private _selectedCanDelete: string[] = [];
+
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
   @state()
   @storage({
     storage: "sessionStorage",
@@ -217,6 +231,17 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     if (!this.hasUpdated) {
       this._setFiltersFromUrl();
     }
+    if (changedProps.has("_selected")) {
+      this._selectedCanDelete = this._selected.filter((d) => {
+        const device = this.hass.devices[d];
+        const entries = device.config_entries;
+        return entries.some(
+          (entryId) =>
+            this.entries.find((e) => e.entry_id === entryId)
+              ?.supports_remove_device
+        );
+      });
+    }
   }
 
   private _setFiltersFromUrl() {
@@ -909,48 +934,32 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                     ${areaItems}
                   </ha-md-button-menu>`}`
           : nothing}
-        ${this.narrow || areasInOverflow
-          ? html`<ha-md-button-menu has-overflow slot="selection-bar">
-              ${this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  ></ha-icon-button>`}
-              ${this.narrow
-                ? html` <ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing}
-              <ha-sub-menu>
+        <ha-md-button-menu has-overflow slot="selection-bar">
+          ${this.narrow
+            ? html`<ha-assist-chip
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
+                )}
+                slot="trigger"
+              >
+                <ha-svg-icon
+                  slot="trailing-icon"
+                  .path=${mdiMenuDown}
+                ></ha-svg-icon>
+              </ha-assist-chip>`
+            : html`<ha-icon-button
+                .path=${mdiDotsVertical}
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
+                )}
+                slot="trigger"
+              ></ha-icon-button>`}
+          ${this.narrow
+            ? html` <ha-sub-menu>
                 <ha-md-menu-item slot="item">
                   <div slot="headline">
                     ${this.hass.localize(
-                      "ui.panel.config.devices.picker.bulk_actions.move_area"
+                      "ui.panel.config.automation.picker.bulk_actions.add_label"
                     )}
                   </div>
                   <ha-svg-icon
@@ -958,10 +967,39 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                     .path=${mdiChevronRight}
                   ></ha-svg-icon>
                 </ha-md-menu-item>
-                <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-              </ha-sub-menu>
-            </ha-md-button-menu>`
-          : nothing}
+                <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
+              </ha-sub-menu>`
+            : nothing}
+          ${areasInOverflow
+            ? html`<ha-sub-menu>
+                  <ha-md-menu-item slot="item">
+                    <div slot="headline">
+                      ${this.hass.localize(
+                        "ui.panel.config.devices.picker.bulk_actions.move_area"
+                      )}
+                    </div>
+                    <ha-svg-icon
+                      slot="end"
+                      .path=${mdiChevronRight}
+                    ></ha-svg-icon>
+                  </ha-md-menu-item>
+                  <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
+                </ha-sub-menu>
+                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+            : nothing}
+          <ha-md-menu-item
+            .clickAction=${this._deleteSelected}
+            .disabled=${!this._selectedCanDelete.length}
+            class="warning"
+          >
+            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+            <div slot="headline">
+              ${this.hass.localize(
+                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
+              )}
+            </div>
+          </ha-md-menu-item>
+        </ha-md-button-menu>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1136,6 +1174,61 @@ ${rejected
     });
   };
 
+  private _deleteSelected = () => {
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_title"
+      ),
+      text:
+        this._selectedCanDelete.length === this._selected.length
+          ? this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_text"
+            )
+          : this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_partly_text",
+              {
+                deletable: this._selectedCanDelete.length,
+                selected: this._selected.length,
+              }
+            ),
+      confirmText: this.hass.localize("ui.common.delete"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+      confirm: async () => {
+        const proms: Promise<DeviceRegistryEntry>[] = [];
+        this._selectedCanDelete.forEach((deviceId) => {
+          const entries = this.hass!.devices[deviceId]?.config_entries;
+          entries.forEach((entryId) => {
+            if (
+              this.entries.find((entry) => entry.entry_id === entryId)
+                ?.supports_remove_device
+            ) {
+              proms.push(
+                removeConfigEntryFromDevice(this.hass!, deviceId, entryId)
+              );
+            }
+          });
+        });
+        const results = await Promise.allSettled(proms);
+        if (hasRejectedItems(results)) {
+          showAlertDialog(this, {
+            text: this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure"
+            ),
+            title: this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure_title"
+            ),
+          });
+        }
+        this._clearSelection();
+      },
+    });
+  };
+
+  private _clearSelection() {
+    this._dataTable.clearSelection();
+  }
+
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;
   }

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -226,6 +226,7 @@ export class EnergyBatterySettings extends LitElement {
         .label {
           overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
         }
       `,
     ];

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

@@ -122,6 +122,13 @@ export class BluetoothConfigDashboard extends LitElement {
   }
 
   protected render(): TemplateResult {
+    // Get scanner type to determine if options button should be shown
+    const scannerDetails =
+      this._scannerState && this._scannerDetails?.[this._scannerState.source];
+    const scannerType: HaScannerType =
+      scannerDetails?.scanner_type ?? "unknown";
+    const isRemoteScanner = scannerType === "remote";
+
     return html`
       <hass-subpage .narrow=${this.narrow} .hass=${this.hass}>
         <div class="content">
@@ -131,13 +138,15 @@ export class BluetoothConfigDashboard extends LitElement {
             )}
           >
             <div class="card-content">${this._renderScannerState()}</div>
-            <div class="card-actions">
-              <ha-button @click=${this._openOptionFlow}
-                >${this.hass.localize(
-                  "ui.panel.config.bluetooth.option_flow"
-                )}</ha-button
-              >
-            </div>
+            ${!isRemoteScanner
+              ? html`<div class="card-actions">
+                  <ha-button @click=${this._openOptionFlow}
+                    >${this.hass.localize(
+                      "ui.panel.config.bluetooth.option_flow"
+                    )}</ha-button
+                  >
+                </div>`
+              : nothing}
           </ha-card>
           <ha-card
             .header=${this.hass.localize(

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/script/ha-script-editor.ts

@@ -1024,6 +1024,7 @@ export class HaScriptEditor extends SubscribeMixin(
       c: () => this._copySelectedRow(),
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
+      Backspace: () => this._deleteSelectedRow(),
     };
   }
 

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/action/developer-tools-action.ts

@@ -476,6 +476,7 @@ class HaPanelDevAction extends LitElement {
     } else {
       script.push(this._serviceData!);
     }
+    button.progress = true;
     try {
       this._response = (await callExecuteScript(this.hass, script)).response;
     } catch (err: any) {
@@ -505,6 +506,8 @@ class HaPanelDevAction extends LitElement {
           service: this._serviceData!.action!,
         }) + ` ${err.message}`;
       return;
+    } finally {
+      button.progress = false;
     }
     button.actionSuccess();
   }

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

@@ -130,6 +130,8 @@ class PanelDeveloperTools extends LitElement {
           background-color: var(--app-header-background-color);
           width: var(--mdc-top-app-bar-width, 100%);
           padding-top: var(--safe-area-inset-top);
+          padding-left: var(--safe-area-inset-left);
+          padding-right: var(--safe-area-inset-right);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);

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

@@ -7,6 +7,26 @@ import type { HomeAssistant } from "../../../../types";
 import { INTERVAL } from "../hui-clock-card";
 import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
 
+function romanize12HourClock(num: number) {
+  const numerals = [
+    "", // 0 (not used)
+    "I", // 1
+    "II", // 2
+    "III", // 3
+    "IV", // 4
+    "V", // 5
+    "VI", // 6
+    "VII", // 7
+    "VIII", // 8
+    "IX", // 9
+    "X", // 10
+    "XI", // 11
+    "XII", // 12
+  ];
+  if (num < 1 || num > 12) return "";
+  return numerals[num];
+}
+
 @customElement("hui-clock-card-analog")
 export class HuiClockCardAnalog extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -101,6 +121,36 @@ export class HuiClockCardAnalog extends LitElement {
       ? `size-${this.config.clock_size}`
       : "";
 
+    const isNumbers = this.config?.face_style?.startsWith("numbers");
+    const isRoman = this.config?.face_style?.startsWith("roman");
+    const isUpright = this.config?.face_style?.endsWith("upright");
+
+    const indicator = (number?: number) => html`
+      <div
+        class=${classMap({
+          line: true,
+          numbers: isNumbers,
+          roman: isRoman,
+        })}
+      >
+        ${number && this.config?.face_style !== "markers"
+          ? html`<div
+              class=${classMap({
+                number: true,
+                [this.config?.clock_size ?? ""]: true,
+                upright: isUpright,
+              })}
+            >
+              ${isRoman
+                ? romanize12HourClock(number)
+                : isNumbers
+                  ? number
+                  : nothing}
+            </div>`
+          : nothing}
+      </div>
+    `;
+
     return html`
       <div
         class="analog-clock ${sizeClass}"
@@ -116,14 +166,14 @@ export class HuiClockCardAnalog extends LitElement {
           ${this.config.ticks === "quarter"
             ? Array.from({ length: 4 }, (_, i) => i).map(
                 (i) =>
-                  // 4 ticks
+                  // 4 ticks (12, 3, 6, 9) at 0°, 90°, 180°, 270°
                   html`
                     <div
-                      aria-hidden
+                      aria-hidden="true"
                       class="tick hour"
                       style=${`--tick-rotation: ${i * 90}deg;`}
                     >
-                      <div class="line"></div>
+                      ${indicator([12, 3, 6, 9][i])}
                     </div>
                   `
               )
@@ -131,28 +181,30 @@ export class HuiClockCardAnalog extends LitElement {
                 this.config.ticks === "hour"
               ? Array.from({ length: 12 }, (_, i) => i).map(
                   (i) =>
-                    // 12 ticks
+                    // 12 ticks (1-12)
                     html`
                       <div
-                        aria-hidden
+                        aria-hidden="true"
                         class="tick hour"
                         style=${`--tick-rotation: ${i * 30}deg;`}
                       >
-                        <div class="line"></div>
+                        ${indicator(((i + 11) % 12) + 1)}
                       </div>
                     `
                 )
               : this.config.ticks === "minute"
                 ? Array.from({ length: 60 }, (_, i) => i).map(
                     (i) =>
-                      // 60 ticks
+                      // 60 ticks (1-60)
                       html`
                         <div
-                          aria-hidden
+                          aria-hidden="true"
                           class="tick ${i % 5 === 0 ? "hour" : "minute"}"
                           style=${`--tick-rotation: ${i * 6}deg;`}
                         >
-                          <div class="line"></div>
+                          ${i % 5 === 0
+                            ? indicator(((i / 5 + 11) % 12) + 1)
+                            : indicator()}
                         </div>
                       `
                   )
@@ -245,6 +297,42 @@ export class HuiClockCardAnalog extends LitElement {
       opacity: 0.8;
     }
 
+    .tick.hour .line.numbers,
+    .tick.hour .line.roman {
+      height: calc(var(--clock-size) * 0.03);
+    }
+
+    .tick.minute .line.numbers,
+    .tick.minute .line.roman {
+      height: calc(var(--clock-size) * 0.015);
+    }
+
+    .tick .number {
+      position: absolute;
+      top: 0%;
+      left: 50%;
+      transform: translate(-50%, 35%);
+      color: var(--primary-text-color);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-condensed);
+    }
+
+    .tick .number.upright {
+      transform: translate(-50%, 35%) rotate(calc(var(--tick-rotation) * -1));
+    }
+
+    .tick .number.small {
+      font-size: var(--ha-font-size-s);
+    }
+
+    .tick .number.medium {
+      font-size: var(--ha-font-size-m);
+    }
+
+    .tick .number.large {
+      font-size: var(--ha-font-size-l);
+    }
+
     .center-dot {
       position: absolute;
       top: 50%;

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -225,7 +225,7 @@ class HuiEnergySankeyCard
       if (consumption.total.battery_to_grid > 0) {
         links.push({
           source: "battery",
-          target: "grid",
+          target: "grid_return",
           value: consumption.total.battery_to_grid,
         });
       }

src/panels/lovelace/cards/types.ts

@@ -381,6 +381,7 @@ export interface ClockCardConfig extends LovelaceCardConfig {
   // Analog clock options
   border?: boolean;
   ticks?: "none" | "quarter" | "hour" | "minute";
+  face_style?: "markers" | "numbers_upright" | "roman";
 }
 
 export interface MediaControlCardConfig extends LovelaceCardConfig {

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

@@ -52,6 +52,16 @@ const cardConfigStruct = assign(
         literal("hour")
       )
     ),
+    face_style: optional(
+      defaulted(
+        union([
+          literal("markers"),
+          literal("numbers_upright"),
+          literal("roman"),
+        ]),
+        literal("markers")
+      )
+    ),
   })
 );
 
@@ -65,7 +75,11 @@ export class HuiClockCardEditor
   @state() private _config?: ClockCardConfig;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, clockStyle: "digital" | "analog") =>
+    (
+      localize: LocalizeFunc,
+      clockStyle: ClockCardConfig["clock_style"],
+      ticks: ClockCardConfig["ticks"]
+    ) =>
       [
         { name: "title", selector: { text: {} } },
         {
@@ -156,6 +170,37 @@ export class HuiClockCardEditor
                     },
                   },
                 },
+                ...(ticks !== "none"
+                  ? ([
+                      {
+                        name: "face_style",
+                        description: {
+                          suffix: localize(
+                            `ui.panel.lovelace.editor.card.clock.face_style.description`
+                          ),
+                        },
+                        default: "markers",
+                        selector: {
+                          select: {
+                            mode: "dropdown",
+                            options: [
+                              "markers",
+                              "numbers_upright",
+                              "roman",
+                            ].map((value) => ({
+                              value,
+                              label: localize(
+                                `ui.panel.lovelace.editor.card.clock.face_style.${value}.label`
+                              ),
+                              description: localize(
+                                `ui.panel.lovelace.editor.card.clock.face_style.${value}.description`
+                              ),
+                            })),
+                          },
+                        },
+                      },
+                    ] as const satisfies readonly HaFormSchema[])
+                  : []),
               ] as const satisfies readonly HaFormSchema[])
             : []),
         {
@@ -191,6 +236,7 @@ export class HuiClockCardEditor
     // Analog clock options
     border: false,
     ticks: "hour",
+    face_style: "markers",
     ...config,
   }));
 
@@ -210,8 +256,8 @@ export class HuiClockCardEditor
         .data=${this._data(this._config)}
         .schema=${this._schema(
           this.hass.localize,
-          (this._data(this._config).clock_style as "digital" | "analog") ??
-            "digital"
+          this._data(this._config).clock_style,
+          this._data(this._config).ticks
         )}
         .computeLabel=${this._computeLabelCallback}
         .computeHelper=${this._computeHelperCallback}
@@ -231,9 +277,17 @@ export class HuiClockCardEditor
     if (ev.detail.value.clock_style === "analog") {
       ev.detail.value.border = ev.detail.value.border ?? false;
       ev.detail.value.ticks = ev.detail.value.ticks ?? "hour";
+      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
     } else {
       delete ev.detail.value.border;
       delete ev.detail.value.ticks;
+      delete ev.detail.value.face_style;
+    }
+
+    if (ev.detail.value.ticks !== "none") {
+      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
+    } else {
+      delete ev.detail.value.face_style;
     }
 
     fireEvent(this, "config-changed", { config: ev.detail.value });
@@ -279,6 +333,10 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.ticks.label`
         );
+      case "face_style":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.face_style.label`
+        );
       default:
         return undefined;
     }
@@ -296,6 +354,10 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.ticks.description`
         );
+      case "face_style":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.face_style.description`
+        );
       default:
         return undefined;
     }

src/panels/lovelace/hui-root.ts

@@ -1209,10 +1209,17 @@ class HUIRoot extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           position: fixed;
           top: 0;
-          width: var(--mdc-top-app-bar-width, 100%);
+          width: var(
+            --mdc-top-app-bar-width,
+            calc(
+              100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+            )
+          );
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
           backdrop-filter: var(--app-header-backdrop-filter, none);
           padding-top: var(--safe-area-inset-top);
+          padding-left: var(--safe-area-inset-left);
+          padding-right: var(--safe-area-inset-right);
           z-index: 4;
           transition: box-shadow 200ms linear;
         }
@@ -1398,7 +1405,7 @@ class HUIRoot extends LitElement {
           padding-top: calc(
             var(--header-height, 56px) +
               calc(var(--tab-bar-height, 56px) - 2px) +
-              var(--safe-area-inset-top)
+              var(--safe-area-inset-top, 0px)
           );
         }
         .hide-tab {

src/panels/lovelace/strategies/home/home-security-view-strategy.ts

@@ -12,7 +12,6 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
-import type { LogbookCardConfig } from "../../cards/types";
 
 export interface HomeSecurityViewStrategyConfig {
   type: "home-security";
@@ -132,24 +131,6 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
       }
     }
 
-    sections.push({
-      type: "grid",
-      cards: [
-        {
-          type: "heading",
-          heading: hass.localize("panel.logbook"),
-          tap_action: {
-            action: "navigate",
-            navigation_path: `/logbook?entity_id=${entities.join(",")}`,
-          },
-        },
-        {
-          type: "logbook",
-          target: { entity_id: entities },
-        } satisfies LogbookCardConfig,
-      ],
-    });
-
     return {
       type: "sections",
       max_columns: 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/translations/en.json

@@ -5260,7 +5260,15 @@
             "bulk_actions": {
               "move_area": "Move to area",
               "no_area": "No area",
-              "add_area": "Add area"
+              "add_area": "Add area",
+              "delete_selected": {
+                "button": "[%key:ui::panel::config::entities::picker::delete_selected::button%]",
+                "confirm_title": "Delete selected devices?",
+                "confirm_text": "Are you sure you want to delete the devices?",
+                "confirm_partly_text": "You can only delete {deletable} of the {selected} devices. The others are provided by integrations that do not support deleting devices.",
+                "partial_failure_title": "Delete failed",
+                "partial_failure": "Some devices failed to delete successfully. Check system logs for more information."
+              }
             }
           }
         },
@@ -7808,6 +7816,22 @@
                   "label": "Minute",
                   "description": "60 ticks (Every minute)"
                 }
+              },
+              "face_style": {
+                "label": "Clock face style",
+                "description": "Which kind of indices to use for the clock face",
+                "markers": {
+                  "label": "Markers",
+                  "description": "Show simple markers around the clock face (default)"
+                },
+                "numbers_upright": {
+                  "label": "Numbers",
+                  "description": "Show numbers around the clock face"
+                },
+                "roman": {
+                  "label": "Roman numerals",
+                  "description": "Show Roman numerals (I-XII) around the clock face"
+                }
               }
             },
             "media-control": {
@@ -8764,7 +8788,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",

yarn.lock

@@ -5,7 +5,7 @@ __metadata:
   version: 8
   cacheKey: 10
 
-"@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.3.0":
+"@ampproject/remapping@npm:^2.3.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
   dependencies:
@@ -41,24 +41,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@awesome.me/webawesome@npm:3.0.0-beta.4":
-  version: 3.0.0-beta.4
-  resolution: "@awesome.me/webawesome@npm:3.0.0-beta.4"
-  dependencies:
-    "@ctrl/tinycolor": "npm:^4.1.0"
-    "@floating-ui/dom": "npm:^1.6.13"
-    "@lit/react": "npm:^1.0.8"
-    "@shoelace-style/animations": "npm:^1.2.0"
-    "@shoelace-style/localize": "npm:^3.2.1"
-    composed-offset-position: "npm:^0.0.6"
-    lit: "npm:^3.2.1"
-    nanoid: "npm:^5.1.5"
-    qr-creator: "npm:^1.0.0"
-    style-observer: "npm:^0.0.7"
-  checksum: 10/476e8e6495def8b8a99a9b0d203eb6859915bb9793632a2aae348f42ef5683751bdfb6d99155cb2512ecc2d706cd9377466f765d105d3fc355afeafe21c820df
-  languageName: node
-  linkType: hard
-
 "@babel/code-frame@npm:7.26.2":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
@@ -88,26 +70,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.28.3, @babel/core@npm:^7.24.4":
-  version: 7.28.3
-  resolution: "@babel/core@npm:7.28.3"
+"@babel/core@npm:7.28.4, @babel/core@npm:^7.24.4":
+  version: 7.28.4
+  resolution: "@babel/core@npm:7.28.4"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
     "@babel/code-frame": "npm:^7.27.1"
     "@babel/generator": "npm:^7.28.3"
     "@babel/helper-compilation-targets": "npm:^7.27.2"
     "@babel/helper-module-transforms": "npm:^7.28.3"
-    "@babel/helpers": "npm:^7.28.3"
-    "@babel/parser": "npm:^7.28.3"
+    "@babel/helpers": "npm:^7.28.4"
+    "@babel/parser": "npm:^7.28.4"
     "@babel/template": "npm:^7.27.2"
-    "@babel/traverse": "npm:^7.28.3"
-    "@babel/types": "npm:^7.28.2"
+    "@babel/traverse": "npm:^7.28.4"
+    "@babel/types": "npm:^7.28.4"
+    "@jridgewell/remapping": "npm:^2.3.5"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10/0faded84edcfd80f9a5ccc35abd46267360bba23ac295291becc8b8f9c95220f1914491b83b15e297201b19af78bbaf2ad48c2dc9d86b92f3f16a06938de8c72
+  checksum: 10/0593295241fac9be567145ef16f3858d34fc91390a9438c6d47476be9823af4cc0488c851c59702dd46b968e9fd46d17ddf0105ea30195ca85f5a66b4044c519
   languageName: node
   linkType: hard
 
@@ -315,24 +297,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.28.3":
-  version: 7.28.3
-  resolution: "@babel/helpers@npm:7.28.3"
+"@babel/helpers@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/helpers@npm:7.28.4"
   dependencies:
     "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.28.2"
-  checksum: 10/6d39031bf07a001c731e5e23e024b3d5e4885a140ce7d46e17f10f0d819f8bdb974204b3aa7127e95b63a009abf0df0d81573ceeac6a8f9a3b28bde3d2e16dd1
+    "@babel/types": "npm:^7.28.4"
+  checksum: 10/5a70a82e196cf8808f8a449cc4780c34d02edda2bb136d39ce9d26e63b615f18e89a95472230c3ce7695db0d33e7026efeee56f6454ed43480f223007ed205eb
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3":
-  version: 7.28.3
-  resolution: "@babel/parser@npm:7.28.3"
+"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/parser@npm:7.28.4"
   dependencies:
-    "@babel/types": "npm:^7.28.2"
+    "@babel/types": "npm:^7.28.4"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/9fa08282e345b9d892a6757b2789a9a53a00f7b7b34d6254a4ee0bf32c5eb275919091ea96d6f136a948d5de9c8219235957d04a36ab7378a9d93a4cf0799155
+  checksum: 10/f54c46213ef180b149f6a17ea765bf40acc1aebe2009f594e2a283aec69a190c6dda1fdf24c61a258dbeb903abb8ffb7a28f1a378f8ab5d333846ce7b7e23bf1
   languageName: node
   linkType: hard
 
@@ -1148,10 +1130,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.28.3, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2":
-  version: 7.28.3
-  resolution: "@babel/runtime@npm:7.28.3"
-  checksum: 10/f2415e4dbface7496f6fc561d640b44be203071fb0dfb63fbe338c7d2d2047419cb054ef13d1ebb8fc11e35d2b55aa3045def4b985e8b82aea5d7e58e1133e52
+"@babel/runtime@npm:7.28.4, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 10/6c9a70452322ea80b3c9b2a412bcf60771819213a67576c8cec41e88a95bb7bf01fc983754cda35dc19603eef52df22203ccbf7777b9d6316932f9fb77c25163
   languageName: node
   linkType: hard
 
@@ -1166,28 +1148,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3":
-  version: 7.28.3
-  resolution: "@babel/traverse@npm:7.28.3"
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
     "@babel/generator": "npm:^7.28.3"
     "@babel/helper-globals": "npm:^7.28.0"
-    "@babel/parser": "npm:^7.28.3"
+    "@babel/parser": "npm:^7.28.4"
     "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.28.2"
+    "@babel/types": "npm:^7.28.4"
     debug: "npm:^4.3.1"
-  checksum: 10/fe521591b719db010a89d9a39874386d0d67b79ee7e947eee7a8ef944bd3277cd92f3b39723fc9790dc4fb77f26b818db95712e147c599b9c4d98921eb4bc70b
+  checksum: 10/c3099364b7b1c36bcd111099195d4abeef16499e5defb1e56766b754e8b768c252e856ed9041665158aa1b31215fc6682632756803c8fa53405381ec08c4752b
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.4.4":
-  version: 7.28.2
-  resolution: "@babel/types@npm:7.28.2"
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.4.4":
+  version: 7.28.4
+  resolution: "@babel/types@npm:7.28.4"
   dependencies:
     "@babel/helper-string-parser": "npm:^7.27.1"
     "@babel/helper-validator-identifier": "npm:^7.27.1"
-  checksum: 10/a8de404a2e3109651f346d892dc020ce2c82046068f4ce24de7f487738dfbfa7bd716b35f1dcd6d6c32dde96208dc74a56b7f56a2c0bcb5af0ddc56cbee13533
+  checksum: 10/db50bf257aafa5d845ad16dae0587f57d596e4be4cbb233ea539976a4c461f9fbcc0bf3d37adae3f8ce5dcb4001462aa608f3558161258b585f6ce6ce21a2e45
   languageName: node
   linkType: hard
 
@@ -1567,14 +1549,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.7.0":
-  version: 4.7.0
-  resolution: "@eslint-community/eslint-utils@npm:4.7.0"
+"@eslint-community/eslint-utils@npm:^4.7.0, @eslint-community/eslint-utils@npm:^4.8.0":
+  version: 4.9.0
+  resolution: "@eslint-community/eslint-utils@npm:4.9.0"
   dependencies:
     eslint-visitor-keys: "npm:^3.4.3"
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-  checksum: 10/43ed5d391526d9f5bbe452aef336389a473026fca92057cf97c576db11401ce9bcf8ef0bf72625bbaf6207ed8ba6bf0dcf4d7e809c24f08faa68a28533c491a7
+  checksum: 10/89b1eb3137e14c379865e60573f524fcc0ee5c4b0c7cd21090673e75e5a720f14b92f05ab2d02704c2314b67e67b6f96f3bb209ded6b890ced7b667aa4bf1fa2
   languageName: node
   linkType: hard
 
@@ -1629,10 +1611,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:9.34.0":
-  version: 9.34.0
-  resolution: "@eslint/js@npm:9.34.0"
-  checksum: 10/3bbe8423e2d11e0eeb70a79f5cd25b89a8920cade36e479e4288d1e01043b48a0d737f46d8e5dc91c53afad5bc0edc882cc5a5a024ac1ac31b0b7b4d4a9f16c0
+"@eslint/js@npm:9.35.0":
+  version: 9.35.0
+  resolution: "@eslint/js@npm:9.35.0"
+  checksum: 10/a8764d0592ebe9a4804f8c0dafa7f49dbcdb38cabf30dd50587a3cfa51d898b90a3a0b93975d549f47debdd96b3e21da95081935f74213e45ec8c25f11f2ba1e
   languageName: node
   linkType: hard
 
@@ -1923,6 +1905,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1":
+  version: 3.0.0-beta.4.ha.1
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1"
+  dependencies:
+    "@ctrl/tinycolor": "npm:^4.1.0"
+    "@floating-ui/dom": "npm:^1.6.13"
+    "@lit/react": "npm:^1.0.8"
+    "@shoelace-style/animations": "npm:^1.2.0"
+    "@shoelace-style/localize": "npm:^3.2.1"
+    composed-offset-position: "npm:^0.0.6"
+    lit: "npm:^3.2.1"
+    nanoid: "npm:^5.1.5"
+    qr-creator: "npm:^1.0.0"
+    style-observer: "npm:^0.0.7"
+  checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -2138,6 +2138,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/remapping@npm:^2.3.5":
+  version: 2.3.5
+  resolution: "@jridgewell/remapping@npm:2.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/c2bb01856e65b506d439455f28aceacf130d6c023d1d4e3b48705e88def3571753e1a887daa04b078b562316c92d26ce36408a60534bceca3f830aec88a339ad
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.2
   resolution: "@jridgewell/resolve-uri@npm:3.1.2"
@@ -5101,131 +5111,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/a11y-base@npm:24.8.6"
+"@vaadin/a11y-base@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/a11y-base@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/1127282ee3d2814de85ac7df2e3661db955bec78472ab4991229440ef532c6de6955c48c6353f913a4d911c938ed0205f6cff73928c52866f324237be110a222
+  checksum: 10/76e354ff25fa7c5e5f9f410b7cb9eca647c358739329b3f1e30b833c3dc4765bcbb9614dd4ef2a1ee455807773843f782a6e8205698db4506846479bfcb0ae69
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/combo-box@npm:24.8.6"
+"@vaadin/combo-box@npm:24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/combo-box@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/field-base": "npm:~24.8.6"
-    "@vaadin/input-container": "npm:~24.8.6"
-    "@vaadin/item": "npm:~24.8.6"
-    "@vaadin/lit-renderer": "npm:~24.8.6"
-    "@vaadin/overlay": "npm:~24.8.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.7"
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/field-base": "npm:~24.8.7"
+    "@vaadin/input-container": "npm:~24.8.7"
+    "@vaadin/item": "npm:~24.8.7"
+    "@vaadin/lit-renderer": "npm:~24.8.7"
+    "@vaadin/overlay": "npm:~24.8.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/95031f4fd2adfe584a235d83da30b8bd5a3bcdcc6e342c9b1d4305c9ccf7ef7c2041b5930e7206408b2d01c81fc6555d1f556e31321433cc069905afe5aa1507
+  checksum: 10/323b0164ce31ba95a5ad09a211accdc08d804a71b6b368080e18736b418497432e781f80da8b7c47e04797c5eccf6759a1dcc99bd3129cea9ddb3899f191d731
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/component-base@npm:24.8.6"
+"@vaadin/component-base@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/component-base@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
     "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
     "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
     lit: "npm:^3.0.0"
-  checksum: 10/d4bff00004f659d93ec3ae4c6c5f5f645672f093cccf20bb6b0957939b31d9ecd29ecf32d7863c1a212784f0baf84f32ffee7c9158451de7c91bc009d8e42d24
+  checksum: 10/cd22b5834cf90cd41e66a69c2d75b01fcdb7d34e0b10a87e4c236471512c34038a7e0de0f69474da819cbc26a51303b985c8876ab3a3ae36dd590b6f77e5527e
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/field-base@npm:24.8.6"
+"@vaadin/field-base@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/field-base@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.7"
+    "@vaadin/component-base": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/a1b1121e5ed690645f2e7b0400e5f1880aac0fdff81fd57fc85c325187587005162f835d322868fc5788f74ebb69ce99f1cea3cde49b23aab67310aac67df996
+  checksum: 10/0c5bfc31bbfa0fbab121ccb3db6dff565725f456d9a269ff298c021ca9a3331e7e806eb4e5281052bb7a8e184dd091b4cd746a3e41a63f6a996cfd513e029bbc
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/icon@npm:24.8.6"
+"@vaadin/icon@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/icon@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/569e5241bb421f8a30fe34c360f97b6e521f3dcde65dcf2fbeb60d699e230406605b48d301ca4e1cfa2cf64b56ca2b95e9a013a5e6e51f910e60b683aaeca64b
+  checksum: 10/b182245273240d8794e0922d996eb4bf633cbfcf5dccc5323f6b1b77d4861c7113be35539c9bacef8fe4bab8995047529b3130dc5f273f3d4ab3add0eef2079b
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/input-container@npm:24.8.6"
+"@vaadin/input-container@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/input-container@npm:24.8.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/b18631fd45f59cc9d728a58da911feb119398c0e76962fa7cdcf62cf8582f722cdfc4bdcf52be5f678a390bf9006339351fcaf08b1cbcfe5905638d13c74f100
+  checksum: 10/dabf6ac85ea632f8d295a9c225d66dbedb646541d242db5580c707fd44f7671bb3bc619d43e4fdd9041fdab818a1dedb06d659569f525c9aad3482bc7dd4bca8
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/item@npm:24.8.6"
+"@vaadin/item@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/item@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.7"
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/59f9bd95794b30a2f65cba1482a1f496370f92f834bf532255622a76a43066c53ee0c6fc5eb3ca5d777835532f3efaa2415edce91823f91f2462ecb1342a3bce
+  checksum: 10/57d63ff8df827d2324ebbeb54e911b7e7e5ee7d7b3ef8179e9c2e3b5e6a5db8a332e425eee8e3a33ec720e5a9b3735b717721ac5d0e8ef4469b1cfacfc97dc01
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/lit-renderer@npm:24.8.6"
+"@vaadin/lit-renderer@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/lit-renderer@npm:24.8.7"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/eb721a0e09156e67d857ea95ed2285b63f041e82fff60c40822de6050a4ee21e18330b208b14850a72a4ea2e0f7ee43b3d9518d228dc22672e7b69e25da43662
+  checksum: 10/be89ec15b40f67f19daff422445de67725fb77b9433c93ee6727ce8dc2513dfc6f1ecaed26374a0a39e995035a89408408acf5f233f7c9a30ddafb63746aec5e
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/overlay@npm:24.8.6"
+"@vaadin/overlay@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/overlay@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.7"
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
     lit: "npm:^3.0.0"
-  checksum: 10/2a1047f4a8fc11bf51a5095cd66bd6cd9122c5edadb57ab84a559f86d90301bf16d95fd877b9fc2e7cdbcd3bd1856ab73649ec7301251b58feb5a03f42e1ccea
+  checksum: 10/598c66a9e36c76e883750e733a64ff84906055ed14c2b27d92a850ae6f7f2daf763adb15dfdfc4708e8cae25e857d4e53498ccc5f1e7463b1d04b045a65f9049
   languageName: node
   linkType: hard
 
@@ -5236,37 +5246,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.6"
+"@vaadin/vaadin-lumo-styles@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/icon": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
-  checksum: 10/fe01c0a93caa669a3b63573d2294834805d1e393bc5a0d7bcdee030d9f7ef2d73e2fc1a40543f82a4516b8fa155eaf13f6bb84653e26686c6ecb2ee22dfa9500
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/icon": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
+  checksum: 10/4c89524eab8a63e8135548ba2120403f599c1962fc81fcae5d6222e24ede5f6ade7eca6b928227c4572ae2c7d5cec00039efd9a195e32397656c28d351bcb88b
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/vaadin-material-styles@npm:24.8.6"
+"@vaadin/vaadin-material-styles@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/vaadin-material-styles@npm:24.8.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
-  checksum: 10/a19f479b567e929b6c375e3a0518b651f99d4ca329ba4323cf4582c13d3b01e73392bb082a3216a3f8d84a7b004df42042ac71e64b66d9f20ae2740f3a57459f
+    "@vaadin/component-base": "npm:~24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.7"
+  checksum: 10/ab6bcca41971d4a4a8733addc6413ea683eb40c672a541f688125ed51225b84330a0189367535d32dc3a1b596963e9c2302ae783a97d641845848b5af7214b61
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.8.6":
-  version: 24.8.6
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.6"
+"@vaadin/vaadin-themable-mixin@npm:24.8.7, @vaadin/vaadin-themable-mixin@npm:~24.8.7":
+  version: 24.8.7
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
     style-observer: "npm:^0.0.8"
-  checksum: 10/eb0b356f86d0f19914284219243812dde31d5b54b6f192a3bcb569d0403d100c820080d60878be90b859fd7e2a4342a5e054291a0f3c12888c173ca4122290af
+  checksum: 10/bcb6413d5c4a55df623e35bf9ea1eae17623643313b0016df376a9d947940f4ec32765faf0cdf6b7b443f5341fbb13cfb54bfc268c23407dae72a42dc132686f
   languageName: node
   linkType: hard
 
@@ -5570,7 +5580,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
+"accepts@npm:~1.3.4, accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -6834,7 +6844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compressible@npm:~2.0.16, compressible@npm:~2.0.18":
+"compressible@npm:~2.0.18":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
   dependencies:
@@ -6843,22 +6853,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compression@npm:1.7.4":
-  version: 1.7.4
-  resolution: "compression@npm:1.7.4"
-  dependencies:
-    accepts: "npm:~1.3.5"
-    bytes: "npm:3.0.0"
-    compressible: "npm:~2.0.16"
-    debug: "npm:2.6.9"
-    on-headers: "npm:~1.0.2"
-    safe-buffer: "npm:5.1.2"
-    vary: "npm:~1.1.2"
-  checksum: 10/469cd097908fe1d3ff146596d4c24216ad25eabb565c5456660bdcb3a14c82ebc45c23ce56e19fc642746cf407093b55ab9aa1ac30b06883b27c6c736e6383c2
-  languageName: node
-  linkType: hard
-
-"compression@npm:^1.7.4":
+"compression@npm:1.8.1, compression@npm:^1.7.4":
   version: 1.8.1
   resolution: "compression@npm:1.8.1"
   dependencies:
@@ -8146,17 +8141,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:9.34.0":
-  version: 9.34.0
-  resolution: "eslint@npm:9.34.0"
+"eslint@npm:9.35.0":
+  version: 9.35.0
+  resolution: "eslint@npm:9.35.0"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
+    "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.1"
     "@eslint/config-array": "npm:^0.21.0"
     "@eslint/config-helpers": "npm:^0.3.1"
     "@eslint/core": "npm:^0.15.2"
     "@eslint/eslintrc": "npm:^3.3.1"
-    "@eslint/js": "npm:9.34.0"
+    "@eslint/js": "npm:9.35.0"
     "@eslint/plugin-kit": "npm:^0.3.5"
     "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
@@ -8192,7 +8187,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/edcd2e055521784cc941d26ea326fe488f749f6d9c18b5c10ea7ed779a502d3d6906b0cc49f68d208416f7b2cb82a21cb96d3031c2e02457f03dbf0c5be0992c
+  checksum: 10/238155639343d53bac639319ba92895083cbd15826081ac51204b29d64fbb52cebf0d355f11f57f146d2b15c4f2e1d85e3df0b0ac7ec0e2ef5e759c99dcab75e
   languageName: node
   linkType: hard
 
@@ -9309,12 +9304,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
-    "@awesome.me/webawesome": "npm:3.0.0-beta.4"
-    "@babel/core": "npm:7.28.3"
+    "@babel/core": "npm:7.28.4"
     "@babel/helper-define-polyfill-provider": "npm:0.6.5"
     "@babel/plugin-transform-runtime": "npm:7.28.3"
     "@babel/preset-env": "npm:7.28.3"
-    "@babel/runtime": "npm:7.28.3"
+    "@babel/runtime": "npm:7.28.4"
     "@braintree/sanitize-url": "npm:7.1.1"
     "@bundle-stats/plugin-webpack-filter": "npm:4.21.3"
     "@codemirror/autocomplete": "npm:6.18.7"
@@ -9340,6 +9334,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -9402,8 +9397,8 @@ __metadata:
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
-    "@vaadin/combo-box": "npm:24.8.6"
-    "@vaadin/vaadin-themable-mixin": "npm:24.8.6"
+    "@vaadin/combo-box": "npm:24.8.7"
+    "@vaadin/vaadin-themable-mixin": "npm:24.8.7"
     "@vibrant/color": "npm:4.0.0"
     "@vitest/coverage-v8": "npm:3.2.4"
     "@vue/web-component-wrapper": "npm:1.3.0"
@@ -9427,7 +9422,7 @@ __metadata:
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.0.0"
     element-internals-polyfill: "npm:3.0.2"
-    eslint: "npm:9.34.0"
+    eslint: "npm:9.35.0"
     eslint-config-airbnb-base: "npm:15.0.0"
     eslint-config-prettier: "npm:10.1.8"
     eslint-import-resolver-webpack: "npm:0.13.10"
@@ -9464,7 +9459,7 @@ __metadata:
     lit-html: "npm:3.3.1"
     lodash.merge: "npm:4.6.2"
     lodash.template: "npm:4.5.0"
-    luxon: "npm:3.7.1"
+    luxon: "npm:3.7.2"
     map-stream: "npm:0.0.7"
     marked: "npm:16.2.1"
     memoize-one: "npm:6.0.0"
@@ -9478,7 +9473,7 @@ __metadata:
     roboto-fontface: "npm:0.10.0"
     rrule: "npm:2.8.1"
     rspack-manifest-plugin: "npm:5.0.3"
-    serve: "npm:14.2.4"
+    serve: "npm:14.2.5"
     sinon: "npm:21.0.0"
     sortablejs: "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch"
     stacktrace-js: "npm:2.0.2"
@@ -11059,10 +11054,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"luxon@npm:3.7.1":
-  version: 3.7.1
-  resolution: "luxon@npm:3.7.1"
-  checksum: 10/3582460c0e2d4a88f6f0c11df30cac70c7e09a3d595b66b1d04543759a38afe6e5be28c601c4d81ee73d2e8602c65f825e2c8a8542392cc564624f2bf7d6301f
+"luxon@npm:3.7.2":
+  version: 3.7.2
+  resolution: "luxon@npm:3.7.2"
+  checksum: 10/b24cd205ed306ce7415991687897dcc4027921ae413c9116590bc33a95f93b86ce52cf74ba72b4f5c5ab1c10090517f54ac8edfb127c049e0bf55b90dc2260be
   languageName: node
   linkType: hard
 
@@ -11802,13 +11797,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"on-headers@npm:~1.0.2":
-  version: 1.0.2
-  resolution: "on-headers@npm:1.0.2"
-  checksum: 10/870766c16345855e2012e9422ba1ab110c7e44ad5891a67790f84610bd70a72b67fdd71baf497295f1d1bf38dd4c92248f825d48729c53c0eae5262fb69fa171
-  languageName: node
-  linkType: hard
-
 "on-headers@npm:~1.1.0":
   version: 1.1.0
   resolution: "on-headers@npm:1.1.0"
@@ -13011,13 +12999,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
-  version: 5.1.2
-  resolution: "safe-buffer@npm:5.1.2"
-  checksum: 10/7eb5b48f2ed9a594a4795677d5a150faa7eb54483b2318b568dc0c4fc94092a6cce5be02c7288a0500a156282f5276d5688bce7259299568d1053b2150ef374a
-  languageName: node
-  linkType: hard
-
 "safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -13025,6 +13006,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
+  version: 5.1.2
+  resolution: "safe-buffer@npm:5.1.2"
+  checksum: 10/7eb5b48f2ed9a594a4795677d5a150faa7eb54483b2318b568dc0c4fc94092a6cce5be02c7288a0500a156282f5276d5688bce7259299568d1053b2150ef374a
+  languageName: node
+  linkType: hard
+
 "safe-push-apply@npm:^1.0.0":
   version: 1.0.0
   resolution: "safe-push-apply@npm:1.0.0"
@@ -13199,9 +13187,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve@npm:14.2.4":
-  version: 14.2.4
-  resolution: "serve@npm:14.2.4"
+"serve@npm:14.2.5":
+  version: 14.2.5
+  resolution: "serve@npm:14.2.5"
   dependencies:
     "@zeit/schemas": "npm:2.36.0"
     ajv: "npm:8.12.0"
@@ -13210,13 +13198,13 @@ __metadata:
     chalk: "npm:5.0.1"
     chalk-template: "npm:0.4.0"
     clipboardy: "npm:3.0.0"
-    compression: "npm:1.7.4"
+    compression: "npm:1.8.1"
     is-port-reachable: "npm:4.0.0"
     serve-handler: "npm:6.1.6"
     update-check: "npm:1.5.4"
   bin:
     serve: build/main.js
-  checksum: 10/79627f399226b765f6e2f0f62faeceda5db17d00f40f9ad9faa39049729ea4ce7b595a72cc0dba3543947288772cb60f2b0ab91efa3bbedfe644ca7ee0484df1
+  checksum: 10/ff021bd16697f4342e712e5fda507cbf95e900cede1c38d72a02a7b570a355e3824284e95dc35ca9b49acbca27b8d515fd0648c1dde0a3341511ea6ba1ca30f1
   languageName: node
   linkType: hard