1 files changed, 6 insertions, 1 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 168a50c..9979a85 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -152,7 +152,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 .switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
   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);
+  background:var(--sw-thumb,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:var(--sw-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));
   border-color:var(--sw-on-brd,var(--gold-hi));
@@ -4253,6 +4253,10 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
     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)','--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 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:'var(--silver)',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#eef1f8,#8b90a0)'}},
+    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 lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab);
@@ -4266,6 +4270,7 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
       row.appendChild(b);}};
   group('on',ON_OPTS,'amber');
   group('off',OFF_OPTS,'dark');
+  group('thumb',THUMB_OPTS,'light');
   cardEl.querySelector('.opts').appendChild(row);})();
 </script>
 </body>