This directive encapsulates the event listeners necessary to drive the ripple component inside of an ElementPart directive, instead of relying on ActionController and ActionElement.
The ripple directive can take a Promise from `queryAsync`, or a function that returns a Ripple or a Promise that resolves to a ripple
Before:
```ts
// event listeners inherited from ActionElement
html`
<md-button
@pointerdown=${this.handlePointerDown}
@pointerleave=${this.handlePointerLeave}
@focus=${this.handleFocus}
...
>`
```
After:
```ts
html`
<md-button ${ripple(this.rippleElementPromise)}>
`
```
or
```
<md-button ${ripple(() => this.rippleElement)
```
or
```
<md-button ${ripple(() => {this.renderRipple = true; return this.rippleElementPromise})
```
PiperOrigin-RevId: 492300868
In particular, this allows external build tools like Rollup and @web/dev-server to understand imports of Lit, which is configured to require the ".js" extension via its export conditions (so that Lit import maps can remain minimal).
PiperOrigin-RevId: 469772992
