@bbaker_tngeo, this can be accomplished in a single arcade pop-up element in the new Map Viewer. Below is a screenshot of the UI and the code I used in the arcade element.
ChrisFox_0-1680806386418.png
var projphase = $feature.projphase;
var activeColor = '#1987bb';
var inactiveColor = '#DDDDDD'
var color1 = IIf(projphase == 'PreDesign', activeColor, inactiveColor);
var color2 = IIf(projphase == 'Design', activeColor, inactiveColor);
var color3 = IIf(projphase == 'Construction', activeColor, inactiveColor);
var color4 = IIf(projphase == 'Closeout', activeColor, inactiveColor);
return {
type : 'text',
text : `<b>Phase:</b>
<table style="border-collapse: separate; border-spacing: 2px 4px; width: 100%; table-layout: fixed; margin: 0px -2px; max-width: 500px;">
<tbody>
<tr height="16">
<td style="background-color:${color1}; width: 25%"></td>
<td style="background-color:${color2}; width: 25%"></td>
<td style="background-color:${color3}; width: 25%"></td>
<td style="background-color:${color4}; width: 25%"></td>
</tr>
<tr height="24" style="text-align: center;">
<td style="width: 25%;">PreDesign</td>
<td style="width: 25%;">Design</td>
<td style="width: 25%;">Construction</td>
<td style="width: 25%;">Closeout</td>
</tr>
</tbody>
</table>`
}