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

resources/views/components/badge.blade.php

@@ -7,10 +7,10 @@
      Both are `error` by default, as M3 draws them, and an `outline` status label draws its edge in
      `outline`, not `outline-variant`: M3 asks a badge for 3:1 against what is behind it, and
      `outline-variant` is the decorative role dividers use. `floating` pins one to the top-end
-     corner of a `relative` parent, on M3's anchor geometry — the dot flush in the corner, the
-     count 2px above it — an icon or an icon button:
+     corner of a `position: relative` parent, on M3's anchor geometry — the dot flush in the corner,
+     the count 2px above it — an icon or an icon button:
 
-         <span class="relative inline-flex"><x-icon name="notifications" /><x-badge value="4" floating /></span>
+         <span style="position: relative; display: inline-flex"><x-icon name="notifications" /><x-badge value="4" floating /></span>
 
      The status label is not an M3 badge but every app needs one: `tonal` draws the value in the
      colour's container ("Expired" in error-container), `solid` in the colour itself (a label that
@@ -21,13 +21,17 @@
        count (the ink an outline badge already writes in), surface-container-high with
        on-surface-variant text when `tonal`, the outline edge when `outline`.
      - `plain` — no background, text or border colour at all, only shape, size and type, so the
-       caller's classes paint it: `<x-badge value="Run" tonal color="plain" class="bg-tertiary-container text-on-tertiary-container" />`.
+       caller's CSS paints it.
 
      The value is `value`, or the slot, which renders as HTML — an icon beside the word:
-     `<x-badge tonal><x-icon name="bolt" optical="20" class="size-3" /> Pro</x-badge>`. With neither it is a dot.
+     `<x-badge tonal><x-icon name="bolt" size="12" /> Pro</x-badge>`. With neither it is a dot.
 
      A count or dot says nothing to a screen reader on its own: give the icon's control a label
-     that includes it ("Notifications, 4 new"), or pass `label` here. --}}
+     that includes it ("Notifications, 4 new"), or pass `label` here.
+
+     Drawn by resources/css/components/badge.css from `data-md-dot` (the small badge),
+     `data-md-variant` (a status label: `solid`, `tonal` or `outline`, the first of them that is
+     set, in that order), `data-md-color` and `data-md-floating`. --}}
 
 @props([
     'value' => null,
@@ -54,38 +58,23 @@
         $markup = false;
     }
 
-    $filled = [
-        'primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary',
-        'error' => 'bg-error text-on-error', 'success' => 'bg-success text-on-success', 'warning' => 'bg-warning text-on-warning', 'info' => 'bg-info text-on-info',
-        'neutral' => 'bg-on-surface-variant text-surface',
-    ];
-    $container = [
-        'primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container',
-        'error' => 'bg-error-container text-on-error-container', 'success' => 'bg-success-container text-on-success-container', 'warning' => 'bg-warning-container text-on-warning-container', 'info' => 'bg-info-container text-on-info-container',
-        'neutral' => 'bg-surface-container-high text-on-surface-variant',
-    ];
-    $paint = match (true) {
-        $color === 'plain' => '',
-        ! $status, $solid => $filled[$color],
-        $tonal => $container[$color],
-        default => 'border-outline text-on-surface-variant',
+    // `solid` wins over `tonal`, and either over `outline`, as the three have always resolved.
+    $variant = match (true) {
+        ! $status => null,
+        (bool) $solid => 'solid',
+        (bool) $tonal => 'tonal',
+        default => 'outline',
     };
 
-    $attributes = $attributes
-        ->class([
-            'inline-flex shrink-0 items-center justify-center whitespace-nowrap',
-            'size-1.5 rounded-corner-full' => $dot,
-            'h-4 min-w-4 rounded-corner-full px-1 type-label-sm tabular-nums' => ! $dot && ! $status,
-            'h-6 gap-1 rounded-corner-sm px-2 type-label-md' => $status,
-            'border' => $outline && ! $tonal && ! $solid && ! $dot,
-            $paint => $paint !== '',
-            'absolute top-0 end-0' => $floating && $dot,
-            'absolute -top-0.5 start-[calc(100%-0.75rem)]' => $floating && ! $dot,
-        ])
-        ->merge(array_filter([
-            'aria-label' => $label,
-            'aria-hidden' => $label === null && ! $status ? 'true' : null,
-        ]));
+    $attributes = $attributes->merge(array_filter([
+        'data-md-badge' => true,
+        'data-md-dot' => $dot ? true : null,
+        'data-md-variant' => $variant,
+        'data-md-color' => $color,
+        'data-md-floating' => $floating ? true : null,
+        'aria-label' => $label,
+        'aria-hidden' => $label === null && ! $status ? 'true' : null,
+    ], fn ($value): bool => $value !== null));
 @endphp
 
 <span {{ $attributes }}>@unless ($dot)@if ($markup){{ $slot }}@else{{ $text }}@endif@endunless</span>