@hubpav/hwio-web-runtime 0.9.0 → 0.10.0

package/dist/dropdown.d.ts

@@ -7,6 +7,6 @@
  * - Escape, with focus back on its summary when focus was inside;
  * - focus leaving it (Tab past the last item);
  * - another dropdown opening, or another runtime announcing a popup (HWioHeader's mega panels and
- *   drawer, through `hwio:popupopen`). Opening a dropdown announces it, so an open mega panel closes.
+ *   small-screen menu, through `hwio:popupopen`). Opening a dropdown announces it, so an open mega panel closes.
  */
 export declare function hwioDropdownRuntime(): import("./mount.js").HWioBinder;

package/dist/dropdown.js

@@ -9,7 +9,7 @@ import { hwioAnnouncePopup, hwioOnPopup } from './popup.js';
  * - Escape, with focus back on its summary when focus was inside;
  * - focus leaving it (Tab past the last item);
  * - another dropdown opening, or another runtime announcing a popup (HWioHeader's mega panels and
- *   drawer, through `hwio:popupopen`). Opening a dropdown announces it, so an open mega panel closes.
+ *   small-screen menu, through `hwio:popupopen`). Opening a dropdown announces it, so an open mega panel closes.
  */
 export function hwioDropdownRuntime() {
     let controller = null;

package/dist/nav.d.ts

@@ -1,12 +1,13 @@
 /**
- * Header behaviours: drives the DaisyUI drawer from its [data-hwio-drawer-toggle] buttons (Enter and
- * Space work because they are buttons; aria-expanded follows the checkbox, focus moves to the panel's
- * first control on open and back to the trigger on close, Escape closes, a followed link closes),
- * opens HWioHeader's mega panels
+ * Header behaviours: opens HWioHeader's small-screen menu from its [data-hwio-menu-toggle] button into its
+ * [data-hwio-menu-panel] sheet (aria-expanded and the button's label follow; the page is locked without
+ * moving, its scrollbar's width kept as padding, and made inert behind the sheet; focus moves to the first
+ * item without scrolling and back to the toggle on close; the toggle, Escape, a followed link, another
+ * popup and a resize to the desktop layout close it), opens HWioHeader's mega panels
  * ([data-hwio-mega-trigger] buttons and their [data-hwio-mega-panel]; hover with intent on pointer
  * devices, click, ArrowDown into the panel, Escape / outside click / focus leaving close; one at a
  * time; the click that follows a hover-open keeps the panel open, the next one closes it), and marks the nav link whose section is in view ([data-hwio-scrollspy] nav with same-page
- * anchors) with aria-current="location". Opening a mega panel or the drawer announces it
+ * anchors) with aria-current="location". Opening a mega panel or the small-screen menu announces it
  * (`hwio:popupopen`, popup.ts), so an open dropdown (HWioLanguageSwitcher) closes; a dropdown that
  * opens closes the mega panels the same way.
  */

package/dist/nav.js

@@ -1,21 +1,26 @@
 import { hwioMount } from './mount.js';
 import { hwioAnnouncePopup, hwioOnPopup } from './popup.js';
 /**
- * Header behaviours: drives the DaisyUI drawer from its [data-hwio-drawer-toggle] buttons (Enter and
- * Space work because they are buttons; aria-expanded follows the checkbox, focus moves to the panel's
- * first control on open and back to the trigger on close, Escape closes, a followed link closes),
- * opens HWioHeader's mega panels
+ * Header behaviours: opens HWioHeader's small-screen menu from its [data-hwio-menu-toggle] button into its
+ * [data-hwio-menu-panel] sheet (aria-expanded and the button's label follow; the page is locked without
+ * moving, its scrollbar's width kept as padding, and made inert behind the sheet; focus moves to the first
+ * item without scrolling and back to the toggle on close; the toggle, Escape, a followed link, another
+ * popup and a resize to the desktop layout close it), opens HWioHeader's mega panels
  * ([data-hwio-mega-trigger] buttons and their [data-hwio-mega-panel]; hover with intent on pointer
  * devices, click, ArrowDown into the panel, Escape / outside click / focus leaving close; one at a
  * time; the click that follows a hover-open keeps the panel open, the next one closes it), and marks the nav link whose section is in view ([data-hwio-scrollspy] nav with same-page
- * anchors) with aria-current="location". Opening a mega panel or the drawer announces it
+ * anchors) with aria-current="location". Opening a mega panel or the small-screen menu announces it
  * (`hwio:popupopen`, popup.ts), so an open dropdown (HWioLanguageSwitcher) closes; a dropdown that
  * opens closes the mega panels the same way.
  */
 export function hwioNavRuntime() {
     let controller = null;
     let observer = null;
+    let closeMenus = [];
     function cleanup() {
+        // A page swap with the menu open must not leave the next page locked or inert.
+        closeMenus.forEach((close) => close());
+        closeMenus = [];
         controller?.abort();
         controller = null;
         observer?.disconnect();
@@ -25,46 +30,89 @@ export function hwioNavRuntime() {
         cleanup();
         controller = new AbortController();
         const { signal } = controller;
-        document.querySelectorAll('input.drawer-toggle').forEach((input) => {
-            const side = input.parentElement?.querySelector('.drawer-side') ?? null;
-            const toggles = Array.from(document.querySelectorAll(`[data-hwio-drawer-toggle="${input.id}"]`));
-            const trigger = toggles.find((t) => !side?.contains(t)) ?? null;
-            const sync = () => toggles.forEach((t) => t.setAttribute('aria-expanded', String(input.checked)));
-            // DaisyUI reveals .drawer-side after a 100 ms visibility delay; retry per frame until the control takes focus.
-            const focusWhenVisible = (el, frames = 40) => {
-                if (!input.checked)
-                    return;
-                el.focus();
-                if (document.activeElement !== el && frames > 0)
-                    requestAnimationFrame(() => focusWhenVisible(el, frames - 1));
+        document.querySelectorAll('[data-hwio-menu-toggle]').forEach((toggle) => {
+            const panel = document.querySelector(`[data-hwio-menu-panel="${toggle.dataset.hwioMenuToggle}"]`);
+            if (!panel)
+                return;
+            const header = toggle.closest('header');
+            const root = document.documentElement;
+            const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+            const desktop = toggle.dataset.hwioMenuUntil ? window.matchMedia(`(min-width: ${toggle.dataset.hwioMenuUntil})`) : null;
+            let inerted = [];
+            let hideTimer = null;
+            const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
+            const label = (open) => {
+                const text = open ? toggle.dataset.hwioLabelClose : toggle.dataset.hwioLabelOpen;
+                if (text)
+                    toggle.setAttribute('aria-label', text);
             };
-            const apply = (restoreFocus) => {
-                sync();
-                if (input.checked) {
-                    if (side)
-                        hwioAnnouncePopup(side);
-                    const first = side?.querySelector('button, a[href], input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"])');
-                    if (first)
-                        focusWhenVisible(first);
+            // Lock the page where it is: overflow hidden on the root, its scrollbar's width kept as padding (so
+            // the layout keeps its width), and everything outside the header inert, walking up from the header.
+            const lock = (on) => {
+                if (on) {
+                    root.style.setProperty('--hwio-scrollbar', `${Math.max(0, window.innerWidth - root.clientWidth)}px`);
+                    root.classList.add('hwio-scroll-lock');
+                    for (let node = header; node && node.parentElement && node !== document.body; node = node.parentElement) {
+                        for (const sibling of Array.from(node.parentElement.children)) {
+                            if (sibling !== node && sibling instanceof HTMLElement && !sibling.inert && sibling.tagName !== 'SCRIPT') {
+                                sibling.inert = true;
+                                inerted.push(sibling);
+                            }
+                        }
+                    }
                 }
-                else if (restoreFocus) {
-                    trigger?.focus();
+                else {
+                    root.classList.remove('hwio-scroll-lock');
+                    root.style.removeProperty('--hwio-scrollbar');
+                    inerted.forEach((el) => { el.inert = false; });
+                    inerted = [];
                 }
             };
             const setOpen = (open, restoreFocus = true) => {
-                if (input.checked === open)
+                if (isOpen() === open)
                     return;
-                input.checked = open;
-                apply(restoreFocus);
+                toggle.setAttribute('aria-expanded', String(open));
+                label(open);
+                if (hideTimer) {
+                    clearTimeout(hideTimer);
+                    hideTimer = null;
+                }
+                if (open) {
+                    panel.hidden = false;
+                    lock(true);
+                    // One frame with the closed state rendered, so the sheet fades in instead of appearing.
+                    requestAnimationFrame(() => { if (isOpen())
+                        panel.dataset.state = 'open'; });
+                    hwioAnnouncePopup(panel);
+                    panel.querySelector('a[href], button, summary, input:not([type="hidden"])')?.focus({ preventScroll: true });
+                }
+                else {
+                    panel.dataset.state = 'closed';
+                    lock(false);
+                    const hide = () => { if (!isOpen())
+                        panel.hidden = true; };
+                    if (reduced.matches)
+                        hide();
+                    else
+                        hideTimer = setTimeout(hide, 200);
+                    if (restoreFocus)
+                        toggle.focus({ preventScroll: true });
+                }
             };
-            sync();
-            toggles.forEach((t) => t.addEventListener('click', () => setOpen(!input.checked), { signal }));
-            // Labels (the overlay) still flip the checkbox natively; follow them.
-            input.addEventListener('change', () => apply(true), { signal });
-            // A followed link closes the drawer without stealing focus from the navigation target (same-page anchors).
-            side?.querySelectorAll('a[href]').forEach((a) => a.addEventListener('click', () => setOpen(false, false), { signal }));
-            document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && input.checked)
+            closeMenus.push(() => { if (isOpen()) {
+                setOpen(false, false);
+                panel.hidden = true;
+            } });
+            toggle.addEventListener('click', () => setOpen(!isOpen()), { signal });
+            // A followed link closes the menu without stealing focus from the navigation target (same-page anchors).
+            panel.querySelectorAll('a[href]').forEach((a) => a.addEventListener('click', () => setOpen(false, false), { signal }));
+            document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isOpen())
                 setOpen(false); }, { signal });
+            desktop?.addEventListener('change', (e) => { if (e.matches)
+                setOpen(false, false); }, { signal });
+            // Another popup (the language dropdown in the bar) opened: close the menu unless it sits in the sheet.
+            hwioOnPopup((owner) => { if (owner !== panel && !panel.contains(owner))
+                setOpen(false, false); }, signal);
         });
         const triggers = Array.from(document.querySelectorAll('[data-hwio-mega-trigger]'));
         if (triggers.length) {
@@ -135,7 +183,7 @@ export function hwioNavRuntime() {
                 if (!pairs.some((p) => p.trigger.contains(node) || p.panel.contains(node)))
                     closeAll();
             }, { signal });
-            // Another popup (a language dropdown, the drawer) opened: close the panels unless it sits in one.
+            // Another popup (a language dropdown, the small-screen menu) opened: close the panels unless it sits in one.
             hwioOnPopup((owner) => {
                 if (!pairs.some((p) => p.panel === owner || p.panel.contains(owner)))
                     closeAll();

package/dist/popup.d.ts

@@ -1,6 +1,6 @@
 /**
  * One popup at a time across runtimes. A runtime that opens something which floats over the page
- * (HWioHeader's mega panel or drawer, a `details[data-hwio-dropdown]`) announces the element it
+ * (HWioHeader's mega panel or small-screen menu, a `details[data-hwio-dropdown]`) announces the element it
  * opened with `hwio:popupopen`; every other runtime closes what it has open unless that element is
  * the announced one or contains it. The runtimes stay independent: neither imports the other.
  */

package/dist/popup.js

@@ -1,6 +1,6 @@
 /**
  * One popup at a time across runtimes. A runtime that opens something which floats over the page
- * (HWioHeader's mega panel or drawer, a `details[data-hwio-dropdown]`) announces the element it
+ * (HWioHeader's mega panel or small-screen menu, a `details[data-hwio-dropdown]`) announces the element it
  * opened with `hwio:popupopen`; every other runtime closes what it has open unless that element is
  * the announced one or contains it. The runtimes stay independent: neither imports the other.
  */

package/dist/turnstile.d.ts

@@ -24,6 +24,10 @@ declare global {
  * Lazy explicit Turnstile: the third-party script loads on first form interaction (focus or
  * pointer-enter) and the widget id is stored on its form so the submit handler resets exactly
  * the token it consumed. Markup: <div class="cf-turnstile" data-sitekey="..."> inside a <form>.
+ *
+ * The widget takes the page's scheme when it renders, and Turnstile cannot change the theme of a
+ * rendered widget, so a switch of the site theme (hwio:themechange) redraws every widget in the
+ * new scheme; the redrawn widget issues a fresh token.
  */
 export declare function hwioTurnstileRuntime(): import("./mount.js").HWioBinder;
 /** Waits (bounded) for the lazily rendered widget to produce a token before the form is snapshotted. */

package/dist/turnstile.js

@@ -35,22 +35,51 @@ function loadApi() {
     });
     return window.__hwioTurnstileLoader;
 }
+function draw(api, container) {
+    return api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme(), size: widgetSize(container) });
+}
+function storeId(form, id) {
+    form.hwioTurnstileWidgetId = id;
+    form.hwTurnstileWidgetId = id; // legacy-ok
+}
 /**
  * Lazy explicit Turnstile: the third-party script loads on first form interaction (focus or
  * pointer-enter) and the widget id is stored on its form so the submit handler resets exactly
  * the token it consumed. Markup: <div class="cf-turnstile" data-sitekey="..."> inside a <form>.
+ *
+ * The widget takes the page's scheme when it renders, and Turnstile cannot change the theme of a
+ * rendered widget, so a switch of the site theme (hwio:themechange) redraws every widget in the
+ * new scheme; the redrawn widget issues a fresh token.
  */
 export function hwioTurnstileRuntime() {
     let controller = null;
-    let widgetIds = [];
+    let widgets = [];
+    let themeBound = false;
     function cleanup() {
         controller?.abort();
         controller = null;
-        widgetIds.forEach((id) => { try {
+        themeBound = false;
+        widgets.forEach(({ id }) => { try {
             window.turnstile?.remove(id);
         }
         catch { /* gone */ } });
-        widgetIds = [];
+        widgets = [];
+    }
+    function redraw() {
+        const api = window.turnstile;
+        if (!api)
+            return;
+        widgets = widgets.filter((w) => w.container.isConnected).map((w) => {
+            try {
+                api.remove(w.id);
+            }
+            catch { /* gone */ }
+            const id = draw(api, w.container);
+            if (id === undefined)
+                return w;
+            storeId(w.form, id);
+            return { ...w, id };
+        });
     }
     function bind() {
         const containers = Array.from(document.querySelectorAll('.cf-turnstile:not([data-hwio-turnstile-bound])'));
@@ -58,6 +87,10 @@ export function hwioTurnstileRuntime() {
             return;
         controller ??= new AbortController();
         const { signal } = controller;
+        if (!themeBound) {
+            themeBound = true;
+            window.addEventListener('hwio:themechange', redraw, { signal });
+        }
         containers.forEach((container) => {
             const form = container.closest('form');
             if (!form)
@@ -68,11 +101,10 @@ export function hwioTurnstileRuntime() {
                 if (signal.aborted || !container.isConnected || state === 'rendered')
                     return;
                 state = 'rendered';
-                const id = api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme(), size: widgetSize(container) });
+                const id = draw(api, container);
                 if (id !== undefined) {
-                    widgetIds.push(id);
-                    form.hwioTurnstileWidgetId = id;
-                    form.hwTurnstileWidgetId = id; // legacy-ok
+                    widgets.push({ container, form, id });
+                    storeId(form, id);
                 }
             };
             const load = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-web-runtime",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Framework-free browser runtime for the HARDWARIO websites: consent (Consent Mode v2 + GTM), HubSpot forms with Turnstile, attribution, theme, CTA tracking and small behaviours. View-transition safe.",
   "license": "MIT",
   "type": "module",