Use Material 3 ripple (#20751)

* Use material web ripple component

* Improve button style

* Use css animation instead of ripple for action

* Use ha ripple in all components

* Remove unused label

src/components/ha-control-button.ts

@@ -1,14 +1,7 @@
-import { Ripple } from "@material/mwc-ripple";
-import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  queryAsync,
-  state,
-} from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import "./ha-ripple";
 
 @customElement("ha-control-button")
 export class HaControlButton extends LitElement {
@@ -16,10 +9,6 @@ export class HaControlButton extends LitElement {
 
   @property() public label?: string;
 
-  @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
-
-  @state() private _shouldRenderRipple = false;
-
   protected render(): TemplateResult {
     return html`
       <button
@@ -28,54 +17,13 @@ export class HaControlButton extends LitElement {
         aria-label=${ifDefined(this.label)}
         title=${ifDefined(this.label)}
         .disabled=${Boolean(this.disabled)}
-        @focus=${this.handleRippleFocus}
-        @blur=${this.handleRippleBlur}
-        @mousedown=${this.handleRippleActivate}
-        @mouseup=${this.handleRippleDeactivate}
-        @mouseenter=${this.handleRippleMouseEnter}
-        @mouseleave=${this.handleRippleMouseLeave}
-        @touchstart=${this.handleRippleActivate}
-        @touchend=${this.handleRippleDeactivate}
-        @touchcancel=${this.handleRippleDeactivate}
       >
         <slot></slot>
-        ${this._shouldRenderRipple && !this.disabled
-          ? html`<mwc-ripple></mwc-ripple>`
-          : ""}
+        <ha-ripple .disabled=${this.disabled}></ha-ripple>
       </button>
     `;
   }
 
-  private _rippleHandlers: RippleHandlers = new RippleHandlers(() => {
-    this._shouldRenderRipple = true;
-    return this._ripple;
-  });
-
-  @eventOptions({ passive: true })
-  private handleRippleActivate(evt?: Event) {
-    this._rippleHandlers.startPress(evt);
-  }
-
-  private handleRippleDeactivate() {
-    this._rippleHandlers.endPress();
-  }
-
-  private handleRippleMouseEnter() {
-    this._rippleHandlers.startHover();
-  }
-
-  private handleRippleMouseLeave() {
-    this._rippleHandlers.endHover();
-  }
-
-  private handleRippleFocus() {
-    this._rippleHandlers.startFocus();
-  }
-
-  private handleRippleBlur() {
-    this._rippleHandlers.endFocus();
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -86,6 +34,7 @@ export class HaControlButton extends LitElement {
         --control-button-border-radius: 10px;
         --control-button-padding: 8px;
         --mdc-icon-size: 20px;
+        --ha-ripple-color: var(--secondary-text-color);
         color: var(--primary-text-color);
         width: 40px;
         height: 40px;
@@ -113,12 +62,14 @@ export class HaControlButton extends LitElement {
         outline: none;
         overflow: hidden;
         background: none;
-        --mdc-ripple-color: var(--control-button-background-color);
         /* For safari border-radius overflow */
         z-index: 0;
         font-size: inherit;
         color: inherit;
       }
+      .button:focus-visible {
+        --control-button-background-opacity: 0.4;
+      }
       .button::before {
         content: "";
         position: absolute;