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

									
										resources/css/components.css
									
		+1
		
												View File
												
				@@ -14,6 +14,7 @@

				/* Actions and communication */

				@import './components/loading.css';

				@import './components/tooltip.css';

				@import './components/badge.css';

				/* Inputs, selection and data */