fix(gallery): option groups as inline capsules

One row per group wasted vertical space; groups are now bordered capsules — label plus choices encircled together — flowing inline with gaps and wrapping as needed. Selection exclusivity is scoped inside each capsule.

1 files changed, 16 insertions, 12 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 42ba252..cb558bc 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -448,10 +448,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
   border-color:var(--gold-hi);font-weight:700}
 .vk.tlk .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)}
 
-/* 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;min-width:64px}
+/* option chips: each group is an encircled capsule (label + choices); groups flow with spacing */
+.famchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:1px}
+.fgroup{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;
+  border:1px solid #2e2b26;border-radius:10px;background:rgba(255,255,255,.015)}
+.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-right:2px}
 .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}
@@ -802,14 +803,15 @@ const SCREEN_FAMS={
 function screenChips(no,el,fams,def){
   const cardEl=el.closest('.card'); if(!cardEl)return;
   const row=document.createElement('div'); row.className='famchips';
-  const lab=document.createElement('span'); lab.className='lab'; lab.textContent='screen'; row.appendChild(lab);
+  const g=document.createElement('span'); g.className='fgroup'; row.appendChild(g);
+  const lab=document.createElement('span'); lab.className='lab'; lab.textContent='screen'; g.appendChild(lab);
   fams.forEach(f=>{const b=document.createElement('span');
     b.className='fc'+(f===def?' on':''); b.style.background=SCREEN_FAMS[f]['--scr-hi']; b.title=f;
     b.addEventListener('click',()=>{
       for(const [k,v] of Object.entries(SCREEN_FAMS[f])) el.style.setProperty(k,v);
-      row.querySelectorAll('.fc').forEach(x=>x.classList.toggle('on',x===b));
+      g.querySelectorAll('.fc').forEach(x=>x.classList.toggle('on',x===b));
       setRd(no,'screen '+f);});
-    row.appendChild(b);});
+    g.appendChild(b);});
   cardEl.querySelector('.opts').appendChild(row);
 }
 /* ---- per-card spec sheets ----
@@ -4261,9 +4263,10 @@ 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 g=document.createElement('span'); g.className='fgroup';
+    const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; g.appendChild(lab);
     const chips=[];
     for(const [name,o] of Object.entries(opts)){
       const b=document.createElement('span'); b.className='fc'+(name===def?' on':'');
@@ -4271,12 +4274,13 @@ 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);}
-    cardEl.querySelector('.opts').appendChild(row);};
+      g.appendChild(b);}
+    row.appendChild(g);};
   group('on',ON_OPTS,'amber');
   group('off',OFF_OPTS,'dark');
   group('off text',OFFTXT_OPTS,'white');
-  group('thumb',THUMB_OPTS,'light');})();
+  group('thumb',THUMB_OPTS,'light');
+  cardEl.querySelector('.opts').appendChild(row);})();
 </script>
 </body>
 </html>