stateSet polyfill

src/components/ha-button.ts

@@ -2,6 +2,8 @@ import Button from "@awesome.me/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";
 
 /**
@@ -36,6 +38,14 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
 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;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       Button.styles,

src/resources/polyfills/stateset.ts

@@ -0,0 +1,57 @@
+// 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);
+  },
+});