Merge branch 'worktree-agent-a9b4c522a39c6ce62'

# Conflicts:
#	tests/Feature/StylesheetsTest.php
#	workbench/resources/css/app.css

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,73 @@ 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('collapses an extended FAB to a FAB while the page scrolls down, and extends it on the way back', function () {
+    $fab = "document.querySelector('#buttons [data-md-collapse-on-scroll]')";
+
+    // Reduced motion takes the spring's duration to zero, so the width is final at once.
+    $page = visit('/material/buttons', ['reducedMotion' => 'reduce'])
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'")
+        ->assertScript("! {$fab}.hasAttribute('data-md-collapsed') && {$fab}.getBoundingClientRect().width > 56");
+
+    $page->script('window.scrollTo(0, 600)');
+
+    $page->assertScript("{$fab}.hasAttribute('data-md-collapsed')")
+        ->assertScript("Math.round({$fab}.getBoundingClientRect().width) === 56")
+        // Clipped, not removed: the collapsed FAB keeps the extended one's name.
+        ->assertScript("{$fab}.textContent.trim() === 'Compose'");
+
+    $page->script('window.scrollTo(0, 200)');
+
+    $page->assertScript("! {$fab}.hasAttribute('data-md-collapsed')")
+        ->assertScript("{$fab}.getBoundingClientRect().width > 56");
+});
+
+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'");
+});