[Toggle]: Add focus shadow (#805)

brave · Aug 29, 2024 · 14d248e · 14d248e
1 parent 9cc3a19
commit 14d248e
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/toggle/toggle.svelte b/src/components/toggle/toggle.svelte
@@ -159,7 +159,7 @@
     height: calc(var(--height) - 2 * var(--padding));
     border-radius: var(--leo-radius-full);
     padding: var(--padding);
-    transition: background-color var(--duration) ease-in-out;
+    transition: background-color var(--duration) ease-in-out, box-shadow var(--duration) ease-in-out;
     flex-shrink: 0;
 
     &:disabled {
@@ -170,6 +170,10 @@
       }
     }
 
+    &:focus-visible {
+      box-shadow: var(--leo-effect-focus-state-offset);
+    }
+
     &:hover:not(:disabled) {
       --hover-bg: var(--unchecked-color);