@hubpav/hwio-web-runtime 0.8.0 → 0.9.0

package/README.md

@@ -2,8 +2,13 @@
 
 Framework-free browser behaviours for the HARDWARIO websites, one ES module per concern
 (`/consent`, `/forms`, `/turnstile`, `/attribution`, `/theme`, `/track`, `/reveal`,
-`/counter`, `/nav`, `/accordion`) plus `/inline` (static bootstrap scripts with their
+`/counter`, `/nav`, `/dropdown`, `/iso`, `/accordion`) plus `/inline` (static bootstrap scripts with their
 SHA-256 hashes for CSP). Every behaviour registers through `hwioMount()`, so it binds on
 `astro:page-load` and cleans up on `astro:before-swap` when Astro's ClientRouter is present
 and binds once otherwise. Pure logic lives in `*-core` modules and is unit-tested with
-`node --test`.
+`node --test`. `/popup` is the one-popup-at-a-time protocol (`hwio:popupopen`) through which
+`/nav` (mega panels, drawer) and `/dropdown` (`details[data-hwio-dropdown]`) close each other.
+
+Motion is fail-safe: `/reveal` hides content waiting for its reveal only after it has started
+(class `hwio-reveal-on` on `<html>`), `/counter` and `/iso` change nothing until they run, and all
+three show the final state at once under `prefers-reduced-motion`.

package/dist/count-core.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure logic of the count-up (counter.ts, `[data-hwio-count]`), unit-tested with `node --test`.
+ * The figure is rendered on the server in its final form ("7 000+", "Since 2016"); the runtime
+ * counts from `from` to `to` through `template` and ends on that exact server text.
+ */
+export interface HWioCountSpec {
+    to: number;
+    from: number;
+    /** Text around the number; `{n}` marks it ("{n}+", "Since {n}"). */
+    template: string;
+    /** Thousands separator ("" none, "\u00a0" a non-breaking space, "," ...). */
+    group: string;
+}
+/** Reads the data attributes of a count element (`data-hwio-count`, `-from`, `-template`, `-group`). */
+export declare function hwioParseCount(data: Record<string, string | undefined>): HWioCountSpec | null;
+/** Formats an integer with an optional thousands separator into the template. */
+export declare function hwioFormatCount(n: number, template?: string, group?: string): string;
+/** Ease-out cubic on 0..1: fast start, calm settle (the motion rule: ease-out, nothing bounces). */
+export declare function hwioEaseOut(progress: number): number;
+/** The number shown at `progress` (0..1) of the count. */
+export declare function hwioCountAt(spec: Pick<HWioCountSpec, 'from' | 'to'>, progress: number): number;

package/dist/count-core.js

@@ -0,0 +1,30 @@
+/** Reads the data attributes of a count element (`data-hwio-count`, `-from`, `-template`, `-group`). */
+export function hwioParseCount(data) {
+    const to = Number(data.hwioCount);
+    if (data.hwioCount === undefined || data.hwioCount === '' || !Number.isFinite(to))
+        return null;
+    const fromRaw = data.hwioCountFrom;
+    const from = fromRaw === undefined || fromRaw === '' ? 0 : Number(fromRaw);
+    return {
+        to,
+        from: Number.isFinite(from) ? from : 0,
+        template: data.hwioCountTemplate && data.hwioCountTemplate.includes('{n}') ? data.hwioCountTemplate : '{n}',
+        group: data.hwioCountGroup ?? '',
+    };
+}
+/** Formats an integer with an optional thousands separator into the template. */
+export function hwioFormatCount(n, template = '{n}', group = '') {
+    const rounded = Math.round(n);
+    const digits = String(Math.abs(rounded));
+    const grouped = group ? digits.replace(/\B(?=(\d{3})+(?!\d))/g, group) : digits;
+    return template.replace('{n}', `${rounded < 0 ? '-' : ''}${grouped}`);
+}
+/** Ease-out cubic on 0..1: fast start, calm settle (the motion rule: ease-out, nothing bounces). */
+export function hwioEaseOut(progress) {
+    const p = Math.min(Math.max(progress, 0), 1);
+    return 1 - Math.pow(1 - p, 3);
+}
+/** The number shown at `progress` (0..1) of the count. */
+export function hwioCountAt(spec, progress) {
+    return Math.round(spec.from + (spec.to - spec.from) * hwioEaseOut(progress));
+}

package/dist/counter.d.ts

@@ -1,5 +1,12 @@
 /**
- * Count-up for [data-hwio-counter data-target="120" data-suffix="+"]. Renders the final value
- * without animation under reduced motion; otherwise eases from 0 when the first counter enters view.
+ * Count-up of figures, once each, when they enter the viewport; the final value is what the server
+ * rendered, so without JavaScript or under reduced motion the figure simply shows.
+ *
+ * - `[data-hwio-count="7000" data-hwio-count-template="{n}+" data-hwio-count-group=" "]`
+ *   (HWioKeyFigure): each figure counts on its own (800 ms, ease-out) from `data-hwio-count-from`
+ *   (default 0) and ends on its exact server text (non-breaking spaces included). Below the fold the
+ *   start value is set while nobody sees it; a figure already in view counts at once.
+ * - `[data-hwio-counter data-target="120" data-suffix="+"]` (HWioStatsBand, unchanged): every
+ *   counter of the page counts together when the first one enters the view.
  */
 export declare function hwioCounterRuntime(): import("./mount.js").HWioBinder;

package/dist/counter.js

@@ -1,25 +1,85 @@
 import { hwioMount } from './mount.js';
+import { hwioCountAt, hwioFormatCount, hwioParseCount } from './count-core.js';
+/** Count-up duration of a single figure (`[data-hwio-count]`). */
+const COUNT_MS = 800;
 /**
- * Count-up for [data-hwio-counter data-target="120" data-suffix="+"]. Renders the final value
- * without animation under reduced motion; otherwise eases from 0 when the first counter enters view.
+ * Count-up of figures, once each, when they enter the viewport; the final value is what the server
+ * rendered, so without JavaScript or under reduced motion the figure simply shows.
+ *
+ * - `[data-hwio-count="7000" data-hwio-count-template="{n}+" data-hwio-count-group=" "]`
+ *   (HWioKeyFigure): each figure counts on its own (800 ms, ease-out) from `data-hwio-count-from`
+ *   (default 0) and ends on its exact server text (non-breaking spaces included). Below the fold the
+ *   start value is set while nobody sees it; a figure already in view counts at once.
+ * - `[data-hwio-counter data-target="120" data-suffix="+"]` (HWioStatsBand, unchanged): every
+ *   counter of the page counts together when the first one enters the view.
  */
 export function hwioCounterRuntime() {
     let observer = null;
+    let countObserver = null;
     let frame = 0;
+    const frames = new Set();
     function cleanup() {
         observer?.disconnect();
         observer = null;
+        countObserver?.disconnect();
+        countObserver = null;
         if (frame)
             cancelAnimationFrame(frame);
         frame = 0;
+        frames.forEach((f) => cancelAnimationFrame(f));
+        frames.clear();
     }
-    function bind() {
+    const reduced = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    function bindCounts() {
+        const els = Array.from(document.querySelectorAll('[data-hwio-count]:not([data-hwio-count-bound])'));
+        if (!els.length)
+            return;
+        els.forEach((el) => (el.dataset.hwioCountBound = 'true'));
+        if (reduced() || !('IntersectionObserver' in window))
+            return;
+        const finals = new WeakMap();
+        const run = (el) => {
+            const spec = hwioParseCount(el.dataset);
+            if (!spec)
+                return;
+            const start = performance.now();
+            const step = (now) => {
+                const progress = Math.min((now - start) / COUNT_MS, 1);
+                if (progress < 1) {
+                    el.textContent = hwioFormatCount(hwioCountAt(spec, progress), spec.template, spec.group);
+                    frames.add(requestAnimationFrame(step));
+                }
+                else {
+                    el.textContent = finals.get(el) ?? el.textContent;
+                }
+            };
+            frames.add(requestAnimationFrame(step));
+        };
+        countObserver ??= new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting)
+                    return;
+                countObserver?.unobserve(entry.target);
+                run(entry.target);
+            });
+        }, { threshold: 0.4 });
+        els.forEach((el) => {
+            const spec = hwioParseCount(el.dataset);
+            if (!spec)
+                return;
+            finals.set(el, el.textContent ?? '');
+            if (el.getBoundingClientRect().top > window.innerHeight)
+                el.textContent = hwioFormatCount(spec.from, spec.template, spec.group);
+            countObserver?.observe(el);
+        });
+    }
+    function bindCounters() {
         const counters = Array.from(document.querySelectorAll('[data-hwio-counter]:not([data-hwio-counter-bound])'));
         if (!counters.length)
             return;
         counters.forEach((c) => (c.dataset.hwioCounterBound = 'true'));
         const finish = () => counters.forEach((c) => { c.textContent = `${parseInt(c.dataset.target ?? '0', 10)}${c.dataset.suffix ?? ''}`; c.dataset.hwioCounterActive = 'true'; });
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+        if (reduced())
             return finish();
         const animate = () => {
             const start = performance.now();
@@ -48,5 +108,9 @@ export function hwioCounterRuntime() {
         }, { threshold: 0.3 });
         observer.observe(counters[0]);
     }
+    function bind() {
+        bindCounts();
+        bindCounters();
+    }
     return hwioMount('counter', { bind, cleanup });
 }

package/dist/dropdown.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Dropdowns built on `<details data-hwio-dropdown>` (HWioLanguageSwitcher's dropdown variant). A
+ * native `<details>` stays open over the page until its own summary is clicked again; this runtime
+ * closes it the way a menu button is expected to close (WAI-ARIA disclosure pattern, WCAG 2.1.1 and
+ * 1.4.13):
+ * - a click or tap outside it;
+ * - 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.
+ */
+export declare function hwioDropdownRuntime(): import("./mount.js").HWioBinder;

package/dist/dropdown.js

@@ -0,0 +1,70 @@
+import { hwioMount } from './mount.js';
+import { hwioAnnouncePopup, hwioOnPopup } from './popup.js';
+/**
+ * Dropdowns built on `<details data-hwio-dropdown>` (HWioLanguageSwitcher's dropdown variant). A
+ * native `<details>` stays open over the page until its own summary is clicked again; this runtime
+ * closes it the way a menu button is expected to close (WAI-ARIA disclosure pattern, WCAG 2.1.1 and
+ * 1.4.13):
+ * - a click or tap outside it;
+ * - 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.
+ */
+export function hwioDropdownRuntime() {
+    let controller = null;
+    function cleanup() {
+        controller?.abort();
+        controller = null;
+    }
+    function bind() {
+        cleanup();
+        const dropdowns = Array.from(document.querySelectorAll('details[data-hwio-dropdown]'));
+        if (!dropdowns.length)
+            return;
+        controller = new AbortController();
+        const { signal } = controller;
+        const close = (dropdown, restoreFocus = false) => {
+            if (!dropdown.open)
+                return;
+            const hadFocus = dropdown.contains(document.activeElement);
+            dropdown.open = false;
+            if (restoreFocus && hadFocus)
+                dropdown.querySelector('summary')?.focus();
+        };
+        document.addEventListener('click', (event) => {
+            const target = event.target;
+            dropdowns.forEach((d) => {
+                if (!target || !d.contains(target))
+                    close(d);
+            });
+        }, { signal });
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape')
+                dropdowns.forEach((d) => close(d, true));
+        }, { signal });
+        dropdowns.forEach((dropdown) => {
+            dropdown.addEventListener('focusout', (event) => {
+                const next = event.relatedTarget;
+                if (next && !dropdown.contains(next))
+                    close(dropdown);
+            }, { signal });
+            dropdown.addEventListener('toggle', () => {
+                if (!dropdown.open)
+                    return;
+                dropdowns.forEach((other) => {
+                    if (other !== dropdown)
+                        close(other);
+                });
+                hwioAnnouncePopup(dropdown);
+            }, { signal });
+        });
+        hwioOnPopup((owner) => {
+            dropdowns.forEach((d) => {
+                if (d !== owner && !d.contains(owner))
+                    close(d);
+            });
+        }, signal);
+    }
+    return hwioMount('dropdown', { bind, cleanup });
+}

package/dist/iso.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Isometric scenes drawn with the Brand Guidelines' kit (the artwork library's `make isometric`;
+ * HWioIsoScene inlines one): when a `[data-hwio-iso]` scene enters the viewport it builds itself
+ * once. The kit's class names are the contract:
+ * - `.iso-object` groups fade in and settle 4 px, in drawing order (300 ms, 90 ms apart);
+ * - `g.iso-radio` links fade in after the objects;
+ * - each `g.iso-link` draws its `.iso-trace` path from pad to pad (700 ms, ease-out; the kit gives
+ *   every trace `pathLength="1"`), and its `.iso-pad` ends appear as the trace leaves and arrives
+ *   (`data-end="end"` marks the far pad).
+ * The runtime only sets transition delays (CSSOM, allowed by a strict style-src) and two classes:
+ * `hwio-iso-anim` hides the parts, `hwio-iso-play` plays them. Without this runtime, under
+ * prefers-reduced-motion or without IntersectionObserver the scene shows complete at once.
+ * Transforms, opacity and stroke-dashoffset only, so the layout never moves.
+ */
+export declare function hwioIsoRuntime(): import("./mount.js").HWioBinder;

package/dist/iso.js

@@ -0,0 +1,58 @@
+import { hwioMount } from './mount.js';
+/** Timing of a scene build (ms): objects settle one after another, then the traces draw. */
+const STEP = 90;
+const SETTLE = 300;
+const DRAW = 700;
+const LINK_GAP = 250;
+/**
+ * Isometric scenes drawn with the Brand Guidelines' kit (the artwork library's `make isometric`;
+ * HWioIsoScene inlines one): when a `[data-hwio-iso]` scene enters the viewport it builds itself
+ * once. The kit's class names are the contract:
+ * - `.iso-object` groups fade in and settle 4 px, in drawing order (300 ms, 90 ms apart);
+ * - `g.iso-radio` links fade in after the objects;
+ * - each `g.iso-link` draws its `.iso-trace` path from pad to pad (700 ms, ease-out; the kit gives
+ *   every trace `pathLength="1"`), and its `.iso-pad` ends appear as the trace leaves and arrives
+ *   (`data-end="end"` marks the far pad).
+ * The runtime only sets transition delays (CSSOM, allowed by a strict style-src) and two classes:
+ * `hwio-iso-anim` hides the parts, `hwio-iso-play` plays them. Without this runtime, under
+ * prefers-reduced-motion or without IntersectionObserver the scene shows complete at once.
+ * Transforms, opacity and stroke-dashoffset only, so the layout never moves.
+ */
+export function hwioIsoRuntime() {
+    let observer = null;
+    function bind() {
+        const scenes = Array.from(document.querySelectorAll('[data-hwio-iso]:not([data-hwio-iso-bound])'));
+        if (!scenes.length)
+            return;
+        scenes.forEach((scene) => (scene.dataset.hwioIsoBound = 'true'));
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !('IntersectionObserver' in window))
+            return;
+        scenes.forEach((scene) => {
+            const objects = Array.from(scene.querySelectorAll('.iso-object'));
+            objects.forEach((g, i) => (g.style.transitionDelay = `${i * STEP}ms`));
+            const objectsDone = Math.max(0, objects.length - 1) * STEP + SETTLE;
+            scene.querySelectorAll('g.iso-radio').forEach((g) => (g.style.transitionDelay = `${objectsDone}ms`));
+            const links = Array.from(scene.querySelectorAll('g.iso-link:not(.iso-radio)'));
+            links.forEach((link, k) => {
+                const start = objectsDone + 100 + k * LINK_GAP;
+                const trace = link.querySelector('.iso-trace');
+                if (trace)
+                    trace.style.transitionDelay = `${start}ms`;
+                link.querySelectorAll('.iso-pad').forEach((pad) => {
+                    pad.style.transitionDelay = `${pad.dataset.end === 'end' ? start + DRAW - 100 : start}ms`;
+                });
+            });
+            scene.classList.add('hwio-iso-anim');
+        });
+        observer ??= new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting)
+                    return;
+                observer?.unobserve(entry.target);
+                entry.target.classList.add('hwio-iso-play');
+            });
+        }, { threshold: 0.3 });
+        scenes.forEach((scene) => observer.observe(scene));
+    }
+    return hwioMount('iso', { bind, cleanup: () => { observer?.disconnect(); observer = null; } });
+}

package/dist/nav.d.ts

@@ -5,7 +5,9 @@
  * 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), and marks the nav link whose section is in view ([data-hwio-scrollspy] nav with same-page
- * anchors) with aria-current="location".
+ * 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
+ * (`hwio:popupopen`, popup.ts), so an open dropdown (HWioLanguageSwitcher) closes; a dropdown that
+ * opens closes the mega panels the same way.
  */
 export declare function hwioNavRuntime(): import("./mount.js").HWioBinder;

package/dist/nav.js

@@ -1,4 +1,5 @@
 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
@@ -6,8 +7,10 @@ import { hwioMount } from './mount.js';
  * 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), and marks the nav link whose section is in view ([data-hwio-scrollspy] nav with same-page
- * anchors) with aria-current="location".
+ * 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
+ * (`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;
@@ -38,6 +41,8 @@ export function hwioNavRuntime() {
             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);
@@ -72,13 +77,31 @@ export function hwioNavRuntime() {
                 closeTimer = null;
             } };
             const set = (pair, open) => { pair.trigger.setAttribute('aria-expanded', String(open)); pair.panel.hidden = !open; };
-            const closeAll = () => { cancelClose(); pairs.forEach((p) => set(p, false)); };
-            const openOne = (pair) => { cancelClose(); pairs.forEach((p) => set(p, p === pair)); };
-            const scheduleClose = () => { cancelClose(); closeTimer = setTimeout(closeAll, 180); };
+            // A panel that hover has just opened stays open on the click that follows (pointer users click the
+            // item they point at); the next click closes it. Without this, hover opened it and the click shut it.
+            let hoverOpened = null;
+            const closeAll = () => { cancelClose(); hoverOpened = null; pairs.forEach((p) => set(p, false)); };
             const isOpen = (pair) => pair.trigger.getAttribute('aria-expanded') === 'true';
+            const openOne = (pair) => {
+                cancelClose();
+                const wasOpen = isOpen(pair);
+                pairs.forEach((p) => set(p, p === pair));
+                if (!wasOpen)
+                    hwioAnnouncePopup(pair.panel);
+            };
+            const scheduleClose = () => { cancelClose(); closeTimer = setTimeout(closeAll, 180); };
             pairs.forEach((pair) => {
                 const { trigger, panel } = pair;
-                trigger.addEventListener('click', () => (isOpen(pair) ? closeAll() : openOne(pair)), { signal });
+                trigger.addEventListener('click', () => {
+                    if (isOpen(pair) && hoverOpened === trigger) {
+                        hoverOpened = null;
+                        return;
+                    }
+                    if (isOpen(pair))
+                        closeAll();
+                    else
+                        openOne(pair);
+                }, { signal });
                 trigger.addEventListener('keydown', (e) => {
                     if (e.key !== 'ArrowDown')
                         return;
@@ -87,7 +110,11 @@ export function hwioNavRuntime() {
                     panel.querySelector('a[href], button')?.focus();
                 }, { signal });
                 if (hoverable) {
-                    trigger.addEventListener('mouseenter', () => openOne(pair), { signal });
+                    trigger.addEventListener('mouseenter', () => {
+                        const wasOpen = isOpen(pair);
+                        openOne(pair);
+                        hoverOpened = wasOpen ? null : trigger;
+                    }, { signal });
                     trigger.addEventListener('mouseleave', scheduleClose, { signal });
                     panel.addEventListener('mouseenter', cancelClose, { signal });
                     panel.addEventListener('mouseleave', scheduleClose, { signal });
@@ -108,6 +135,11 @@ 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.
+            hwioOnPopup((owner) => {
+                if (!pairs.some((p) => p.panel === owner || p.panel.contains(owner)))
+                    closeAll();
+            }, signal);
         }
         const nav = document.querySelector('[data-hwio-scrollspy]');
         if (!nav || !('IntersectionObserver' in window))

package/dist/popup.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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
+ * 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.
+ */
+export declare const HWIO_POPUP_EVENT = "hwio:popupopen";
+export interface HWioPopupDetail {
+    owner: Element;
+}
+/** Tell the other runtimes that `owner` has just opened. */
+export declare function hwioAnnouncePopup(owner: Element): void;
+/** Run `handler` whenever another runtime opens a popup; detaches with `signal`. */
+export declare function hwioOnPopup(handler: (owner: Element) => void, signal: AbortSignal): void;

package/dist/popup.js

@@ -0,0 +1,19 @@
+/**
+ * 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
+ * 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.
+ */
+export const HWIO_POPUP_EVENT = 'hwio:popupopen';
+/** Tell the other runtimes that `owner` has just opened. */
+export function hwioAnnouncePopup(owner) {
+    document.dispatchEvent(new CustomEvent(HWIO_POPUP_EVENT, { detail: { owner } }));
+}
+/** Run `handler` whenever another runtime opens a popup; detaches with `signal`. */
+export function hwioOnPopup(handler, signal) {
+    document.addEventListener(HWIO_POPUP_EVENT, (event) => {
+        const owner = event.detail?.owner;
+        if (owner)
+            handler(owner);
+    }, { signal });
+}

package/dist/reveal.d.ts

@@ -1,2 +1,19 @@
-/** Scroll reveal for [data-hwio-reveal]: sets data-hwio-revealed once in view; reduced motion reveals immediately. */
+/** Class on <html> while the reveal runtime runs; the stylesheet hides waiting content only under it. */
+export declare const HWIO_REVEAL_CLASS = "hwio-reveal-on";
+declare global {
+    interface Window {
+        __hwioRevealSwap?: boolean;
+    }
+}
+/**
+ * Scroll reveal for [data-hwio-reveal]: each element fades in and settles once, the first time it
+ * enters the viewport (data-hwio-revealed). `data-hwio-reveal-delay="<ms>"` staggers siblings; it is
+ * applied through the CSSOM, which a strict style-src allows.
+ *
+ * Fail-safe (owner, 2026-10-30): content waiting for its reveal is hidden only once this runtime has
+ * started, through the class `hwio-reveal-on` it sets on <html>. If the module never runs (a script
+ * error, a blocked or failed import), nothing is hidden and every section shows. Under
+ * prefers-reduced-motion, or without IntersectionObserver, everything is revealed at once and the
+ * class is never set.
+ */
 export declare function hwioRevealRuntime(): import("./mount.js").HWioBinder;

package/dist/reveal.js

@@ -1,7 +1,29 @@
 import { hwioMount } from './mount.js';
-/** Scroll reveal for [data-hwio-reveal]: sets data-hwio-revealed once in view; reduced motion reveals immediately. */
+/** Class on <html> while the reveal runtime runs; the stylesheet hides waiting content only under it. */
+export const HWIO_REVEAL_CLASS = 'hwio-reveal-on';
+/**
+ * Scroll reveal for [data-hwio-reveal]: each element fades in and settles once, the first time it
+ * enters the viewport (data-hwio-revealed). `data-hwio-reveal-delay="<ms>"` staggers siblings; it is
+ * applied through the CSSOM, which a strict style-src allows.
+ *
+ * Fail-safe (owner, 2026-10-30): content waiting for its reveal is hidden only once this runtime has
+ * started, through the class `hwio-reveal-on` it sets on <html>. If the module never runs (a script
+ * error, a blocked or failed import), nothing is hidden and every section shows. Under
+ * prefers-reduced-motion, or without IntersectionObserver, everything is revealed at once and the
+ * class is never set.
+ */
 export function hwioRevealRuntime() {
     let observer = null;
+    // With Astro's ClientRouter the next document's <html> replaces this one's attributes; carry the
+    // class across the swap so revealed-on-arrival content of the next page never flashes.
+    if (!window.__hwioRevealSwap) {
+        window.__hwioRevealSwap = true;
+        document.addEventListener('astro:before-swap', (event) => {
+            const next = event.newDocument;
+            if (next && document.documentElement.classList.contains(HWIO_REVEAL_CLASS))
+                next.documentElement.classList.add(HWIO_REVEAL_CLASS);
+        });
+    }
     function bind() {
         const targets = Array.from(document.querySelectorAll('[data-hwio-reveal]:not([data-hwio-revealed])'));
         if (!targets.length)
@@ -10,6 +32,14 @@ export function hwioRevealRuntime() {
             targets.forEach((el) => (el.dataset.hwioRevealed = 'true'));
             return;
         }
+        targets.forEach((el) => {
+            const delay = Number(el.dataset.hwioRevealDelay);
+            if (Number.isFinite(delay) && delay > 0)
+                el.style.transitionDelay = `${Math.min(delay, 1000)}ms`;
+        });
+        document.documentElement.classList.add(HWIO_REVEAL_CLASS);
+        // Threshold 0: an element taller than the viewport still reveals (a 10 % threshold never fires
+        // for a section ten screens tall, which would leave it hidden).
         observer ??= new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (!entry.isIntersecting)
@@ -17,7 +47,7 @@ export function hwioRevealRuntime() {
                 entry.target.dataset.hwioRevealed = 'true';
                 observer?.unobserve(entry.target);
             });
-        }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+        }, { threshold: 0, rootMargin: '0px 0px -50px 0px' });
         targets.forEach((el) => observer.observe(el));
     }
     return hwioMount('reveal', { bind, cleanup: () => { observer?.disconnect(); observer = null; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-web-runtime",
-  "version": "0.8.0",
+  "version": "0.9.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",
@@ -25,7 +25,11 @@
     "./track": "./dist/track.js",
     "./reveal": "./dist/reveal.js",
     "./counter": "./dist/counter.js",
+    "./count-core": "./dist/count-core.js",
     "./nav": "./dist/nav.js",
+    "./dropdown": "./dist/dropdown.js",
+    "./popup": "./dist/popup.js",
+    "./iso": "./dist/iso.js",
     "./accordion": "./dist/accordion.js",
     "./inline": "./dist/inline.js",
     "./package.json": "./package.json"