Versie 0.3.3

client/ui/hint.js

@@ -1,4 +1,4 @@
-// Generated, do not edit. sha256:618e9d10819427320df9cea13ee26eca05db3121f4e69b541d2a8a431e85957a
+// Generated, do not edit. sha256:2cb6efb613791caa2b77487d43b44b223a6a6e006b7a374e8ed1b4c6e8f50169
 import { esc } from './escape.js';
 
 const MOUNT = 'page-hint';
@@ -47,8 +47,24 @@ function watchFit(mount) {
     panel.classList.remove('is-wide');
     if (panel.scrollHeight > panel.clientHeight + 1) panel.classList.add('is-wide');
   };
+  const close = () => {
+    const open = mount.querySelector('.hint.is-open');
+    open?.classList.remove('is-open');
+    open?.querySelector('.hint-btn')?.setAttribute('aria-expanded', 'false');
+  };
   mount.addEventListener('pointerenter', fit);
   mount.addEventListener('focusin', fit);
+  mount.addEventListener('click', (e) => {
+    const btn = e.target.closest?.('.hint-btn');
+    if (!btn) return;
+    const hint = btn.closest('.hint');
+    if (hint.classList.contains('is-open')) { close(); return; }
+    hint.classList.add('is-open');
+    btn.setAttribute('aria-expanded', 'true');
+    fit();
+  });
+  document.addEventListener('click', (e) => { if (!mount.contains(e.target)) close(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
 }
 
 function row(r) {