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>