NB - Native Browser Bridge

@@ -22,8 +22,24 @@  <section><h2>Inputs</h2>  <input id="text-input" placeholder="type here">- <select id="select-input"><option value="">pick</option><option value="alpha">Alpha</option><option value="beta">Beta</option></select>- <input id="date-input" type="date">+ <label for="select-input">Battery Select</label>+ <select id="select-input" aria-label="Battery Select"><option value="">pick</option><option value="alpha">Alpha</option><option value="beta">Beta</option></select>+ <span style="margin-left:18px">Battery Date</span>+ <span id="seg-date" aria-label="Battery Date">+  <span class="seg" id="seg-m" role="spinbutton" tabindex="0" aria-label="month" data-len="2">mm</span>/<span class="seg" id="seg-d" role="spinbutton" tabindex="0" aria-label="day" data-len="2">dd</span>/<span class="seg" id="seg-y" role="spinbutton" tabindex="0" aria-label="year" data-len="4">yyyy</span>+ </span>+ <span id="date-note"></span>+ <input id="date-input" type="date" style="display:none">+ <script>+ // minimal react-aria-style segmented date: each keydown digit appends to the focused segment,+ // focus advances when the segment is full, combined ISO value lands in #date-note.+ (function(){const segs=['seg-m','seg-d','seg-y'].map(i=>document.getElementById(i));const buf={};+  segs.forEach((el,ix)=>{buf[el.id]='';el.addEventListener('keydown',e=>{ if(!/^[0-9]$/.test(e.key)) return;+   buf[el.id]+=e.key; el.textContent=buf[el.id];+   if(buf[el.id].length>=+el.dataset.len && ix<segs.length-1) segs[ix+1].focus();+   if(buf['seg-m'].length===2&&buf['seg-d'].length===2&&buf['seg-y'].length===4)+    document.getElementById('date-note').textContent=buf['seg-y']+'-'+buf['seg-m']+'-'+buf['seg-d'];});});})();+ </script>  <input id="file-input" type="file">  <span id="file-note"></span>  <script>document.getElementById('file-input').addEventListener('change',e=>{document.getElementById('file-note').textContent='file:'+(e.target.files[0]||{}).name})</script>