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
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:34:24 +02:00
co-authored by Claude Opus 5
parent d4b71c519c
commit 7bdd3ef61c
6 changed files with 287 additions and 100 deletions
@@ -13,6 +13,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
dataset('action components', [
'loading',
'tooltip',
'badge',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {