feat(gallery): give the segmented selector amber, green, and red accents

The lit segment rides new --seg-on-* vars with the shipped amber as the stylesheet fallback, and GW.segmented gains opts.accent plus setStyle backed by GW.segmented.STYLES, the same shape as the slide toggle.

Card 06 is the third chips demo rig, so the per-card IIFEs collapse into one styleChips(no, STYLES, AXES) helper serving cards 01, R05, and 06.

1 files changed, 11 insertions, 26 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 63695df..654ffd5 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -1131,7 +1131,7 @@ card(C,'05','Rotary knob',
   '<b>dial in a value.</b> Volume/gain the analog way. Drag up/down to turn; readout shows the level.');
 card(C,'06','Segmented selector',
   (st,rd)=>GW.segmented(st,{onChange:(i,t)=>rd(t)}),
-  '<b>pick one of a few.</b> Timer type, layout mode. Click a segment; readout names the choice.');
+  '<b>pick one of a few.</b> Timer type, layout mode. Click a segment; readout names the choice. The lit segment ships in amber, green, or red — the accent chips below switch it.');
 card(C,'07','Chip toggle',
   (st,rd)=>GW.chipToggle(st,{on:true,onChange:(v,t)=>rd(t)}),
   '<b>inline binary.</b> A soft toggle inside a line of text. Click to flip; gold when on.');
@@ -1584,43 +1584,28 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
     el.innerHTML=el.innerHTML.replace(/\b(R\d{2}|N\d{2})\b/g,
       m=>ids.has(m)?`<a class="xref" href="#card-${m}">${m}</a>`:m);});})();
 
-/* slide-toggle style chips: demo rig for GW.slideToggle's constructor opts —
-   the named styles live in GW.slideToggle.STYLES; chips drive setStyle on the live instance */
-(function(){const h=$('card-01')?.gw;if(!h)return;
+/* style chips: shared demo rig for builders with constructor style opts —
+   reads a builder's STYLES table and drives setStyle on the live card instance */
+function styleChips(no,STYLES,AXES){
+  const h=$('card-'+no)?.gw; if(!h)return;
   const cardEl=h.el.closest('.card');
   const row=document.createElement('div'); row.className='famchips';
-  const AXES=[['on','on','amber'],['off','off','dark'],['off text','offText','white'],['thumb','thumb','light']];
   for(const [label,axis,def] of AXES){
     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(GW.slideToggle.STYLES[axis])){
+    for(const [name,o] of Object.entries(STYLES[axis])){
       const b=document.createElement('span'); b.className='fc'+(name===def?' on':'');
       b.style.background=o.dot; b.title=name; chips.push(b);
       b.addEventListener('click',()=>{h.setStyle(axis,name);
         chips.forEach(x=>x.classList.toggle('on',x===b));});
       g.appendChild(b);}
     row.appendChild(g);}
-  cardEl.querySelector('.opts').appendChild(row);})();
-
-/* filter-bank style chips: demo rig for GW.filterBank's constructor opts —
-   the named skins live in GW.filterBank.STYLES; chips drive setStyle on the live instance */
-(function(){const h=$('card-R05')?.gw;if(!h)return;
-  const cardEl=h.el.closest('.card');
-  const row=document.createElement('div'); row.className='famchips';
-  const AXES=[['panel','panel','silver'],['shape','caps','block'],['color','capColor','black']];
-  for(const [label,axis,def] of AXES){
-    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(GW.filterBank.STYLES[axis])){
-      const b=document.createElement('span'); b.className='fc'+(name===def?' on':'');
-      b.style.background=o.dot; b.title=name; chips.push(b);
-      b.addEventListener('click',()=>{h.setStyle(axis,name);
-        chips.forEach(x=>x.classList.toggle('on',x===b));});
-      g.appendChild(b);}
-    row.appendChild(g);}
-  cardEl.querySelector('.opts').appendChild(row);})();
+  cardEl.querySelector('.opts').appendChild(row);
+}
+styleChips('01',GW.slideToggle.STYLES,[['on','on','amber'],['off','off','dark'],['off text','offText','white'],['thumb','thumb','light']]);
+styleChips('R05',GW.filterBank.STYLES,[['panel','panel','silver'],['shape','caps','block'],['color','capColor','black']]);
+styleChips('06',GW.segmented.STYLES,[['accent','accent','amber']]);
 
 /* final tally pass: setV fires per card during build, but each card is still
    detached at that moment, so the running counts lag by one — recount now */