clean up

.nvmrc

@@ -1 +1 @@
-22.20.0
+lts/iron

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.0",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -157,7 +157,7 @@
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.1",
+    "@rsdoctor/rspack-plugin": "1.3.0",
     "@rspack/core": "1.5.7",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",

src/common/entity/get_states.ts

@@ -18,7 +18,6 @@ export const FIXED_DOMAIN_STATES = {
     "pending",
     "triggered",
   ],
-  alert: ["on", "off", "idle"],
   assist_satellite: ["idle", "listening", "responding", "processing"],
   automation: ["on", "off"],
   binary_sensor: ["on", "off"],

src/common/entity/state_color.ts

@@ -40,7 +40,6 @@ const STATE_COLORED_DOMAIN = new Set([
   "vacuum",
   "valve",
   "water_heater",
-  "weather",
 ]);
 
 export const stateColorCss = (stateObj: HassEntity, state?: string) => {

src/components/chart/timeline-color.ts

@@ -6,8 +6,6 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { stateColorProperties } from "../../common/entity/state_color";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { computeCssValue } from "../../resources/css-variables";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
 
 const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
   media_player: {
@@ -53,28 +51,6 @@ function computeTimelineStateColor(
 let colorIndex = 0;
 const stateColorMap = new Map<string, string>();
 
-function computeTimelineEnumColor(
-  state: string,
-  computedStyles: CSSStyleDeclaration,
-  stateObj?: HassEntity
-): string | undefined {
-  if (!stateObj) {
-    return undefined;
-  }
-  const domain = computeStateDomain(stateObj);
-  const states =
-    FIXED_DOMAIN_STATES[domain] ||
-    (domain === "sensor" &&
-      stateObj.attributes.device_class === "enum" &&
-      stateObj.attributes.options) ||
-    [];
-  const idx = states.indexOf(state);
-  if (idx === -1) {
-    return undefined;
-  }
-  return getGraphColorByIndex(idx, computedStyles);
-}
-
 function computeTimeLineGenericColor(
   state: string,
   computedStyles: CSSStyleDeclaration
@@ -95,7 +71,6 @@ export function computeTimelineColor(
 ): string {
   return (
     computeTimelineStateColor(state, computedStyles, stateObj) ||
-    computeTimelineEnumColor(state, computedStyles, stateObj) ||
     computeTimeLineGenericColor(state, computedStyles)
   );
 }

src/components/entity/ha-entity-toggle.ts

@@ -112,7 +112,7 @@ export class HaEntityToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const stateDomain = computeStateDomain(this.stateObj);
     let serviceDomain;
     let service;

src/components/ha-sidebar.ts

@@ -22,7 +22,6 @@ import {
   eventOptions,
   property,
   query,
-  queryAll,
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -41,7 +40,7 @@ import { updateCanInstall } from "../data/update";
 import { showEditSidebarDialog } from "../dialogs/sidebar/show-dialog-edit-sidebar";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
-import { haStyleAnimations, haStyleScrollbar } from "../resources/styles";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-fade-in";
 import "./ha-icon";
@@ -211,8 +210,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   @query(".tooltip") private _tooltip!: HTMLDivElement;
 
-  @queryAll("ha-md-list-item") private _listItems!: NodeListOf<HaMdListItem>;
-
   public hassSubscribe() {
     return [
       subscribeFrontendUserData(
@@ -325,15 +322,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     if (changedProps.has("alwaysExpand")) {
       toggleAttribute(this, "expanded", this.alwaysExpand);
     }
-
-    // Staggered animation for list items based on index
-    this._listItems.forEach((item, index) => {
-      (item as HTMLElement).style.setProperty(
-        "--animation-index",
-        String(index + 1)
-      );
-    });
-
     if (!changedProps.has("hass")) {
       return;
     }
@@ -705,7 +693,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
-      haStyleAnimations,
       css`
         :host {
           overflow: visible;
@@ -752,14 +739,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
         .menu ha-icon-button {
           color: var(--sidebar-icon-color);
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base) / 2;
-        }
-        ha-md-list-item {
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: calc(
-            var(--ha-animation-delay-base) * var(--animation-index, 1) / 2
-          );
         }
         .title {
           margin-left: 3px;
@@ -930,6 +909,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           padding: 4px;
           font-weight: var(--ha-font-weight-medium);
         }
+
+        .menu ha-icon-button {
+          -webkit-transform: scaleX(var(--scale-direction));
+          transform: scaleX(var(--scale-direction));
+        }
       `,
     ];
   }

src/components/ha-switch.ts

@@ -15,7 +15,7 @@ export class HaSwitch extends SwitchBase {
     super.firstUpdated();
     this.addEventListener("change", () => {
       if (this.haptic) {
-        forwardHaptic(this, "light");
+        forwardHaptic("light");
       }
     });
   }

src/data/haptics.ts

@@ -28,6 +28,6 @@ declare global {
   }
 }
 
-export const forwardHaptic = (node: HTMLElement, hapticType: HapticType) => {
-  fireEvent(node, "haptic", hapticType);
+export const forwardHaptic = (hapticType: HapticType) => {
+  fireEvent(window, "haptic", hapticType);
 };

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

@@ -42,7 +42,7 @@ class MoreInfoFan extends LitElement {
 
   private _toggle = () => {
     const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     this.hass.callService("fan", service, {
       entity_id: this.stateObj!.entity_id,
     });

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

@@ -310,7 +310,7 @@ class MoreInfoLight extends LitElement {
 
   private _toggle = () => {
     const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     this.hass.callService("light", service, {
       entity_id: this.stateObj!.entity_id,
     });

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

@@ -258,10 +258,7 @@ class MoreInfoMediaPlayer extends LitElement {
 
     const stateObj = this.stateObj;
     const controls = computeMediaControls(stateObj, true);
-    const coverUrl =
-      stateObj.attributes.entity_picture_local ||
-      stateObj.attributes.entity_picture ||
-      "";
+    const coverUrl = stateObj.attributes.entity_picture || "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
 
     const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -210,10 +210,10 @@ export class ZHAClusterAttributes extends LitElement {
       this._readingAttribute = true;
       try {
         this._attributeValue = await readAttributeValue(this.hass, data);
-        forwardHaptic(this, "success");
+        forwardHaptic("success");
         button.actionSuccess();
       } catch (_err: any) {
-        forwardHaptic(this, "failure");
+        forwardHaptic("failure");
         button.actionError();
       } finally {
         this._readingAttribute = false;

src/panels/config/labels/ha-config-labels.ts

@@ -10,7 +10,6 @@ import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { storage } from "../../../common/decorators/storage";
@@ -105,14 +104,13 @@ export class HaConfigLabels extends LitElement {
         template: (label) =>
           label.color
             ? html`<div
-                style=${styleMap({
-                  backgroundColor: computeCssColor(label.color),
-                  borderRadius: "10px",
-                  border: "1px solid var(--outline-color)",
-                  boxSizing: "border-box",
-                  width: "20px",
-                  height: "20px",
-                })}
+                style="
+          background-color: ${computeCssColor(label.color)};
+          border-radius: 10px;
+          border: 1px solid var(--outline-color);
+          box-sizing: border-box;
+          width: 20px;
+          height: 20px;"
               ></div>`
             : nothing,
       },

src/panels/config/scene/ha-scene-dashboard.ts

@@ -1087,7 +1087,7 @@ ${rejected
         name: computeStateName(scene),
       }),
     });
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
   };
 
   private _deleteConfirm(scene: SceneEntity): void {

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

@@ -443,7 +443,7 @@ class HaPanelDevAction extends LitElement {
     const button = ev.currentTarget as HaProgressButton;
 
     if (this._yamlMode && !this._yamlValid) {
-      forwardHaptic(this, "failure");
+      forwardHaptic("failure");
       button.actionError();
       this._error = this.hass.localize(
         "ui.panel.developer-tools.tabs.actions.errors.yaml.invalid_yaml"
@@ -465,7 +465,7 @@ class HaPanelDevAction extends LitElement {
     );
 
     if (this._error !== undefined) {
-      forwardHaptic(this, "failure");
+      forwardHaptic("failure");
       button.actionError();
       return;
     }
@@ -534,7 +534,7 @@ class HaPanelDevAction extends LitElement {
       ) {
         return;
       }
-      forwardHaptic(this, "failure");
+      forwardHaptic("failure");
       button.actionError();
 
       let localizedErrorMessage: string | undefined;

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -177,7 +177,7 @@ class HuiAreaControlsCardFeature
       .map((entityId) => this.hass!.states[entityId] as HassEntity | undefined)
       .filter((v): v is HassEntity => Boolean(v));
 
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     toggleGroupEntities(this.hass, entities);
   }
 

src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts

@@ -69,7 +69,7 @@ class HuiLockCommandsCardFeature
     if (!this.hass || !this._stateObj || !service) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     callProtectedLockService(this, this.hass, this._stateObj, service);
   }
 

src/panels/lovelace/card-features/hui-toggle-card-feature.ts

@@ -112,7 +112,7 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
     if (!this.hass || !this._stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const stateDomain = computeDomain(this._stateObj.entity_id);
     const serviceDomain = stateDomain;
     const service = turnOn ? "turn_on" : "turn_off";

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -1,6 +1,5 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { classMap } from "lit/directives/class-map";
 import { customElement, property, state } from "lit/decorators";
 import { getColorByIndex } from "../../../common/color/colors";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -17,11 +16,7 @@ import type {
 import "../../calendar/ha-full-calendar";
 import { findEntities } from "../common/find-entities";
 import "../components/hui-warning";
-import type {
-  LovelaceCard,
-  LovelaceCardEditor,
-  LovelaceGridOptions,
-} from "../types";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { CalendarCardConfig } from "./types";
 
 @customElement("hui-calendar-card")
@@ -53,8 +48,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public layout?: string;
-
   @state() private _events: CalendarEvent[] = [];
 
   @state() private _config?: CalendarCardConfig;
@@ -95,16 +88,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    return 12;
-  }
-
-  public getGridOptions(): LovelaceGridOptions {
-    return {
-      rows: 6,
-      columns: 12,
-      min_columns: 4,
-      min_rows: 4,
-    };
+    return this._config?.header ? 1 : 0 + 11;
   }
 
   public connectedCallback(): void {
@@ -134,10 +118,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       <ha-card>
         <div class="header">${this._config.title}</div>
         <ha-full-calendar
-          class=${classMap({
-            "is-grid": this.layout === "grid",
-            "is-panel": this.layout === "panel",
-          })}
           .narrow=${this._narrow}
           .events=${this._events}
           .hass=${this.hass}
@@ -244,11 +224,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
     ha-full-calendar {
       --calendar-height: 400px;
     }
-
-    ha-full-calendar.is-grid,
-    ha-full-calendar.is-panel {
-      height: calc(100% - 16px);
-    }
   `;
 }
 

src/panels/lovelace/cards/hui-home-summary-card.ts

@@ -1,23 +1,17 @@
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { generateEntityFilter } from "../../../common/entity/entity_filter";
 import { formatNumber } from "../../../common/number/format_number";
-import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import "../../../components/ha-ripple";
 import "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-info";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
-import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
-import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import "../components/hui-tile";
 import {
   findEntities,
   getSummaryLabel,
@@ -229,140 +223,32 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    const contentClasses = { vertical: Boolean(this._config.vertical) };
-
-    const color = computeCssColor(COLORS[this._config.summary]);
-
-    const style = {
-      "--tile-color": color,
-    };
-
-    const secondary = this._computeSummaryState();
-
     const label = getSummaryLabel(this.hass.localize, this._config.summary);
     const icon = HOME_SUMMARIES_ICONS[this._config.summary];
+    const color = computeCssColor(COLORS[this._config.summary]);
+    const secondary = this._computeSummaryState();
 
     return html`
-      <ha-card style=${styleMap(style)}>
-        <div
-          class="background"
-          @action=${this._handleAction}
-          .actionHandler=${actionHandler({
-            hasHold: hasAction(this._config!.hold_action),
-            hasDoubleClick: hasAction(this._config!.double_tap_action),
-          })}
-          role=${ifDefined(this._hasCardAction ? "button" : undefined)}
-          tabindex=${ifDefined(this._hasCardAction ? "0" : undefined)}
-          aria-labelledby="info"
-        >
-          <ha-ripple .disabled=${!this._hasCardAction}></ha-ripple>
-        </div>
-        <div class="container">
-          <div class="content ${classMap(contentClasses)}">
-            <ha-tile-icon>
-              <ha-icon slot="icon" .icon=${icon}></ha-icon>
-            </ha-tile-icon>
-            <ha-tile-info
-              id="info"
-              .primary=${label}
-              .secondary=${secondary}
-            ></ha-tile-info>
-          </div>
-        </div>
-      </ha-card>
+      <hui-tile
+        name=${label}
+        ?vertical=${this._config.vertical}
+        color=${color}
+        .hasCardAction=${this._hasCardAction}
+        .onAction=${this._handleAction}
+        .tapAction=${this._config.tap_action}
+        .holdAction=${this._config.hold_action}
+        .doubleTapAction=${this._config.double_tap_action}
+      >
+        <ha-tile-icon slot="icon">
+          <ha-icon slot="icon" .icon=${icon}></ha-icon>
+        </ha-tile-icon>
+        <ha-tile-info slot="info" id="info">
+          <span slot="primary" class="primary">${label}</span>
+          <span slot="secondary">${secondary}</span>
+        </ha-tile-info>
+      </hui-tile>
     `;
   }
-
-  static styles = css`
-    :host {
-      --tile-color: var(--state-inactive-color);
-      -webkit-tap-highlight-color: transparent;
-    }
-    ha-card:has(.background:focus-visible) {
-      --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-      --shadow-focus: 0 0 0 1px var(--tile-color);
-      border-color: var(--tile-color);
-      box-shadow: var(--shadow-default), var(--shadow-focus);
-    }
-    ha-card {
-      --ha-ripple-color: var(--tile-color);
-      --ha-ripple-hover-opacity: 0.04;
-      --ha-ripple-pressed-opacity: 0.12;
-      height: 100%;
-      transition:
-        box-shadow 180ms ease-in-out,
-        border-color 180ms ease-in-out;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-    ha-card.active {
-      --tile-color: var(--state-icon-color);
-    }
-    [role="button"] {
-      cursor: pointer;
-      pointer-events: auto;
-    }
-    [role="button"]:focus {
-      outline: none;
-    }
-    .background {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: var(--ha-card-border-radius, 12px);
-      margin: calc(-1 * var(--ha-card-border-width, 1px));
-      overflow: hidden;
-    }
-    .container {
-      margin: calc(-1 * var(--ha-card-border-width, 1px));
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-    .container.horizontal {
-      flex-direction: row;
-    }
-
-    .content {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: 10px;
-      flex: 1;
-      min-width: 0;
-      box-sizing: border-box;
-      pointer-events: none;
-      gap: 10px;
-    }
-
-    .vertical {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-    }
-    .vertical ha-tile-info {
-      width: 100%;
-      flex: none;
-    }
-
-    ha-tile-icon {
-      --tile-icon-color: var(--tile-color);
-      position: relative;
-      padding: 6px;
-      margin: -6px;
-    }
-
-    ha-tile-info {
-      position: relative;
-      min-width: 0;
-      transition: background-color 180ms ease-in-out;
-      box-sizing: border-box;
-    }
-  `;
 }
 
 declare global {

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -231,7 +231,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
   static styles = css`
     ha-card {
       height: 100%;
-      overflow-y: auto;
     }
     ha-alert {
       margin-bottom: 8px;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -3,7 +3,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
@@ -12,24 +11,15 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-card";
-import "../../../components/ha-ripple";
-import "../../../components/ha-state-icon";
-import "../../../components/ha-svg-icon";
-import "../../../components/tile/ha-tile-badge";
-import "../../../components/tile/ha-tile-icon";
-import "../../../components/tile/ha-tile-info";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
-import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
-import "../card-features/hui-card-features";
 import type { LovelaceCardFeatureContext } from "../card-features/types";
-import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
+import "../components/hui-tile";
 import type {
   LovelaceCard,
   LovelaceCardEditor,
@@ -37,6 +27,7 @@ import type {
 } from "../types";
 import { renderTileBadge } from "./tile/badges/tile-badge";
 import type { TileCardConfig } from "./types";
+import { actionHandler } from "../common/directives/action-handler-directive";
 
 export const getEntityDefaultTileIconAction = (entityId: string) => {
   const domain = computeDomain(entityId);
@@ -253,10 +244,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const contentClasses = { vertical: Boolean(this._config.vertical) };
-
     const name = this._config.name || computeStateName(stateObj);
-    const active = stateActive(stateObj);
     const color = this._computeStateColor(stateObj, this._config.color);
     const domain = computeDomain(stateObj.entity_id);
 
@@ -272,162 +260,69 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
           </state-display>
         `;
 
-    const style = {
-      "--tile-color": color,
-    };
-
     const imageUrl = this._config.show_entity_picture
       ? this._getImageUrl(stateObj)
       : undefined;
 
-    const featurePosition = this._featurePosition(this._config);
     const features = this._displayedFeatures(this._config);
 
-    const containerOrientationClass =
-      featurePosition === "inline" ? "horizontal" : "";
-
     return html`
-      <ha-card style=${styleMap(style)} class=${classMap({ active })}>
-        <div
-          class="background"
-          @action=${this._handleAction}
+      <hui-tile
+        ?vertical=${this._config.vertical}
+        color=${ifDefined(color)}
+        .hasCardAction=${this._hasCardAction}
+        .hasIconAction=${this._hasIconAction}
+        .onAction=${this._handleAction}
+        .tapAction=${this._config.tap_action}
+        .holdAction=${this._config.hold_action}
+        .doubleTapAction=${this._config.double_tap_action}
+        .featurePosition=${this._featurePosition(this._config)}
+      >
+        <ha-tile-icon
+          slot="icon"
+          role=${ifDefined(this._hasIconAction ? "button" : undefined)}
+          tabindex=${ifDefined(this._hasIconAction ? "0" : undefined)}
+          @action=${this._handleIconAction}
           .actionHandler=${actionHandler({
-            hasHold: hasAction(this._config!.hold_action),
-            hasDoubleClick: hasAction(this._config!.double_tap_action),
+            hasHold: hasAction(this._config!.icon_hold_action),
+            hasDoubleClick: hasAction(this._config!.icon_double_tap_action),
           })}
-          role=${ifDefined(this._hasCardAction ? "button" : undefined)}
-          tabindex=${ifDefined(this._hasCardAction ? "0" : undefined)}
-          aria-labelledby="info"
+          .interactive=${this._hasIconAction}
+          .imageUrl=${imageUrl}
+          data-domain=${ifDefined(domain)}
+          data-state=${ifDefined(stateObj?.state)}
+          class=${classMap({ image: Boolean(imageUrl) })}
         >
-          <ha-ripple .disabled=${!this._hasCardAction}></ha-ripple>
-        </div>
-        <div class="container ${containerOrientationClass}">
-          <div class="content ${classMap(contentClasses)}">
-            <ha-tile-icon
-              role=${ifDefined(this._hasIconAction ? "button" : undefined)}
-              tabindex=${ifDefined(this._hasIconAction ? "0" : undefined)}
-              @action=${this._handleIconAction}
-              .actionHandler=${actionHandler({
-                hasHold: hasAction(this._config!.icon_hold_action),
-                hasDoubleClick: hasAction(this._config!.icon_double_tap_action),
-              })}
-              .interactive=${this._hasIconAction}
-              .imageUrl=${imageUrl}
-              data-domain=${ifDefined(domain)}
-              data-state=${ifDefined(stateObj?.state)}
-              class=${classMap({ image: Boolean(imageUrl) })}
-            >
-              <ha-state-icon
-                slot="icon"
-                .icon=${this._config.icon}
-                .stateObj=${stateObj}
-                .hass=${this.hass}
-              ></ha-state-icon>
-              ${renderTileBadge(stateObj, this.hass)}
-            </ha-tile-icon>
-            <ha-tile-info id="info">
-              <span slot="primary" class="primary">${name}</span>
-              ${stateDisplay
-                ? html`<span slot="secondary">${stateDisplay}</span>`
-                : nothing}
-            </ha-tile-info>
-          </div>
-          ${features.length > 0
-            ? html`
-                <hui-card-features
-                  .hass=${this.hass}
-                  .context=${this._featureContext}
-                  .color=${this._config.color}
-                  .features=${features}
-                ></hui-card-features>
-              `
+          <ha-state-icon
+            slot="icon"
+            .icon=${this._config.icon}
+            .stateObj=${stateObj}
+            .hass=${this.hass}
+          ></ha-state-icon>
+          ${renderTileBadge(stateObj, this.hass)}
+        </ha-tile-icon>
+        <ha-tile-info slot="info" id="info">
+          <span slot="primary" class="primary">${name}</span>
+          ${stateDisplay
+            ? html`<span slot="secondary">${stateDisplay}</span>`
             : nothing}
-        </div>
-      </ha-card>
+        </ha-tile-info>
+        ${features.length
+          ? html`
+              <hui-card-features
+                slot="features"
+                .hass=${this.hass}
+                .context=${this._featureContext}
+                .color=${this._config.color}
+                .features=${features}
+              ></hui-card-features>
+            `
+          : nothing}
+      </hui-tile>
     `;
   }
 
   static styles = css`
-    :host {
-      --tile-color: var(--state-inactive-color);
-      -webkit-tap-highlight-color: transparent;
-    }
-    ha-card:has(.background:focus-visible) {
-      --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-      --shadow-focus: 0 0 0 1px var(--tile-color);
-      border-color: var(--tile-color);
-      box-shadow: var(--shadow-default), var(--shadow-focus);
-    }
-    ha-card {
-      --ha-ripple-color: var(--tile-color);
-      --ha-ripple-hover-opacity: 0.04;
-      --ha-ripple-pressed-opacity: 0.12;
-      height: 100%;
-      transition:
-        box-shadow 180ms ease-in-out,
-        border-color 180ms ease-in-out;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-    ha-card.active {
-      --tile-color: var(--state-icon-color);
-    }
-    [role="button"] {
-      cursor: pointer;
-      pointer-events: auto;
-    }
-    [role="button"]:focus {
-      outline: none;
-    }
-    .background {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: var(--ha-card-border-radius, 12px);
-      margin: calc(-1 * var(--ha-card-border-width, 1px));
-      overflow: hidden;
-    }
-    .container {
-      margin: calc(-1 * var(--ha-card-border-width, 1px));
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-    .container.horizontal {
-      flex-direction: row;
-    }
-
-    .content {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: 10px;
-      flex: 1;
-      min-width: 0;
-      box-sizing: border-box;
-      pointer-events: none;
-      gap: 10px;
-    }
-
-    .vertical {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-    }
-    .vertical ha-tile-info {
-      width: 100%;
-      flex: none;
-    }
-    ha-tile-icon {
-      --tile-icon-color: var(--tile-color);
-      position: relative;
-      padding: 6px;
-      margin: -6px;
-    }
     ha-tile-badge {
       position: absolute;
       top: 3px;
@@ -435,23 +330,6 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       inset-inline-end: 3px;
       inset-inline-start: initial;
     }
-    ha-tile-info {
-      position: relative;
-      min-width: 0;
-      transition: background-color 180ms ease-in-out;
-      box-sizing: border-box;
-    }
-    hui-card-features {
-      --feature-color: var(--tile-color);
-      padding: 0 12px 12px 12px;
-    }
-    .container.horizontal hui-card-features {
-      width: calc(50% - var(--column-gap, 0px) / 2 - 12px);
-      flex: none;
-      --feature-height: 36px;
-      padding: 0 12px;
-      padding-inline-start: 0;
-    }
 
     ha-tile-icon[data-domain="alarm_control_panel"][data-state="pending"],
     ha-tile-icon[data-domain="alarm_control_panel"][data-state="arming"],

src/panels/lovelace/common/handle-action.ts

@@ -53,7 +53,7 @@ export const handleAction = async (
         (e) => e.user === hass!.user?.id
       ))
   ) {
-    forwardHaptic(node, "warning");
+    forwardHaptic("warning");
 
     let serviceName;
     if (
@@ -107,7 +107,7 @@ export const handleAction = async (
             "ui.panel.lovelace.cards.actions.no_entity_more_info"
           ),
         });
-        forwardHaptic(node, "failure");
+        forwardHaptic("failure");
       }
       break;
     }
@@ -122,7 +122,7 @@ export const handleAction = async (
             "ui.panel.lovelace.cards.actions.no_navigation_path"
           ),
         });
-        forwardHaptic(node, "failure");
+        forwardHaptic("failure");
       }
       break;
     case "url": {
@@ -132,21 +132,21 @@ export const handleAction = async (
         showToast(node, {
           message: hass.localize("ui.panel.lovelace.cards.actions.no_url"),
         });
-        forwardHaptic(node, "failure");
+        forwardHaptic("failure");
       }
       break;
     }
     case "toggle": {
       if (config.entity) {
         toggleEntity(hass, config.entity!);
-        forwardHaptic(node, "light");
+        forwardHaptic("light");
       } else {
         showToast(node, {
           message: hass.localize(
             "ui.panel.lovelace.cards.actions.no_entity_toggle"
           ),
         });
-        forwardHaptic(node, "failure");
+        forwardHaptic("failure");
       }
       break;
     }
@@ -156,7 +156,7 @@ export const handleAction = async (
         showToast(node, {
           message: hass.localize("ui.panel.lovelace.cards.actions.no_action"),
         });
-        forwardHaptic(node, "failure");
+        forwardHaptic("failure");
         return;
       }
       const [domain, service] = (actionConfig.perform_action ||
@@ -167,7 +167,7 @@ export const handleAction = async (
         actionConfig.data ?? actionConfig.service_data,
         actionConfig.target
       );
-      forwardHaptic(node, "light");
+      forwardHaptic("light");
       break;
     }
     case "assist": {

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -58,7 +58,7 @@ class HuiEntitiesToggle extends LitElement {
   `;
 
   private _callService(ev: MouseEvent): void {
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const turnOn = (ev.target as HaSwitch).checked;
     turnOnOffEntities(this.hass!, this._toggleEntities!, turnOn!);
   }

src/panels/lovelace/components/hui-tile.ts

@@ -0,0 +1,181 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
+import "../../../components/ha-card";
+import "../../../components/ha-ripple";
+import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
+import { actionHandler } from "../common/directives/action-handler-directive";
+import { hasAction } from "../common/has-action";
+import type { LovelaceCardFeaturePosition } from "../card-features/types";
+
+@customElement("hui-tile")
+export class HuiTile extends LitElement {
+  @property({ type: Boolean }) public vertical = false;
+
+  @property() public color?: string;
+
+  @property({ attribute: false, type: Boolean }) public hasCardAction = false;
+
+  @property({ attribute: false, type: Boolean }) public hasIconAction = false;
+
+  @property({ attribute: false }) public onAction?: (
+    ev: ActionHandlerEvent
+  ) => void;
+
+  @property({ attribute: false }) public tapAction?: any;
+
+  @property({ attribute: false }) public holdAction?: any;
+
+  @property({ attribute: false }) public doubleTapAction?: any;
+
+  @property({ attribute: false })
+  public featurePosition?: LovelaceCardFeaturePosition;
+
+  private _handleAction(ev: ActionHandlerEvent) {
+    this.onAction?.(ev);
+  }
+
+  protected render() {
+    const contentClasses = { vertical: Boolean(this.vertical) };
+
+    const style = {
+      "--tile-color": this.color,
+    };
+
+    const containerOrientationClass =
+      this.featurePosition === "inline" ? "horizontal" : "";
+
+    return html`
+      <ha-card style=${styleMap(style)}>
+        <div
+          class="background"
+          @action=${this._handleAction}
+          .actionHandler=${actionHandler({
+            hasHold: hasAction(this.holdAction),
+            hasDoubleClick: hasAction(this.doubleTapAction),
+          })}
+          role=${ifDefined(this.hasCardAction ? "button" : undefined)}
+          tabindex=${ifDefined(this.hasCardAction ? "0" : undefined)}
+          aria-labelledby="info"
+        >
+          <ha-ripple .disabled=${!this.hasCardAction}></ha-ripple>
+        </div>
+        <div class="container ${containerOrientationClass}">
+          <div class="content ${classMap(contentClasses)}">
+            <slot name="icon"></slot>
+            <slot name="info"></slot>
+          </div>
+          <slot name="features"></slot>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      --tile-color: var(--state-inactive-color);
+      -webkit-tap-highlight-color: transparent;
+    }
+    ha-card:has(.background:focus-visible) {
+      --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+      --shadow-focus: 0 0 0 1px var(--tile-color);
+      border-color: var(--tile-color);
+      box-shadow: var(--shadow-default), var(--shadow-focus);
+    }
+    ha-card {
+      --ha-ripple-color: var(--tile-color);
+      --ha-ripple-hover-opacity: 0.04;
+      --ha-ripple-pressed-opacity: 0.12;
+      height: 100%;
+      transition:
+        box-shadow 180ms ease-in-out,
+        border-color 180ms ease-in-out;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    ha-card.active {
+      --tile-color: var(--state-icon-color);
+    }
+    [role="button"] {
+      cursor: pointer;
+      pointer-events: auto;
+    }
+    [role="button"]:focus {
+      outline: none;
+    }
+    .background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: var(--ha-card-border-radius, 12px);
+      margin: calc(-1 * var(--ha-card-border-width, 1px));
+      overflow: hidden;
+    }
+    .container {
+      margin: calc(-1 * var(--ha-card-border-width, 1px));
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+    .container.horizontal {
+      flex-direction: row;
+    }
+
+    .content {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px;
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+      gap: 10px;
+    }
+
+    .vertical {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+    }
+    .vertical ::slotted(ha-tile-info) {
+      width: 100%;
+      flex: none;
+    }
+    ::slotted(ha-tile-icon) {
+      --tile-icon-color: var(--tile-color);
+      position: relative;
+      padding: 6px;
+      margin: -6px;
+    }
+    ::slotted(ha-tile-info) {
+      position: relative;
+      min-width: 0;
+      transition: background-color 180ms ease-in-out;
+      box-sizing: border-box;
+    }
+    ::slotted(features) {
+      --feature-color: var(--tile-color);
+      padding: 0 12px 12px 12px;
+    }
+    .container.horizontal ::slotted(hui-card-features) {
+      width: calc(50% - var(--column-gap, 0px) / 2 - 12px);
+      flex: none;
+      --feature-height: 36px;
+      padding: 0 12px;
+      padding-inline-start: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-tile": HuiTile;
+  }
+}

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -103,7 +103,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
       return;
     }
 
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
 
     setInputSelectOption(this.hass!, stateObj.entity_id, option);
   }

src/panels/lovelace/entity-rows/hui-select-entity-row.ts

@@ -104,7 +104,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
       return;
     }
 
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
 
     setSelectOption(this.hass!, stateObj.entity_id, option);
   }

src/panels/lovelace/hui-root.ts

@@ -72,7 +72,7 @@ import {
 } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { haStyle, haStyleAnimations } from "../../resources/styles";
+import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -1205,7 +1205,6 @@ class HUIRoot extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      haStyleAnimations,
       css`
         :host {
           -ms-user-select: none;
@@ -1260,8 +1259,6 @@ class HUIRoot extends LitElement {
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
-          animation: fadeIn var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base);
         }
         .narrow .toolbar {
           padding: 0 4px;
@@ -1410,8 +1407,6 @@ class HUIRoot extends LitElement {
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base);
         }
         /**
          * In edit mode we have the tab bar on a new line *

src/panels/profile/ha-set-vibrate-row.ts

@@ -39,7 +39,7 @@ class HaSetVibrateRow extends LitElement {
     fireEvent(this, "hass-vibrate", {
       vibrate,
     });
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
   }
 }
 

src/resources/polyfills/intl-polyfill.ts

@@ -14,15 +14,7 @@ import {
   polyfillTimeZoneData,
 } from "./locale-data-polyfill";
 
-let polyfilled = false;
-
-const _polyfillTimeZoneData = polyfillTimeZoneData;
-
 const polyfillIntl = async () => {
-  if (polyfilled) {
-    return;
-  }
-  polyfilled = true;
   const locale = getLocalLanguage();
   const polyfills: Promise<unknown>[] = [];
   if (shouldPolyfillGetCanonicalLocales()) {
@@ -34,7 +26,7 @@ const polyfillIntl = async () => {
   if (shouldPolyfillDateTimeFormat(locale)) {
     polyfills.push(
       import("@formatjs/intl-datetimeformat/polyfill-force").then(() =>
-        _polyfillTimeZoneData()
+        polyfillTimeZoneData()
       )
     );
   }
@@ -66,7 +58,7 @@ const polyfillIntl = async () => {
   if (polyfills.length === 0) {
     return;
   }
-  await Promise.allSettled(polyfills).then(() =>
+  await Promise.all(polyfills).then(() =>
     // Load the default language
     polyfillLocaleData(locale)
   );

src/resources/styles.ts

@@ -195,36 +195,3 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
-
-export const haStyleAnimations = css`
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadeInSlideUp {
-    0% {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fadeInSlideDown {
-    0% {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-`;

src/resources/theme/color/color.globals.ts

@@ -184,21 +184,6 @@ export const colorStyles = css`
     --state-water_heater-heat_pump-color: var(--orange-color);
     --state-water_heater-high_demand-color: var(--deep-orange-color);
     --state-water_heater-performance-color: var(--deep-orange-color);
-    --state-weather-clear_night-color: var(--deep-purple-color);
-    --state-weather-cloudy-color: var(--light-grey-color);
-    --state-weather-exceptional-color: var(--red-color);
-    --state-weather-fog-color: var(--grey-color);
-    --state-weather-hail-color: var(--cyan-color);
-    --state-weather-lightning_rainy-color: var(--lime-color);
-    --state-weather-lightning-color: var(--yellow-color);
-    --state-weather-partlycloudy-color: var(--blue-grey-color);
-    --state-weather-pouring-color: var(--indigo-color);
-    --state-weather-rainy-color: var(--blue-color);
-    --state-weather-snowy_rainy-color: var(--light-blue-color);
-    --state-weather-snowy-color: #c0e0ff;
-    --state-weather-sunny-color: var(--amber-color);
-    --state-weather-windy_variant-color: var(--green-color);
-    --state-weather-windy-color: var(--green-color);
 
     /* history colors */
     --history-unknown-color: var(--dark-grey-color);

src/resources/theme/core.globals.ts

@@ -19,8 +19,8 @@ export const coreStyles = css`
     --ha-border-radius-pill: 9999px;
     --ha-border-radius-circle: 50%;
     --ha-border-radius-square: 0;
-
-    /* Spacing */
+      
+    # Spacing
     --ha-space-0: 0px;
     --ha-space-1: 4px;
     --ha-space-2: 8px;
@@ -34,7 +34,7 @@ export const coreStyles = css`
     --ha-space-10: 40px;
     --ha-space-11: 44px;
     --ha-space-12: 48px;
-    --ha-space-13: 52px;
+    --ha-space-13: 44px;
     --ha-space-14: 56px;
     --ha-space-15: 60px;
     --ha-space-16: 64px;
@@ -42,10 +42,6 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
-
-    /* Animation timing */
-    --ha-animation-duration: 400ms;
-    --ha-animation-delay-base: 50ms;
   }
 `;
 

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -40,7 +40,7 @@ export class HaStateControlCoverToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
 
     await this.hass.callService(
       "cover",

src/state-control/ha-state-control-toggle.ts

@@ -46,7 +46,7 @@ export class HaStateControlToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const stateDomain = computeDomain(this.stateObj.entity_id);
     let serviceDomain;
     let service;

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -68,7 +68,7 @@ export class HaStateControlLockToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     fireEvent(this, "lock-service-called");
     callProtectedLockService(
       this,

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -40,7 +40,7 @@ export class HaStateControlValveToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
 
     await this.hass.callService(
       "valve",

src/state/connection-mixin.ts

@@ -127,7 +127,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
               );
             }
             if (notifyOnError) {
-              forwardHaptic(this, "failure");
+              forwardHaptic("failure");
               const lokalize = await this.hass!.loadBackendTranslation(
                 "exceptions",
                 err.translation_domain

yarn.lock

@@ -1351,10 +1351,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:4.1.0":
-  version: 4.1.0
-  resolution: "@ctrl/tinycolor@npm:4.1.0"
-  checksum: 10/e64569399139ef0abd2eb0ec9fb7267dfd7820f7ad7d4567a63e5fc35e5cfdcb8ecdb3bad65cb9244b47ba6c77bc51085826c00e981acf263a3221dc89343adc
+"@ctrl/tinycolor@npm:^4.1.0":
+  version: 4.2.0
+  resolution: "@ctrl/tinycolor@npm:4.2.0"
+  checksum: 10/1be14de7d7e8184c0bc5c8d7e3486cc8186e6702e8ca899c7239f328bb1df9a15d1575e2af7b4c6ba020727fa78f5a9f887555971f30a2890cece9e4253a9d3a
   languageName: node
   linkType: hard
 
@@ -1940,11 +1940,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.0":
-  version: 3.0.0-beta.6.ha.0
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.0"
+"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3":
+  version: 3.0.0-beta.4.ha.3
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3"
   dependencies:
-    "@ctrl/tinycolor": "npm:4.1.0"
+    "@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"
@@ -1953,7 +1953,8 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/ec9d74585b544e5755f7b2644a0d7f9318b5776bedf51430c8f8729918fddb6e54cce46acace674960383385362846cc4c0f2da5245fa622bce8c54733a31865
+    style-observer: "npm:^0.0.7"
+  checksum: 10/b9241821ed471ccbad86b0ea4697a2d41395f05fdc26f46e5edbc7f6b5eeab5d248251ef702326312ded00d5bf850ce0dcdcf7cd5e2e542b9d9cb9a84f3726da
   languageName: node
   linkType: hard
 
@@ -3898,82 +3899,81 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rsdoctor/client@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/client@npm:1.3.1"
-  checksum: 10/6885dd7e16f2172ddf5d4c901275af77640402f1b5cfd41b0eab6e695cad423bda2909a5b13dc68e864e9d9df4440587b8a3403138437c20b6e3bb15d0c83b04
+"@rsdoctor/client@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/client@npm:1.3.0"
+  checksum: 10/dca67aa80613ddd36b7bc43456e15633b632df91c7aca6ab05653b3fbb1d57887ffe9fa3a792a3812efc2e0d2c6f50cec9b5567ed182fd125c675cc9a4fa8ceb
   languageName: node
   linkType: hard
 
-"@rsdoctor/core@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/core@npm:1.3.1"
+"@rsdoctor/core@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/core@npm:1.3.0"
   dependencies:
-    "@rsdoctor/graph": "npm:1.3.1"
-    "@rsdoctor/sdk": "npm:1.3.1"
-    "@rsdoctor/types": "npm:1.3.1"
-    "@rsdoctor/utils": "npm:1.3.1"
+    "@rsdoctor/graph": "npm:1.3.0"
+    "@rsdoctor/sdk": "npm:1.3.0"
+    "@rsdoctor/types": "npm:1.3.0"
+    "@rsdoctor/utils": "npm:1.3.0"
     browserslist-load-config: "npm:^1.0.1"
-    enhanced-resolve: "npm:5.12.0"
     filesize: "npm:^10.1.6"
     fs-extra: "npm:^11.1.1"
     lodash-es: "npm:^4.17.21"
     semver: "npm:^7.7.2"
     source-map: "npm:^0.7.6"
-  checksum: 10/40f4de3680202487ff094cd97664035c19c8bd802ff9adbd4c3947c53b08e738eac65e22b45514ca1cd2640305451c53d1efd23a0097674d4af0391698eff9a7
+  checksum: 10/e990358b82a260242a27af9d93fa6f673c68fb0896b74888aa121b4060069e8b47079f929403a237a532da65f4566d6bfb1d824dae2266735e44294d2521b1e6
   languageName: node
   linkType: hard
 
-"@rsdoctor/graph@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/graph@npm:1.3.1"
+"@rsdoctor/graph@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/graph@npm:1.3.0"
   dependencies:
-    "@rsdoctor/types": "npm:1.3.1"
-    "@rsdoctor/utils": "npm:1.3.1"
+    "@rsdoctor/types": "npm:1.3.0"
+    "@rsdoctor/utils": "npm:1.3.0"
     lodash.unionby: "npm:^4.8.0"
     path-browserify: "npm:1.0.1"
     source-map: "npm:^0.7.6"
-  checksum: 10/7ae4abd2bd630e2589975df3e34d029921c2ff34c9f62961aff73c384dbb7e94d24faf2bf3f5118860f56b9bab2a5cd4b5185c178ce91f8a0852a258a854602c
+  checksum: 10/64dd610819fd38beb0bb96cf7f2b85c47d2b40134150a8f07e71bc94ae1ad38b7be23a453b42d3692303f1c7b07c3f7ec78bca6b7e8b7f41c961e8b7dc479495
   languageName: node
   linkType: hard
 
-"@rsdoctor/rspack-plugin@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/rspack-plugin@npm:1.3.1"
+"@rsdoctor/rspack-plugin@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/rspack-plugin@npm:1.3.0"
   dependencies:
-    "@rsdoctor/core": "npm:1.3.1"
-    "@rsdoctor/graph": "npm:1.3.1"
-    "@rsdoctor/sdk": "npm:1.3.1"
-    "@rsdoctor/types": "npm:1.3.1"
-    "@rsdoctor/utils": "npm:1.3.1"
+    "@rsdoctor/core": "npm:1.3.0"
+    "@rsdoctor/graph": "npm:1.3.0"
+    "@rsdoctor/sdk": "npm:1.3.0"
+    "@rsdoctor/types": "npm:1.3.0"
+    "@rsdoctor/utils": "npm:1.3.0"
     lodash-es: "npm:^4.17.21"
   peerDependencies:
     "@rspack/core": "*"
   peerDependenciesMeta:
     "@rspack/core":
       optional: true
-  checksum: 10/94759bf214102e8acffeaaeb89d8274301f0b420274bf6f26afa736ac915f029e02e33cbc4f9f977d208e20a5e38bf3d812a1147be830dcd25a49755ff111d6d
+  checksum: 10/8f9126f6ed8c0bc350e899da5a9104cbf74808ac51a98a0f6a95fddf6dfdcbfb9b338c696095c9b7960bbc378947e90895bdf531da959426f47f3d00e5402409
   languageName: node
   linkType: hard
 
-"@rsdoctor/sdk@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/sdk@npm:1.3.1"
+"@rsdoctor/sdk@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/sdk@npm:1.3.0"
   dependencies:
-    "@rsdoctor/client": "npm:1.3.1"
-    "@rsdoctor/graph": "npm:1.3.1"
-    "@rsdoctor/types": "npm:1.3.1"
-    "@rsdoctor/utils": "npm:1.3.1"
+    "@rsdoctor/client": "npm:1.3.0"
+    "@rsdoctor/graph": "npm:1.3.0"
+    "@rsdoctor/types": "npm:1.3.0"
+    "@rsdoctor/utils": "npm:1.3.0"
     safer-buffer: "npm:2.1.2"
     socket.io: "npm:4.8.1"
     tapable: "npm:2.2.3"
-  checksum: 10/194efba86d15e86d81de3b1a747c3e82874f69c4e3f1f96e9f36f8a83cabbcc6371729498e2ab82724550f376dd2630849c435841031a0c139406aeb4b472d06
+  checksum: 10/c6183047ce5e7db1240b89c3d3890def9fc7ae2c1dcab8621ee3c0652b174e3facae6358cbd706317ae103af748d41e9c3187a519b082e1d249dcc18a9938a58
   languageName: node
   linkType: hard
 
-"@rsdoctor/types@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/types@npm:1.3.1"
+"@rsdoctor/types@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/types@npm:1.3.0"
   dependencies:
     "@types/connect": "npm:3.4.38"
     "@types/estree": "npm:1.0.5"
@@ -3987,16 +3987,16 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/e058017b77b4b58c22c39a0f1177e6cabdedbdebc355f936bbc6be3ace51279d0cd078e2cab19543a5fe2d4cff3e9980f076c4d18bd70ab3d393d5ce0dd1eb89
+  checksum: 10/bc077915aa616844ee1d58b17ac34250f2174a0f5d2b8c83e2983a4c435855c85ec8317e7d2800ce62dcba225c2b493bca95c6cfa51c4f232a019e3390dd0ca4
   languageName: node
   linkType: hard
 
-"@rsdoctor/utils@npm:1.3.1":
-  version: 1.3.1
-  resolution: "@rsdoctor/utils@npm:1.3.1"
+"@rsdoctor/utils@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@rsdoctor/utils@npm:1.3.0"
   dependencies:
     "@babel/code-frame": "npm:7.26.2"
-    "@rsdoctor/types": "npm:1.3.1"
+    "@rsdoctor/types": "npm:1.3.0"
     "@types/estree": "npm:1.0.5"
     acorn: "npm:^8.10.0"
     acorn-import-attributes: "npm:^1.9.5"
@@ -4010,7 +4010,7 @@ __metadata:
     picocolors: "npm:^1.1.1"
     rslog: "npm:^1.2.11"
     strip-ansi: "npm:^6.0.1"
-  checksum: 10/ebe1a7233179bf9be0272959c16fc2fc89c37c2cc2553973002889ab8432697f2bee6308dc1c82208ddb1d13d875be6341b9a985d9fe18536af381989200dc48
+  checksum: 10/d11ab54328d719542965af87fb843627850e26a48e49378ab4b0b02553cbf37b2ec185caa622f745bc27735738112f29b1d1f00656e8d0a8b4bd23103a320a9a
   languageName: node
   linkType: hard
 
@@ -7528,16 +7528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:5.12.0":
-  version: 5.12.0
-  resolution: "enhanced-resolve@npm:5.12.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.4"
-    tapable: "npm:^2.2.0"
-  checksum: 10/ea5b49a0641827c6a083eaa3a625f953f4bd4e8f015bf70b9fb8cf60a35aaeb44e567df2da91ed28efaea3882845016e1d22a3152c2fdf773ea14f39cbe3d8a9
-  languageName: node
-  linkType: hard
-
 "enhanced-resolve@npm:^0.9.1":
   version: 0.9.1
   resolution: "enhanced-resolve@npm:0.9.1"
@@ -8979,7 +8969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.10, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.8":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.10, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.8":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
@@ -9205,7 +9195,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.6.ha.0"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.3"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -9242,7 +9232,7 @@ __metadata:
     "@octokit/plugin-retry": "npm:8.0.1"
     "@octokit/rest": "npm:22.0.0"
     "@replit/codemirror-indentation-markers": "npm:6.5.3"
-    "@rsdoctor/rspack-plugin": "npm:1.3.1"
+    "@rsdoctor/rspack-plugin": "npm:1.3.0"
     "@rspack/core": "npm:1.5.7"
     "@rspack/dev-server": "npm:1.1.4"
     "@swc/helpers": "npm:0.5.17"
@@ -13735,6 +13725,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-observer@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "style-observer@npm:0.0.7"
+  checksum: 10/bb57f98bae4463c1e1b57234f8ffe72ec0de27fb08b032c1919910129c210aacd1ddd615432b9453d491e10d3b719cf6c2a68a97165ca55d6fc9b86c0fca37fb
+  languageName: node
+  linkType: hard
+
 "style-observer@npm:^0.0.8":
   version: 0.0.8
   resolution: "style-observer@npm:0.0.8"