feat(gallery): per-state color choices on the slide toggle

Two chip groups next to the readout: the ON track picks amber or green, the OFF track picks dark or red (red gets cream engraving for contrast). Track colors ride CSS variables with the shipped look as fallback; the thumb never changes — state lives in the revealed track, like the hardware.

1 files changed, 27 insertions, 3 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 410e559..42aa5e3 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -122,14 +122,16 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
    Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
 .switch{display:inline-flex;vertical-align:middle;align-items:center;justify-content:space-between;
   width:52px;height:23px;border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
-  background:linear-gradient(180deg,#15130f,#242019);border:1px solid var(--slate);
+  background:var(--sw-off-bg,linear-gradient(180deg,#15130f,#242019));
+  border:1px solid var(--sw-off-brd,var(--slate));
   box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
 .switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
-  font-family:var(--mono);color:var(--dim)}
+  font-family:var(--mono);color:var(--sw-off-ink,var(--dim))}
 .switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
   background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a);
   box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
-.switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);
+.switch.on{background:var(--sw-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));
+  border-color:var(--sw-on-brd,var(--gold-hi));
   padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
 .switch.on::before{content:"ON";order:1;color:var(--panel)}
 .switch.on::after{order:2}
@@ -4192,6 +4194,28 @@ screenChips('R31',$('radar'),['amber','green','red','blue','vfd'],'amber');
 screenChips('N11',$('scopep').closest('.scope'),['green','amber','red','blue','vfd'],'green');
 BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
   if(rd)rd.closest('.card').querySelector('.stagew').classList.add('boost');});
+
+/* slide-toggle color choices: track color per state, thumb never changes */
+(function(){const sw=document.querySelector('.switch');if(!sw)return;
+  const cardEl=sw.closest('.card');
+  const ON_OPTS={amber:{dot:'var(--gold-hi)',vars:{'--sw-on-bg':'linear-gradient(180deg,var(--amber-grad-top),var(--gold))','--sw-on-brd':'var(--gold-hi)'}},
+    green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f'}}};
+  const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)','--sw-off-ink':'var(--dim)'}},
+    red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)','--sw-off-ink':'var(--cream)'}}};
+  const row=document.createElement('div'); row.className='famchips';
+  const group=(label,opts,def)=>{
+    const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab);
+    const chips=[];
+    for(const [name,o] of Object.entries(opts)){
+      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',()=>{
+        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);}};
+  group('on',ON_OPTS,'amber');
+  group('off',OFF_OPTS,'dark');
+  cardEl.insertBefore(row,cardEl.querySelector('.wrd'));})();
 </script>
 </body>
 </html>