Use @home-assistant/webawesome (#26942)

package.json

@@ -26,7 +26,6 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@awesome.me/webawesome": "3.0.0-beta.4",
     "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.7",
@@ -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",

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,

src/components/ha-fade-in.ts

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

src/components/ha-progress-ring.ts

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

src/components/ha-spinner.ts

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

src/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/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);
-  },
-});

yarn.lock

@@ -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"
@@ -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"
@@ -9294,7 +9294,6 @@ __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/helper-define-polyfill-provider": "npm:0.6.5"
     "@babel/plugin-transform-runtime": "npm:7.28.3"
@@ -9325,6 +9324,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"