Draw the button's state layer, focus ring and target from the classes

Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
button.css hand-rolled the same declarations as foundation/interaction.css's
md-state-layer, md-focus-ring and md-touch-target; it now renders those
classes (the touch target only at xs and sm, where it draws under 48px) and
keeps only its own geometry, colour and motion. The stylesheet test's "writes
no class list" check now allows the three interaction classes, in any subset,
and $attributes->class() as the way a root merges them with a caller's own
class; split-button and button-group, which nest a button, are updated to match.

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

tests/Feature/Components/ButtonGroupTest.php

@@ -5,9 +5,14 @@ use Livewire\Livewire;
 use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 it('groups buttons with the spacing of their size', function (string $size, string $gap) {
-    expect((string) $this->blade("<x-button-group label=\"Views\" size=\"{$size}\"><x-button label=\"Day\" /></x-button-group>"))
+    $html = (string) $this->blade("<x-button-group label=\"Views\" size=\"{$size}\"><x-button label=\"Day\" /></x-button-group>");
+    preg_match('/<div[^>]*>/', $html, $tag);
+
+    expect($html)
         ->toMatch("/<div\\s+role=\"group\"\\s+aria-label=\"Views\"\\s+data-md-button-group=\"standard\"\\s+data-md-size=\"{$size}\"\\s+data-md-shape=\"round\"/")
-        ->not->toContain('class=')
+        // The group's own root writes no class; the button nested in the slot carries the
+        // interaction classes of its own.
+        ->and($tag[0])->not->toContain('class=')
         ->and(ComponentStylesheet::read('button-group')->declarations(in_array($size, ['xs', 'sm'], true)
             ? "[data-md-button-group='standard'][data-md-size='{$size}']"
             : "[data-md-button-group='standard']"))->toBe(['gap' => $gap]);