fix(ripple): Improves fix for Safari ripple overflow due to https://b…

…ugs.webkit.org/show_bug.cgi?id=247546 to handle hover and pressed states.

PiperOrigin-RevId: 496747335

ripple/lib/_ripple.scss

@@ -42,9 +42,6 @@
     inset: 0;
     pointer-events: none;
     overflow: hidden;
-    // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
-    // Remove Safari workaround for incorrect ripple overflow when addressed.
-    transform: scale(1);
   }
 
   .md3-ripple-surface {
@@ -95,7 +92,13 @@
     transition-duration: 105ms;
   }
 
-  .md3-ripple--unbounded {
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow:
+  // setting shape token to `:host([unbounded])` so border-radius can be set
+  // only in this state.
+  // This addresses `hover` and `pressed` state oveflow.
+  .md3-ripple--unbounded,
+  :host([unbounded]) {
     $unbounded: (
       state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
     );
@@ -104,6 +107,20 @@
     --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
   }
 
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow when addressed.
+  // This addresses `hover` and `pressed` state oveflow.
+  :host([unbounded]) {
+    border-radius: var(--_state-layer-shape);
+  }
+
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow when addressed.
+  // This addresses `during animation` state oveflow.
+  .md3-ripple--unbounded {
+    transform: scale(1);
+  }
+
   // TODO(b/230630968): create a forced-colors-mode mixin
   @media screen and (forced-colors: active) {
     :host {

ripple/lib/ripple.ts

@@ -23,7 +23,10 @@ const ANIMATION_FILL = 'forwards';
 export class Ripple extends LitElement {
   @query('.md3-ripple-surface') mdRoot!: HTMLElement;
 
-  @property({type: Boolean}) unbounded = false;
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround that requires reflecting `unbounded` so
+  // it can be styled against.
+  @property({type: Boolean, reflect: true}) unbounded = false;
   @property({type: Boolean, reflect: true}) disabled = false;
 
   @state() protected hovered = false;