refactor(button): update focus ring to avoid additional API (#29223)

core/api.txt

@@ -265,7 +265,6 @@ ion-button,css-prop,--padding-start
 ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
-ion-button,part,focus-ring
 ion-button,part,native
 
 ion-buttons,scoped

core/src/components/button/button.ionic.scss

@@ -156,26 +156,9 @@
 // -------------------------------------------------------------------------------
 
 // Only show the focus ring when the button is focused
-:host(.ion-focused) {
+:host(.ion-focused) .button-native {
-  --overflow: visible;
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-
+  outline-offset: 2px;
-  .button-native::after {
-    @include border-radius(inherit);
-  }
-}
-
-.button-focus-ring {
-  @include position(-4px, -4px, -4px, -4px);
-  @include border-radius(inherit);
-
-  position: absolute;
-
-  transition: border-color 0.3s;
-
-  border: var(--focus-ring-width) solid var(--focus-ring-color);
-
-  content: "";
-  box-sizing: border-box;
 }
 
 // Fill Solid Button

core/src/components/button/button.tsx

@@ -20,7 +20,6 @@ import type { RouterDirection } from '../router/utils/interface';
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
- * @part focus-ring - The visual indicator that appears as an outline around the button when focused. Only available for the Ionic theme.
  */
 @Component({
   tag: 'ion-button',
@@ -418,7 +417,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             <slot name="end"></slot>
           </span>
           {theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
-          {theme === 'ionic' && <div part="focus-ring" class="button-focus-ring"></div>}
         </TagType>
       </Host>
     );