DOC-3147: Update split button tooltips and documentation

Author: ArvinJ-H

modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js

@@ -6,7 +6,8 @@ tinymce.init({
     editor.ui.registry.addSplitButton('myButton', {
       text: 'My Button',
       icon: 'info',
-      tooltip: 'This is an example split-button',
+      tooltip: 'Execute my action',
+      chevronTooltip: 'My Button menu options',
       onAction: () => editor.insertContent('<p>You clicked the main button</p>'),
       onItemAction: (api, value) => editor.insertContent(value),
       fetch: (callback) => {

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

@@ -104,6 +104,11 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 
 // CCFR here.
 
+=== Split button component architecture
+// #TINY-8665
+
+Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite component. The main button handles primary actions while the chevron button controls dropdown functionality. This architectural change improves accessibility by providing separate focus targets and ARIA labels for each component. The `+setTooltip+` method has been enhanced to update both main and chevron button tooltips simultaneously.
+
 
 [[additions]]
 == Additions
@@ -115,6 +120,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 
 // CCFR here.
 
+=== 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 intelligently updates both main and chevron tooltips to maintain consistency.
+
+For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons].
+
 
 [[changes]]
 == Changes
@@ -126,6 +138,11 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 
 // CCFR here.
 
+=== Split button DOM structure changes
+// #TINY-8665
+
+The internal DOM structure of split buttons has been updated to support the new component architecture. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes instead of the previous composite structure. Each component renders as a separate DOM element with independent event handling and focus management. Custom CSS targeting split button internals may require updates to accommodate the new structure.
+
 
 [[removed]]
 == Removed

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

@@ -67,6 +67,8 @@ _Do not edit these files directly_. Instead, use them as references when creatin
 * `+modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less+`
 
 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]

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

@@ -13,6 +13,8 @@ A split button contains a basic button and a menu button, wrapped up into one to
 |text |string |Primary button |optional |Text displayed if no icon is found.
 |icon |string |Primary button |optional |
 include::partial$misc/admon-predefined-icons-only.adoc[]
+|tooltip |string |Primary button |optional |Text displayed when hovering over the main button. If `+chevronTooltip+` is not provided, this will be used to auto-generate the chevron tooltip as `+"{tooltip} menu"+`.
+|chevronTooltip |string |Chevron button |optional |Text displayed when hovering over the chevron button. If not provided, auto-generates as `+"{tooltip} menu"+`.
 |onAction |`+(api) => void+` |Primary button |required |Function invoked when the basic button section is clicked.
 |select |`+(value: string) => boolean+` |Choice menu items |optional |default: `false` - Function run on each option when the menu is opened to determine if it should be highlighted as active.
 |columns |number or `+'auto'+` |Drop-down menu |optional |default: `1` - Number of columns for the list of options. When set to more than 1 column, only the icon for each item will be shown.
@@ -35,6 +37,7 @@ include::partial$misc/admon-predefined-icons-only.adoc[]
 3+|
 |setText |`+(text: string) => void+` |Sets the text label to display.
 |setIcon |`+(icon: string) => void+` |Sets the icon of the button.
+|setTooltip |`+(tooltip: string) => void+` |Sets the main button tooltip and auto-updates the chevron tooltip.
 |===
 
 [[split-button-example-and-explanation]]
@@ -52,4 +55,20 @@ The `+fetch+` function is called whenever the split button's drop-down menu is o
 
 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$misc/onSetup.adoc[]