@escape-game-over/atlas 0.1.38 → 0.1.40

package/docs/client-scripts.md

@@ -51,7 +51,9 @@ answer is two, one per category: `analytics` (Google's `analytics_storage`) and
 markup marks its buttons `data-consent="grant"` and `data-consent="deny"` for
 everything at once, and `data-consent="save"` for the answer its checkboxes
 give — `data-consent-category="analytics"` and `"marketing"`, never ticked by
-default. The control that brings it back is `data-consent-reopen hidden`.
+default. Those can wait in a `data-consent-choices hidden` panel that a
+`data-consent-choose` button shows and hides, keeping its `aria-expanded` in
+step. The control that brings it back is `data-consent-reopen hidden`.
 
 `Document` ships one more: scroll restoration, on unless `restoreScroll={false}`.
 WebKit restores a page's position only at `load`, after every image, so a page

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.38",
+    "version": "0.1.40",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,

package/src/astro/consent-element.ts

@@ -7,7 +7,7 @@ import {
     recordConsent,
 } from "./consent.ts";
 import { element } from "./element.ts";
-import { data, refs } from "./ref.ts";
+import { data, ref, refs } from "./ref.ts";
 
 /**
  * The banner's behaviour. Its own module, and not re-exported from `client.ts`,
@@ -25,6 +25,13 @@ import { data, refs } from "./ref.ts";
  * The checkboxes are never ticked by default; they show an answer already
  * given, and nothing else.
  *
+ * To keep them out of sight until asked for, put them in a
+ * `data-consent-choices hidden` panel and add a `data-consent-choose` button:
+ * it shows and hides the panel, and keeps its own `aria-expanded` in step. The
+ * panel can sit anywhere in the banner — below the buttons, not only inside
+ * the control, which is what a `<details>` would force. It starts closed each
+ * time the banner is shown.
+ *
  * The control that brings it back — usually in the footer — is
  * `data-consent-reopen hidden`: it stays hidden until there is an answer to
  * withdraw.
@@ -53,12 +60,31 @@ export const consentBanner = element("atlas-consent", ({ root, signal }) => {
         };
     };
 
+    const toggles = refs<HTMLButtonElement>(root, "[data-consent-choose]");
+    const panel =
+        toggles.length > 0 ? ref(root, "[data-consent-choices]") : undefined;
+
+    const expand = (open: boolean): void => {
+        if (panel === undefined) return;
+        panel.hidden = !open;
+        for (const toggle of toggles) {
+            toggle.setAttribute("aria-expanded", String(open));
+        }
+    };
+
+    for (const toggle of toggles) {
+        toggle.addEventListener("click", () => expand(panel?.hidden === true), {
+            signal,
+        });
+    }
+
     const show = (): void => {
         // Only an answer already given ticks a box.
         const stored = readConsent();
         for (const { box, category } of boxes) {
             box.checked = stored?.[category] === "granted";
         }
+        expand(false);
         root.hidden = false;
     };
 

package/src/index.ts

@@ -12,6 +12,12 @@
  * ```
  */
 
+export {
+    CONSENT_CATEGORIES,
+    type ConsentCategory,
+    type ConsentChoice,
+    type ConsentChoices,
+} from "./analytics/consent-storage.ts";
 export {
     type AnalyticsSettings,
     type AnalyticsTags,