diff --git a/src/components/ha-progress-ring.ts b/src/components/ha-progress-ring.ts index b336bb7d8b..eb9078aa83 100644 --- a/src/components/ha-progress-ring.ts +++ b/src/components/ha-progress-ring.ts @@ -1,12 +1,21 @@ -import ProgressRing from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component"; -import progressRingStyles from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.styles"; +import ProgressRing from "@awesome.me/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); @@ -31,24 +40,26 @@ export class HaProgressRing extends ProgressRing { } } - static override styles = [ - progressRingStyles, - css` - :host { - --indicator-color: var( - --ha-progress-ring-indicator-color, - var(--primary-color) - ); - --track-color: var( - --ha-progress-ring-divider-color, - var(--divider-color) - ); - --track-width: 4px; - --speed: 3.5s; - --size: var(--ha-progress-ring-size, 48px); - } - `, - ]; + static get styles(): CSSResultGroup { + return [ + ProgressRing.styles, + css` + :host { + --indicator-color: var( + --ha-progress-ring-indicator-color, + var(--primary-color) + ); + --track-color: var( + --ha-progress-ring-divider-color, + var(--divider-color) + ); + --track-width: 4px; + --speed: 3.5s; + --size: var(--ha-progress-ring-size, 48px); + } + `, + ]; + } } declare global {