diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 0549efe82e..60dbf55eae 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -630,35 +630,6 @@ function template_preprocess_datetime_wrapper(&$variables) {
   $variables['content'] = $element['#children'];
 }
 
-/**
- * Prepares variables for an operation list template.
- *
- * Default template: operation-list.html.twig.
- *
- * @param array $variables
- *   An associative array containing:
- *   - operations: An array of render elements that will be displayed in a list.
- *     This element can be a submit, button, or link render element. All other
- *     items will be filtered from the array.
- *   - attributes: A keyed array of attributes for the <ul> containing the list
- *     of operations.
- *   - list_item_attributes: A keyed array of attributes for the <li> containing
- *     each operation.
- */
-function template_preprocess_operation_list(array &$variables) {
-  $operations = $variables['operations'];
-  $variables['list_item_attributes'] = new Attribute($variables['list_item_attributes']);
-
-  if (!empty($operations)) {
-    $elements = ['submit', 'button', 'link'];
-    foreach ($operations as $key => $operation) {
-      if (isset($operation['#type']) && in_array($operation['#type'], $elements)) {
-        $variables['items'][] = $operation;
-      }
-    }
-  }
-}
-
 /**
  * Prepares variables for links templates.
  *
@@ -1204,6 +1175,59 @@ function template_preprocess_item_list(&$variables) {
   }
 }
 
+/**
+ * Prepares variables for inclusion in a splitbutton item list.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - items: An array of items to be displayed in the list.
+ *   - list_type: The type of list to return (e.g. "ul", "ol").
+ *   - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ */
+function template_preprocess_splitbutton_item_list(array &$variables) {
+  $variables['wrapper_attributes'] = new Attribute($variables['wrapper_attributes']);
+  foreach ($variables['items'] as &$item) {
+    $attributes = [];
+    // If the item value is an array, then it is a render array.
+    if (is_array($item)) {
+      // List items support attributes via the '#wrapper_attributes' property.
+      if (isset($item['#wrapper_attributes'])) {
+        $attributes = $item['#wrapper_attributes'];
+      }
+    }
+
+    // Set the item's value and attributes for the template.
+    $item = [
+      'value' => $item,
+      'attributes' => new Attribute($attributes),
+    ];
+  }
+}
+
+/**
+ * Prepares variables for splitbutton templates.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - main_element: A render array of either a link, button, or submit element.
+ *     This is the element that is always visible in a splitbutton.
+ *   - variants: An array of strings defined in #splitbutton_type, used for
+ *     adding type-specific classes to elements within the splitbutton.
+ *   - attributes: The attributes added to the splitbutton container.
+ *   - toggle_attributes: The attributes added to the toggle button.
+ *   - splitbutton_item_list: an array of render elements that will populate the
+ *     list items.
+ *   - title: This is a string that, when present, instructs splitbutton to
+ *     function like a dropdown. This becomes the label of the main element, and
+ *     this main element is what toggles the item list.
+ *   - exclude_toggle: Boolean that defaults to FALSE. When TRUE, this will
+ *     prevent a dedicated toggle button from rendering. This is for elements
+ *     that extend splitbutton that don't necessarily want the toggle button.
+ */
+function template_preprocess_splitbutton(array &$variables) {
+  $variables['toggle_attributes'] = new Attribute($variables['toggle_attributes']);
+}
+
 /**
  * Prepares variables for container templates.
  *
@@ -2037,9 +2061,6 @@ function drupal_common_theme() {
     'links' => [
       'variables' => ['links' => [], 'attributes' => ['class' => ['links']], 'heading' => [], 'set_active_class' => FALSE],
     ],
-    'operation_list' => [
-      'variables' => ['attributes' => [], 'operations' => NULL, '#theme' => 'operation_list', 'list_item_attributes' => []],
-    ],
     'dropbutton_wrapper' => [
       'variables' => ['children' => NULL],
     ],
@@ -2074,6 +2095,26 @@ function drupal_common_theme() {
     'item_list' => [
       'variables' => ['items' => [], 'title' => '', 'list_type' => 'ul', 'wrapper_attributes' => [], 'attributes' => [], 'empty' => NULL, 'context' => []],
     ],
+    'splitbutton_item_list' => [
+      'variables' => [
+        'items' => [],
+        'list_type' => 'ul',
+        'wrapper_attributes' => [],
+        'attributes' => [],
+      ],
+    ],
+    'splitbutton' => [
+      'variables' => [
+        'splitbutton_multiple' => TRUE,
+        'main_element' => NULL,
+        'variants' => [],
+        'attributes' => [],
+        'toggle_attributes' => [],
+        'splitbutton_item_list' => [],
+        'title' => NULL,
+        'exclude_toggle' => FALSE,
+      ],
+    ],
     'feed_icon' => [
       'variables' => ['url' => NULL, 'title' => NULL],
     ],
diff --git a/core/lib/Drupal/Core/Render/Element/OperationList.php b/core/lib/Drupal/Core/Render/Element/OperationList.php
deleted file mode 100644
index 7a2f6027ce..0000000000
--- a/core/lib/Drupal/Core/Render/Element/OperationList.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-namespace Drupal\Core\Render\Element;
-
-/**
- * A list of links, buttons and submit elements.
- *
- * @RenderElement("operation_list")
- */
-class OperationList extends RenderElement {
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getInfo() {
-    return [
-      '#theme' => 'operation_list',
-      '#operations' => [],
-    ];
-  }
-
-}
diff --git a/core/lib/Drupal/Core/Render/Element/Splitbutton.php b/core/lib/Drupal/Core/Render/Element/Splitbutton.php
index 341dc0f174..85d3f1d2ca 100644
--- a/core/lib/Drupal/Core/Render/Element/Splitbutton.php
+++ b/core/lib/Drupal/Core/Render/Element/Splitbutton.php
@@ -9,9 +9,10 @@
  * Provides a form element for a toggleable menu button.
  *
  * Properties:
- * - #splitbutton_items: Items that will be themed as an operations_list. This
- *   can include submit, link and button. All other elements will be filtered
- *   out.
+ * - #splitbutton_items: Items that will be themed as a splitbutton_item_list.
+ *   By default, the items can be of the following types: submit, link and
+ *   button. All other elements will be filtered out. Elements extending this
+ *   class can change the items that are filtered by overriding filterItems().
  * - #splitbutton_type: A string or an array or strings defining a type of
  *   dropbutton variant for styling purposes. This adds the class
  *   `splitbutton--#splitbutton_type` to the splitbutton wrapper and the class
@@ -19,6 +20,12 @@
  * - #title: This changes the default splitbutton behavior of displaying a
  *   primary splitbutton item next a separate toggle button. When this property
  *   is present, there is no primary item, just a toggle.
+ * - #exclude_toggle: Defaults to FALSE. Largely used by render elements
+ *   extending splitbutton. When TRUE,  no toggle button is added even if the
+ *   configuration would typically result in its addition. For these uses, it
+ *   should be confirmed that there is still an element with the
+ *   `data-drupal-splitbutton-trigger` attribute, as it is necessary for
+ *   splitbutton's JavaScript.
  *
  * Deprecated Properties:
  * - #links: An array of links to actions. See template_preprocess_links() for
@@ -30,7 +37,7 @@
  *
  * @RenderElement("splitbutton")
  */
-class Splitbutton extends RenderElement {
+class Splitbutton extends FormElement {
 
   use StringTranslationTrait;
 
@@ -43,12 +50,9 @@ public function getInfo() {
       '#pre_render' => [
         [$class, 'preRenderSplitbutton'],
       ],
-      '#theme_wrappers' => [
-        'container' => [
-          '#attributes' => [
-            'class' => ['splitbutton' , 'js-splitbutton'],
-          ],
-        ],
+      '#theme_wrappers' => ['splitbutton'],
+      '#attached' => [
+        'library' => 'core/drupal.splitbutton',
       ],
     ];
   }
@@ -63,34 +67,61 @@ public function getInfo() {
    *   Render array.
    */
   public static function preRenderSplitbutton(array $element) {
-    $element['#attached']['library'][] = 'core/drupal.splitbutton';
-
-    if (isset($element['#attributes'])) {
-      $element['#theme_wrappers']['container']['#attributes'] += $element['#attributes'];
-    }
-
-    $splitbutton_types = [];
+    $element['#variants'] = [];
 
     if (!empty($element['#splitbutton_type'])) {
       // If #splitbutton_type exists and it is a string, place it in an array.
-      $splitbutton_types = is_array($element['#splitbutton_type']) ? $element['#splitbutton_type'] : [$element['#splitbutton_type']];
+      $element['#variants'] = is_array($element['#splitbutton_type']) ? $element['#splitbutton_type'] : [$element['#splitbutton_type']];
     };
 
     if (!empty($element['#dropbutton_type'])) {
       @trigger_error("The #dropbutton_type property in splitbutton is deprecated in drupal:9.1.0 and is removed from drupal:10.0.0.", E_USER_DEPRECATED);
-      $splitbutton_types[] = $element['#dropbutton_type'];
+      $element['#variants'][] = $element['#dropbutton_type'];
+    }
+
+    $trigger_id = Html::getUniqueId('splitbutton');
+    $element['#trigger_id'] = $trigger_id;
+
+    $items = static::collectItems($element);
+    static::buildToggleAttributes($element);
+
+    // If the #title property is not present, splitbutton takes the first item
+    // from the $items array and makes that the main "button". A dedicated
+    // toggle button is also provided in these instances.
+    if (!isset($element['#title'])) {
+      $first_item = array_shift($items);
+      $element['#main_element'] = $first_item;
+      static::addMainElementClasses($element, $first_item['#type']);
+      $element['#toggle_attributes']['#attributes']['aria-label'] = t('List additional actions');
     }
 
-    // Add modifier class to wrapper.
-    foreach ($splitbutton_types as $container_splitbutton_type) {
-      $element['#theme_wrappers']['container']['#attributes']['class'][] = 'splitbutton--' . $container_splitbutton_type;
+    // If additional items are present, place them in a splitbutton list.
+    if (count($items)) {
+      static::buildItemList($element, $items);
+      $element['#splitbutton_multiple'] = TRUE;
+    }
+    else {
+      $element['#splitbutton_multiple'] = FALSE;
     }
 
+    return $element;
+  }
+
+  /**
+   * Collects items that will be added to the splitbutton.
+   *
+   * @param array $element
+   *   The render element.
+   */
+  public static function collectItems(array $element) {
     $items = $element['#splitbutton_items'] ?? [];
 
+    // The #links property was used by dropbuttons. To facilitate an easier
+    // switch from dropbutton to splitbutton, items in a #links array are
+    // converted to `link` render elements with a #type, and added to the list
+    // of splitbutton elements.
     if (isset($element['#links'])) {
       @trigger_error("The #links property in splitbutton is deprecated in drupal:9.1.0 and is removed from drupal:10.0.0.", E_USER_DEPRECATED);
-
       foreach ($element['#links'] as &$op) {
         if (isset($op['url']) && isset($op['title'])) {
           $op['#url'] = $op['url'];
@@ -103,93 +134,110 @@ public static function preRenderSplitbutton(array $element) {
       $items += $element['#links'];
     }
 
-    $element['trigger'] = [
-      '#type' => 'container',
-      '#attributes' => [
-        'class' => [
-          'splitbutton__main',
-        ],
-      ],
+    static::filterItems($items);
+    return $items;
+  }
+
+  /**
+   * Adds attributes used for the toggle button.
+   *
+   * @param array $element
+   *   The render element.
+   */
+  public static function buildToggleAttributes(array &$element) {
+    $trigger_id = $element['#trigger_id'];
+    $element['#toggle_attributes'] = [
+      'class' => ['button', 'splitbutton__toggle'],
+      'type' => 'button',
+      'role' => 'button',
+      'aria-haspopup' => 'true',
+      'aria-controls' => "$trigger_id-menu",
+      'aria-expanded' => 'false',
+      'id' => "$trigger_id-trigger",
+      'data-drupal-splitbutton-trigger' => $trigger_id,
     ];
+  }
 
-    $trigger_id = Html::getUniqueId('splitbutton');
+  /**
+   * Adds list items to the splitbutton.
+   *
+   * @param array $element
+   *   The render element.
+   * @param array $items
+   *   An array of elements to be added.
+   */
+  public static function buildItemList(array &$element, array $items) {
+    $trigger_id = $element['#trigger_id'];
+
+    foreach ($items as &$item) {
+      // Classes must be added here instead of in templates as the item could
+      // be one of several different render element types.
+      $item['#attributes']['class'][] = 'splitbutton__operation-list-item';
+      $item['#attributes']['role'] = 'menuitem';
+      $item['#attributes']['tabindex'] = '-1';
+      $item['#wrapper_attributes']['role'] = 'none';
+    }
 
-    $toggle_element = [
-      '#type' => 'html_tag',
-      '#tag' => 'button',
+    $element['#splitbutton_item_list'] = [
+      '#items' => $items,
+      '#theme' => 'splitbutton_item_list',
       '#attributes' => [
-        'class' => ['button', 'splitbutton__toggle'],
-        'type' => 'button',
-        'role' => 'button',
-        'aria-haspopup' => 'true',
-        'aria-controls' => "$trigger_id-menu",
-        'aria-expanded' => 'false',
-        'id' => "$trigger_id-trigger",
-        'data-splitbutton-trigger' => $trigger_id,
+        'data-drupal-splitbutton-target' => $trigger_id,
+        'role' => 'menu',
+        'aria-labelledby' => "$trigger_id-trigger",
+        'id' => "$trigger_id-menu",
       ],
     ];
+  }
 
-    // If the #title property is present, Splitbutton has a single main button
-    // that toggles the operations list instead of a link/button accompanied by
-    // a separate toggle.
-    if (isset($element['#title'])) {
-      $element['trigger']['title'] = $toggle_element;
-      $element['trigger']['title']['#attributes']['class'][] = 'splitbutton__toggle--with-title';
-      $element['trigger']['title']['value']['#markup'] = $element['#title'];
-    }
-    else {
-      $first_item = array_shift($items);
-      $element['trigger']['title'] = $first_item;
-      $element['trigger']['title']['#attributes']['class'][] = 'button';
-      $element['trigger']['title']['#attributes']['class'][] = 'splitbutton__main-button';
-      $element['trigger']['title']['#attributes']['class'][] = 'splitbutton__main-button--' . $first_item['#type'];
-
-      // If there are additional items, add a toggle for their visibility.
-      if (count($items)) {
-        $element['trigger']['toggle'] = $toggle_element;
-        $element['trigger']['toggle']['#value'] = '';
-        $element['trigger']['toggle']['#attributes']['class'][] = 'splitbutton__toggle--no-title';
-        $element['trigger']['toggle']['#attributes']['aria-label'] = t('List additional actions');
-        foreach ($splitbutton_types as $toggle_splitbutton_type) {
-          $element['trigger']['toggle']['#attributes']['class'][] = 'button--' . $toggle_splitbutton_type;
-        }
+  /**
+   * Filters unsupported element types from a splitbutton item list.
+   *
+   * @param array $items
+   *   The splitbutton list items.
+   *
+   * @return array
+   *   An array of only immediate children that match specific render element
+   *   types.
+   */
+  public static function filterItems(array $items) {
+    $allowed_types = ['submit', 'button', 'link'];
+    foreach ($items as $item) {
+      if (!isset($item['#type']) || !in_array($item['#type'], $allowed_types)) {
+        throw new \LogicException('Splitbutton item is either missing #type, or #type is not submit, button or link.');
       }
     }
+  }
 
-    // Add modifier classes based on #splitbutton_type to the main button.
-    foreach ($splitbutton_types as $main_splitbutton_type) {
-      $element['trigger']['title']['#attributes']['class'][] = 'button--' . $main_splitbutton_type;
+  /**
+   * Adds classes to the main splitbutton input.
+   *
+   * By default, the main splitbutton input is styled as a button, regardless of
+   * its element type. Elements that extend splitbutton may wish to style these
+   * elements differently, so this is available as a targeted, overridable
+   * function.
+   *
+   * @param array $element
+   *   The splitbutton render array.
+   * @param null|string $modifier
+   *   A modifier that can be used for adding additional classes.
+   */
+  public static function addMainElementClasses(array &$element, $modifier = NULL) {
+    // Classes must be added here instead of templates as the main button can be
+    // be one of several render element types.
+    $element['#main_element']['#attributes']['class'][] = 'splitbutton__main-button';
+    if (!empty($modifier)) {
+      $element['#main_element']['#attributes']['class'][] = 'splitbutton__main-button--' . $modifier;
     }
 
-    // If additional items are present, place them in an operation list.
-    if (count($items)) {
-      $element['#theme_wrappers']['container']['#attributes']['class'][] = 'splitbutton--multiple';
-      $element['#theme_wrappers']['container']['#attributes']['class'][] = 'js-splitbutton-multiple';
-      foreach ($items as &$item) {
-        $item['#attributes']['class'][] = 'splitbutton__operation-list-item';
-        $item['#attributes']['role'] = 'menuitem';
-        $item['#attributes']['tabindex'] = '-1';
-      }
-      $element['operation_list'] = [
-        '#operations' => $items,
-        '#theme' => 'operation_list',
-        '#list_item_attributes' => [
-          'role' => 'none',
-        ],
-        '#attributes' => [
-          'class' => ['splitbutton__operation-list'],
-          'data-splitbutton-target' => $trigger_id,
-          'role' => 'menu',
-          'aria-labelledby' => "$trigger_id-trigger",
-          'id' => "$trigger_id-menu",
-        ],
-      ];
-    }
-    else {
-      $element['#theme_wrappers']['container']['#attributes']['class'][] = 'splitbutton--single';
-    }
+    // The main splitbutton element will always be styled as a button,
+    // regardless of its actual type.
+    $element['#main_element']['#attributes']['class'][] = 'button';
 
-    return $element;
+    // Add variant classes based on #splitbutton_type to the main button.
+    foreach ($element['#variants'] as $variant) {
+      $element['#main_element']['#attributes']['class'][] = 'button--' . $variant;
+    }
   }
 
 }
diff --git a/core/misc/splitbutton/splitbutton.css b/core/misc/splitbutton/splitbutton.css
index bb976aa577..a693cc4499 100644
--- a/core/misc/splitbutton/splitbutton.css
+++ b/core/misc/splitbutton/splitbutton.css
@@ -36,6 +36,42 @@
   text-decoration: none;
 }
 
+.splitbutton__toggle {
+  position: relative;
+}
+
+.splitbutton__toggle::after {
+  position: absolute;
+  top: 50%;
+  right: 6px; /* LTR */
+  width: 0;
+  height: 0;
+  content: "";
+  transform: translate(50%, -50%) rotate(0);
+  border-width: 0.3333em 0.3333em 0;
+  border-style: solid;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+[dir="rtl"] .splitbutton__toggle::after {
+  right: auto;
+  left: 6px;
+}
+.splitbutton.open .splitbutton__toggle::after {
+  top: 48%;
+  transform: translate(50%, -50%) rotate(180deg);
+}
+
+.splitbutton__toggle--with-title {
+  position: relative;
+  padding-right: 15px; /* LTR */
+}
+[dir="rtl"] .splitbutton__toggle--with-title {
+  padding-right: 6px;
+  padding-left: 15px;
+}
+
 html:not(.js) .splitbutton__toggle {
   display: none;
 }
diff --git a/core/misc/splitbutton/splitbutton.es6.js b/core/misc/splitbutton/splitbutton.es6.js
index 7bdde8ec09..80f1cf8c47 100644
--- a/core/misc/splitbutton/splitbutton.es6.js
+++ b/core/misc/splitbutton/splitbutton.es6.js
@@ -29,8 +29,10 @@
       this.firstChars = [];
 
       this.splitbutton = splitbutton;
-      this.trigger = splitbutton.querySelector('[data-splitbutton-trigger]');
-      this.menu = splitbutton.querySelector('[data-splitbutton-target]');
+      this.trigger = splitbutton.querySelector(
+        '[data-drupal-splitbutton-trigger]',
+      );
+      this.menu = splitbutton.querySelector('[data-drupal-splitbutton-target]');
       this.triggerContainer = splitbutton.querySelector('.splitbutton__main');
 
       this.splitbutton.addEventListener('mouseenter', () => this.activeIn());
@@ -47,15 +49,17 @@
     initMenuItems() {
       // If this.menuItems is empty, the initialization hasn't occurred yet.
       if (this.menuItems.length === 0) {
+        const itemTags =
+          this.menu.getAttribute('data-drupal-item-tags') || 'a, input, button';
         Array.prototype.slice
-          .call(this.menu.querySelectorAll('input, a, button'))
+          .call(this.menu.querySelectorAll(itemTags))
           .forEach((item, index) => {
             // Add attribute to each item to identify its focus order.
-            item.setAttribute('data-splitbutton-item', index);
+            item.setAttribute('data-drupal-splitbutton-item', index);
             this.menuItems.push(item);
 
             const itemText =
-              item.tagName === 'A'
+              item.tagName === 'A' || item.tagName === 'LI'
                 ? item.textContent
                 : item.getAttribute('value');
 
@@ -185,7 +189,7 @@
         e.keyCode === this.keyCode.SPACE ||
         e.keyCode === this.keyCode.RETURN ||
         (e.keyCode === this.keyCode.TAB &&
-          e.target.getAttribute('data-splitbutton-item') === null)
+          e.target.getAttribute('data-drupal-splitbutton-item') === null)
       ) {
         return;
       }
@@ -206,7 +210,6 @@
           break;
 
         case this.keyCode.DOWN:
-          this.focusNext(e);
           if (this.splitbutton.classList.contains('open')) {
             this.focusNext(e);
           } else {
@@ -255,7 +258,7 @@
      *   A keydown event.
      */
     focusNext(e) {
-      const currentItem = e.target.getAttribute('data-splitbutton-item');
+      const currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
       if (currentItem === null) {
         this.menuItems[0].focus();
       } else {
@@ -272,7 +275,7 @@
      *   A keydown event.
      */
     focusPrev(e) {
-      const currentItem = e.target.getAttribute('data-splitbutton-item');
+      const currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
       if (currentItem === null) {
         this.menuItems[this.lastItemIndex].focus();
       } else {
@@ -312,7 +315,7 @@
      *   The character being searched for
      */
     setFocusByFirstCharacter(e, char) {
-      const currentItem = e.target.getAttribute('data-splitbutton-item');
+      const currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
       // Get start index for search based on position of current item.
       let start = currentItem === null ? parseInt(currentItem, 10) + 1 : 0;
       if (start === this.menuItems.length) {
diff --git a/core/misc/splitbutton/splitbutton.js b/core/misc/splitbutton/splitbutton.js
index 8ff26f37dd..cc3e6e68bd 100644
--- a/core/misc/splitbutton/splitbutton.js
+++ b/core/misc/splitbutton/splitbutton.js
@@ -36,8 +36,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       this.menuItems = [];
       this.firstChars = [];
       this.splitbutton = splitbutton;
-      this.trigger = splitbutton.querySelector('[data-splitbutton-trigger]');
-      this.menu = splitbutton.querySelector('[data-splitbutton-target]');
+      this.trigger = splitbutton.querySelector('[data-drupal-splitbutton-trigger]');
+      this.menu = splitbutton.querySelector('[data-drupal-splitbutton-target]');
       this.triggerContainer = splitbutton.querySelector('.splitbutton__main');
       this.splitbutton.addEventListener('mouseenter', function () {
         return _this.activeIn();
@@ -65,12 +65,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         var _this2 = this;
 
         if (this.menuItems.length === 0) {
-          Array.prototype.slice.call(this.menu.querySelectorAll('input, a, button')).forEach(function (item, index) {
-            item.setAttribute('data-splitbutton-item', index);
+          var itemTags = this.menu.getAttribute('data-drupal-item-tags') || 'a, input, button';
+          Array.prototype.slice.call(this.menu.querySelectorAll(itemTags)).forEach(function (item, index) {
+            item.setAttribute('data-drupal-splitbutton-item', index);
 
             _this2.menuItems.push(item);
 
-            var itemText = item.tagName === 'A' ? item.textContent : item.getAttribute('value');
+            var itemText = item.tagName === 'A' || item.tagName === 'LI' ? item.textContent : item.getAttribute('value');
 
             _this2.firstChars.push(itemText.trim().substring(0, 1).toLowerCase());
 
@@ -163,7 +164,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         var preventDefault = true;
         var char = e.key;
 
-        if (e.ctrlKey || e.altKey || e.metaKey || e.keyCode === this.keyCode.SPACE || e.keyCode === this.keyCode.RETURN || e.keyCode === this.keyCode.TAB && e.target.getAttribute('data-splitbutton-item') === null) {
+        if (e.ctrlKey || e.altKey || e.metaKey || e.keyCode === this.keyCode.SPACE || e.keyCode === this.keyCode.RETURN || e.keyCode === this.keyCode.TAB && e.target.getAttribute('data-drupal-splitbutton-item') === null) {
           return;
         }
 
@@ -184,11 +185,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             break;
 
           case this.keyCode.DOWN:
-            this.focusNext(e);
-
             if (this.splitbutton.classList.contains('open')) {
+              console.log('focusnext');
               this.focusNext(e);
             } else {
+              console.log('open, then focus first');
               this.open();
               this.focusFirst();
             }
@@ -228,7 +229,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }, {
       key: "focusNext",
       value: function focusNext(e) {
-        var currentItem = e.target.getAttribute('data-splitbutton-item');
+        var currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
 
         if (currentItem === null) {
           this.menuItems[0].focus();
@@ -241,7 +242,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }, {
       key: "focusPrev",
       value: function focusPrev(e) {
-        var currentItem = e.target.getAttribute('data-splitbutton-item');
+        var currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
 
         if (currentItem === null) {
           this.menuItems[this.lastItemIndex].focus();
@@ -269,7 +270,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }, {
       key: "setFocusByFirstCharacter",
       value: function setFocusByFirstCharacter(e, char) {
-        var currentItem = e.target.getAttribute('data-splitbutton-item');
+        var currentItem = e.target.getAttribute('data-drupal-splitbutton-item');
         var start = currentItem === null ? parseInt(currentItem, 10) + 1 : 0;
 
         if (start === this.menuItems.length) {
diff --git a/core/modules/system/templates/operation-list.html.twig b/core/modules/system/templates/operation-list.html.twig
deleted file mode 100644
index 255dbecc29..0000000000
--- a/core/modules/system/templates/operation-list.html.twig
+++ /dev/null
@@ -1,21 +0,0 @@
-{#
-/**
- * @file
- * Default theme implementation for an operation list.
- *
- * Available variables:
- * - attributes: Attributes for the <ul> tag.
- * - items: items to output. Can be a link, button or submit element.
- * - list_item_attributes: Attributes for each <li>.
- *
- * @see template_preprocess_operation_list()
- *
- * @ingroup themeable
- */
-#}{%- if items -%}
-    <ul {{ attributes }}>
-        {%- for item in items -%}
-            <li {{ list_item_attributes }}>{{ item }}</li>
-        {%- endfor -%}
-    </ul>
-{%- endif -%}
diff --git a/core/modules/system/templates/splitbutton-item-list.html.twig b/core/modules/system/templates/splitbutton-item-list.html.twig
new file mode 100644
index 0000000000..8c5a367de4
--- /dev/null
+++ b/core/modules/system/templates/splitbutton-item-list.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a splitbutton item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ *
+ * @see template_preprocess_splitbutton_item_list()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if items %}
+    <{{ list_type }}{{ attributes.addClass('splitbutton__operation-list') }}>
+    {%- for item in items -%}
+        <li{{ item.attributes }}>{{ item.value }}</li>
+    {%- endfor -%}
+    </{{ list_type }}>
+{%- endif %}
diff --git a/core/modules/system/templates/splitbutton.html.twig b/core/modules/system/templates/splitbutton.html.twig
new file mode 100644
index 0000000000..1b38717184
--- /dev/null
+++ b/core/modules/system/templates/splitbutton.html.twig
@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a splitbutton.
+ *
+ * Available variables:
+ * - main_element: A render array of either a link, button, or submit element.
+ *   This is the element that is always visible in a splitbutton.
+ * - variants: An array of strings defined in #splitbutton_type, used for
+ *   adding type-specific classes to elements within the splitbutton.
+ * - attributes: HTML attributes added to the splitbutton container.
+ * - toggle_attributes: HTML attributes added to the toggle button.
+ * - splitbutton_item_list: an array of render elements that will populate the
+ *   list items.
+ * - title: This is a string that, when present, instructs splitbutton to
+ *   function like a dropdown. This becomes the label of the main element, and
+ *   this main element is what toggles the item list.
+ * - exclude_toggle: Boolean that defaults to FALSE. When TRUE, this will
+ *   prevent a dedicated toggle button from rendering. This is for elements
+ *   that extend splitbutton that don't necessarily want the toggle button.
+ *
+ * @see template_preprocess_splitbutton()
+ *
+ * @ingroup themeable
+ */
+#}{%
+  set classes = [
+    'splitbutton',
+    'js-splitbutton',
+    splitbutton_multiple == true ? 'splitbutton--multiple' : 'splitbutton--single',
+    splitbutton_multiple ? 'js-splitbutton-multiple',
+ ]
+%}
+{%
+  set button_classes = [
+    title ? 'splitbutton__toggle--with-title' : 'splitbutton__toggle--no-title',
+  ]
+%}
+{% for variant in variants %}
+  {% set classes = classes|merge(['splitbutton--' ~ variant]) %}
+  {% set button_classes = button_classes|merge(['button--' ~ variant]) %}
+{% endfor %}
+
+<div{{ attributes.addClass(classes) }}>
+  <div class="splitbutton__main">
+      {{ main_element }}
+      {% if splitbutton_multiple and exclude_toggle == FALSE %}
+          <button {{ toggle_attributes.addClass(button_classes) }} >
+            {{ title }}
+          </button>
+      {% endif %}
+  </div>
+  {{ splitbutton_item_list }}
+</div>
diff --git a/core/modules/system/tests/modules/splitbutton_test/splitbutton_test.routing.yml b/core/modules/system/tests/modules/splitbutton_test/splitbutton_test.routing.yml
index 01ab66049b..04526444ef 100644
--- a/core/modules/system/tests/modules/splitbutton_test/splitbutton_test.routing.yml
+++ b/core/modules/system/tests/modules/splitbutton_test/splitbutton_test.routing.yml
@@ -1,7 +1,7 @@
 splitbutton.test:
   path: '/splitbuttons'
   defaults:
-    _form: '\Drupal\splitbutton_test\Form\SplitbuttonTestForm'
+    _form: '\Drupal\splitbutton_test\Form\SplitButtonTestForm'
     _title: 'Splitbutton Test'
     disabled: false
   requirements:
@@ -10,7 +10,7 @@ splitbutton.test:
 splitbutton.test_link_1:
   path: '/splitbuttons-test-link-1'
   defaults:
-    _form: '\Drupal\splitbutton_test\Form\SplitbuttonTestForm'
+    _form: '\Drupal\splitbutton_test\Form\SplitButtonTestForm'
     _title: 'Splitbutton Test'
     disabled: false
   requirements:
@@ -19,7 +19,7 @@ splitbutton.test_link_1:
 splitbutton.test_link_2:
   path: '/splitbuttons-test-link-2'
   defaults:
-    _form: '\Drupal\splitbutton_test\Form\SplitbuttonTestForm'
+    _form: '\Drupal\splitbutton_test\Form\SplitButtonTestForm'
     _title: 'Splitbutton Test'
     disabled: false
   requirements:
@@ -28,7 +28,7 @@ splitbutton.test_link_2:
 splitbutton.test_link_3:
   path: '/splitbuttons-test-link-3'
   defaults:
-    _form: '\Drupal\splitbutton_test\Form\SplitbuttonTestForm'
+    _form: '\Drupal\splitbutton_test\Form\SplitButtonTestForm'
     _title: 'Splitbutton Test'
     disabled: false
   requirements:
@@ -37,8 +37,8 @@ splitbutton.test_link_3:
 splitbutton.test_link_4:
   path: '/splitbuttons-test-link-4'
   defaults:
-    _form: '\Drupal\splitbutton_test\Form\SplitbuttonTestForm'
+    _form: '\Drupal\splitbutton_test\Form\SplitButtonTestForm'
     _title: 'Splitbutton Test'
     disabled: false
   requirements:
-    _permission: 'access content'
\ No newline at end of file
+    _permission: 'access content'
diff --git a/core/modules/system/tests/modules/splitbutton_test/src/Element/SplitTextField.php b/core/modules/system/tests/modules/splitbutton_test/src/Element/SplitTextField.php
new file mode 100644
index 0000000000..876121ee7b
--- /dev/null
+++ b/core/modules/system/tests/modules/splitbutton_test/src/Element/SplitTextField.php
@@ -0,0 +1,112 @@
+<?php
+
+namespace Drupal\splitbutton_test\Element;
+
+use Drupal\Core\Render\Element\Splitbutton;
+
+/**
+ * Used for testing a render element extending Splitbutton.
+ *
+ * This element isn't particuarly useful, but something like this could be the
+ * foundation of an autocomplete widget, as it has a text input as the main
+ * element and the items become visible on input.
+ *
+ * @RenderElement("split_textfield")
+ */
+class SplitTextField extends Splitbutton {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    $class = get_class($this);
+    return [
+      '#input' => TRUE,
+      '#pre_render' => [
+        [$class, 'preRenderSplittextfield'],
+      ],
+      '#theme_wrappers' => ['splitbutton'],
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function filterItems(array $items) {
+    // Splitbutton defaults to allowing link, submit and button elements as
+    // splitbutton items. This is overridden here, and instead allows textfield
+    // and item elements.
+    $allowed_types = ['textfield', 'item'];
+    foreach ($items as $item) {
+      if (!isset($item['#type']) || !in_array($item['#type'], $allowed_types)) {
+        throw new \LogicException('Splitbutton item is either missing #type, or #type is not submit, button or link.');
+      }
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function collectItems(array $element) {
+    $trigger_id = $element['#trigger_id'];
+    // Make the first item (which becomes the main item) a textfield.
+    $items = [
+      [
+        '#type' => 'textfield',
+        '#title' => $element['#input_title'],
+        '#attributes' => [
+          'data-drupal-splitbutton-trigger' => $trigger_id,
+          'role' => 'combobox',
+          'aria-owns' => "$trigger_id-menu",
+        ],
+      ],
+    ];
+    // Add the items that will be in the toggleable list.
+    foreach ($element['#items'] as $item) {
+      $items[] = [
+        '#markup' => $item,
+      ];
+    }
+
+    return $items;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function buildItemList(&$element, $items) {
+    $trigger_id = $element['#trigger_id'];
+
+    // The navigable items in Splitbutton default are a, input or button
+    // elements within each list item. For SplitTextField, the list items
+    // themselves need to be navigable as they have no child elements.
+    foreach ($items as &$item) {
+      $item['#wrapper_attributes']['class'][] = 'splitbutton__operation-list-item';
+      $item['#wrapper_attributes']['role'] = 'option';
+      $item['#wrapper_attributes']['tabindex'] = 0;
+    }
+
+    $element['#splitbutton_item_list'] = [
+      '#items' => $items,
+      '#theme' => 'splitbutton_item_list',
+      '#attributes' => [
+        'data-drupal-splitbutton-target' => $trigger_id,
+        'data-drupal-item-tags' => 'li',
+        'aria-labelledby' => "$trigger_id-trigger",
+        'role' => 'listbox',
+        'id' => "$trigger_id-menu",
+      ],
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function preRenderSplittextfield(array $element) {
+    $element['#input_title'] = $element['#title'];
+    unset($element['#title']);
+    $element['#exclude_toggle'] = TRUE;
+    return parent::preRenderSplitbutton($element);
+  }
+
+}
diff --git a/core/modules/system/tests/modules/splitbutton_test/src/Form/SplitbuttonTestForm.php b/core/modules/system/tests/modules/splitbutton_test/src/Form/SplitButtonTestForm.php
similarity index 91%
rename from core/modules/system/tests/modules/splitbutton_test/src/Form/SplitbuttonTestForm.php
rename to core/modules/system/tests/modules/splitbutton_test/src/Form/SplitButtonTestForm.php
index 9d2b826304..3b03d651d1 100644
--- a/core/modules/system/tests/modules/splitbutton_test/src/Form/SplitbuttonTestForm.php
+++ b/core/modules/system/tests/modules/splitbutton_test/src/Form/SplitButtonTestForm.php
@@ -9,7 +9,7 @@
 /**
  * Form for testing splitbuttons.
  */
-class SplitbuttonTestForm extends FormBase {
+class SplitButtonTestForm extends FormBase {
 
   /**
    * {@inheritdoc}
@@ -247,6 +247,33 @@ public function buildForm(array $form, FormStateInterface $form_state, $disabled
       ],
     ];
 
+    $form['extends_splitbutton'] = [
+      '#type' => 'container',
+    ];
+    $form['extends_splitbutton']['title'] = [
+      '#type' => 'item',
+      '#name' => 'extends_splitbutton',
+      '#title' => $this->t('Element extending splitbutton'),
+    ];
+    $form['text_input_splitbutton'] = [
+      '#type' => 'split_textfield',
+      '#items' => [
+        $this->t('First Item'),
+        $this->t('Second Item'),
+        $this->t('Third Item'),
+      ],
+      '#title' => $this->t('Text input Splitbutton'),
+    ];
+
+    $form['title'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Subject'),
+      '#size' => 60,
+      '#maxlength' => 128,
+      '#pattern' => 'some-prefix-[a-z]+',
+      '#required' => TRUE,
+    ];
+
     return $form;
   }
 
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Render/Element/SplitButtonTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Render/Element/SplitButtonTest.php
index b195f4548e..97490b53d2 100644
--- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Render/Element/SplitButtonTest.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Render/Element/SplitButtonTest.php
@@ -14,7 +14,7 @@ class SplitButtonTest extends WebDriverTestBase {
   /**
    * {@inheritdoc}
    */
-  protected static $modules = ['splitbutton_test'];
+  protected static $modules = ['splitbutton_test', 'system'];
 
   /**
    * {@inheritdoc}
@@ -22,12 +22,34 @@ class SplitButtonTest extends WebDriverTestBase {
   protected $defaultTheme = 'stark';
 
   /**
-   * General splitbutton tests.
+   * Helper array for testing keyboard navigation.
+   *
+   * @var array
+   *  Key is the key name, value is the ascii value.
    */
-  public function testSplitbuttons() {
+  protected $keys = [
+    'tab' => 9,
+    'esc' => 27,
+    'pageup' => 33,
+    'pagedown' => 34,
+    'up' => 38,
+    'down' => 40,
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
     $user = $this->createUser(['access content']);
     $this->drupalLogin($user);
     $this->drupalGet('/splitbuttons');
+  }
+
+  /**
+   * General splitbutton tests.
+   */
+  public function testSplitbuttons() {
     $assert_session = $this->assertSession();
 
     $button_types = [
@@ -70,7 +92,7 @@ public function testSplitbuttons() {
         $test_key = "$scenario-$button_type";
         $splitbutton_selector = "[data-splitbutton-test-id=\"$test_key\"]";
         $splitbutton = $assert_session->waitForElement('css', $splitbutton_selector);
-        $this->assertNotNull($splitbutton);
+        $this->assertNotNull($splitbutton, "Element $splitbutton_selector");
         $toggle = $splitbutton->find('css', '.splitbutton__toggle');
         $this->assertNotNull($toggle);
         $this->assertFalse($splitbutton->hasClass('open'));
@@ -78,7 +100,7 @@ public function testSplitbuttons() {
         $open_splitbutton = $assert_session->waitForElement('css', "$splitbutton_selector.open");
         $this->assertNotNull($open_splitbutton);
         $operation_list = $assert_session->waitForElementVisible('css', "$splitbutton_selector .splitbutton__operation-list");
-        $this->assertNotNull($operation_list);
+        $this->assertNotNull($operation_list, "$splitbutton_selector .splitbutton__operation-list");
         $primary_button_selector = $scenario_data['primary_selector'];
         $assert_session->elementExists('css', "$splitbutton_selector $primary_button_selector");
         $operation_list_links = $operation_list->findAll('css', 'a');
@@ -132,10 +154,7 @@ public function testSplitbuttons() {
    */
   public function testSplitbuttonKeyboard() {
     $assert_session = $this->assertSession();
-    $user = $this->createUser(['access content']);
-    $this->drupalLogin($user);
-    $this->drupalGet('/splitbuttons');
-    $keys = [
+    $this->keys = [
       'tab' => 9,
       'esc' => 27,
       'pageup' => 33,
@@ -167,8 +186,8 @@ public function testSplitbuttonKeyboard() {
     $this->assertCount(5, $menu_items);
 
     // Use down key to select first item in the menu.
-    $toggle->keyDown($keys['down']);
-    $toggle->keyUp($keys['down']);
+    $toggle->keyDown($this->keys['down']);
+    $toggle->keyUp($this->keys['down']);
 
     // Script that finds the focused element and returns the inner text or its
     // value, depending on the type of element it is.
@@ -180,31 +199,31 @@ public function testSplitbuttonKeyboard() {
     // the menu item that should be focused after that keypress.
     $key_steps = [
       [
-        'key' => $keys['down'],
+        'key' => $this->keys['down'],
         'expected_destination' => 1,
       ],
       [
-        'key' => $keys['down'],
+        'key' => $this->keys['down'],
         'expected_destination' => 2,
       ],
       [
-        'key' => $keys['down'],
+        'key' => $this->keys['down'],
         'expected_destination' => 3,
       ],
       [
-        'key' => $keys['up'],
+        'key' => $this->keys['up'],
         'expected_destination' => 2,
       ],
       [
-        'key' => $keys['pagedown'],
+        'key' => $this->keys['pagedown'],
         'expected_destination' => 4,
       ],
       [
-        'key' => $keys['up'],
+        'key' => $this->keys['up'],
         'expected_destination' => 3,
       ],
       [
-        'key' => $keys['pageup'],
+        'key' => $this->keys['pageup'],
         'expected_destination' => 0,
       ],
     ];
@@ -222,10 +241,10 @@ public function testSplitbuttonKeyboard() {
 
     // Pressing the escape key should close the menu and return focus to the
     // toggle.
-    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyDown($keys['esc']);
-    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyUp($keys['esc']);
+    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyDown($this->keys['esc']);
+    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyUp($this->keys['esc']);
     $this->assertNotNull($assert_session->waitForElement('css', '[data-splitbutton-test-id="splitbutton_link_first-default"]:not(.open)'));
-    $this->assertJsCondition('document.querySelector("#edit-default .splitbutton__toggle") === document.activeElement');
+    $this->assertJsCondition('document.querySelector("#splitbutton-trigger") === document.activeElement');
 
     // Reopen the menu.
     $toggle->press();
@@ -233,17 +252,47 @@ public function testSplitbuttonKeyboard() {
     $this->assertTrue($splitbutton->hasClass('open'));
 
     // Navigate into the menu.
-    $toggle->keyDown($keys['down']);
-    $toggle->keyUp($keys['down']);
+    $toggle->keyDown($this->keys['down']);
+    $toggle->keyUp($this->keys['down']);
     $focused_element_text = $this->getSession()->evaluateScript($script);
     $this->assertEquals(0, array_search($focused_element_text, $menu_item_values));
 
     // Pressing the tab key should close the menu and return focus to the
     // toggle.
-    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyDown($keys['tab']);
-    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyUp($keys['tab']);
+    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyDown($this->keys['tab']);
+    $menu_items[array_search($focused_element_text, $menu_item_values)]->keyUp($this->keys['tab']);
     $this->assertNotNull($assert_session->waitForElement('css', '[data-splitbutton-test-id="splitbutton_link_first-default"]:not(.open)'));
-    $this->assertJsCondition('document.querySelector("#edit-default .splitbutton__toggle") === document.activeElement');
+    $this->assertJsCondition('document.querySelector("#splitbutton-trigger") === document.activeElement');
+  }
+
+  /**
+   * Test a custom element extending splitbutton.
+   *
+   * In this case, this custom element confirms that the primary element of
+   * splitbutton can be a text input, and that is possible to customize classes
+   * and aria attributes to reflect the element's functionality.
+   *
+   * The element being tested uses a text input as the primary element. When a
+   * character is typed into the field, the splitbutton list will open and the
+   * the item matching the first letter typed will be focused.
+   */
+  public function testElementExtendingSplitbutton() {
+    $assert_session = $this->assertSession();
+    $custom_splitbutton = $assert_session->elementExists('css', '[data-drupal-selector="edit-text-input-splitbutton"]');
+    $input = $assert_session->elementExists('css', '[data-drupal-selector="edit-text-input-splitbutton"] input');
+
+    // Assert that it is possible to override the input role.
+    $this->assertEquals('combobox', $input->getAttribute('role'));
+
+    // Confirm that the existing key listener will work on a text input. In this
+    // case, the down arrow should open the item list.
+    $input->keyDown($this->keys['down']);
+    $focused_element_text = $this->getSession()->evaluateScript('document.activeElement.innerText');
+    $this->assertEquals('First Item', $focused_element_text);
+
+    $splitbutton_items = $custom_splitbutton->findAll('css', 'li.splitbutton__operation-list-item[role="option"]');
+    $this->assertCount(3, $splitbutton_items);
+    $assert_session->elementExists('css', '[data-drupal-selector="edit-text-input-splitbutton"] ul.splitbutton__operation-list[role="listbox"]');
   }
 
 }
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index f95f6884d1..a016277372 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -248,8 +248,6 @@ function claro_element_info_alter(&$type) {
   // Add a pre-render function that handles dropbutton variants.
   if (isset($type['dropbutton'])) {
     $type['dropbutton']['#pre_render'][] = [ClaroPreRender::class, 'dropButton'];
-    $type['dropbutton']['#type'] = 'splitbutton';
-    unset($type['dropbutton']['theme']);
   }
 
   if (isset($type['vertical_tabs'])) {
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 29bdff57e9..6bbe2fa2d1 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -31,7 +31,6 @@
   /**
    * Buttons.
    */
-
   /**
    * jQuery.UI dropdown.
    */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
diff --git a/core/themes/claro/css/components/splitbutton.css b/core/themes/claro/css/components/splitbutton.css
index d72730b5f5..7abf149b8a 100644
--- a/core/themes/claro/css/components/splitbutton.css
+++ b/core/themes/claro/css/components/splitbutton.css
@@ -110,7 +110,7 @@ html:not(.js) .splitbutton {
   padding-right: calc(3rem - 2px);
 }
 
-.js .splitbutton__operation-list li {
+.js .splitbutton__operation-list li:not(:focus) {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 }
 
diff --git a/core/themes/claro/css/components/splitbutton.pcss.css b/core/themes/claro/css/components/splitbutton.pcss.css
index e2d8951a89..2de60c5051 100644
--- a/core/themes/claro/css/components/splitbutton.pcss.css
+++ b/core/themes/claro/css/components/splitbutton.pcss.css
@@ -56,7 +56,7 @@ html:not(.js) .splitbutton {
   padding-right: calc(var(--button--horizontal-padding) * 2);
 }
 
-.js .splitbutton__operation-list li {
+.js .splitbutton__operation-list li:not(:focus) {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 }
 
diff --git a/core/themes/stable/templates/content/operation-list.html.twig b/core/themes/stable/templates/content/operation-list.html.twig
deleted file mode 100644
index 681aebdfb6..0000000000
--- a/core/themes/stable/templates/content/operation-list.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{#
-/**
- * @file
- * Theme override for an operation list.
- *
- * Available variables:
- * - attributes: Attributes for the <ul> tag.
- * - items: items to output. Can be a link, button or submit element.
- * - list_item_attributes: Attributes for each <li>.
- *
- * @see template_preprocess_operation_list()
- */
-#}{%- if items -%}
-    <ul {{ attributes }}>
-        {%- for item in items -%}
-            <li {{ list_item_attributes }}>{{ item }}</li>
-        {%- endfor -%}
-    </ul>
-{%- endif -%}
diff --git a/core/themes/stable/templates/misc/splitbutton-item-list.html.twig b/core/themes/stable/templates/misc/splitbutton-item-list.html.twig
new file mode 100644
index 0000000000..1dbda7d3ee
--- /dev/null
+++ b/core/themes/stable/templates/misc/splitbutton-item-list.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override for a splitbutton item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ *
+ * @see template_preprocess_splitbutton_item_list()
+ */
+#}
+{% if items %}
+    <{{ list_type }}{{ attributes.addClass('splitbutton__operation-list') }}>
+    {%- for item in items -%}
+        <li{{ item.attributes }}>{{ item.value }}</li>
+    {%- endfor -%}
+    </{{ list_type }}>
+{%- endif %}
diff --git a/core/themes/stable/templates/misc/splitbutton.html.twig b/core/themes/stable/templates/misc/splitbutton.html.twig
new file mode 100644
index 0000000000..c0fce23578
--- /dev/null
+++ b/core/themes/stable/templates/misc/splitbutton.html.twig
@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Theme override for a splitbutton.
+ *
+ * Available variables:
+ * - main_element: A render array of either a link, button, or submit element.
+ *   This is the element that is always visible in a splitbutton.
+ * - variants: An array of strings defined in #splitbutton_type, used for
+ *   adding type-specific classes to elements within the splitbutton.
+ * - attributes: HTML attributes added to the splitbutton container.
+ * - toggle_attributes: HTML attributes added to the toggle button.
+ * - splitbutton_item_list: an array of render elements that will populate the
+ *   list items.
+ * - title: This is a string that, when present, instructs splitbutton to
+ *   function like a dropdown. This becomes the label of the main element, and
+ *   this main element is what toggles the item list.
+ * - exclude_toggle: Boolean that defaults to FALSE. When TRUE, this will
+ *   prevent a dedicated toggle button from rendering. This is for elements
+ *   that extend splitbutton that don't necessarily want the toggle button.
+ *
+ * @see template_preprocess_splitbutton()
+ */
+#}{%
+  set classes = [
+    'splitbutton',
+    'js-splitbutton',
+    splitbutton_multiple == true ? 'splitbutton--multiple' : 'splitbutton--single',
+    splitbutton_multiple ? 'js-splitbutton-multiple',
+ ]
+%}
+{%
+  set button_classes = [
+    title ? 'splitbutton__toggle--with-title' : 'splitbutton__toggle--no-title',
+  ]
+%}
+{% for variant in variants %}
+  {% set classes = classes|merge(['splitbutton--' ~ variant]) %}
+  {% set button_classes = button_classes|merge(['button--' ~ variant]) %}
+{% endfor %}
+
+<div{{ attributes.addClass(classes) }}>
+  <div class="splitbutton__main">
+      {{ main_element }}
+      {% if splitbutton_multiple and exclude_toggle == FALSE %}
+          <button {{ toggle_attributes.addClass(button_classes) }} >
+            {{ title }}
+          </button>
+      {% endif %}
+  </div>
+  {{ splitbutton_item_list }}
+</div>
diff --git a/core/themes/stable9/templates/content/operation-list.html.twig b/core/themes/stable9/templates/content/operation-list.html.twig
deleted file mode 100644
index 681aebdfb6..0000000000
--- a/core/themes/stable9/templates/content/operation-list.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{#
-/**
- * @file
- * Theme override for an operation list.
- *
- * Available variables:
- * - attributes: Attributes for the <ul> tag.
- * - items: items to output. Can be a link, button or submit element.
- * - list_item_attributes: Attributes for each <li>.
- *
- * @see template_preprocess_operation_list()
- */
-#}{%- if items -%}
-    <ul {{ attributes }}>
-        {%- for item in items -%}
-            <li {{ list_item_attributes }}>{{ item }}</li>
-        {%- endfor -%}
-    </ul>
-{%- endif -%}
diff --git a/core/themes/stable9/templates/misc/splitbutton-item-list.html.twig b/core/themes/stable9/templates/misc/splitbutton-item-list.html.twig
new file mode 100644
index 0000000000..1dbda7d3ee
--- /dev/null
+++ b/core/themes/stable9/templates/misc/splitbutton-item-list.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override for a splitbutton item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ *
+ * @see template_preprocess_splitbutton_item_list()
+ */
+#}
+{% if items %}
+    <{{ list_type }}{{ attributes.addClass('splitbutton__operation-list') }}>
+    {%- for item in items -%}
+        <li{{ item.attributes }}>{{ item.value }}</li>
+    {%- endfor -%}
+    </{{ list_type }}>
+{%- endif %}
diff --git a/core/themes/stable9/templates/misc/splitbutton.html.twig b/core/themes/stable9/templates/misc/splitbutton.html.twig
new file mode 100644
index 0000000000..c0fce23578
--- /dev/null
+++ b/core/themes/stable9/templates/misc/splitbutton.html.twig
@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Theme override for a splitbutton.
+ *
+ * Available variables:
+ * - main_element: A render array of either a link, button, or submit element.
+ *   This is the element that is always visible in a splitbutton.
+ * - variants: An array of strings defined in #splitbutton_type, used for
+ *   adding type-specific classes to elements within the splitbutton.
+ * - attributes: HTML attributes added to the splitbutton container.
+ * - toggle_attributes: HTML attributes added to the toggle button.
+ * - splitbutton_item_list: an array of render elements that will populate the
+ *   list items.
+ * - title: This is a string that, when present, instructs splitbutton to
+ *   function like a dropdown. This becomes the label of the main element, and
+ *   this main element is what toggles the item list.
+ * - exclude_toggle: Boolean that defaults to FALSE. When TRUE, this will
+ *   prevent a dedicated toggle button from rendering. This is for elements
+ *   that extend splitbutton that don't necessarily want the toggle button.
+ *
+ * @see template_preprocess_splitbutton()
+ */
+#}{%
+  set classes = [
+    'splitbutton',
+    'js-splitbutton',
+    splitbutton_multiple == true ? 'splitbutton--multiple' : 'splitbutton--single',
+    splitbutton_multiple ? 'js-splitbutton-multiple',
+ ]
+%}
+{%
+  set button_classes = [
+    title ? 'splitbutton__toggle--with-title' : 'splitbutton__toggle--no-title',
+  ]
+%}
+{% for variant in variants %}
+  {% set classes = classes|merge(['splitbutton--' ~ variant]) %}
+  {% set button_classes = button_classes|merge(['button--' ~ variant]) %}
+{% endfor %}
+
+<div{{ attributes.addClass(classes) }}>
+  <div class="splitbutton__main">
+      {{ main_element }}
+      {% if splitbutton_multiple and exclude_toggle == FALSE %}
+          <button {{ toggle_attributes.addClass(button_classes) }} >
+            {{ title }}
+          </button>
+      {% endif %}
+  </div>
+  {{ splitbutton_item_list }}
+</div>