Add button type=popover to select explainer (openui#986)

This follows the resolution in
openui#939 (comment)

site/src/pages/components/selectlist.mdx

@@ -19,6 +19,8 @@ import Image from '../../components/image.astro'
   - [Rendering the `<option>` differently in the button](#rendering-the-option-differently-in-the-button)
   - [Putting custom content in the listbox](#putting-custom-content-in-the-listbox)
   - [Animations](#animations)
+  - [Split buttons](#split-buttons)
+- [Button behavior and type=popover](#button-behavior-and-type=popover)
 - [Testing out the stylable select element](#testing-out-the-stylable-select-element)
 - [Anatomy of the stylable select element](#anatomy-of-the-stylable-select-element)
 - [Styling](#styling)
@@ -53,7 +55,7 @@ Here is a basic `<select>` element today:
 And here the same `<select>` with opt ins to the new stylability behavior which this explainer proposes:
 ```html
 <select>
-  <button type=select>
+  <button>
     <selectedoption></selectedoption>
   </button>
   <datalist>
@@ -73,7 +75,7 @@ This example changes the fonts and colors of various parts of the button and lis
 <div className="code-container">
 ```html
 <select>
-  <button type=select>
+  <button>
     <selectedoption></selectedoption>
   </button>
   <datalist>
@@ -139,7 +141,7 @@ This example replaces the button which opens the listbox with an author provided
 <div>
 ```html
 <select>
-  <button type=select>
+  <button>
     selected option: <selectedoption></selectedoption>
   </button>
   <option>one</option>
@@ -163,7 +165,7 @@ This example uses the stylable `<select>` element with custom CSS to target it w
 <div>
 ```html
 <select>
-  <button type=select>
+  <button>
     <selectedoption></selectedoption>
   </button>
   <datalist>
@@ -266,6 +268,35 @@ Here is another example with custom content in the listbox: [codepen](https://co
 </div>
 </div>
 
+### Split buttons
+
+<div className="code-image-container">
+<div>
+  This example uses the [type=popover](#button-behavior-and-type=popover) attribute on one of the buttons in order to have a button which opens the select's popup and another one which submits a form. The image is taken from a richer example here: [link to codepen](https://codepen.io/una/pen/KKbNYbo).
+```html
+<select>
+  <button><selectedoption></selectedoption></button>
+  <button type=popover>⬇️</button>
+  <datalist>
+    <option>Create a merge commit</option>
+    <option>Squash and merge</option>
+    <option>Rebase and merge</option>
+  </datalist>
+</select>
+```
+</div>
+<div>
+  <Image
+    src="/images/select-split-button.png"
+    alt="A stylable select element with a split button"
+  />
+</div>
+</div>
+
+## Button behavior and type=popover
+
+The first child `<button>` of a `<select>` will open the popup list of options, unless one of them has `type=popover` on it. In that case, only the `<button>` with `type=popover` on it will open the popup. This enables use cases like split buttons but doesn't require the author to add `type=popover` for most use cases where there is only one button.
+
 ## Testing out the stylable select element
 
 Stylable `<select>` is currently implemented behind a flag in [Chromium](https://chromestatus.com/feature/5737365999976448). To use it, enable the **Experimental Web Platform features** flag in about:flags.
@@ -280,7 +311,7 @@ Because the various parts of the select element can be styled, it's important to
 
 - `<select>` - The root element that contains the button and listbox.
 - button (slot) - The portion of the element which is rendered in the position of the button which opens the listbox. It should contain a button to open the listbox.
-- `<button type=select>` - The button which opens the listbox when clicked. The `type=select` attribute indicates to the browser that this button should open the listbox.
+- `<button>` - The button which opens the listbox when clicked.
 - `<selectedoption>` - The element which contains the text of the currently selected option. Every time that the user selects an option, the browser will replace the text content of this element with the text content of the selected option.
 - `<datalist>` - The wrapper that contains the `<option>`(s) and `<optgroup>`(s).
 - `<optgroup>` - Optional element which groups `<option>`(s) together with a label.
@@ -298,7 +329,7 @@ The select element supports the `:open` and `:closed` pseudo selectors as specif
 When the select's listbox is showing, the select element will match `:open`, and when it is not showing, it will match `:closed`. Here is an example which makes the button red when the listbox is closed and green when it is open:
 ```html
 <select>
-  <button id=custombutton type=select>
+  <button id=custombutton>
     <selectedoption></selectedoption>
   </button>
   <option>one</option>
@@ -339,7 +370,7 @@ Here is an example which has a custom button with custom CSS:
   }
 </style>
 <select class="my-custom-select">
-  <button type="select">
+  <button>
     <span class="open">Open</span>
     <span class="label">Choose an option</span>
   </button>
@@ -434,7 +465,7 @@ Consider the following example:
   }
 </style>
 <select class="my-custom-select">
-  <button type="select">
+  <button>
     <span class="label">Choose a plant</span>
     <selectedoption></selectedoption>
   </button>
@@ -502,3 +533,4 @@ The HTML parser will not allow `<button>` or `<datalist>` children when the `mul
 - [Why allow interactive content in `<listbox>` but with strong warnings](https://github.com/openui/open-ui/issues/540)
 - [Why not make selection follow focus](https://github.com/openui/open-ui/issues/742)
 - [Why not allow select or datalist in size/multiple select](https://github.com/openui/open-ui/issues/977#issuecomment-1910874971)
+- [Why `<button type=popover>`](https://github.com/openui/open-ui/issues/939#issuecomment-1910837275)