Land a caller's class and style on the scaffold and tooltip roots

Plan step 39 (part 0): the step 38 review found <x-scaffold> and
<x-tooltip> never referencing $attributes, so a caller's class and
style were silently dropped. The scaffold's root is its single
data-md-scaffold div; the tooltip's root, documented in its header, is
the standalone wrapper it draws around a trigger (data-md-tooltip-anchor,
merged with its own anchor-name) — passed an anchor instead, it renders
only a popover fragment beside another component's root and takes
nothing of the caller's.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/scaffold.blade.php

@@ -101,7 +101,8 @@
      window never clips what overhangs on purpose.
 
      Nothing application-specific belongs in here: an app's destinations and chrome come in through
-     the props and slots. --}}
+     the props and slots. The caller's `class` and `style` land on the root, `data-md-scaffold`
+     itself — the element `style="--material-banner: 4rem"` above sets a custom property on. --}}
 
 @props([
     'destinations' => [],
@@ -137,7 +138,7 @@
     $groups = $items->chunkWhile(fn (array $item, int $key, $chunk): bool => $item['section'] === $chunk->last()['section']);
 @endphp
 
-<div data-md-scaffold>
+<div data-md-scaffold {{ $attributes->only(['class', 'style']) }}>
     <a href="#content" data-md-skip-link>{{ __('Skip to content') }}</a>
 
     @isset($banner)

resources/views/components/tooltip.blade.php

@@ -14,7 +14,14 @@
      Drawn by resources/css/components/tooltip.css.
 
      It is aria-hidden: an icon button takes the same words as its aria-label, and a labelled
-     control would otherwise read them twice. --}}
+     control would otherwise read them twice.
+
+     The caller's `class` and `style` land on the root — standalone, that is the wrapper this
+     component draws around the trigger (`data-md-tooltip-anchor`), merged with its own
+     `anchor-name`. Passed an `anchor` instead, the component renders no wrapper of its own: only
+     the popover bubble, a fragment beside another component's root (`<x-button tooltip>` and
+     friends never forward a caller's attributes to it), so there is nothing of the caller's to
+     place. --}}
 
 @props([
     'text',
@@ -29,7 +36,7 @@
 @endphp
 
 @if ($standalone)
-    <span data-md-tooltip-anchor style="anchor-name: {{ $anchor }}">
+    <span data-md-tooltip-anchor {{ $attributes->merge(['style' => "anchor-name: {$anchor}"]) }}>
         {{ $slot }}
 @endif
 

tests/Feature/Components/ScaffoldTest.php

@@ -48,6 +48,12 @@ it('puts every destination in the rail and only those marked for the bar in the
         ->and(substr_count($html, 'aria-current="page"'))->toBe(2);
 });
 
+it('takes the caller\'s class and style on its own root', function () {
+    $root = layoutRoot((string) $this->blade('<x-scaffold class="app-shell" style="--material-banner: 4rem" :destinations="$destinations" />', ['destinations' => scaffoldDestinations()]));
+
+    expect($root)->toMatchArray(['<' => 'div', 'data-md-scaffold' => '', 'class' => 'app-shell', 'style' => '--material-banner: 4rem']);
+});
+
 it('speaks a destination\'s badge in its own words when it has them', function () {
     $html = (string) $this->blade('<x-scaffold :destinations="$destinations" />', ['destinations' => [
         ['title' => 'Get started', 'icon' => 'rocket_launch', 'url' => '/start', 'badge' => '0/3', 'badgeLabel' => '0 of 3 done'],
@@ -247,7 +253,7 @@ it('marks the scaffold, and draws the FAB after the page\'s bar and before the p
         BLADE, ['destinations' => scaffoldDestinations()]);
 
     // M3 puts a FAB early in the focus order: after the bar, before the content.
-    expect($html)->toMatch('/^\s*<div\s+data-md-scaffold>/')
+    expect($html)->toMatch('/^\s*<div\s+data-md-scaffold\s*>/')
         ->not->toContain('data-app-shell')
         ->toMatch('/APP BAR.*<div data-md-scaffold-fab><button>NEW<\/button><\/div>\s*<main id="content".*PAGE/s')
         ->and(substr_count($html, 'NEW'))->toBe(1)

tests/Feature/Components/TooltipTest.php

@@ -52,6 +52,13 @@ it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects s
         ->and($css->declarations('[data-md-tooltip]:popover-open', ['@starting-style']))->toBe(['opacity' => '0']);
 });
 
+it('takes the caller\'s class and style on the standalone wrapper, its root', function () {
+    $root = layoutRoot((string) $this->blade('<x-tooltip text="Copy link" class="inline-flex" style="gap: 4px"><button>Copy</button></x-tooltip>'));
+
+    expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'inline-flex'])
+        ->and($root['style'])->toStartWith('anchor-name: --material-tooltip-')->toEndWith('; gap: 4px;');
+});
+
 it('escapes its text', function () {
     $this->blade('<x-tooltip text="<b>bold</b>"><span>x</span></x-tooltip>')
         ->assertSee('&lt;b&gt;bold&lt;/b&gt;', false);