@dataimago/css-neutral 0.1.0-alpha.17 → 0.1.0-alpha.18

package/README.md

@@ -6,6 +6,7 @@ Neutral-identity compiled CSS + Tailwind preset — paired with `@dataimago/toke
 - `dist/tokens.css` — CSS custom properties (copied from `@dataimago/tokens-neutral`)
 - `dist/tokens.scss` — same, as SCSS
 - `dist/tailwind-preset.js` — Tailwind preset (Noto Sans throughout; neutral palette: ink/stone/paper/functional only)
+- `dist/js/figure-viewer.js` — the figure viewer script (export `./js/*`), without any styles. It builds a `div.di-figure-modal[role=dialog]` holding `.di-figure-modal-content`, `.di-figure-modal-bar`, `.di-figure-modal-esc`, `.di-figure-modal-close`, `.di-figure-modal-image` (plus `--vector` for SVG sources) and `.di-figure-modal-caption`, and toggles `is-open` and `hidden` on the dialog. Mark images with `.di-figure-box`. The presentation is yours: the neutral package ships no component stylesheet, so style those classes (the dialog is hidden by the script itself).
 
 **Does NOT ship** a compiled `dataimago.css` (component stylesheet). The house package's compiled CSS embeds dataimago-specific component styling (forest interactive primary, copper editorial framing, accent moral-weight beats); shipping that under a "neutral" name would be dishonest. Neutral consumers use tokens + Tailwind preset and author their own component stylesheets.
 

package/dist/dataviz/dataimago-dataviz.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/dataviz/dataimago-dataviz.css · sha256:0baea043cae14943ea11a8646b02b79aa64e955af258f93926376e61d2bc66a2 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/dataviz/dataimago-dataviz.css · sha256:0baea043cae14943ea11a8646b02b79aa64e955af258f93926376e61d2bc66a2 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 /* dataimago data-viz palette (Okabe-Ito). Categorical colour is never the only channel. */
 :root, [data-bs-theme="light"], body.quarto-light {
   --color-dataviz-okabe-ito-orange: #E69F00;

package/dist/dataviz/dataimago-dataviz.json

@@ -1,11 +1,11 @@
 {
   "_meta": {
     "package": "@dataimago/css-neutral",
-    "version": "0.1.0-alpha.17",
+    "version": "0.1.0-alpha.18",
     "path": "dist/dataviz/dataimago-dataviz.json",
     "sha256": "d7ac5f1127a41714ad85fc5d0fca58e6cacd200518fb7772b1c4b4247bbdd647",
     "note": "generated from tokens; do not edit",
-    "restore": "npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync"
+    "restore": "npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync"
   },
   "okabe-ito": {
     "orange": "#E69F00",

package/dist/dataviz/dataimago-dataviz.tex

@@ -1,4 +1,4 @@
-% @dataimago/css-neutral@0.1.0-alpha.17 dist/dataviz/dataimago-dataviz.tex · sha256:309fb3ff4fad3ad7890c1e873e2c61dacb7bb91056755c990c7fa60023260fb5 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync
+% @dataimago/css-neutral@0.1.0-alpha.18 dist/dataviz/dataimago-dataviz.tex · sha256:309fb3ff4fad3ad7890c1e873e2c61dacb7bb91056755c990c7fa60023260fb5 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
 % dataimago data-viz palette (Okabe-Ito), light mode, for PSTricks and TikZ. Requires xcolor.
 \definecolor{di-dataviz-okabe-ito-orange}{HTML}{E69F00}
 \definecolor{di-dataviz-okabe-ito-sky-blue}{HTML}{56B4E9}

package/dist/dataviz/dataimago_dataviz.R

@@ -1,4 +1,4 @@
-# @dataimago/css-neutral@0.1.0-alpha.17 dist/dataviz/dataimago_dataviz.R · sha256:eb8234c65a2952a999a403b96a0dc26f039bc998f56c3f87be57836ae7959bbd · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync
+# @dataimago/css-neutral@0.1.0-alpha.18 dist/dataviz/dataimago_dataviz.R · sha256:eb8234c65a2952a999a403b96a0dc26f039bc998f56c3f87be57836ae7959bbd · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
 # dataimago data-viz palette (Okabe-Ito). Categorical colour is never the only channel:
 # pair it with marker shape, line type or a label.
 

package/dist/fonts/cyrillic/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/cyrillic/fonts.css · sha256:6f4e34aeea25946f7a3234e48fd5f79f57aba44e459267d455a4eac8ab4b9fd7 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/cyrillic/fonts.css · sha256:6f4e34aeea25946f7a3234e48fd5f79f57aba44e459267d455a4eac8ab4b9fd7 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/cyrillic-ext/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/cyrillic-ext/fonts.css · sha256:e7a7948d9128600befa05a0b472d66d46999d0be9ce1f50bf9730de9c28938aa · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/cyrillic-ext/fonts.css · sha256:e7a7948d9128600befa05a0b472d66d46999d0be9ce1f50bf9730de9c28938aa · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/greek/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/greek/fonts.css · sha256:a79d666643da90c852dfcde96c8d5cd5237a4cf4f0d3d5edc16f971c3a52b704 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/greek/fonts.css · sha256:a79d666643da90c852dfcde96c8d5cd5237a4cf4f0d3d5edc16f971c3a52b704 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/greek-ext/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/greek-ext/fonts.css · sha256:4483a2b37ff134bda65fabfc9b0c5f91387b10f1e1ffd931d34a93e4be348e02 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/greek-ext/fonts.css · sha256:4483a2b37ff134bda65fabfc9b0c5f91387b10f1e1ffd931d34a93e4be348e02 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/lang.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/lang.css · sha256:f6c5232530e667d9e66b6cd7e7dbd4f6132ed96fc4439fdeff814c69727a9281 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/lang.css · sha256:f6c5232530e667d9e66b6cd7e7dbd4f6132ed96fc4439fdeff814c69727a9281 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 /* House layer: rebind the display variables on the named elements only. */
 :is(h1, h2, h3, h4, h5, h6, .title, .subtitle, .navbar-nav .nav-link, .navbar-nav .dropdown-item, .di-callout-title, .theorem-title, .proof-title, .definition-title, .proposition-title):is(:lang(el), :lang(ru), :lang(uk), :lang(bg), :lang(sr), :lang(mk), :lang(be), :lang(kk)) {
   --font-family-display: "Noto Sans", system-ui, sans-serif;

package/dist/fonts/latin/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/latin/fonts.css · sha256:673b070de2c959ab604549b301fb2a291a77e1057139142e0cdb3b92c65fa809 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/latin/fonts.css · sha256:673b070de2c959ab604549b301fb2a291a77e1057139142e0cdb3b92c65fa809 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/latin-ext/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/latin-ext/fonts.css · sha256:fe0f2f5c6f7e5e64400c2ef348fc688dd0e062f453e7d022626188ead0b2a5f7 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/latin-ext/fonts.css · sha256:fe0f2f5c6f7e5e64400c2ef348fc688dd0e062f453e7d022626188ead0b2a5f7 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/fonts/math/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/math/fonts.css · sha256:26c69cfaa369141dfd31754602675b9459c5b56e30fd33e72eb34ec846534320 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/math/fonts.css · sha256:26c69cfaa369141dfd31754602675b9459c5b56e30fd33e72eb34ec846534320 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans Math";
   font-style: normal;

package/dist/fonts/vietnamese/fonts.css

@@ -1,4 +1,4 @@
-/* @dataimago/css-neutral@0.1.0-alpha.17 dist/fonts/vietnamese/fonts.css · sha256:2776442fa59632e6c126ca0b00c5e5db10be26cb091c8fc3cb9891f31301fbed · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync */
+/* @dataimago/css-neutral@0.1.0-alpha.18 dist/fonts/vietnamese/fonts.css · sha256:2776442fa59632e6c126ca0b00c5e5db10be26cb091c8fc3cb9891f31301fbed · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync */
 @font-face {
   font-family: "Noto Sans";
   font-style: normal;

package/dist/js/figure-viewer.js

@@ -0,0 +1,446 @@
+// @dataimago/css-neutral@0.1.0-alpha.18 dist/js/figure-viewer.js · sha256:650db5390b3cbe889213e02efad264ed6b33042d6f9da1b476ec19f7d5b8e7e4 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
+/**
+ * dataimago figure viewer: click (or Enter/Space) an image marked `.di-figure-box` to see it enlarged
+ * in a dialog, with its figcaption (math, emphasis and links intact).
+ *
+ * A classic script with no dependencies and no global API. It binds once, by event delegation, so
+ * including it twice is harmless. Presentation lives in figure-modal.scss.
+ *
+ * Triggers: `img.di-figure-box`, or an `img` inside an element with that class, unless the image sits
+ * in a link (an `a[href]` that is not Quarto's `a.lightbox`). Each trigger is made keyboard-operable.
+ *
+ * Ported from LIwLD's figure-modal.js (SGPc, after #244). Three gaps there are closed here:
+ *   1. A caption link to another page, a missing id or a malformed fragment closes the viewer and
+ *      then navigates itself, instead of relying on a detached anchor.
+ *   2. A ResizeObserver keeps the caption's "scrollable region" semantics current while it is open.
+ *   3. openModal takes the trigger and stores it as the opener, not document.activeElement.
+ */
+(function () {
+  'use strict';
+
+  // Imported during server rendering (Next.js) there is no document: do nothing.
+  if (typeof document === 'undefined') return;
+
+  var root = document.documentElement;
+  if (root.dataset.diFigureViewer === 'bound') return;
+  root.dataset.diFigureViewer = 'bound';
+
+  var TRIGGER = 'img.di-figure-box, .di-figure-box img';
+  var CAPTION_ID = 'di-figure-modal-caption';
+  var CLOSE_GLYPH = '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" ' +
+    'stroke-width="1.5" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5"/></svg>';
+
+  var modal = null;
+  var modalImg = null;
+  var modalCaption = null;
+  var closeBtn = null;
+  var resizeObserver = null;
+
+  var named = typeof WeakSet === 'function' ? new WeakSet() : null; // triggers whose aria-label is ours
+  var pendingSpace = null;  // the trigger a Space keydown landed on; opens on its keyup
+  var decorateQueued = false;
+
+  var opener = null;        // the trigger that opened the viewer; takes focus back on close
+  var scrollPosition = 0;   // where the page was, restored on close
+  var scrollLeft = 0;
+  var inerted = [];         // page content made inert while open
+  var savedBody = null;     // the body's inline styles before the viewer touched them
+  var sidebarSaved = null;
+
+  // ── Triggers ───────────────────────────────────────────────────────────────
+
+  /** The trigger image for a node, or null. Images in a link (other than a.lightbox) are left alone. */
+  function triggerFor(node) {
+    var img = node && node.closest ? node.closest('img') : null;
+    if (!img || !img.matches(TRIGGER)) return null;
+    var link = img.closest('a[href]');
+    if (link && !link.classList.contains('lightbox')) return null;
+    return img;
+  }
+
+  /** The accessible name for a trigger: its alt text, else its figure's caption, else none. */
+  function describe(img) {
+    var text = (img.getAttribute('alt') || '').trim();
+    if (!text) {
+      var figure = img.closest('figure');
+      var caption = figure ? figure.querySelector('figcaption') : null;
+      text = caption ? caption.textContent.replace(/\s+/g, ' ').trim() : '';
+      if (text.length > 120) text = text.slice(0, 120).replace(/\s+$/, '') + '…';
+    }
+    return text ? 'Enlarge figure: ' + text : 'Enlarge figure';
+  }
+
+  /** Make a trigger keyboard-operable and named. An aria-label the author wrote is left alone. */
+  function decorate(img) {
+    // Quarto's lightbox wrapper (an author forced `lightbox: true`): make the image the only control. The
+    // anchor loses its href (kept in data-di-href), so it is no longer a link or a tab stop and nothing nests.
+    var wrapper = img.closest('a.lightbox');
+    if (wrapper && wrapper.hasAttribute('href')) {
+      wrapper.setAttribute('data-di-href', wrapper.getAttribute('href'));
+      wrapper.removeAttribute('href');
+    }
+    if (!img.hasAttribute('tabindex')) img.setAttribute('tabindex', '0');
+    if (!img.hasAttribute('role')) img.setAttribute('role', 'button');
+    if (img.hasAttribute('aria-label') && !(named && named.has(img))) return;
+    img.setAttribute('aria-label', describe(img));
+    if (named) named.add(img);
+  }
+
+  function decorateAll() {
+    document.querySelectorAll(TRIGGER).forEach(function (img) {
+      if (triggerFor(img)) decorate(img);
+    });
+  }
+
+  /** Triggers rendered after load (client navigation, React) get decorated too, once per frame. */
+  function observeLateTriggers() {
+    if (typeof MutationObserver !== 'function' || !document.body) return;
+    new MutationObserver(function (records) {
+      var outside = records.some(function (r) { return !(modal && modal.contains(r.target)) && !(r.addedNodes.length === 1 && r.addedNodes[0] === modal); });
+      if (!outside || decorateQueued) return;
+      decorateQueued = true;
+      requestAnimationFrame(function () {
+        decorateQueued = false;
+        decorateAll();
+      });
+    }).observe(document.body, { childList: true, subtree: true });
+  }
+
+  // ── The dialog ─────────────────────────────────────────────────────────────
+
+  function createModal() {
+    modal = document.createElement('div');
+    modal.className = 'di-figure-modal';
+    modal.hidden = true; // hidden by the module itself, so a page without the stylesheet works
+    modal.setAttribute('role', 'dialog');
+    modal.setAttribute('aria-modal', 'true');
+    modal.setAttribute('aria-label', 'Figure');
+    modal.setAttribute('aria-describedby', CAPTION_ID);
+    modal.innerHTML =
+      '<div class="di-figure-modal-content">' +
+        '<div class="di-figure-modal-bar">' +
+          '<kbd class="di-figure-modal-esc" aria-hidden="true">Esc</kbd>' +
+          '<button class="di-figure-modal-close" type="button" aria-label="Close figure">' + CLOSE_GLYPH + '</button>' +
+        '</div>' +
+        '<img class="di-figure-modal-image" alt="">' +
+        '<div class="di-figure-modal-caption" id="' + CAPTION_ID + '"></div>' +
+      '</div>';
+    document.body.appendChild(modal);
+    modalImg = modal.querySelector('.di-figure-modal-image');
+    modalCaption = modal.querySelector('.di-figure-modal-caption');
+    closeBtn = modal.querySelector('.di-figure-modal-close');
+    modalImg.addEventListener('load', sizeImage);
+
+    closeBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      closeModal();
+    });
+    modalCaption.addEventListener('click', onCaptionClick);
+    modal.addEventListener('keydown', onModalKeydown);
+    // A click on the backdrop itself (not the content) closes.
+    modal.addEventListener('click', function (e) {
+      if (e.target === modal) closeModal();
+    });
+  }
+
+  /**
+   * A vector source scales to fill the box the CSS caps allow, so it needs its aspect ratio; a raster
+   * keeps its natural size (never upscaled). Runs when the enlarged image has loaded.
+   */
+  function sizeImage() {
+    if (!isOpen() || !opener || !modalImg.classList.contains('is-vector-source')) return;
+    var w = modalImg.naturalWidth || opener.naturalWidth || opener.clientWidth;
+    var h = modalImg.naturalHeight || opener.naturalHeight || opener.clientHeight;
+    if (!w || !h) return;
+    modalImg.style.setProperty('--di-figure-ratio', String(w / h));
+    modalImg.classList.add('di-figure-modal-image--vector');
+  }
+
+  function isVectorSource(src) {
+    if (/^data:image\/svg\+xml/i.test(src)) return true;
+    try {
+      return /\.svg$/i.test(new URL(src, location.href).pathname);
+    } catch (err) {
+      return false;
+    }
+  }
+
+  function isOpen() {
+    return Boolean(modal && modal.classList.contains('is-open'));
+  }
+
+  /**
+   * A caption taller than its box scrolls, so it becomes a named, focusable region (arrow keys scroll
+   * it; a screen reader still reads the text inside). Recomputed whenever the caption is resized.
+   */
+  function syncCaptionRegion() {
+    if (!isOpen() || modalCaption.hidden) return;
+    if (modalCaption.scrollHeight > modalCaption.clientHeight) {
+      modalCaption.setAttribute('role', 'region');
+      modalCaption.setAttribute('tabindex', '0');
+      modalCaption.setAttribute('aria-label', 'Figure caption');
+    } else {
+      clearCaptionRegion();
+    }
+  }
+
+  function clearCaptionRegion() {
+    modalCaption.removeAttribute('role');
+    modalCaption.removeAttribute('tabindex');
+    modalCaption.removeAttribute('aria-label');
+  }
+
+  /** Fill the caption from a copy of the figcaption's HTML (ids stripped); hide the box when empty. */
+  function setCaption(figcaption) {
+    modalCaption.replaceChildren();
+    clearCaptionRegion();
+    if (figcaption) {
+      var copy = figcaption.cloneNode(true);
+      copy.querySelectorAll('[id]').forEach(function (el) { el.removeAttribute('id'); });
+      modalCaption.append.apply(modalCaption, copy.childNodes);
+    }
+    var empty = !modalCaption.textContent.trim() && !modalCaption.querySelector('img, svg, math');
+    modalCaption.hidden = empty;
+    if (empty) modal.removeAttribute('aria-describedby');
+    else modal.setAttribute('aria-describedby', CAPTION_ID);
+  }
+
+  /** @param {HTMLImageElement} trigger the image that was clicked or keyboard-activated */
+  function openModal(trigger) {
+    if (!modal) createModal();
+    if (isOpen()) return;
+    opener = trigger;
+    scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;
+
+    var source = trigger.currentSrc || trigger.src;
+    modalImg.classList.remove('di-figure-modal-image--vector');
+    modalImg.style.removeProperty('--di-figure-ratio');
+    modalImg.classList.toggle('is-vector-source', isVectorSource(source));
+    modalImg.src = source;
+    modalImg.alt = trigger.getAttribute('alt') || '';
+    var figure = trigger.closest('figure');
+    setCaption(figure ? figure.querySelector('figcaption') : null);
+    modal.hidden = false;
+    modal.classList.add('is-open');
+
+    // Pin the body where it is. Its own inline styles are remembered and put back on close; the
+    // scrollbar's width is added as padding so the page doesn't shift sideways when it goes.
+    var body = document.body;
+    var scrollbar = window.innerWidth - document.documentElement.clientWidth;
+    var padding = parseFloat(getComputedStyle(body).paddingRight) || 0;
+    savedBody = {};
+    ['overflow', 'position', 'top', 'left', 'right', 'paddingRight'].forEach(function (p) { savedBody[p] = body.style[p]; });
+    body.style.overflow = 'hidden';
+    body.style.position = 'fixed';
+    body.style.top = '-' + scrollPosition + 'px';
+    body.style.left = '0';
+    body.style.right = '0';
+    if (scrollbar > 0) body.style.paddingRight = (padding + scrollbar) + 'px';
+
+    // Quarto's TOC sidebar sits outside the pinned flow: keep it where it is.
+    var sidebar = document.querySelector('#quarto-sidebar-toc-left');
+    if (sidebar) {
+      sidebarSaved = { position: sidebar.style.position, top: sidebar.style.top };
+      sidebar.style.position = 'fixed';
+      sidebar.style.top = '0';
+    }
+
+    // Everything outside the dialog is inert while it is open.
+    inerted = Array.prototype.filter.call(body.children, function (el) { return el !== modal && !el.inert; });
+    inerted.forEach(function (el) { el.inert = true; });
+
+    syncCaptionRegion();
+    if (typeof ResizeObserver === 'function') {
+      resizeObserver = new ResizeObserver(syncCaptionRegion);
+      resizeObserver.observe(modalCaption);
+    }
+    closeBtn.focus();
+  }
+
+  /**
+   * Run a scroll without animation. `behavior: 'instant'` is not portable (older WebKit throws or treats it
+   * as `auto`), and the page may set `scroll-behavior: smooth` on html or body (Bootstrap does), so both are
+   * set to `auto` for the call and put back after.
+   */
+  function scrollInstantly(fn) {
+    var targets = [document.documentElement, document.body];
+    var saved = targets.map(function (el) { return el.style.scrollBehavior; });
+    targets.forEach(function (el) { el.style.scrollBehavior = 'auto'; });
+    try {
+      fn();
+    } finally {
+      targets.forEach(function (el, i) { el.style.scrollBehavior = saved[i]; });
+    }
+  }
+
+  /**
+   * @param {{returnFocus?: boolean}} [options] returnFocus false (a caption link to this page) keeps
+   *   the caption and leaves focus for the caller to move to the link's target.
+   */
+  function closeModal(options) {
+    if (!isOpen()) return;
+    var returnFocus = !options || options.returnFocus !== false;
+    modal.classList.remove('is-open');
+    modal.hidden = true;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    clearCaptionRegion();
+    inerted.forEach(function (el) { el.inert = false; });
+    inerted = [];
+
+    var body = document.body;
+    Object.keys(savedBody).forEach(function (p) { body.style[p] = savedBody[p]; });
+    savedBody = null;
+    var sidebar = document.querySelector('#quarto-sidebar-toc-left');
+    if (sidebar && sidebarSaved) {
+      sidebar.style.position = sidebarSaved.position;
+      sidebar.style.top = sidebarSaved.top;
+    }
+    sidebarSaved = null;
+
+    // Back to the reading position in the same frame the body is unpinned, without animation. A scroll
+    // that fails must not stop the cleanup below.
+    try {
+      scrollInstantly(function () { window.scrollTo(scrollLeft, scrollPosition); });
+    } catch (err) { /* the page keeps its own position */ }
+
+    modalImg.removeAttribute('src');
+    var back = opener;
+    opener = null;
+    if (!returnFocus) return;
+    modalCaption.replaceChildren();
+    if (back && document.contains(back)) back.focus({ preventScroll: true });
+  }
+
+  // ── Caption links ──────────────────────────────────────────────────────────
+
+  function onCaptionClick(e) {
+    var link = e.target.closest('a[href]');
+    if (!link) return;
+    var target = link.getAttribute('target');
+    // A modified click or a link with its own target keeps the browser default; the viewer stays open.
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || (target && target !== '_self')) return;
+
+    // Resolve an in-page target before acting on the click; a malformed fragment cannot resolve.
+    var dest = null;
+    var samePage = link.origin === location.origin && link.pathname === location.pathname &&
+      link.search === location.search && link.hash;
+    if (samePage) {
+      try {
+        dest = document.getElementById(decodeURIComponent(link.hash.slice(1)));
+      } catch (err) {
+        dest = null;
+      }
+    }
+    e.preventDefault();
+    if (!dest) {
+      // Another page, a missing id or a malformed fragment: close at the figure, then navigate.
+      var href = link.href;
+      closeModal();
+      location.href = href;
+      return;
+    }
+
+    // In-page: back at the reading position first. After two frames, once that offset is the page's
+    // own, write the history entry there (Back returns to the figure), then go to the target.
+    var hash = link.hash;
+    var href2 = link.href;
+    closeModal({ returnFocus: false });
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        if (location.hash !== hash) {
+          try {
+            history.pushState(null, '', hash);
+          } catch (err) {
+            modalCaption.replaceChildren();
+            window.location.href = href2;
+            return;
+          }
+        }
+        try {
+          scrollInstantly(function () { dest.scrollIntoView({ block: 'start' }); });
+        } catch (err) { /* focus below still moves to the target */ }
+        if (!dest.matches('a[href], button, input, select, textarea, [tabindex]')) dest.setAttribute('tabindex', '-1');
+        dest.focus({ preventScroll: true });
+        modalCaption.replaceChildren();
+      });
+    });
+  }
+
+  // ── Keyboard ───────────────────────────────────────────────────────────────
+
+  /** Focusable elements in the dialog, in order: close button, the caption region, caption links. */
+  function dialogFocusables() {
+    var region = modalCaption.hasAttribute('tabindex') ? [modalCaption] : [];
+    return [closeBtn].concat(region, Array.prototype.slice.call(modalCaption.querySelectorAll('a[href]')));
+  }
+
+  /** Tab and Shift+Tab wrap inside the dialog (the page behind it is inert). */
+  function onModalKeydown(e) {
+    if (e.key !== 'Tab' || !isOpen()) return;
+    var items = dialogFocusables();
+    var first = items[0];
+    var last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  // ── Delegated events ───────────────────────────────────────────────────────
+
+  // Capture phase, so Quarto's lightbox (GLightbox, bound to the a.lightbox wrapper) never sees the
+  // click when an author forced `lightbox: true`: one click, one viewer.
+  document.addEventListener('click', function (e) {
+    if (e.button !== 0 || isOpen()) return;
+    var img = triggerFor(e.target);
+    if (!img) {
+      var forced = e.target.closest ? e.target.closest('a.lightbox') : null;
+      var inner = forced && forced.querySelector(TRIGGER);
+      img = inner ? triggerFor(inner) : null;
+      if (!img) return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    decorate(img);
+    openModal(img);
+  }, true);
+
+  document.addEventListener('keydown', function (e) {
+    if (isOpen()) {
+      if (e.key === 'Escape') closeModal();
+      return;
+    }
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    var img = triggerFor(e.target);
+    if (!img || e.target !== img) return;
+    e.preventDefault();
+    // Enter opens on keydown. Space opens on keyup, on the same trigger: opening on keydown moves focus
+    // to the close button, and Firefox then fires a click on that button at the Space keyup.
+    if (e.key === ' ') pendingSpace = e.repeat ? pendingSpace : img;
+    else openModal(img);
+  });
+
+  document.addEventListener('keyup', function (e) {
+    if (e.key !== ' ') return;
+    var img = pendingSpace;
+    pendingSpace = null;
+    if (!img || isOpen() || e.target !== img) return;
+    e.preventDefault();
+    openModal(img);
+  });
+
+  function start() {
+    decorateAll();
+    observeLateTriggers();
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+  else start();
+})();

package/dist/latex/dataimago-tokens.sty

@@ -1,4 +1,4 @@
-% @dataimago/css-neutral@0.1.0-alpha.17 dist/latex/dataimago-tokens.sty · sha256:ea922ccf853386de274d158e164eec61a800331bf319abb7d048a743483176ad · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync
+% @dataimago/css-neutral@0.1.0-alpha.18 dist/latex/dataimago-tokens.sty · sha256:64920a90a7cf390f8c556c02cbef14a2fb4da51cd9fdb235c0d67ccf95870f65 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
 \NeedsTeXFormat{LaTeX2e}
 \ProvidesPackage{dataimago-tokens}[dataimago design tokens, light mode]
 \RequirePackage{xcolor}
@@ -41,15 +41,19 @@
 \definecolor{di-surface-navbar}{HTML}{EDEDEB}
 \definecolor{di-surface-navbar-scrolled}{HTML}{EDEDEB}
 \definecolor{di-surface-code}{HTML}{F7F7F6}
+\definecolor{di-surface-scrim}{HTML}{353531}
+\definecolor{di-surface-scrim-solid}{HTML}{252522}
 \definecolor{di-border-subtle}{HTML}{888785}
 \definecolor{di-border-moderate}{HTML}{666563}
 \definecolor{di-border-strong}{HTML}{444342}
 \definecolor{di-border-card}{HTML}{666563}
 \definecolor{di-border-code}{HTML}{D6D3D1}
+\definecolor{di-border-on-scrim-focus}{HTML}{F7F7F6}
 \definecolor{di-content-primary}{HTML}{14140F}
 \definecolor{di-content-secondary}{HTML}{424240}
 \definecolor{di-content-muted}{HTML}{5E5E5C}
 \definecolor{di-content-inverse}{HTML}{FDF9F2}
+\definecolor{di-content-on-scrim}{HTML}{F7F7F6}
 \definecolor{di-interactive-primary}{HTML}{292524}
 \definecolor{di-interactive-hover}{HTML}{1C1917}
 \definecolor{di-interactive-accent}{HTML}{292524}

package/dist/outputs.json

@@ -1,59 +1,60 @@
 {
   "package": "@dataimago/css-neutral",
-  "version": "0.1.0-alpha.17",
+  "version": "0.1.0-alpha.18",
   "files": {
-    "dataviz/dataimago-dataviz.css": "edcf9c72465ccba88fb288f2c4173f6a2464f9ddec9d83e7d238c204ebb61401",
-    "dataviz/dataimago-dataviz.json": "d71771c3c387b75dc5e1ed3300cb9d6baf0a49b7cb3ee6a4c1fce21a8aa1d504",
-    "dataviz/dataimago-dataviz.tex": "92644b40ce3caf17f0821b9defdbbbe7442b0b05ad5399edde2db8d30c3cf56d",
-    "dataviz/dataimago_dataviz.R": "668421b5460c73ad84c5e29e47d700fee346dd2bebc3831f0a09b4aaec065d12",
+    "dataviz/dataimago-dataviz.css": "3442e00c96de1a376a277fc05c93fe8c310a51fede262099f5f4307c28583646",
+    "dataviz/dataimago-dataviz.json": "1fda85572862195fa25e5671d329c25e9b3ca1d322fd5a76111b21e579f459f8",
+    "dataviz/dataimago-dataviz.tex": "05c69d0d3cc3fbd9f484f01938b26a4a6c449651d8f65cac694f88179a37d668",
+    "dataviz/dataimago_dataviz.R": "8885b43cee3fa797c4777579cf4caad7110b42c28513f2db315f51bdb9d05983",
     "fonts/cyrillic-ext/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/cyrillic-ext/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/cyrillic-ext/fonts.css": "64a818cd764d6bc72952d046ff62bb2c1e0d30b5287a3427db817a224fd462cd",
+    "fonts/cyrillic-ext/fonts.css": "3f8b517a626428003412041d415a6106e1d40c3c85ea0b9c0dce365b41b0d446",
     "fonts/cyrillic-ext/noto-sans-italic.woff2": "e43ef19dd130cf6564cc06d68a8567a8f323047584f81e251a46e2b15a2f1d49",
     "fonts/cyrillic-ext/noto-sans-mono.woff2": "4f62d4266b525554838d2e19d581710ee0f4963612310c8552c6f15e21ff309a",
     "fonts/cyrillic-ext/noto-sans.woff2": "b6a3b92bc2e7ff8d0692c2ad266f06e40e2b1ec388f3e90234af957a3272316a",
     "fonts/cyrillic/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/cyrillic/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/cyrillic/fonts.css": "f884f0aed55cb116f47c1595c7ccfad817ee0ff55dc5083eeae96b703e205a41",
+    "fonts/cyrillic/fonts.css": "2205468d983ec115f7197d5e21a6d17a167a4b6cb122fb885430aed9ef2c52e4",
     "fonts/cyrillic/noto-sans-italic.woff2": "ef6d4e10370334dc2f19230350c6008b528998abc474deb908d3ed4ae9d951c2",
     "fonts/cyrillic/noto-sans-mono.woff2": "e5b0c11fb6cc4c39dd406d17b7a1afe512264f27d58ec5b21e05c72f9347c43e",
     "fonts/cyrillic/noto-sans.woff2": "ee4d2c2b38b5ba72dadb0fb56ce6e152d6fcb39ee49955245e80c7b4a9d42a6e",
     "fonts/greek-ext/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/greek-ext/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/greek-ext/fonts.css": "4a3f058a2b4e084e8d6c1a57a8adf80d3d95fd2ad18293fd33adee13185ccce9",
+    "fonts/greek-ext/fonts.css": "3d42d3c7254af3db886f9926eff575b46ec67ad5c945939182762a6d945208e9",
     "fonts/greek-ext/noto-sans-italic.woff2": "efbc584896c29627152d47b5b8975d72d7e1b9dfda4ef0e0a79d61cea84a99b8",
     "fonts/greek-ext/noto-sans-mono.woff2": "59d4726f29ea68cc31bae66f8f5d936c26b9f6e2e4f75a8640cb4a9934ff6d98",
     "fonts/greek-ext/noto-sans.woff2": "eff6e032b0aebb4f6220f50b6afb13fcea3b68a0beb31f1796447854baab667e",
     "fonts/greek/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/greek/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/greek/fonts.css": "26becbf29a9785eb066f77c823150161d1a7ac84866cbf62287a38240b4d9091",
+    "fonts/greek/fonts.css": "906cb62ca2d41d34131eab48f2f25c9a11b4c4333b03c77dd440500ab788f2d7",
     "fonts/greek/noto-sans-italic.woff2": "b786720515691eaac7642f6e0e7824359511770d37594067bcf9c06db7c100ce",
     "fonts/greek/noto-sans-mono.woff2": "b73c27885be7a02aea7dbfc6ed91e9c8791ff7f455bc24344aadd4a492465950",
     "fonts/greek/noto-sans.woff2": "5236e246865e7a26bb8839ba1350d43db176c2e8e8fd986da8dd30b8623d9be0",
-    "fonts/lang.css": "158d05a04b04283dffdf0667bf9aa46ff90a84460c6e28cc0136e0e3e29cb284",
+    "fonts/lang.css": "cc8202de6b4e691fefdc8ea62f2685a0271f04d818ccb0c2663d15fe8f0dd805",
     "fonts/latin-ext/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/latin-ext/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/latin-ext/fonts.css": "d5289b9e90801efacd68b5885abe4fdf6b2baa4ed342781770c981f7f5526bbf",
+    "fonts/latin-ext/fonts.css": "1d0005a213ec771ab46a149f28b24e1f57d8aff0b24e80f831455f2a38ef3db4",
     "fonts/latin-ext/noto-sans-italic.woff2": "73d821b043f17020a0332cbc56a31bea59d8346a53c03777f66889a0ad718997",
     "fonts/latin-ext/noto-sans-mono.woff2": "3f87ba62a12d4659b5bd91aa6cc12c5f111377152e8ed4010251af7dedea4e06",
     "fonts/latin-ext/noto-sans.woff2": "25713d5d56b03ad45105b83b51a62e119122d7949df1769d34fad9ed1993d9d5",
     "fonts/latin/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/latin/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/latin/fonts.css": "7d60345e2149395f8904b9996ff45c08ca94e9b0e7d6fc87287d743812be9f6d",
+    "fonts/latin/fonts.css": "d0076f473d52014ac91910e3280a4eba4e93eddddf9d670c2fdf0d80c90b5850",
     "fonts/latin/noto-sans-italic.woff2": "ad80ce4e76242569275e70e68331b798255afb91ed358238d9125039dd75c23b",
     "fonts/latin/noto-sans-mono.woff2": "11e93a684ed911abe586152bbceaadbf42e757d44d756eec7f445aa28fec6eba",
     "fonts/latin/noto-sans.woff2": "039e8aa65c7d0b18d5685136302b207c0c8a6f180ca610bcd07a24425ecca296",
     "fonts/math/OFL-NotoSansMath.txt": "c9c63b8ed6cf76b2ce0c58b241acfc1195c2c928334c989c7047cbdac58773d9",
-    "fonts/math/fonts.css": "b850ae89a313f18400c141055b91bb991311c5784b0a0b1a0c06dfedc07f34bd",
+    "fonts/math/fonts.css": "e011a5dfa3e235151fa87f50cfa9bd1b3e2c886f76a3f471ae77e8d695056b9b",
     "fonts/math/noto-sans-math.woff2": "30f85f333343fc8a5fb4d93c4b66886544cd6fbe338bda0109ebed23df254df0",
     "fonts/vietnamese/OFL-NotoSans.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
     "fonts/vietnamese/OFL-NotoSansMono.txt": "cee9892f9f0cc8fe882c9e9537ee6a89621d86ee7ceaf70b02e2b2b1c25c061a",
-    "fonts/vietnamese/fonts.css": "2209f37f53ecb31a3d90d2fadbe78fbd3e90af2020bd940476aeff46d862eb2e",
+    "fonts/vietnamese/fonts.css": "8976d34ca9e54df221f0801feb9b1adb3c2802209a4602f5b6f6ebe7302f8402",
     "fonts/vietnamese/noto-sans-italic.woff2": "449fa7963dd8e53c7a1d47fe696464df59627bf7585eae4bc96a4cb72c98bd64",
     "fonts/vietnamese/noto-sans-mono.woff2": "4cf1643290fefa9d0b2f8a6a6df076d3ba226db90c1954c42e27735b3b6e8075",
     "fonts/vietnamese/noto-sans.woff2": "0d3eb41e600702e4415b8860cd248ce3bcb710b2d81e18517a02048836cdc88e",
-    "latex/dataimago-tokens.sty": "32b3d0b9d055f73ce79483bebb9130db8c9a5ad94b44e9920cfa7ba50709eb5f",
-    "quarto/neutral-dark.scss": "afce2f6ca5832b0c642a4a98c85d508f82c32301d49473e38cf45f49e0257d55",
-    "quarto/neutral-light.scss": "c60ca72097d90c04dc3639b4242510d06a1f4deeb3a46be0844811f320f162bd"
+    "js/figure-viewer.js": "6bfabc6eb153cd64096cf5882b958af6e75529551972d706aab090b4bc5c12b9",
+    "latex/dataimago-tokens.sty": "6892917358c4f6f4ea07e6e133325623f0bbdb6723e4685b2b1375c0f4f06750",
+    "quarto/neutral-dark.scss": "5a20cbb20c0bc1065d1468d5f93cf905ff3b5146bcb9990254285d927d019c8e",
+    "quarto/neutral-light.scss": "d2d42731655333fd6c2794d829e6fc30150c70b769d41908d3208a65f49dea4b"
   }
 }

package/dist/quarto/neutral-dark.scss

@@ -1,4 +1,4 @@
-// @dataimago/css-neutral@0.1.0-alpha.17 dist/quarto/neutral-dark.scss · sha256:1446c6c3779ced558ab8c3212fe569ae270b99487a3b50bd91b57e155091fe30 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync
+// @dataimago/css-neutral@0.1.0-alpha.18 dist/quarto/neutral-dark.scss · sha256:11ff2e4e00df2500fbad8e8b9846bb74a8d8b5cdcac3dee1baa4255c08edbae0 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
 // neutral dark theme for Quarto 1.11 — generated from the design tokens (tools/formats/quarto.mjs).
 // Bootstrap Sass variables are compile-time sRGB; runtime colours come from the custom properties below.
 
@@ -150,15 +150,19 @@ $web-font-path: false !default;
   --color-surface-navbar: #141410;
   --color-surface-navbar-scrolled: #141410;
   --color-surface-code: #1c1917;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(253, 249, 242, 0.45);
   --color-border-moderate: rgba(253, 249, 242, 0.60);
   --color-border-strong: rgba(253, 249, 242, 0.75);
   --color-border-card: rgba(253, 249, 242, 0.60);
   --color-border-code: #292524;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #fdf9f2;
   --color-content-secondary: #a8a29e;
   --color-content-muted: #89827d;
   --color-content-inverse: #0c0a09;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #d6d3d1;
   --color-interactive-hover: #a8a29e;
   --color-interactive-accent: #d6d3d1;
@@ -174,6 +178,8 @@ $web-font-path: false !default;
   --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
   --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
+  --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
   --border-subtle: rgba(237, 237, 235, 0.47);
   --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
@@ -240,6 +246,15 @@ pre {
   color: var(--color-content-primary);
 }
 
+// References run together when the CSL style asks for entry-spacing 0 (APA does): Pandoc writes the entries as
+// bare divs and gives them an inline margin of entry-spacing em, which is 0 there. Half a line between them
+// (line-height 1.5), as the PDF format does (LIwLD author review, 2026-11-03). Only for entry-spacing 0, on
+// the bibliography's own entries: a style that asks for spacing keeps it, and Quarto's citation hover popups
+// (also .csl-entry) are untouched.
+div.csl-bib-body[data-entry-spacing="0"] > div.csl-entry {
+  margin-bottom: 0.75em;
+}
+
 // Quarto themes its popups as [data-theme~="quarto"] at compile time ($body-bg);
 // match that specificity so the runtime token wins.
 .tippy-box, .tippy-box[data-theme~="quarto"] {

package/dist/quarto/neutral-light.scss

@@ -1,4 +1,4 @@
-// @dataimago/css-neutral@0.1.0-alpha.17 dist/quarto/neutral-light.scss · sha256:fedf2c9225820974c7e70257f90ed94641b4bb1eed35a4f768e50bc2b7e5ca8f · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.17 dataimago-sync
+// @dataimago/css-neutral@0.1.0-alpha.18 dist/quarto/neutral-light.scss · sha256:ad4fcd4a9427ed7ce269d26392494cb840c0ef4903a63dd225e9446c79ed14d7 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.18 dataimago-sync
 // neutral light theme for Quarto 1.11 — generated from the design tokens (tools/formats/quarto.mjs).
 // Bootstrap Sass variables are compile-time sRGB; runtime colours come from the custom properties below.
 
@@ -150,15 +150,19 @@ $web-font-path: false !default;
   --color-surface-navbar: #ededeb;
   --color-surface-navbar-scrolled: #ededeb;
   --color-surface-code: #f7f7f6;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(12, 10, 9, 0.45);
   --color-border-moderate: rgba(12, 10, 9, 0.60);
   --color-border-strong: rgba(12, 10, 9, 0.75);
   --color-border-card: rgba(12, 10, 9, 0.60);
   --color-border-code: #d6d3d1;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #14140f;
   --color-content-secondary: #424240;
   --color-content-muted: #5e5e5c;
   --color-content-inverse: #fdf9f2;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #292524;
   --color-interactive-hover: #1c1917;
   --color-interactive-accent: #292524;
@@ -174,6 +178,8 @@ $web-font-path: false !default;
   --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
   --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --border-subtle: rgba(20, 20, 16, 0.47);
   --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
@@ -240,6 +246,15 @@ pre {
   color: var(--color-content-primary);
 }
 
+// References run together when the CSL style asks for entry-spacing 0 (APA does): Pandoc writes the entries as
+// bare divs and gives them an inline margin of entry-spacing em, which is 0 there. Half a line between them
+// (line-height 1.5), as the PDF format does (LIwLD author review, 2026-11-03). Only for entry-spacing 0, on
+// the bibliography's own entries: a style that asks for spacing keeps it, and Quarto's citation hover popups
+// (also .csl-entry) are untouched.
+div.csl-bib-body[data-entry-spacing="0"] > div.csl-entry {
+  margin-bottom: 0.75em;
+}
+
 // Quarto themes its popups as [data-theme~="quarto"] at compile time ($body-bg);
 // match that specificity so the runtime token wins.
 .tippy-box, .tippy-box[data-theme~="quarto"] {

package/dist/tokens.css

@@ -115,15 +115,19 @@
   --color-surface-navbar: #ededeb;
   --color-surface-navbar-scrolled: #ededeb;
   --color-surface-code: #f7f7f6;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(12, 10, 9, 0.45);
   --color-border-moderate: rgba(12, 10, 9, 0.60);
   --color-border-strong: rgba(12, 10, 9, 0.75);
   --color-border-card: rgba(12, 10, 9, 0.60);
   --color-border-code: #d6d3d1;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #14140f;
   --color-content-secondary: #424240;
   --color-content-muted: #5e5e5c;
   --color-content-inverse: #fdf9f2;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #292524;
   --color-interactive-hover: #1c1917;
   --color-interactive-accent: #292524;
@@ -139,6 +143,8 @@
   --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
   --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --border-subtle: rgba(20, 20, 16, 0.47);
   --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
@@ -159,15 +165,19 @@
   --color-surface-navbar: #141410;
   --color-surface-navbar-scrolled: #141410;
   --color-surface-code: #1c1917;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(253, 249, 242, 0.45);
   --color-border-moderate: rgba(253, 249, 242, 0.60);
   --color-border-strong: rgba(253, 249, 242, 0.75);
   --color-border-card: rgba(253, 249, 242, 0.60);
   --color-border-code: #292524;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #fdf9f2;
   --color-content-secondary: #a8a29e;
   --color-content-muted: #89827d;
   --color-content-inverse: #0c0a09;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #d6d3d1;
   --color-interactive-hover: #a8a29e;
   --color-interactive-accent: #d6d3d1;
@@ -183,6 +193,8 @@
   --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
   --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
+  --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
   --border-subtle: rgba(237, 237, 235, 0.47);
   --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
@@ -204,15 +216,19 @@
     --color-surface-navbar: #141410;
     --color-surface-navbar-scrolled: #141410;
     --color-surface-code: #1c1917;
+    --color-surface-scrim: rgba(20, 20, 16, 0.85);
+    --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
     --color-border-subtle: rgba(253, 249, 242, 0.45);
     --color-border-moderate: rgba(253, 249, 242, 0.60);
     --color-border-strong: rgba(253, 249, 242, 0.75);
     --color-border-card: rgba(253, 249, 242, 0.60);
     --color-border-code: #292524;
+    --color-border-on-scrim-focus: #f7f7f6;
     --color-content-primary: #fdf9f2;
     --color-content-secondary: #a8a29e;
     --color-content-muted: #89827d;
     --color-content-inverse: #0c0a09;
+    --color-content-on-scrim: #f7f7f6;
     --color-interactive-primary: #d6d3d1;
     --color-interactive-hover: #a8a29e;
     --color-interactive-accent: #d6d3d1;
@@ -228,6 +244,8 @@
     --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
     --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
+    --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
     --border-subtle: rgba(237, 237, 235, 0.47);
     --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;

package/dist/tokens.scss

@@ -115,15 +115,19 @@
   --color-surface-navbar: #ededeb;
   --color-surface-navbar-scrolled: #ededeb;
   --color-surface-code: #f7f7f6;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(12, 10, 9, 0.45);
   --color-border-moderate: rgba(12, 10, 9, 0.60);
   --color-border-strong: rgba(12, 10, 9, 0.75);
   --color-border-card: rgba(12, 10, 9, 0.60);
   --color-border-code: #d6d3d1;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #14140f;
   --color-content-secondary: #424240;
   --color-content-muted: #5e5e5c;
   --color-content-inverse: #fdf9f2;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #292524;
   --color-interactive-hover: #1c1917;
   --color-interactive-accent: #292524;
@@ -139,6 +143,8 @@
   --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
   --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --border-subtle: rgba(20, 20, 16, 0.47);
   --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
@@ -159,15 +165,19 @@
   --color-surface-navbar: #141410;
   --color-surface-navbar-scrolled: #141410;
   --color-surface-code: #1c1917;
+  --color-surface-scrim: rgba(20, 20, 16, 0.85);
+  --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-border-subtle: rgba(253, 249, 242, 0.45);
   --color-border-moderate: rgba(253, 249, 242, 0.60);
   --color-border-strong: rgba(253, 249, 242, 0.75);
   --color-border-card: rgba(253, 249, 242, 0.60);
   --color-border-code: #292524;
+  --color-border-on-scrim-focus: #f7f7f6;
   --color-content-primary: #fdf9f2;
   --color-content-secondary: #a8a29e;
   --color-content-muted: #89827d;
   --color-content-inverse: #0c0a09;
+  --color-content-on-scrim: #f7f7f6;
   --color-interactive-primary: #d6d3d1;
   --color-interactive-hover: #a8a29e;
   --color-interactive-accent: #d6d3d1;
@@ -183,6 +193,8 @@
   --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
   --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
+  --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
   --border-subtle: rgba(237, 237, 235, 0.47);
   --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
@@ -204,15 +216,19 @@
     --color-surface-navbar: #141410;
     --color-surface-navbar-scrolled: #141410;
     --color-surface-code: #1c1917;
+    --color-surface-scrim: rgba(20, 20, 16, 0.85);
+    --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
     --color-border-subtle: rgba(253, 249, 242, 0.45);
     --color-border-moderate: rgba(253, 249, 242, 0.60);
     --color-border-strong: rgba(253, 249, 242, 0.75);
     --color-border-card: rgba(253, 249, 242, 0.60);
     --color-border-code: #292524;
+    --color-border-on-scrim-focus: #f7f7f6;
     --color-content-primary: #fdf9f2;
     --color-content-secondary: #a8a29e;
     --color-content-muted: #89827d;
     --color-content-inverse: #0c0a09;
+    --color-content-on-scrim: #f7f7f6;
     --color-interactive-primary: #d6d3d1;
     --color-interactive-hover: #a8a29e;
     --color-interactive-accent: #d6d3d1;
@@ -228,6 +244,8 @@
     --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
     --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
+    --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
     --border-subtle: rgba(237, 237, 235, 0.47);
     --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataimago/css-neutral",
-  "version": "0.1.0-alpha.17",
+  "version": "0.1.0-alpha.18",
   "description": "Neutral-identity compiled CSS + Tailwind preset — paired with @dataimago/tokens-neutral. Sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 hubs); Noto Sans throughout, neutral palette.",
   "license": "MIT",
   "repository": {
@@ -20,6 +20,7 @@
     "./quarto/*": "./dist/quarto/*",
     "./latex/*": "./dist/latex/*",
     "./dataviz/*": "./dist/dataviz/*",
+    "./js/*": "./dist/js/*",
     "./fonts/*": "./dist/fonts/*",
     "./outputs.json": "./dist/outputs.json",
     "./package.json": "./package.json"
@@ -32,7 +33,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@dataimago/tokens-neutral": "^0.1.0-alpha.17"
+    "@dataimago/tokens-neutral": "^0.1.0-alpha.18"
   },
   "keywords": [
     "css",