From 8a35672c4a10a99a8b7e5bfcc9ea6e6a1a1e48cb Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Tue, 20 Dec 2022 14:07:00 -0800
Subject: [PATCH] fix(ripple): Improves fix for Safari ripple overflow due to
 https://bugs.webkit.org/show_bug.cgi?id=247546 to handle hover and pressed
 states.

PiperOrigin-RevId: 496747335
---
 ripple/lib/_ripple.scss | 25 +++++++++++++++++++++----
 ripple/lib/ripple.ts    |  5 ++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/ripple/lib/_ripple.scss b/ripple/lib/_ripple.scss
index 3a2e903120..c7a91eac04 100644
--- a/ripple/lib/_ripple.scss
+++ b/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 {
diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts
index a959a99ca7..c5496bbe95 100644
--- a/ripple/lib/ripple.ts
+++ b/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;