From 272c334cd2777d1a8e19a88f6e2e566db082e0b2 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Sun, 9 Jul 2023 14:18:36 +0200
Subject: [PATCH 1/2] fix(radio): ensure unique maskId for radio SVG mask. Fix
 #4531

Fix a Safari-related bug, causing radio button to fail to
render properly.
---
 radio/lib/radio.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
index a7bafa3079..a02ede8042 100644
--- a/radio/lib/radio.ts
+++ b/radio/lib/radio.ts
@@ -18,6 +18,7 @@ import {dispatchActivationClick, isActivationClick, redispatchEvent} from '../..
 import {SingleSelectionController} from './single-selection-controller.js';
 
 const CHECKED = Symbol('checked');
+let maskId = 0;
 
 /**
  * A radio component.
@@ -34,6 +35,8 @@ export class Radio extends LitElement {
   /** @nocollapse */
   static formAssociated = true;
 
+  private maskId = `cutout${++maskId}`;
+
   /**
    * Whether or not the radio is selected.
    */
@@ -122,11 +125,11 @@ export class Radio extends LitElement {
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
         <md-focus-ring for="input"></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
-          <mask id="cutout">
+          <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
             <circle cx="10" cy="10" r="8" fill="black" />
           </mask>
-          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#${this.maskId})" />
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
         <input

From 6b7d1e89140c7f3437dfbe72a331d2cbe4d19af6 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Mon, 10 Jul 2023 22:09:24 +0200
Subject: [PATCH 2/2] chore(radio): make maskId readonly; add comment
 explaining reason for maskId to exist

---
 radio/lib/radio.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
index a02ede8042..3c0d893e8b 100644
--- a/radio/lib/radio.ts
+++ b/radio/lib/radio.ts
@@ -35,7 +35,9 @@ export class Radio extends LitElement {
   /** @nocollapse */
   static formAssociated = true;
 
-  private maskId = `cutout${++maskId}`;
+  // Unique maskId is required because of a Safari bug that fail to persist 
+  // reference to the mask. This should be removed once the bug is fixed.
+  private readonly maskId = `cutout${++maskId}`;
 
   /**
    * Whether or not the radio is selected.