Draw the alert without Tailwind

Plan step 36 (actions). <x-alert> renders data-md-alert with
data-md-color and data-md-alert-content/-title/-description/-actions/
-dismiss; no class list. alert.css draws the state's tinted container
colour across all eight colours, the medium corner, and the dismiss
button reaching M3's 48px target from its 40px (ACT-18) with its own
state layer, focus ring and touch target. AlertTest 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

resources/views/components/alert.blade.php

@@ -6,14 +6,17 @@
      `color` (alias `tone`): `info` (the default), `success`, `warning`, `error`, `primary`,
      `secondary`, `tertiary`, or `neutral` for surface-container-high. `icon` replaces the state's
      icon; `:icon="false"` drops it. `dismissible` adds a close button that hides it in the browser,
-     40px drawn with the 48px target M3 asks for.
+     40px drawn with the 48px target M3 asks for (ACT-18).
 
      It is a `role="status"`, whatever its colour: an alert is usually part of the page as it
      renders, and `role="alert"` is an assertive live region that some screen readers announce over
      the page title on load — and that a Livewire morph re-announces. `assertive` opts into
      `role="alert"` for the case the prop is named after: a notice put on screen in answer to
-     something the person just did. M3 publishes no banner; the nearest thing it does publish, the
-     snackbar, says polite and never assertive. --}}
+     something the person just did (ACT-36). M3 publishes no banner; the nearest thing it does
+     publish, the snackbar, says polite and never assertive.
+
+     Drawn by resources/css/components/alert.css from `data-md-alert` and `data-md-color`; no
+     class list. --}}
 
 @props([
     'title' => null,
@@ -32,41 +35,36 @@
         'info' => 'info', 'success' => 'check_circle', 'warning' => 'warning', 'error' => 'error',
         'primary' => 'info', 'secondary' => 'info', 'tertiary' => 'info', 'neutral' => 'info',
     ][$color]);
-
-    $colours = [
-        'info' => 'bg-info-container text-on-info-container', 'success' => 'bg-success-container text-on-success-container',
-        'warning' => 'bg-warning-container text-on-warning-container', 'error' => 'bg-error-container text-on-error-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', 'neutral' => 'bg-surface-container-high text-on-surface',
-    ][$color];
 @endphp
 
 <div
     role="{{ $assertive ? 'alert' : 'status' }}"
     @if ($dismissible) x-data="{ shown: true }" x-show="shown" x-transition.opacity @endif
-    {{ $attributes->class(['flex items-start gap-3 rounded-corner-md p-4', $colours]) }}
+    data-md-alert
+    data-md-color="{{ $color }}"
+    {{ $attributes }}
 >
     @if ($icon)
-        <x-livewire-material::icon :name="$icon" filled class="size-6" />
+        <x-livewire-material::icon :name="$icon" filled />
     @endif
 
-    <div class="min-w-0 flex-1 space-y-1 self-center">
+    <div data-md-alert-content>
         @if ($title)
-            <p class="type-title-sm">{{ $title }}</p>
+            <p data-md-alert-title>{{ $title }}</p>
         @endif
 
         @if ($description || $slot->isNotEmpty())
-            <div class="type-body-md">{{ $description ?? $slot }}</div>
+            <div data-md-alert-description>{{ $description ?? $slot }}</div>
         @endif
 
         @isset($actions)
-            <div class="-ms-3 flex flex-wrap gap-2 pt-1">{{ $actions }}</div>
+            <div data-md-alert-actions>{{ $actions }}</div>
         @endisset
     </div>
 
     @if ($dismissible)
-        <button type="button" class="state-layer focus-ring touch-target -m-2 inline-flex size-10 shrink-0 items-center justify-center rounded-corner-full" aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
-            <x-livewire-material::icon name="close" optical="20" class="size-5" />
+        <button type="button" data-md-alert-dismiss aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
+            <x-livewire-material::icon name="close" size="20" />
         </button>
     @endif
 </div>