refactor(gallery): slide-toggle style options become GW.slideToggle opts

The four style axes (on/off track, off engraving, thumb) move from a page-side chip rig into named constructor opts backed by GW.slideToggle.STYLES, with a setStyle handle method for live restyling. The gallery chips stay as a demo rig driving that method. Defaults match the stylesheet fallbacks, so a bare GW.slideToggle renders unchanged.

1 files changed, 9 insertions, 24 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 2f703e8..30bf086 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -1523,38 +1523,23 @@ 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 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)','--sw-on-ink':'var(--panel)'}},
-    green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f','--sw-on-ink':'var(--panel)'}},
-    dark:{dot:'#242019',vars:{'--sw-on-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-on-brd':'var(--slate)','--sw-on-ink':'var(--cream)'}}};
-  const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)'}},
-    red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)'}}};
-  const OFFTXT_OPTS={white:{dot:'var(--cream)',vars:{'--sw-off-ink':'var(--cream)'}},
-    red:{dot:'#e0523a',vars:{'--sw-off-ink':'#e0523a'}},
-    black:{dot:'#14110e',vars:{'--sw-off-ink':'#14110e'}}};
-  const THUMB_OPTS={light:{dot:'#d8d2c4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)'}},
-    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)'}}};
+/* 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;
+  const cardEl=h.el.closest('.card');
   const row=document.createElement('div'); row.className='famchips';
-  const group=(label,opts,def)=>{
+  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(opts)){
+    for(const [name,o] of Object.entries(GW.slideToggle.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',()=>{
-        for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v);
+      b.addEventListener('click',()=>{h.setStyle(axis,name);
         chips.forEach(x=>x.classList.toggle('on',x===b));});
       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');
+    row.appendChild(g);}
   cardEl.querySelector('.opts').appendChild(row);})();
 </script>
 </body>