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>

resources/css/components/select.css

@@ -9,6 +9,11 @@
  * while the list is open, and the arrow turns over. The open list itself is M3's menu, drawn by
  * components/menu.css.
  *
+ * A value too long for the field ends before the arrow with an ellipsis. The native select cuts its
+ * own text at its end padding; the customizable one draws the value in a box of its shadow tree
+ * that no author style reaches, so the view gives it a `<button>` holding `<selectedcontent>`, the
+ * browser's copy of the chosen option, and the ellipsis is drawn there.
+ *
  * The field's root carries `data-md-select`.
  */
 
@@ -22,7 +27,9 @@
     /* A select covers its whole field — out over the padding and the leading icon at
        the start, under the arrow to the end — and its own padding puts the value back
        where it was. So a press anywhere on the field opens it, and the list, which
-       the browser anchors to the select, is the field's width (components/menu.css). */
+       the browser anchors to the select, is the field's width (components/menu.css).
+       A value longer than the field is cut at that padding, with an ellipsis, rather
+       than running on under the arrow. */
     select[data-md-field-control] {
         --field-end: calc(var(--field-icon) + var(--field-gap) + var(--field-pad));
 
@@ -30,6 +37,9 @@
         cursor: pointer;
         margin-inline: calc(-1 * var(--field-start)) calc(-1 * var(--field-end));
         padding-inline: var(--field-start) var(--field-end);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     select[data-md-field-control]:disabled {
@@ -52,6 +62,15 @@
             padding-block: 0;
             border-radius: 0;
             background: transparent;
+        }
+
+        /* The customizable select's value is `<selectedcontent>`, the only part of the
+           closed select an author style reaches: the box the browser draws otherwise
+           takes neither `text-overflow` nor a width from the select, and ran on under
+           the arrow. As the select's flex item it may shrink to the room left. */
+        select[data-md-field-control] selectedcontent {
+            flex: 1 1 0%;
+            min-width: 0;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;