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/buttons.blade.php

@@ -60,8 +60,8 @@
         'Loading indicator' => <<<'BLADE'
             <x-loading />
             <x-loading contained />
-            <x-loading data-md-showcase-loading="lg" label="Uploading" />
-            <x-loading contained data-md-showcase-loading="sm" />
+            <x-loading label="Uploading" style="width: 96px; height: 96px; color: var(--md-sys-color-tertiary);" />
+            <x-loading contained style="width: 32px; height: 32px;" />
             BLADE,
         'Button groups: standard (press a button) and connected' => <<<'BLADE'
             <x-button-group label="Standard" size="md">
@@ -161,13 +161,13 @@
             <x-fab icon="add" label="New share" size="lg" color="tertiary" collapse-on-scroll />
             BLADE,
         'FAB menu' => <<<'BLADE'
-            <div data-md-showcase-fab-menu-demo>
+            <x-row justify="end" align="end" style="width: 100%; height: 288px;">
                 <x-fab-menu label="New">
                     <x-fab-menu-item label="Upload files" icon="upload_file" />
                     <x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" />
                     <x-fab-menu-item label="Paste text" icon="content_paste" />
                 </x-fab-menu>
-            </div>
+            </x-row>
             BLADE,
     ];
 @endphp