From b4e5544ff88f98f0b74fc8179ae787bacf692a37 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 31 May 2022 08:41:06 -0400
Subject: [PATCH] fixes #767

---
 docs/resources/changelog.md                | 1 +
 src/components/input/input.styles.ts       | 3 +--
 src/components/select/select.styles.ts     | 4 ++--
 src/components/textarea/textarea.styles.ts | 3 +--
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index afaff4215..9a70d74e8 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Fix focus rings for `<sl-input>`, `<sl-select>`, and `<sl-textarea>` in Safari since they don't use `:focus-visible` [#767](https://github.com/shoelace-style/shoelace/issues/767)
 - Revert menu item caching due to regression [#766](https://github.com/shoelace-style/shoelace/issues/766)
 
 ## 2.0.0-beta.74
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index a101e06f3..628fd275b 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -41,8 +41,7 @@ export default css`
   .input--standard.input--focused:not(.input--disabled) {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
-    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
-    outline-offset: var(--sl-input-focus-ring-offset);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index c69fe4a21..ca9e72e12 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -50,9 +50,9 @@ export default css`
   .select--standard.select--focused:not(.select--disabled) .select__control {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
-    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
-    outline-offset: var(--sl-input-focus-ring-offset);
     color: var(--sl-input-color-focus);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    outline: none;
   }
 
   .select--standard.select--disabled .select__control {
diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
index d4ed14b58..1843054e0 100644
--- a/src/components/textarea/textarea.styles.ts
+++ b/src/components/textarea/textarea.styles.ts
@@ -43,8 +43,7 @@ export default css`
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
     color: var(--sl-input-color-focus);
-    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
-    outline-offset: var(--sl-input-focus-ring-offset);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {