diff --git a/packages/components/src/styles/components/accordion.scss b/packages/components/src/styles/components/accordion.scss
index 90def810923..0539df97fef 100644
--- a/packages/components/src/styles/components/accordion.scss
+++ b/packages/components/src/styles/components/accordion.scss
@@ -159,10 +159,11 @@
 .hds-accordion-item__button--parent-contains-interactive {
   @include hds-button();
 
-  &:focus,
-  &.mock-focus {
-    @include hds-button-state-focus();
-  }
+  // TODO: not needed if outline is used for the focus ring
+  // &:focus,
+  // &.mock-focus {
+  //   @include hds-button-state-focus();
+  // }
 
   // `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
   @include hds-button-color-secondary();
diff --git a/packages/components/src/styles/components/advanced-table.scss b/packages/components/src/styles/components/advanced-table.scss
index 75936fadddd..e1a82593838 100644
--- a/packages/components/src/styles/components/advanced-table.scss
+++ b/packages/components/src/styles/components/advanced-table.scss
@@ -433,9 +433,15 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
     box-shadow: var(--token-elevation-low-box-shadow);
   }
 
+  // Use pseudo element for focus ring to allow offset position to be partially inside the button
+  @include hds-focus-ring-with-pseudo-element($radius: inherit);
+
   &:focus,
   &.mock-focus,
   .hds-dropdown-toggle-icon--is-open {
+    // Override outline used on regular hds-dropdown-toggle-icon
+    outline: none;
+
     &::before {
       top: 0;
       right: 0;
diff --git a/packages/components/src/styles/components/button.scss b/packages/components/src/styles/components/button.scss
index 4c61b0b51fd..0b655f9f4b0 100644
--- a/packages/components/src/styles/components/button.scss
+++ b/packages/components/src/styles/components/button.scss
@@ -61,10 +61,11 @@
     }
   }
 
-  &:focus,
-  &.mock-focus {
-    @include hds-button-state-focus();
-  }
+  // TODO: not needed if outline is used for the focus ring
+  // &:focus,
+  // &.mock-focus {
+  //   @include hds-button-state-focus();
+  // }
 }
 
 .hds-button__icon {
diff --git a/packages/components/src/styles/components/dropdown.scss b/packages/components/src/styles/components/dropdown.scss
index fd32bf58c57..b8248ff48a5 100644
--- a/packages/components/src/styles/components/dropdown.scss
+++ b/packages/components/src/styles/components/dropdown.scss
@@ -50,12 +50,14 @@
 
   &:focus,
   &.mock-focus {
-    @include hds-button-state-focus();
+    // @include hds-button-state-focus();
+
     border-color: var(--token-color-focus-action-internal);
+    outline: 3px solid var(--token-color-focus-action-external);
 
-    &::before {
-      border-color: var(--token-color-focus-action-external);
-    }
+    // &::before {
+    //   border-color: var(--token-color-focus-action-external);
+    // }
   }
 
   &:active,
@@ -119,10 +121,11 @@
 .hds-dropdown-toggle-button {
   @include hds-button();
 
-  &:focus,
-  &.mock-focus {
-    @include hds-button-state-focus();
-  }
+  // TODO: not needed if outline is used for the focus ring
+  // &:focus,
+  // &.mock-focus {
+  //   @include hds-button-state-focus();
+  // }
 
   &:disabled,
   &.mock-disabled,
diff --git a/packages/components/src/styles/mixins/_button.scss b/packages/components/src/styles/mixins/_button.scss
index 981410b0b7e..f3df57b71d5 100644
--- a/packages/components/src/styles/mixins/_button.scss
+++ b/packages/components/src/styles/mixins/_button.scss
@@ -37,25 +37,10 @@ $hds-button-sizes: ("small", "medium", "large");
   cursor: not-allowed;
 }
 
-@mixin hds-button-state-focus() {
-  box-shadow: none;
-
-  &::before {
-    // the position absolute of an element is computed from the inside of the border of the container
-    // so we have to take in account the border width of the pseudo-element container itself
-    $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-    $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-    position: absolute;
-    top: $shift;
-    right: $shift;
-    bottom: $shift;
-    left: $shift;
-    z-index: -1;
-    border: var(--token-button-focus-border-width) solid transparent;
-    border-radius: $radius;
-    content: "";
-  }
-}
+// TODO: not needed if outline is used for the focus ring
+// @mixin hds-button-state-focus() {
+//   box-shadow: none;
+// }
 
 @mixin hds-button-color-primary() {
   color: var(--token-button-foreground-color-primary-default);
@@ -76,20 +61,16 @@ $hds-button-sizes: ("small", "medium", "large");
     color: var(--token-button-foreground-color-primary-focus);
     background-color: var(--token-button-surface-color-primary-focus);
     border-color: var(--token-button-border-color-primary-focus-internal);
-
-    &::before {
-      // the position absolute of an element is computed from the inside of the border of the container
-      // so we have to take in account the border width of the pseudo-element container itself
-      // plus for the primary button we want to have a 2px gap between the button and the focus
-      $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-      $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
-      top: $shift;
-      right: $shift;
-      bottom: $shift;
-      left: $shift;
-      border-color: var(--token-button-border-color-primary-focus-external);
-      border-radius: $radius;
-    }
+    // border-color: #fff; // TEST: add greater contrast & standardize with other variants (remove outline-offset)
+
+    // TEST: Replacement of pseudo-element-based focus ring
+    // Test: outline instead of box-shadow
+    outline: 3px solid var(--token-color-focus-action-external);
+    outline-offset: 2px; // non-standard (other Button variants don't use)
+    // box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants
+    // box-shadow:
+    //   0 0 0 2px #fff,
+    //   0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element
   }
 
   &:active,
@@ -98,10 +79,6 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-primary-active);
     border-color: var(--token-button-border-color-primary-active);
     box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
   }
 }
 
@@ -125,9 +102,10 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-secondary-focus);
     border-color: var(--token-button-border-color-secondary-focus-internal);
 
-    &::before {
-      border-color: var(--token-button-border-color-secondary-focus-external);
-    }
+    // TEST: Replacement of pseudo-element-based focus ring
+    // Test: outline instead of box-shadow
+    outline: 3px solid var(--token-button-border-color-secondary-focus-external);
+    // box-shadow: 0 0 0 3px var(--token-button-border-color-secondary-focus-external);
   }
 
   &:active,
@@ -136,10 +114,6 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-secondary-active);
     border-color: var(--token-button-border-color-secondary-active);
     box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
   }
 }
 
@@ -162,9 +136,10 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-tertiary-focus);
     border-color: var(--token-button-border-color-tertiary-focus-internal);
 
-    &::before {
-      border-color: var(--token-button-border-color-tertiary-focus-external);
-    }
+    // TEST: Replacement of pseudo-element-based focus ring
+    // Test: outline instead of box-shadow
+    outline: 3px solid var(--token-button-border-color-tertiary-focus-external);
+    // box-shadow: 0 0 0 3px var(--token-button-border-color-tertiary-focus-external);
   }
 
   &:active,
@@ -173,10 +148,6 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-tertiary-active);
     border-color: var(--token-button-border-color-tertiary-active);
     box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
   }
 
   //
@@ -195,10 +166,6 @@ $hds-button-sizes: ("small", "medium", "large");
   &.mock-disabled:hover {
     background-color: transparent;
     border-color: transparent;
-
-    &::before {
-      border-color: transparent;
-    }
   }
 }
 
@@ -222,9 +189,10 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-critical-focus);
     border-color: var(--token-button-border-color-critical-focus-internal);
 
-    &::before {
-      border-color: var(--token-button-border-color-critical-focus-external);
-    }
+    // TEST: Replacement of pseudo-element-based focus ring
+    // Test: outline instead of box-shadow
+    outline: 3px solid var(--token-button-border-color-critical-focus-external);
+    // box-shadow: 0 0 0 3px var(--token-button-border-color-critical-focus-external);
   }
 
   &:active,
@@ -233,10 +201,6 @@ $hds-button-sizes: ("small", "medium", "large");
     background-color: var(--token-button-surface-color-critical-active);
     border-color: var(--token-button-border-color-critical-active);
     box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
   }
 }
 
diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
index bf897236f3e..6f1cc4e0d5c 100644
--- a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
+++ b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
@@ -529,20 +529,6 @@
   border-color: var(--token-button-border-color-secondary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
-.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
-  box-shadow: none;
-}
-.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
   color: var(--token-button-foreground-color-secondary-hover);
   background-color: var(--token-button-surface-color-secondary-hover);
@@ -553,9 +539,7 @@
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -563,9 +547,6 @@
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-accordion-item__button {
   width: var(--hds-accordion-item-icon-size);
@@ -960,6 +941,10 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-x-small);
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
 }
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
   color: var(--token-color-foreground-primary);
@@ -967,6 +952,32 @@
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
+  outline: none;
+}
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before,
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
   top: 0;
@@ -3094,20 +3105,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 .hds-button.hds-button--width-full .hds-button__text {
   flex: 0 0 auto;
 }
-.hds-button:focus, .hds-button.mock-focus {
-  box-shadow: none;
-}
-.hds-button:focus::before, .hds-button.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 
 .hds-button__icon {
   display: block;
@@ -3135,14 +3132,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
   border-color: var(--token-button-border-color-primary-focus-internal);
-}
-.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  border-color: var(--token-button-border-color-primary-focus-external);
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 2px;
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -3150,9 +3141,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
-.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--color-secondary {
   color: var(--token-button-foreground-color-secondary-default);
@@ -3170,9 +3158,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -3180,9 +3166,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--color-tertiary {
   color: var(--token-button-foreground-color-tertiary-default);
@@ -3199,9 +3182,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-tertiary-focus);
   background-color: var(--token-button-surface-color-tertiary-focus);
   border-color: var(--token-button-border-color-tertiary-focus-internal);
-}
-.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before {
-  border-color: var(--token-button-border-color-tertiary-focus-external);
+  outline: 3px solid var(--token-button-border-color-tertiary-focus-external);
 }
 .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active {
   color: var(--token-button-foreground-color-tertiary-active);
@@ -3209,16 +3190,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-tertiary-active);
   box-shadow: none;
 }
-.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before {
-  border-color: transparent;
-}
 .hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover {
   background-color: transparent;
   border-color: transparent;
 }
-.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before {
-  border-color: transparent;
-}
 
 .hds-button--color-critical {
   color: var(--token-button-foreground-color-critical-default);
@@ -3236,9 +3211,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-critical-focus);
   background-color: var(--token-button-surface-color-critical-focus);
   border-color: var(--token-button-border-color-critical-focus-internal);
-}
-.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before {
-  border-color: var(--token-button-border-color-critical-focus-external);
+  outline: 3px solid var(--token-button-border-color-critical-focus-external);
 }
 .hds-button--color-critical:active, .hds-button--color-critical.mock-active {
   color: var(--token-button-foreground-color-critical-active);
@@ -3246,9 +3219,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-critical-active);
   box-shadow: none;
 }
-.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--size-small {
   min-height: var(--token-button-height-small);
@@ -4408,22 +4378,8 @@ button.hds-button[href]::after {
   cursor: pointer;
 }
 .hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus {
-  box-shadow: none;
   border-color: var(--token-color-focus-action-internal);
-}
-.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
-.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  outline: 3px solid var(--token-color-focus-action-external);
 }
 .hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active {
   background-color: var(--token-color-surface-interactive-active);
@@ -4483,20 +4439,6 @@ button.hds-button[href]::after {
   outline-color: transparent;
   isolation: isolate;
 }
-.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus {
-  box-shadow: none;
-}
-.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
   color: var(--token-button-foreground-color-disabled);
   background-color: var(--token-button-surface-color-disabled);
@@ -4597,14 +4539,8 @@ button.hds-button[href]::after {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
   border-color: var(--token-button-border-color-primary-focus-internal);
-}
-.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  border-color: var(--token-button-border-color-primary-focus-external);
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 2px;
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -4612,9 +4548,6 @@ button.hds-button[href]::after {
   border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
-.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-dropdown-toggle-button--color-secondary {
   color: var(--token-button-foreground-color-secondary-default);
@@ -4632,9 +4565,7 @@ button.hds-button[href]::after {
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -4642,9 +4573,6 @@ button.hds-button[href]::after {
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-dropdown-toggle-button--width-full {
   justify-content: space-between;
diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components.css b/showcase/public/assets/styles/@hashicorp/design-system-components.css
index d0b04c321a9..90e90da8a21 100644
--- a/showcase/public/assets/styles/@hashicorp/design-system-components.css
+++ b/showcase/public/assets/styles/@hashicorp/design-system-components.css
@@ -1065,20 +1065,6 @@
   border-color: var(--token-button-border-color-secondary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
-.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
-  box-shadow: none;
-}
-.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
   color: var(--token-button-foreground-color-secondary-hover);
   background-color: var(--token-button-surface-color-secondary-hover);
@@ -1089,9 +1075,7 @@
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -1099,9 +1083,6 @@
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-accordion-item__button {
   width: var(--hds-accordion-item-icon-size);
@@ -1496,6 +1477,10 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-x-small);
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
 }
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
   color: var(--token-color-foreground-primary);
@@ -1503,6 +1488,32 @@
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
+  outline: none;
+}
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before,
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
   top: 0;
@@ -3630,20 +3641,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 .hds-button.hds-button--width-full .hds-button__text {
   flex: 0 0 auto;
 }
-.hds-button:focus, .hds-button.mock-focus {
-  box-shadow: none;
-}
-.hds-button:focus::before, .hds-button.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 
 .hds-button__icon {
   display: block;
@@ -3671,14 +3668,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
   border-color: var(--token-button-border-color-primary-focus-internal);
-}
-.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  border-color: var(--token-button-border-color-primary-focus-external);
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 2px;
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -3686,9 +3677,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
-.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--color-secondary {
   color: var(--token-button-foreground-color-secondary-default);
@@ -3706,9 +3694,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -3716,9 +3702,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--color-tertiary {
   color: var(--token-button-foreground-color-tertiary-default);
@@ -3735,9 +3718,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-tertiary-focus);
   background-color: var(--token-button-surface-color-tertiary-focus);
   border-color: var(--token-button-border-color-tertiary-focus-internal);
-}
-.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before {
-  border-color: var(--token-button-border-color-tertiary-focus-external);
+  outline: 3px solid var(--token-button-border-color-tertiary-focus-external);
 }
 .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active {
   color: var(--token-button-foreground-color-tertiary-active);
@@ -3745,16 +3726,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-tertiary-active);
   box-shadow: none;
 }
-.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before {
-  border-color: transparent;
-}
 .hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover {
   background-color: transparent;
   border-color: transparent;
 }
-.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before {
-  border-color: transparent;
-}
 
 .hds-button--color-critical {
   color: var(--token-button-foreground-color-critical-default);
@@ -3772,9 +3747,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   color: var(--token-button-foreground-color-critical-focus);
   background-color: var(--token-button-surface-color-critical-focus);
   border-color: var(--token-button-border-color-critical-focus-internal);
-}
-.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before {
-  border-color: var(--token-button-border-color-critical-focus-external);
+  outline: 3px solid var(--token-button-border-color-critical-focus-external);
 }
 .hds-button--color-critical:active, .hds-button--color-critical.mock-active {
   color: var(--token-button-foreground-color-critical-active);
@@ -3782,9 +3755,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   border-color: var(--token-button-border-color-critical-active);
   box-shadow: none;
 }
-.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-button--size-small {
   min-height: var(--token-button-height-small);
@@ -4944,22 +4914,8 @@ button.hds-button[href]::after {
   cursor: pointer;
 }
 .hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus {
-  box-shadow: none;
   border-color: var(--token-color-focus-action-internal);
-}
-.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
-.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  outline: 3px solid var(--token-color-focus-action-external);
 }
 .hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active {
   background-color: var(--token-color-surface-interactive-active);
@@ -5019,20 +4975,6 @@ button.hds-button[href]::after {
   outline-color: transparent;
   isolation: isolate;
 }
-.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus {
-  box-shadow: none;
-}
-.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before {
-  position: absolute;
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-  z-index: -1;
-  border: var(--token-button-focus-border-width) solid transparent;
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
-  content: "";
-}
 .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
   color: var(--token-button-foreground-color-disabled);
   background-color: var(--token-button-surface-color-disabled);
@@ -5133,14 +5075,8 @@ button.hds-button[href]::after {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
   border-color: var(--token-button-border-color-primary-focus-internal);
-}
-.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
-  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-  border-color: var(--token-button-border-color-primary-focus-external);
-  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 2px;
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -5148,9 +5084,6 @@ button.hds-button[href]::after {
   border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
-.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-dropdown-toggle-button--color-secondary {
   color: var(--token-button-foreground-color-secondary-default);
@@ -5168,9 +5101,7 @@ button.hds-button[href]::after {
   color: var(--token-button-foreground-color-secondary-focus);
   background-color: var(--token-button-surface-color-secondary-focus);
   border-color: var(--token-button-border-color-secondary-focus-internal);
-}
-.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before {
-  border-color: var(--token-button-border-color-secondary-focus-external);
+  outline: 3px solid var(--token-button-border-color-secondary-focus-external);
 }
 .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active {
   color: var(--token-button-foreground-color-secondary-active);
@@ -5178,9 +5109,6 @@ button.hds-button[href]::after {
   border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
-.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before {
-  border-color: transparent;
-}
 
 .hds-dropdown-toggle-button--width-full {
   justify-content: space-between;