Close the design guard's family-table gaps on real application markup

Plan step 41 review: run over SealShare's and ReStride's views, family (i)
missed about a quarter of the class tokens, most of them 1.x's own
utilities (type-body-md, text-meta, rounded-corner-lg, focus-ring, link)
and common Tailwind families (relative, inset-0, z-10, overflow-hidden,
border, opacity-50, shrink-0, -mx-4, cursor-pointer, font-mono). Each now
has a hint, and the ones with a layout component name its prop: gap-4 is
gap="space200" (16px), a step between two of M3's names both, items-center
align="center", grid-cols-3 :columns="3"; variants say which selector or
media query replaces them. Shapes are tightened to real Tailwind values,
so an application class such as content-header or p-card is not matched.

Class lists are also read from wire:*.class, x-transition:*, unquoted
:class keys, double-quoted PHP strings, 'class' => '…' and plain PHP
files; a string compared in a condition (view === 'grid') is skipped,
and each token carries its own line in a multi-line list.

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 08:43:29 +02:00
co-authored by Claude Opus 5
parent d5972b8ddb
commit 9595722f35
10 changed files with 348 additions and 108 deletions
@@ -1,5 +1,5 @@
<div class="rounded-none rounded-xs rounded-sm rounded-md rounded-lg">
<span class="rounded-xl rounded-2xl rounded-3xl rounded-4xl rounded-full"></span>
<span class="rounded-t-lg rounded-se-2xl"></span>
<span class="rounded-corner-lg rounded-corner-xxl rounded-corner-full">M3's own are fine</span>
<span class="md-type-body-md" style="border-radius: var(--md-sys-shape-corner-lg)">M3's own are fine</span>
</div>
@@ -1,4 +1,4 @@
<div class="shadow-2xs shadow-xs shadow-sm shadow-md">
<span class="shadow-lg shadow-xl shadow-2xl"></span>
<span class="shadow-elevation-1 shadow-elevation-3 shadow-elevation-5">M3's own are fine</span>
<span class="md-type-body-md" style="box-shadow: var(--md-sys-elevation-1)">M3's own are fine</span>
</div>
@@ -1,4 +1,4 @@
<div class="ease-linear ease-in ease-out ease-in-out">
<span class="duration-75 duration-300 duration-1000"></span>
<span class="ease-standard ease-spatial-fast ease-effects-default duration-(--md-sys-motion-effects-fast-duration)">M3's own are fine</span>
<span class="md-type-body-md">M3's own are fine</span>
</div>
@@ -3,5 +3,5 @@
<span class="font-semibold font-bold font-extrabold font-black"></span>
<span class="leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose leading-6"></span>
<span class="tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest"></span>
<span class="type-body-md type-title-lg type-emphasized-label-lg">M3's own are fine</span>
<span class="md-type-body-md md-type-title-lg md-type-emphasized-label-lg">M3's own are fine</span>
</div>
@@ -1,3 +1,4 @@
<div class="top-[10px] grid-cols-[1fr_2fr]">
<span class="flex!"></span>
</div>
<div class="[--material-bottom-bar:5rem] [font-variation-settings:'ROND'_100]"></div>
@@ -0,0 +1,8 @@
<div x-data="{ view: 'grid' }" :class="{ 'is-open': open, hidden: !open, 'md-ink': view === 'grid' }" wire:loading.class="opacity-50"
x-transition:enter="transition ease-out" x-transition:enter-start="scale-95">
<ul @class(["gap-2", 'share-list', 'md-ink-quiet' => $status === 'hidden', 'md-ink' => isActive('block')])
{{ $attributes->merge(['class' => 'mt-2']) }}>
<li class="md-truncate
flex">Row</li>
</ul>
</div>
@@ -0,0 +1,3 @@
<div class="type-body-md type-emphasized-title-lg focus-ring state-layer link">
<span class="rounded-corner-lg rounded-t-corner-xl-increased shadow-elevation-2 ease-spatial-fast ease-emphasized-decelerate duration-(--md-sys-motion-spatial-fast-duration)"></span>
</div>
@@ -0,0 +1,4 @@
<div class="relative inset-0 -top-2 z-10 overflow-hidden shrink-0 col-start-2 justify-self-end container">
<span class="border border-t-2 rounded shadow outline-none ring-2 transition opacity-50 -rotate-45 cursor-pointer select-none"></span>
<span class="aspect-video object-cover font-mono font-sans underline uppercase text-end list-disc table bg-clip-text"></span>
</div>