Draw the rich tooltip without Tailwind

Plan step 36 (actions). <x-rich-tooltip> renders data-md-rich-tooltip
with the bubble's data-md-rich-tooltip-bubble and data-md-side, and
data-md-rich-tooltip-title/-text/-actions on its plain text; no class
list. rich-tooltip.css draws RichTooltipTokens' surface-container,
medium corner, elevation 2, 312px bubble, its corner-to-corner anchor
positioning and its fade, the same shape as tooltip.css.

rich-tooltip.js's leave grace goes from 200ms to M3's 1.5s (ACT-25),
matching tooltip.js. RichTooltipTest is rewritten on the hooks and
ComponentStylesheet.

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

tests/Feature/Components/ActionStylesheetsTest.php

@@ -25,6 +25,7 @@ dataset('action components', [
     'menu',
     'fab-menu-item',
     'fab-menu',
+    'rich-tooltip',
 ]);
 
 it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {

tests/Feature/Components/RichTooltipTest.php

@@ -1,5 +1,7 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
 it('wraps its trigger with a surface bubble anchored to it', function () {
     $html = (string) $this->blade(<<<'BLADE'
         <x-rich-tooltip title="Expiry" text="Recipients lose access after this time.">
@@ -11,14 +13,28 @@ it('wraps its trigger with a surface bubble anchored to it', function () {
 
     expect($anchor)->not->toBeEmpty()
         ->and($html)
+        ->toContain('data-md-rich-tooltip')
         ->toContain('<button>?</button>')
         ->toContain('x-data="materialRichTooltip(false)"')
         ->toContain('popover="manual"')
         ->toContain('role="tooltip"')
+        ->toContain('data-md-rich-tooltip-bubble')
+        ->toContain('data-md-side="bottom"')
         ->toContain("position-anchor: {$anchor[1]}")
-        ->toContain('rounded-corner-md bg-surface-container')
-        ->toContain('type-title-sm text-on-surface-variant">Expiry')
-        ->toContain('Recipients lose access after this time.');
+        ->toContain('data-md-rich-tooltip-title')
+        ->toContain('>Expiry')
+        ->toContain('data-md-rich-tooltip-text')
+        ->toContain('Recipients lose access after this time.')
+        ->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-bubble]'))->toMatchArray([
+            'border-radius' => 'var(--md-sys-shape-corner-md)',
+            'background-color' => 'var(--md-sys-color-surface-container)',
+            'box-shadow' => 'var(--md-sys-elevation-2)',
+            'max-width' => '312px',
+        ])
+        ->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-title]'))->toMatchArray([
+            'font' => 'var(--md-sys-typescale-title-sm)',
+            'color' => 'var(--md-sys-color-on-surface-variant)',
+        ]);
 });
 
 it('opens on press and stays when persistent', function () {
@@ -26,5 +42,21 @@ it('opens on press and stays when persistent', function () {
         ->toContain('x-data="materialRichTooltip(true)"')
         ->toContain('popover="auto"')
         ->toContain('role="dialog"')
+        ->toContain('data-md-rich-tooltip-actions')
         ->toContain('<button>More</button>');
 });
+
+it('places the bubble by the side asked for, on the anchor positioning fallback that suits it', function () {
+    $css = ComponentStylesheet::read('rich-tooltip');
+
+    expect((string) $this->blade('<x-rich-tooltip text="Details" side="left"><button>i</button></x-rich-tooltip>'))->toContain('data-md-side="left"')
+        ->and($css->declarations("[data-md-rich-tooltip-bubble][data-md-side='left']"))->toBe(['position-area' => 'left span-bottom'])
+        ->and($css->declarations("[data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right'])"))->toMatchArray([
+            'position-try-fallbacks' => 'flip-inline, flip-block',
+        ]);
+});
+
+it('falls back to bottom for an unknown side', function () {
+    expect((string) $this->blade('<x-rich-tooltip text="Details" side="diagonal"><button>i</button></x-rich-tooltip>'))
+        ->toContain('data-md-side="bottom"');
+});