Draw the split button without Tailwind

Plan step 36. <x-split-button> renders data-md-split-button and
data-md-size on the pair and data-md-split on its halves. split-button.css
draws SplitButton*Tokens' shape — full outer corners, inner corners that
grow under the finger, the trailing half round while its menu is open —
the narrower leading padding and 48px trailing half at xs and sm, and the
chevron's own size, nudge and turn on the standard scheme. groups.css is
empty and leaves tailwind.css.

The actions browser test follows data-md-split and data-md-button-group,
and gains the owed tests for a connected segment's 48px edge and a
button group's single-required and multi selection.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/ActionsTest.php

@@ -222,10 +222,10 @@ it('moves a connected group\'s choice with the arrow keys', function () {
 });
 
 it('rounds a split button\'s trailing half while its menu is open', function () {
-    $trailing = "document.querySelector('[data-split=\"trailing\"]')";
+    $trailing = "document.querySelector('[data-md-split=\"trailing\"]')";
 
     showcase()
-        ->click('[data-split="trailing"] >> nth=0')
+        ->click('[data-md-split="trailing"] >> nth=0')
         ->assertScript("{$trailing}.getAttribute('aria-expanded') === 'true'")
         ->assertScript("getComputedStyle({$trailing}).borderTopLeftRadius === ({$trailing}.offsetHeight / 2) + 'px'");
 });
@@ -235,7 +235,7 @@ it('keeps a connected segment\'s small inner corners, which a 9999px outer corne
     // factor: a full corner written as 9999px drew the 8px inner corners square. Every radius
     // in a connected group or a split button stays within half its height, so none is scaled.
     showcase()
-        ->assertScript("[...document.querySelectorAll('[data-button-group=\"connected\"] > *, [data-split]')].every((el) => { const cs = getComputedStyle(el); const half = el.offsetHeight / 2 + 0.5; return el.offsetHeight === 0 || ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'].every((corner) => parseFloat(cs[corner]) <= half); })")
+        ->assertScript("[...document.querySelectorAll('[data-md-button-group=\"connected\"] > *, [data-md-split]')].every((el) => { const cs = getComputedStyle(el); const half = el.offsetHeight / 2 + 0.5; return el.offsetHeight === 0 || ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'].every((corner) => parseFloat(cs[corner]) <= half); })")
         ->assertScript("(el => getComputedStyle(el).borderTopRightRadius === '8px')(document.querySelector('#buttons input[name=\"showcase-theme\"][value=\"light\"]').parentElement)");
 });
 
@@ -464,3 +464,52 @@ it('closes a FAB menu when an item\'s action runs, and opens and closes it clean
         ->assertScript('! '.FAB_MENU.".matches(':popover-open')")
         ->assertScript(focused("getAttribute('aria-label') === 'New'"));
 });
+
+it('takes a press on a small connected segment at its 48px edge, past what it draws', function () {
+    // M3: "XS and S connected button groups have a 48dp target area and a 48dp minimum width".
+    showcase()->assertScript(<<<'JS'
+        (() => {
+            const segment = document.querySelector('#buttons input[name="showcase-theme"][value="light"]').parentElement
+            segment.scrollIntoView({ block: 'center' })
+            const box = segment.getBoundingClientRect()
+            const x = box.left + box.width / 2
+            return box.height === 40 && box.width >= 48
+                && document.elementFromPoint(x, box.top - 3) === segment
+                && document.elementFromPoint(x, box.bottom + 3) === segment
+        })()
+        JS);
+});
+
+it('keeps one choice in a single, required selection group', function () {
+    $group = '#buttons [data-md-selection="single"]';
+    $view = "document.querySelector('{$group}').parentElement.querySelector('code').textContent";
+
+    $page = showcase();
+
+    $page->assertAttribute("{$group} button:has-text(\"Week\")", 'aria-pressed', 'true')
+        ->click("{$group} button:has-text(\"Day\")")
+        ->assertAttribute("{$group} button:has-text(\"Day\")", 'aria-pressed', 'true')
+        ->assertAttribute("{$group} button:has-text(\"Week\")", 'aria-pressed', 'false')
+        ->assertScript("{$view} === 'day'");
+
+    // Required: pressing the chosen button again leaves it chosen.
+    $page->click("{$group} button:has-text(\"Day\")")
+        ->assertAttribute("{$group} button:has-text(\"Day\")", 'aria-pressed', 'true')
+        ->assertScript("{$view} === 'day'");
+});
+
+it('toggles each choice of a multi selection group, down to none', function () {
+    $group = '#buttons [data-md-selection="multi"]';
+    $marks = "document.querySelector('{$group}').parentElement.querySelectorAll('code')[1].textContent";
+
+    showcase()
+        ->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'true')
+        ->click("{$group} [aria-label=\"Italic\"]")
+        ->assertAttribute("{$group} [aria-label=\"Italic\"]", 'aria-pressed', 'true')
+        ->assertScript("{$marks} === 'bold, italic'")
+        ->click("{$group} [aria-label=\"Bold\"]")
+        ->click("{$group} [aria-label=\"Italic\"]")
+        ->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'false')
+        ->assertAttribute("{$group} [aria-label=\"Italic\"]", 'aria-pressed', 'false')
+        ->assertScript("{$marks} === 'none'");
+});