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

This commit is contained in:

Andreas Reinhold / reini

2026-09-15 06:21:18 +02:00

co-authored by

Claude Opus 5

parent cd47aa4b0f

commit ebdcdb82b5

15 changed files with 152 additions and 374 deletions

									
										resources/views/showcase/sections/pickers.blade.php
									
		+1
		-1
	
												View File
												
				@@ -64,7 +64,7 @@

				                    <x-datepicker label="Disabled" value="2026-09-13" disabled />

				                    <x-datepicker label="Read-only" value="2026-09-13" readonly />

				                    <x-row gap="space125" wrap align="center">

				                        <x-datepicker size="sm" aria-label="From" class="showcase-w-sm" />

				                        <x-datepicker size="sm" aria-label="From" style="width: 192px;" />

				                    </x-row>

				                </x-stack>

				            </x-grid>