Cycle ui.sh designs

gistfile1.txt

(() => {
  const host = () => document.querySelector('uidotsh-picker');
  const btn  = dir => host()?.shadowRoot?.querySelector(`button[data-nav][data-${dir}]`);
  const cycle = dir => {
    const b = btn(dir);
    if (!b) return;
    b.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true }));
  };

  window.uiNext = () => cycle('next');
  window.uiPrev = () => cycle('previous');                      

  if (window.__uiPickerKeydown) {
    window.removeEventListener('keydown', window.__uiPickerKeydown, true);
  }                                                             
  window.__uiPickerKeydown = e => {
    if (e.target.closest('input, textarea, [contenteditable], select')) return;
    if (e.key === '[') { e.preventDefault(); window.uiNext(); }
    if (e.key === ']') { e.preventDefault(); window.uiPrev(); }
  };
  window.addEventListener('keydown', window.__uiPickerKeydown, true);
  console.log('ui picker: [ = next, ] = prev');
})();