diff --git a/core/modules/system/system.post_update.php b/core/modules/system/system.post_update.php
index cf9a0cb807e6f980df04885a859a9d0bc14c3b0d..803f362dac30b423f8230fa0d06d2f5dcebe184b 100644
--- a/core/modules/system/system.post_update.php
+++ b/core/modules/system/system.post_update.php
@@ -148,6 +148,13 @@ function system_post_update_uninstall_stable() {
   }
 }
 
+/**
+ * Clear caches due to trustedCallbacks changing in ClaroPreRender.
+ */
+function system_post_update_claro_dropbutton_variants() {
+  // Empty post-update hook.
+}
+
 /**
  * Update schema version to integers.
  *
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php
index e65ee770ad7b563bedc1c97f4ccfc65ad7c491aa..ff9a816715a271378fef5c9f79b161db6ba79e38 100644
--- a/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php
@@ -74,7 +74,7 @@ public function testViewsUiDropButtonCssClasses() {
     $list_item_selectors = ['li:first-child', 'li:last-child'];
     // Test list item CSS classes.
     foreach ($list_item_selectors as $list_item_selector) {
-      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
     }
 
     // Click on the Display name and wait for the Views UI dialog.
@@ -89,7 +89,7 @@ public function testViewsUiDropButtonCssClasses() {
     $this->assertTrue($extra_actions_dropbutton_list->hasClass('dropbutton--small'));
     // Check list item CSS classes.
     foreach ($list_item_selectors as $list_item_selector) {
-      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
     }
   }
 
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index a016277372e06595c4c762d37e5b9f25ab97b446..ea5d088b59fc31ca5e2f3e87cdd74cbd2008e843 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -245,9 +245,17 @@ function claro_element_info_alter(&$type) {
     $type['text_format']['#pre_render'][] = [ClaroPreRender::class, 'textFormat'];
   }
 
-  // Add a pre-render function that handles dropbutton variants.
-  if (isset($type['dropbutton'])) {
-    $type['dropbutton']['#pre_render'][] = [ClaroPreRender::class, 'dropButton'];
+  // Add a pre-render function for Operations to set #dropbutton_type.
+  if (isset($type['operations'])) {
+    // In Claro, Operations should always use the extrasmall dropbutton variant.
+    // To add CSS classes based on variants, the element must have the
+    // #dropbutton_type property before it is processed by
+    // \Drupal\Core\Render\Element\Dropbutton::preRenderDropbutton(). This
+    // ensures #dropbutton_type is available to preRenderDropbutton().
+    $operations_pre_renders = !empty($type['operations']['#pre_render']) ? $type['operations']['#pre_render'] : [];
+    array_unshift($operations_pre_renders, [ClaroPreRender::class, 'operations']);
+
+    $type['operations']['#pre_render'] = $operations_pre_renders;
   }
 
   if (isset($type['vertical_tabs'])) {
@@ -612,13 +620,13 @@ function claro_views_ui_display_tab_alter(&$element) {
         foreach ($nested_child_keys as $nested_key) {
           $child_count++;
           $prefix = $dummy_dropbutton[$key][$nested_key]['#prefix'];
-          $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
+          $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item$3', $prefix);
         }
       }
       else {
         $child_count++;
         $prefix = $dummy_dropbutton[$key]['#prefix'];
-        $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
+        $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item$3', $prefix);
       }
     }
 
@@ -1004,20 +1012,6 @@ function claro_preprocess_views_view_table(&$variables) {
   }
 }
 
-/**
- * Implements hook_preprocess_HOOK() for links__dropbutton__operations.
- *
- * Operations always use the extra small dropbutton variant.
- */
-function claro_preprocess_links__dropbutton__operations(&$variables) {
-  $item_classes = ['dropbutton__item', 'dropbutton__item--extrasmall'];
-  $variables['attributes']['class'][] = 'dropbutton--extrasmall';
-
-  foreach ($variables['links'] as &$link_data) {
-    $link_data['attributes']->addClass($item_classes);
-  }
-}
-
 /**
  * Implements hook_preprocess_HOOK() for links__dropbutton.
  */
@@ -1029,21 +1023,8 @@ function claro_preprocess_links__dropbutton(&$variables) {
       : 'dropbutton--single';
   }
 
-  $item_classes = ['dropbutton__item'];
-
-  // Check that the dropbutton has a supported variant class.
-  // @todo Revisit after https://www.drupal.org/node/3057581 is added.
-  if (!empty($variables['attributes']['class'])) {
-    if (array_search('dropbutton--small', $variables['attributes']['class'])) {
-      $item_classes[] = 'dropbutton__item--small';
-    }
-    elseif (array_search('dropbutton--extrasmall', $variables['attributes']['class'])) {
-      $item_classes[] = 'dropbutton__item--extrasmall';
-    }
-  }
-
   foreach ($variables['links'] as &$link_data) {
-    $link_data['attributes']->addClass($item_classes);
+    $link_data['attributes']->addClass('dropbutton__item');
   }
 }
 
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index b7b12ad0bf969670ae8a47a41e3ea76754ff30dc..4cfb5789d9fb7f32a7f68a28f5bbf1006ccec567 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -305,14 +305,14 @@
 
 /* Variants */
 
-.no-touchevents .dropbutton__item--small:first-of-type > * {
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
   padding-top: calc(0.625rem - 1px);
   padding-bottom: calc(0.625rem - 1px);
   font-size: 0.79rem;
   line-height: 0.75rem;
 }
 
-.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
   padding-top: calc(0.375rem - 1px);
   padding-bottom: calc(0.375rem - 1px);
   font-size: 0.79rem;
@@ -434,16 +434,16 @@
 
 /* Variants. */
 
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
   font-size: 0.79rem;
   line-height: 0.75rem;
 }
 
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
   font-size: 0.79rem;
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 146fd1063e8d8a708d5b4aba25be770c1cdc5d9d..5e76ea9b0f89bc7e933ae3b053df23933087fbbb 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -246,14 +246,14 @@
 }
 
 /* Variants */
-.no-touchevents .dropbutton__item--small:first-of-type > * {
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
   padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
   padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
   font-size: var(--dropbutton-small-font-size);
   line-height: var(--dropbutton-small-line-height);
 }
 
-.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
   padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
   padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
   font-size: var(--dropbutton-extrasmall-font-size);
@@ -369,16 +369,16 @@
 }
 
 /* Variants. */
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   padding-top: var(--dropbutton-small-spacing-size);
   padding-bottom: var(--dropbutton-small-spacing-size);
   font-size: var(--dropbutton-small-font-size);
   line-height: var(--dropbutton-small-line-height);
 }
 
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
-.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   padding-top: var(--dropbutton-extrasmall-spacing-size);
   padding-bottom: var(--dropbutton-extrasmall-spacing-size);
   font-size: var(--dropbutton-extrasmall-font-size);
diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php
index 76b3aeb03573f58e8dbd226de3d1eb039033f3b8..d702543451a3b5a8c6013790162d8bca5aafdfba 100644
--- a/core/themes/claro/src/ClaroPreRender.php
+++ b/core/themes/claro/src/ClaroPreRender.php
@@ -110,17 +110,11 @@ public static function verticalTabs($element) {
   }
 
   /**
-   * Prerender callback for Dropbutton element.
-   *
-   * @todo Revisit after https://www.drupal.org/node/3057581 is added.
+   * Prerender callback for the Operations element.
    */
-  public static function dropButton($element) {
-    if (!empty($element['#dropbutton_type']) && is_string($element['#dropbutton_type'])) {
-      $supported_types = ['small', 'extrasmall'];
-
-      if (in_array($element['#dropbutton_type'], $supported_types)) {
-        $element['#attributes']['class'][] = 'dropbutton--' . $element['#dropbutton_type'];
-      }
+  public static function operations($element) {
+    if (empty($element['#dropbutton_type'])) {
+      $element['#dropbutton_type'] = 'extrasmall';
     }
     return $element;
   }
@@ -199,7 +193,7 @@ public static function trustedCallbacks() {
     return [
       'managedFile',
       'verticalTabs',
-      'dropButton',
+      'operations',
       'container',
       'textFormat',
       'messagePlaceholder',