Rewrite the showcase's Communication section without Tailwind

Plan step 38: the badge/icon wrapper spans move to
style="position: relative; display: inline-flex", the exact pattern
<x-badge>'s own header documents; Alerts, Stats and the two empty
states move onto <x-stack>/<x-grid> in place of w-full and a
Tailwind grid, so a caller no longer sizes each child by hand. The
"plain" badge (no colour of its own, by design) and the illustration's
two decorative fills move to data-md-showcase-* hooks, as does the
tooltip demo span's focus-ring corner; the shortcut kbds now use the
data-md-showcase-kbd hook the frame batch already drew.

No demo content removed; #communication, the toast/snackbar hooks and
the rich-tooltip triggers (Press for details, About expiry) the
Chromium CommunicationTest selectors read are unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -359,4 +359,28 @@
     [data-md-showcase-icon-color='secondary'] [data-md-icon] {
         color: var(--md-sys-color-secondary);
     }
+
+    /* Communication: the "plain" badge's own colours (that variant draws none, by design, so the
+       caller paints it), a focus ring's corner on a plain span standing in for a control, and the
+       illustration's two decorative colours beyond currentColor. */
+    [data-md-showcase-badge-plain] {
+        background-color: var(--md-sys-color-primary-fixed);
+        color: var(--md-sys-color-on-primary-fixed);
+    }
+
+    [data-md-showcase-focus-demo] {
+        border-radius: var(--md-sys-shape-corner-xs);
+    }
+
+    [data-md-showcase-illustration='container'] {
+        fill: var(--md-sys-color-primary-container);
+    }
+
+    [data-md-showcase-illustration='accent'] {
+        fill: var(--md-sys-color-tertiary);
+    }
+
+    [data-md-showcase-illustration='on-accent'] {
+        fill: var(--md-sys-color-on-tertiary);
+    }
 }