Update ha-spinner component to webawesome (#26507)

Author: timmo001

src/components/ha-spinner.ts

@@ -1,9 +1,10 @@
-import Spinner from "@shoelace-style/shoelace/dist/components/spinner/spinner.component";
-import spinnerStyles from "@shoelace-style/shoelace/dist/components/spinner/spinner.styles";
-import type { PropertyValues } from "lit";
+import Spinner from "@awesome.me/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";
@@ -32,21 +33,31 @@ export class HaSpinner extends Spinner {
     }
   }
 
-  static override styles = [
-    spinnerStyles,
-    css`
-      :host {
-        --indicator-color: var(
-          --ha-spinner-indicator-color,
-          var(--primary-color)
-        );
-        --track-color: var(--ha-spinner-divider-color, var(--divider-color));
-        --track-width: 4px;
-        --speed: 3.5s;
-        font-size: var(--ha-spinner-size, 48px);
-      }
-    `,
-  ];
+  attachInternals() {
+    const internals = super.attachInternals();
+    Object.defineProperty(internals, "states", {
+      value: new StateSet(this, internals.states),
+    });
+    return internals;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      Spinner.styles,
+      css`
+        :host {
+          --indicator-color: var(
+            --ha-spinner-indicator-color,
+            var(--primary-color)
+          );
+          --track-color: var(--ha-spinner-divider-color, var(--divider-color));
+          --track-width: 4px;
+          --speed: 3.5s;
+          font-size: var(--ha-spinner-size, 48px);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {