1 files changed, 19 insertions, 3 deletions

diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js
index 1465e46..d194068 100644
--- a/docs/prototypes/widgets.js
+++ b/docs/prototypes/widgets.js
@@ -234,17 +234,33 @@ GW.knob = function (host, opts = {}) {
   return { el: k, get: () => val, set };
 };
 
-/* 06 segmented selector — pick one of a few */
+/* 06 segmented selector — pick one of a few. opts.accent picks the lit-segment
+   color from GW.segmented.STYLES (amber / green / red); defaults match the
+   stylesheet fallbacks. setStyle(axis, name) restyles a live instance. */
 GW.segmented = function (host, opts = {}) {
   const onChange = opts.onChange || noop;
   const items = opts.items || ['TIMER', 'ALARM', 'POMO'];
   const seg = document.createElement('div'); seg.className = 'seg'; host.appendChild(seg);
+  const setStyle = (axis, name) => {
+    const o = (GW.segmented.STYLES[axis] || {})[name];
+    if (!o) return;
+    for (const [k, v] of Object.entries(o.vars)) seg.style.setProperty(k, v);
+  };
+  setStyle('accent', opts.accent || 'amber');
   const btns = items.map(t => { const b = document.createElement('button'); b.textContent = t; seg.appendChild(b); return b; });
   let idx;
   const set = i => { idx = i; btns.forEach((b, j) => b.classList.toggle('on', j === i)); onChange(i, items[i]); };
   btns.forEach((b, i) => b.addEventListener('click', () => set(i)));
   set(opts.active || 0);
-  return { el: seg, get: () => idx, set };
+  return { el: seg, get: () => idx, set, setStyle };
+};
+/* named styles per axis: dot = swatch color for pickers, vars = --seg-* overrides */
+GW.segmented.STYLES = {
+  accent: {
+    amber: { dot: 'var(--gold-hi)', vars: { '--seg-on-bg': 'linear-gradient(180deg,var(--amber-grad-top),var(--gold))', '--seg-on-ink': 'var(--panel)' } },
+    green: { dot: '#8fb944', vars: { '--seg-on-bg': 'linear-gradient(180deg,#a9c95f,var(--pass))', '--seg-on-ink': 'var(--panel)' } },
+    red: { dot: 'var(--fail)', vars: { '--seg-on-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--seg-on-ink': 'var(--panel)' } },
+  },
 };
 
 /* 07 chip toggle — inline binary inside a line of text */
@@ -4041,7 +4057,7 @@ const GW_CSS = `
 .seg{display:flex;border:1px solid #33302b;border-radius:8px;overflow:hidden}
 .seg button{font:inherit;font-size:11px;color:var(--silver);background:#191715;border:0;border-right:1px solid #33302b;padding:7px 11px;cursor:pointer}
 .seg button:last-child{border-right:0}
-.seg button.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));color:var(--panel);font-weight:700}
+.seg button.on{background:var(--seg-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));color:var(--seg-on-ink,var(--panel));font-weight:700}
 
 /* engraved section label */
 .engrave{width:180px;color:var(--steel);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;