Draw the badge without Tailwind

Plan step 36. <x-badge> renders data-md-badge with data-md-dot,
data-md-variant (solid, tonal or outline, resolved in that order),
data-md-color and data-md-floating; badge.css draws BadgeTokens' dot and
count, the status label, each colour's pair of roles through custom
properties, and M3's anchor geometry when floating. A plain badge sets
no colour, so the caller's CSS paints it.

NavigationBarTest (navigation group) asserts the dot by data-md-dot.

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

tests/Feature/Components/NavigationBarTest.php

@@ -45,7 +45,7 @@ it('badges the icon with a dot or a count that screen readers hear', function ()
     $dot = (string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" :badge="true" badge-label="New mail" />');
 
     expect($count)->toContain('999+')->toContain('<span class="sr-only">, 1200</span>')
-        ->and($dot)->toContain('size-1.5')->toContain('<span class="sr-only">, New mail</span>')
+        ->and($dot)->toContain('data-md-dot')->toContain('<span class="sr-only">, New mail</span>')
         ->and((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" />'))->not->toContain('sr-only');
 });