From b45ca1a6d3dc3d3fd561290644e7adf58a5d3900 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 20 Jul 2020 16:56:35 -0400
Subject: [PATCH] Expose --focus-ring prop on tab

---
 src/components/tab-group/tab-group.scss | 2 +-
 src/components/tab/tab.scss             | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/tab-group/tab-group.scss b/src/components/tab-group/tab-group.scss
index 300e72b2..ddbb62b1 100644
--- a/src/components/tab-group/tab-group.scss
+++ b/src/components/tab-group/tab-group.scss
@@ -22,7 +22,7 @@
 
   // Remove the focus ring when the user isn't interacting with a keyboard
   &:not(.focus-visible) ::slotted(sl-tab) {
-    --focus-ring-box-shadow: none;
+    --focus-ring: none;
   }
 }
 
diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
index f0cdf41d..65560bab 100644
--- a/src/components/tab/tab.scss
+++ b/src/components/tab/tab.scss
@@ -1,7 +1,10 @@
 @import 'component';
 
+/**
+ * @prop --focus-ring: The focus ring's box shadow.
+ */
 :host {
-  --focus-ring-box-shadow: var(--sl-focus-ring-box-shadow-inset);
+  --focus-ring: var(--sl-focus-ring-box-shadow-inset);
 
   display: inline-block;
 }
@@ -28,7 +31,7 @@
 
   &:focus:not(.tab--disabled) {
     color: var(--sl-color-primary-50);
-    box-shadow: var(--focus-ring-box-shadow);
+    box-shadow: var(--focus-ring);
   }
 
   &.tab--active:not(.tab--disabled) {