Write the showcase examples without showcase-only hooks

Plan step 38 review: the component sections' code samples, which an
application copies, carried 60 data-md-showcase-* hooks that only
showcase.css draws (a sized loading indicator, the plain badge's own
colours, a bordered bar frame, the navigation demos' frames, a table's
scroll wrapper...), so a copied sample did nothing in the application.
They now write what an application has: <x-surface outlined corner>
for a frame and a line, <x-row> for the FAB menu's corner, and an
inline style from the tokens for a size, a scroll box or a colour,
as the Containment batch already did. The side sheet demo takes
align="stretch", which holds in both of <x-row stack-below>'s modes,
instead of a hook that undid align="start" once stacked. The menu
icon colours go through icon-class with two unlayered application-like
classes, which the sample's comment names, and the fields' and date
picker's widths are inline styles now that style reaches their roots.
The radio hint said "from sm"; it is medium.

showcase.css keeps only the frame and the foundation specimens; its
header describes the file instead of the batches that wrote it. The
tests reject a showcase hook or a class outside md-* and the named
application classes in any example, a showcase.css selector outside
its own hooks, and a hook no showcase view renders.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/communication.blade.php

@@ -13,7 +13,7 @@
             <x-badge value="Archived" color="neutral" outline />
             <span style="position: relative; display: inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
             <x-badge tonal color="tertiary"><x-icon name="bolt" filled optical="20" size="12" /> Pro</x-badge>
-            <x-badge value="Beta" tonal color="plain" data-md-showcase-badge-plain />
+            <x-badge value="Beta" tonal color="plain" style="background-color: var(--md-sys-color-primary-fixed); color: var(--md-sys-color-on-primary-fixed);" />
             BLADE,
         'Snackbars' => <<<'BLADE'
             <x-row gap="space200" wrap align="center" x-data>
@@ -33,7 +33,7 @@
 
                 <p class="md-type-body-md md-ink-variant">
                     A description makes the snackbar 68px, M3's two-line height; below <code>medium</code> the action wraps under the text.
-                    Press <kbd class="md-type-label-md" data-md-showcase-kbd>Alt</kbd>&nbsp;+&nbsp;<kbd class="md-type-label-md" data-md-showcase-kbd>G</kbd> to move the focus to a snackbar that has an action.
+                    Press <kbd class="md-type-label-md" style="border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container-highest); padding: 0 var(--md-sys-measurement-space75);">Alt</kbd>&nbsp;+&nbsp;<kbd class="md-type-label-md" style="border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container-highest); padding: 0 var(--md-sys-measurement-space75);">G</kbd> to move the focus to a snackbar that has an action.
                 </p>
             </x-stack>
             BLADE,
@@ -41,7 +41,7 @@
             <x-button icon="content_copy" tooltip="Copy link" />
             <x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
             <x-tooltip text="Expires in 3 days" side="right">
-                <span tabindex="0" class="md-type-body-md md-ink-variant md-focus-ring" data-md-showcase-focus-demo>holiday-photos.zip</span>
+                <span tabindex="0" class="md-type-body-md md-ink-variant md-focus-ring" style="border-radius: var(--md-sys-shape-corner-xs);">holiday-photos.zip</span>
             </x-tooltip>
             BLADE,
         'Rich tooltips' => <<<'BLADE'
@@ -89,11 +89,11 @@
                 <x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file.">
                     <x-slot:illustration style="color: var(--md-sys-color-primary)">
                         <svg style="width: 128px; height: 128px" viewBox="0 0 120 120" fill="none" aria-hidden="true">
-                            <circle cx="60" cy="60" r="56" data-md-showcase-illustration="container" />
+                            <circle cx="60" cy="60" r="56" style="fill: var(--md-sys-color-primary-container)" />
                             <path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
                             <circle cx="28" cy="86" r="7" fill="currentColor" />
-                            <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" data-md-showcase-illustration="accent" />
-                            <circle cx="90" cy="30" r="4" data-md-showcase-illustration="on-accent" />
+                            <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" style="fill: var(--md-sys-color-tertiary)" />
+                            <circle cx="90" cy="30" r="4" style="fill: var(--md-sys-color-on-tertiary)" />
                         </svg>
                     </x-slot:illustration>
                     <x-slot:actions>