End a select's long value before its arrow, with an ellipsis

Where the browser has the customizable select, select.css made the
select `display: flex` with `text-overflow: ellipsis`, but the closed
select draws its value in a block of its user-agent shadow tree: a flex
item at its automatic minimum width that takes no `text-overflow` from
the select, and no author style reaches it (`display: block` on the
select does not help either). So a long option in a narrow field, or
at `size="sm"` and `xs`, ran on past the end padding under the arrow,
which `overflow: hidden` only clips at the select's edge. The native
select in Firefox cut the value at the padding with no ellipsis.

The view now gives the select a first child `<button type="button"
wire:ignore>` holding `<selectedcontent>`, the customizable select's own
copy of the chosen option, and select.css makes that the flex item that
shrinks and ends in an ellipsis; the native select takes `nowrap`,
`overflow: hidden` and the ellipsis on itself. `wire:ignore`, because a
Livewire render parses the server's empty element into the first
option's label and morphed it back over the chosen one. A browser
without the customizable select never renders the button; `type` keeps
it from being a form's default button.

A browser test measures the value against the arrow in md, sm, xs,
filled and icon selects 240px wide, and again after choosing another
option re-renders the component; it fails without the change in Chrome
and Firefox.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

UPGRADE.md

@@ -60,6 +60,14 @@
   ran. A standard sheet is now out of the row until then, and one whose `wire:model` property is
   open is rendered open and stands at its width. One opened from an Alpine scope alone still
   appears when Alpine starts, which only the script can know.
+- **A long value in `<x-select>` ends before the arrow, with an ellipsis.** Where the browser has
+  the customizable select (Chrome, Safari), the closed select drew its value in a box of its own
+  that took neither `text-overflow` nor a width from the select, so a long option in a narrow
+  field, or at `size="sm"` and `xs`, ran on under the arrow; the native select (Firefox) cut it at
+  the arrow with no ellipsis. The select's first child is now a `<button type="button"
+  wire:ignore>` holding `<selectedcontent>`, the browser's copy of the chosen option, which
+  select.css cuts; a browser without the customizable select never renders it. A test that
+  matched a select's markup up to its first `<option>` finds the button there.
 
 ## From 2.0.0 to 2.1.0