fix(gallery): one row per option group

All four toggle option groups shared one wrapping row, so OFF TEXT read as ambiguous between the chips on either side. Each group now renders as its own labeled row with a fixed label column, and single-group cards keep their shape.

1 files changed, 6 insertions, 5 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index a4a4264..42ba252 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -450,7 +450,8 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 
 /* screen-family chips (alt phosphor / tube colors per screen widget) */
 .famchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:1px}
-.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-right:2px}
+.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
+  margin-right:2px;min-width:64px}
 .famchips .fc{width:13px;height:13px;border-radius:50%;cursor:pointer;
   border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 3px rgba(0,0,0,.5)}
 .famchips .fc.on{outline:2px solid var(--silver);outline-offset:1px}
@@ -4260,8 +4261,8 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
     dark:{dot:'#2c2824',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#4a453e,#16130f)'}},
     chrome:{dot:'#9aa2b4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)'}},
     brass:{dot:'#b8944a',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)'}}};
-  const row=document.createElement('div'); row.className='famchips';
   const group=(label,opts,def)=>{
+    const row=document.createElement('div'); row.className='famchips';
     const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab);
     const chips=[];
     for(const [name,o] of Object.entries(opts)){
@@ -4270,12 +4271,12 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
       b.addEventListener('click',()=>{
         for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v);
         chips.forEach(x=>x.classList.toggle('on',x===b));});
-      row.appendChild(b);}};
+      row.appendChild(b);}
+    cardEl.querySelector('.opts').appendChild(row);};
   group('on',ON_OPTS,'amber');
   group('off',OFF_OPTS,'dark');
   group('off text',OFFTXT_OPTS,'white');
-  group('thumb',THUMB_OPTS,'light');
-  cardEl.querySelector('.opts').appendChild(row);})();
+  group('thumb',THUMB_OPTS,'light');})();
 </script>
 </body>
 </html>