DOC-3147: Refactor split button documentation and CSS classes for clarity and consistency

Author: ArvinJ-H

modules/ROOT/pages/8.0-release-notes.adoc

@@ -107,7 +107,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 === Split buttons are now rendered as separate action and chevron buttons.
 // #TINY-8665
 
-Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite element. The main button performs the primary action, while the chevron button controls the dropdown menu. This design improvement enhances accessibility by allowing separate focus targets and ARIA labels for each button. Additionally, the `+setTooltip+` method has been updated to apply tooltip content to both the main and chevron buttons simultaneously, ensuring consistent guidance for users.
+Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite element. The main button performs the primary action, while the chevron button controls the dropdown menu. This design improvement enhances accessibility by allowing separate focus targets and ARIA labels for each button.
 
 
 [[additions]]
@@ -123,7 +123,7 @@ Split buttons in {productname} {release-version} now render as two independent,
 === Split button tooltip configuration
 // #TINY-8665
 
-The `+chevronTooltip+` property provides custom tooltip text for the chevron button portion of split buttons. When `+chevronTooltip+` is not specified, {productname} automatically generates tooltip text using the pattern `+"{tooltip} menu"+`. The enhanced `+setTooltip+` method updates both main and chevron tooltips to maintain consistency.
+The `+chevronTooltip+` property provides custom tooltip text for the chevron button portion of split buttons. When `+chevronTooltip+` is not specified, {productname} automatically generates tooltip text using the pattern `+"{tooltip} menu"+`. The `+setTooltip+` method updates both main and chevron tooltips to maintain consistency.
 
 For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons].
 
@@ -141,7 +141,7 @@ For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar bu
 === Split button DOM structure changes
 // #TINY-8665
 
-The internal DOM structure of split buttons has been updated to align with the new component-based architecture. Split button components now use the `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes in place of the previous composite layout. Each part of the split button is rendered as an independent DOM element with separate event handling and focus management. Custom CSS that targets split button internals may need to be updated to reflect these changes.
+The split buttons are now rendered as two separate buttons: action and dropdown. Each has its own event handling and focus management. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes. Custom CSS that targets split button internals may need to be updated to reflect these changes.
 
 
 [[removed]]

modules/ROOT/pages/creating-a-skin.adoc

@@ -68,7 +68,29 @@ _Do not edit these files directly_. Instead, use them as references when creatin
 
 The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed.
 
-NOTE: As of {productname} 8.0, split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors.
+NOTE: Split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors.
+
+.Example: Updating split button CSS selectors
+[source,css]
+----
+/* Before: targeting the composite split button */
+.tox-split-button {
+  /* Previous styling approach */
+}
+
+/* After: targeting individual components */
+.tox-split-button__main {
+  /* Main button styling */
+  background-color: #blue;
+  border-radius: 4px 0 0 4px;
+}
+
+.tox-split-button__chevron {
+  /* Chevron button styling */
+  background-color: #darkblue;
+  border-radius: 0 4px 4px 0;
+}
+----
 ====
 
 [NOTE]

modules/ROOT/pages/custom-split-toolbar-button.adoc

@@ -57,18 +57,6 @@ include::partial$components/choice-menu-items.adoc[]
 
 == CSS Classes
 
-As of {productname} 8.0, split buttons render as two separate components:
-
-* `.tox-split-button__main` - Main action button
-* `.tox-split-button__chevron` - Dropdown chevron button
-
-If you have custom CSS targeting split button internals, you may need to update your selectors.
-
-[source,css]
-----
-/* TinyMCE 8.0+ */
-.tox-split-button__main
-.tox-split-button__chevron
-----
+include::partial$components/split-button-css-classes.adoc[]
 
 include::partial$misc/onSetup.adoc[]

modules/ROOT/partials/components/split-button-css-classes.adoc

@@ -0,0 +1,15 @@
+Split buttons render as two separate components, each with their own CSS classes for targeted styling:
+
+* `.tox-split-button__main` - Main action button
+* `.tox-split-button__chevron` - Dropdown chevron button
+
+[source,css]
+----
+.tox-split-button__main {
+  /* Main button styling */
+}
+
+.tox-split-button__chevron {
+  /* Chevron button styling */
+}
+----