@wpmoo/ui 2.2.0 → 2.3.0

package/README.md

@@ -210,6 +210,26 @@ runs the slideshow and full-screen buttons, adds arrow keys and loads only the
 current photo and its neighbours. See the
 [Image Gallery block](https://ui.wpmoo.org/blocks/image-gallery/) for markup.
 
+For the Consent block, bind the card once per document. Gated scripts,
+frames and images carry `data-consent-category` and `data-consent-src` and
+are activated only after their category is granted:
+
+```js
+import { initConsent } from "@wpmoo/ui/consent.js";
+const consent = initConsent(document);
+consent?.whenGranted("statistics", () => loadStatistics());
+document.addEventListener("moo:consent:change", (event) => console.log(event.detail.choices));
+```
+
+Without the module the card stays hidden and nothing optional loads. The
+choice is stored in a first-party cookie with the configuration revision and
+a time stamp; `consentRevision(categories, reask)` computes that revision.
+Adding or removing a category or service asks again; for a material change
+to a service's provider, purpose or storage, raise `reask`. Withdrawal removes
+declared first-party cookies on the root path and storage keys; cookies set on
+another path or by another host cannot be removed by the page.
+See the [Consent block](https://ui.wpmoo.org/blocks/consent/) for markup.
+
 For an opt-in document overlay scrollbar, load the stylesheet first and pass
 the resolved page theme owner explicitly:
 
@@ -290,6 +310,12 @@ calm.
 
 ## Status And Support
 
+The `2.3.0` minor release adds the Consent block: a first-visit consent card
+with categories and services, a settings trigger, an embed placeholder and a
+policy table, with the optional `@wpmoo/ui/consent.js` module that stores the
+choice in a first-party cookie and loads gated scripts, frames and images only
+after consent. Accordion items gain an optional action beside the trigger.
+
 The `2.2.0` minor release adds the Item component, Image Gallery and Video
 Dialog blocks, and component usage guides. Image Gallery includes five layouts,
 a lazy-loaded lightbox, slideshow and full-screen controls through the optional
@@ -328,7 +354,7 @@ paths live in the [Installation guide](https://ui.wpmoo.org/installation/).
 Moo UI source code is MIT licensed. License details live in
 [LICENSE](LICENSE) and the [License page](https://ui.wpmoo.org/license/).
 Third-party distribution details and notices are kept separately in
-[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.2.0/THIRD_PARTY_NOTICES.md).
+[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.3.0/THIRD_PARTY_NOTICES.md).
 Catalog visual assets and their license are repository-only and are not
 included in the npm package. Asset terms live in the
-[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.2.0/ASSET_LICENSE.md).
+[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.3.0/ASSET_LICENSE.md).

package/THIRD_PARTY_NOTICES.md

@@ -83,5 +83,5 @@ The catalog serves its native ESM file and unchanged license separately under
 WPMoo-generated visual assets, including image assets under `site/static/images/`,
 are original WPMoo work and are not licensed under MIT unless explicitly
 stated. See the
-[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.2.0/ASSET_LICENSE.md).
+[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.3.0/ASSET_LICENSE.md).
 These assets and their license file are not included in the npm package.

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "2.2.0",
+  "coreVersion": "2.3.0",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -35,6 +35,7 @@
       "./sheet.js",
       "./floating-panel.js",
       "./image-gallery.js",
+      "./consent.js",
       "./chart.js",
       "./chart.min.js",
       "./datepicker.js",

package/dist/assets/css/moo-ui.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.2.0 (https://wpmoo.org/)
+ * Moo UI v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo-ui.min.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.2.0 (https://wpmoo.org/)
+ * Moo UI v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.2.0 (https://wpmoo.org/)
+ * Moo UI v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/assets/css/moo.min.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.2.0 (https://wpmoo.org/)
+ * Moo UI v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/dist/js/chart.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI chart.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/chart.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.min.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI chart.min.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/combobox.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI combobox.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI combobox.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/consent.js

@@ -0,0 +1,342 @@
+/*!
+ * Moo UI consent.js v2.3.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+const instances = /* @__PURE__ */ new WeakMap();
+const documents = /* @__PURE__ */ new WeakMap();
+const RECORD_VERSION = 1;
+const DAY_SECONDS = 86400;
+const FOCUSABLE = "button, a[href], input:not([type='hidden']), select, textarea, [tabindex]:not([tabindex='-1'])";
+function webSource(value, base) {
+  if (!value) return "";
+  try {
+    const url = new URL(value, base);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : "";
+  } catch {
+    return "";
+  }
+}
+function matches(pattern, name) {
+  return pattern.endsWith("*") ? name.startsWith(pattern.slice(0, -1)) : name === pattern;
+}
+async function consentRevision(categories, reask = 0) {
+  const lines = [];
+  for (const category of categories || []) {
+    for (const service of category.services || []) lines.push(`${category.id}/${service.id}`);
+  }
+  lines.sort();
+  if (reask > 0) lines.push(`reask:${reask}`);
+  const bytes = new TextEncoder().encode(lines.join("\n"));
+  const digest = await globalThis.crypto.subtle.digest("SHA-256", bytes);
+  return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("").slice(0, 12);
+}
+class ConsentManager {
+  /** The manager bound to a [data-consent] element or to a document. */
+  static getInstance(target) {
+    if (target?.nodeType === 9) return documents.get(target) || null;
+    return target?.nodeType === 1 ? instances.get(target) || null : null;
+  }
+  static getOrCreateInstance(element, options) {
+    return ConsentManager.getInstance(element) || new ConsentManager(element, options);
+  }
+  constructor(element, { reload } = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-consent]") || !element.id) {
+      throw new TypeError("ConsentManager requires a named [data-consent] element.");
+    }
+    const existing = instances.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._document = element.ownerDocument;
+    if (documents.has(this._document)) {
+      throw new TypeError("ConsentManager allows one consent card per document.");
+    }
+    this._window = this._document.defaultView;
+    const source = element.querySelector("script[data-consent-config]");
+    if (!source) throw new TypeError("ConsentManager requires a [data-consent-config] script.");
+    this._config = JSON.parse(source.textContent);
+    this._cookie = { name: "moo_consent", days: 365, ...this._config.cookie || {} };
+    this._categories = this._config.categories || [];
+    this._optional = this._categories.filter((category) => !category.required).map((category) => category.id);
+    this._reload = reload || (() => this._window.location.reload());
+    this._waiting = /* @__PURE__ */ new Map();
+    this._listeners = [];
+    this._trapping = false;
+    this._returnFocus = null;
+    const record = this._read();
+    this._valid = Boolean(record);
+    this._choices = this._normalize(record ? record.c : {});
+    const control = (suffix) => this._document.getElementById(`${element.id}-${suffix}`);
+    const actions = [
+      [control("accept"), () => this.acceptAll()],
+      [control("decline"), () => this.declineAll()],
+      [control("save"), () => this.save(this._switchChoices(), "save")]
+    ];
+    for (const [button, action] of actions) {
+      if (button) this._listen(button, "click", action);
+    }
+    this._listen(this._document, "click", (event) => this._onDocumentClick(event));
+    this._listen(element, "keydown", (event) => this._onKeydown(event));
+    instances.set(element, this);
+    documents.set(this._document, this);
+    this.activate(this._document);
+    if (!this._valid) this._show();
+    this.ready = Promise.resolve(this);
+    queueMicrotask(() => this._emit("ready", { choices: this.choices, valid: this._valid, revision: this.revision }));
+  }
+  get revision() {
+    return String(this._config.revision);
+  }
+  get valid() {
+    return this._valid;
+  }
+  get choices() {
+    return { ...this._choices };
+  }
+  get isOpen() {
+    return !this._element.hidden;
+  }
+  granted(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    if (!category) return false;
+    return category.required ? true : this._valid && this._choices[id] === true;
+  }
+  /** Runs callback now if granted, otherwise on grant. Returns an unsubscribe function. */
+  whenGranted(id, callback) {
+    if (this.granted(id)) {
+      this._run(callback);
+      return () => {
+      };
+    }
+    if (!this._waiting.has(id)) this._waiting.set(id, /* @__PURE__ */ new Set());
+    this._waiting.get(id).add(callback);
+    return () => this._waiting.get(id)?.delete(callback);
+  }
+  acceptAll() {
+    return this.save(Object.fromEntries(this._optional.map((id) => [id, true])), "accept-all");
+  }
+  declineAll() {
+    return this.save({}, "decline");
+  }
+  grant(id) {
+    return this.save({ ...this._choices, [id]: true }, "grant");
+  }
+  deny(id) {
+    return this.save({ ...this._choices, [id]: false }, "deny");
+  }
+  /** Stores the choice; optional categories not named become false. */
+  save(choices, source = "save") {
+    const previous = this._valid ? this.choices : this._normalize({});
+    const wasValid = this._valid;
+    const next = this._normalize(choices);
+    this._write(next);
+    this._valid = true;
+    this._choices = next;
+    const granted = this._optional.filter((id) => next[id] && !previous[id]);
+    const revoked = wasValid ? this._optional.filter((id) => previous[id] && !next[id]) : [];
+    this.close();
+    this.activate(this._document);
+    for (const id of granted) {
+      const waiting = this._waiting.get(id);
+      this._waiting.delete(id);
+      waiting?.forEach((callback) => this._run(callback));
+    }
+    this._emit("change", { choices: this.choices, previous, granted, revoked, source });
+    if (revoked.length) {
+      revoked.forEach((id) => this._forget(id));
+      this._reload();
+    }
+    return this.choices;
+  }
+  /** Opens the card with the stored choices; traps focus until closed. */
+  open(trigger = null) {
+    this._returnFocus = trigger;
+    this._trapping = true;
+    this._show();
+    this._document.getElementById(`${this._element.id}-title`)?.focus({ preventScroll: true });
+    this._emit("open", {});
+  }
+  /** Hides the card; it stays open while no valid choice exists. */
+  close() {
+    if (!this._valid) return false;
+    const wasOpen = this.isOpen;
+    const returnFocus = this._trapping ? this._returnFocus : null;
+    this._element.hidden = true;
+    this._trapping = false;
+    this._returnFocus = null;
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
+    if (wasOpen) this._emit("close", {});
+    return true;
+  }
+  /** Activates gated elements under root whose category is granted. */
+  activate(root = this._document) {
+    this._activateWhere(root, (id) => this.granted(id));
+  }
+  dispose() {
+    if (instances.get(this._element) !== this) return;
+    this._listeners.forEach(([target, type, handler]) => target.removeEventListener(type, handler));
+    this._listeners = [];
+    this._waiting.clear();
+    instances.delete(this._element);
+    documents.delete(this._document);
+  }
+  // A failing site callback must not stop the rest of a save, such as the
+  // cleanup and reload after a withdrawal; the error is still reported.
+  _run(callback) {
+    try {
+      callback(this);
+    } catch (error) {
+      if (typeof this._window.reportError === "function") this._window.reportError(error);
+      else this._window.console?.error(error);
+    }
+  }
+  _activateWhere(root, allowed) {
+    for (const element of root.querySelectorAll("[data-consent-category]")) {
+      if (allowed(element.getAttribute("data-consent-category"))) this._activateElement(element);
+    }
+    for (const placeholder of root.querySelectorAll("[data-consent-placeholder]")) {
+      if (allowed(placeholder.getAttribute("data-consent-placeholder"))) placeholder.hidden = true;
+    }
+  }
+  _listen(target, type, handler) {
+    target.addEventListener(type, handler);
+    this._listeners.push([target, type, handler]);
+  }
+  _emit(name, detail) {
+    this._document.dispatchEvent(new this._window.CustomEvent(`moo:consent:${name}`, { bubbles: true, detail }));
+  }
+  _normalize(choices) {
+    return Object.fromEntries(this._optional.map((id) => [id, choices?.[id] === true || choices?.[id] === 1]));
+  }
+  _switch(id) {
+    return this._document.getElementById(`${this._element.id}-category-${id}`);
+  }
+  _switchChoices() {
+    return Object.fromEntries(this._optional.map((id) => [id, Boolean(this._switch(id)?.checked)]));
+  }
+  _show() {
+    for (const id of this._optional) {
+      const input = this._switch(id);
+      if (input) input.checked = this.granted(id);
+    }
+    this._element.hidden = false;
+  }
+  _read() {
+    const prefix = `${this._cookie.name}=`;
+    const raw = this._document.cookie.split("; ").find((part) => part.startsWith(prefix));
+    if (!raw) return null;
+    try {
+      const record = JSON.parse(decodeURIComponent(raw.slice(prefix.length)));
+      const age = Date.now() / 1e3 - Number(record.t);
+      if (record.v !== RECORD_VERSION || record.r !== this.revision) return null;
+      if (!(age >= 0 && age < this._cookie.days * DAY_SECONDS)) return null;
+      return record;
+    } catch {
+      return null;
+    }
+  }
+  _write(choices) {
+    const record = {
+      v: RECORD_VERSION,
+      r: this.revision,
+      t: Math.floor(Date.now() / 1e3),
+      c: Object.fromEntries(Object.entries(choices).map(([id, value]) => [id, value ? 1 : 0]))
+    };
+    const secure = this._window.location.protocol === "https:" ? "; Secure" : "";
+    this._document.cookie = `${this._cookie.name}=${encodeURIComponent(JSON.stringify(record))}; Path=/; Max-Age=${this._cookie.days * DAY_SECONDS}; SameSite=Lax${secure}`;
+  }
+  _forget(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    const host = this._window.location.hostname;
+    const parts = host.split(".");
+    const domains = [""];
+    for (let index = 0; index < parts.length - 1; index += 1) domains.push(`; Domain=${parts.slice(index).join(".")}`);
+    const cookieNames = this._document.cookie.split("; ").map((part) => part.split("=")[0]).filter(Boolean);
+    for (const item of category?.storage || []) {
+      if (item.type === "cookie") {
+        for (const name of cookieNames.filter((candidate) => matches(item.name, candidate))) {
+          for (const domain of domains) this._document.cookie = `${name}=; Path=/; Max-Age=0${domain}`;
+        }
+      } else {
+        try {
+          const storage = item.type === "local" ? this._window.localStorage : this._window.sessionStorage;
+          Object.keys(storage).filter((key) => matches(item.name, key)).forEach((key) => storage.removeItem(key));
+        } catch {
+        }
+      }
+    }
+  }
+  _activateElement(element) {
+    if (element.hasAttribute("data-consent-active")) return;
+    const declared = element.getAttribute("data-consent-src");
+    const src = webSource(declared, this._document.baseURI);
+    if (declared && !src) return;
+    if (element.localName === "script") {
+      const script = this._document.createElement("script");
+      for (const { name, value } of element.attributes) {
+        if (name !== "type" && !name.startsWith("data-consent-")) script.setAttribute(name, value);
+      }
+      const type = element.getAttribute("data-consent-type");
+      if (type) script.type = type;
+      if (src) script.src = src;
+      else script.textContent = element.textContent;
+      script.setAttribute("data-consent-category", element.getAttribute("data-consent-category"));
+      script.setAttribute("data-consent-active", "");
+      element.replaceWith(script);
+      return;
+    }
+    element.setAttribute("data-consent-active", "");
+    if (src) element.setAttribute("src", src);
+    element.hidden = false;
+  }
+  _onDocumentClick(event) {
+    const control = event.target.closest?.("[data-consent-open], [data-consent-grant]");
+    if (!control || control.matches(":disabled")) return;
+    if (control.hasAttribute("data-consent-open")) {
+      if (control.getAttribute("data-consent-open") !== this._element.id) return;
+      event.preventDefault();
+      this.open(control);
+      return;
+    }
+    const id = control.getAttribute("data-consent-grant");
+    if (!this._categories.some((category) => category.id === id)) return;
+    event.preventDefault();
+    const placeholder = control.closest("[data-consent-placeholder]");
+    const scope = control.closest("[data-consent-embed]") || placeholder?.parentElement;
+    if (placeholder?.querySelector("[data-consent-remember]")?.checked || !scope) {
+      this.grant(id);
+    } else {
+      this._activateWhere(scope, (category) => category === id);
+    }
+  }
+  _onKeydown(event) {
+    if (!this._trapping) return;
+    if (event.key === "Escape") {
+      if (this.close()) event.preventDefault();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(this._element.querySelectorAll(FOCUSABLE)).filter((control) => !control.matches(":disabled") && control.getClientRects().length > 0);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = this._document.activeElement;
+    if (event.shiftKey && (active === first || !this._element.contains(active) || active.id === `${this._element.id}-title`)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}
+function initConsent(root = document, options) {
+  const element = root.querySelector?.("[data-consent]");
+  return element ? ConsentManager.getOrCreateInstance(element, options) : null;
+}
+export {
+  consentRevision,
+  ConsentManager as default,
+  initConsent
+};

package/dist/js/context-menu.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI context-menu.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI context-menu.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datatable.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datatable.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI datatable.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datepicker.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI datepicker.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datepicker.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.min.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI datepicker.min.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/floating-panel.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI floating-panel.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI floating-panel.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/image-gallery.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI image-gallery.js v2.2.0 (https://wpmoo.org/)
+ * Moo UI image-gallery.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */