fix(all): overlay components no longer display outline when focused (#21226)

core/src/components/action-sheet/action-sheet.scss

@@ -52,6 +52,8 @@
   display: block;
   position: fixed;
 
+  outline: none;
+
   font-family: $font-family-base;
 
   touch-action: none;
@@ -210,4 +212,4 @@
       opacity: var(--button-background-hover-opacity);
     }
   }
-}
+}

core/src/components/alert/alert.scss

@@ -32,6 +32,8 @@
   align-items: center;
   justify-content: center;
 
+  outline: none;
+
   font-family: $font-family-base;
 
   contain: strict;

core/src/components/loading/loading.scss

@@ -33,6 +33,8 @@
   align-items: center;
   justify-content: center;
 
+  outline: none;
+
   font-family: $font-family-base;
 
   contain: strict;
@@ -72,4 +74,4 @@
 .spinner-crescent,
 .spinner-dots {
   color: var(--spinner-color);
-}
+}

core/src/components/modal/modal.scss

@@ -45,6 +45,8 @@
   align-items: center;
   justify-content: center;
 
+  outline: none;
+
   contain: strict;
 }
 
@@ -77,7 +79,7 @@
 
 .modal-shadow {
   position: absolute;
-  
+
   background: transparent;
 }
 

core/src/components/picker/picker.scss

@@ -40,6 +40,8 @@
   width: 100%;
   height: 100%;
 
+  outline: none;
+
   font-family: $font-family-base;
 
   contain: strict;

core/src/components/popover/popover.scss

@@ -32,6 +32,8 @@
   align-items: center;
   justify-content: center;
 
+  outline: none;
+
   color: $popover-text-color;
 
   z-index: $z-index-overlay;

core/src/components/toast/toast.scss

@@ -49,6 +49,8 @@
   width: 100%;
   height: 100%;
 
+  outline: none;
+
   color: var(--color);
 
   font-family: $font-family-base;