@zevra/ui 0.10.0 → 0.12.0

package/src/motion.js

@@ -0,0 +1,53 @@
+/* Zevra UI — motion.js : la révélation unique des entrées.
+ *
+ * Rôle exact, et rien d'autre :
+ *   1. poser `zv-motion` sur <html> — c'est cette classe qui ARME les
+ *      entrées de motion.css (sans elle, la page s'affiche complète) ;
+ *   2. poser `zv-in`, UNE fois, sur chaque élément d'entrée quand il
+ *      touche le viewport — l'animation se joue, s'arrête sur l'état
+ *      final, et on n'observe plus l'élément : remonter ne défait rien.
+ *
+ * Un échafaudage de scènes scroll-pilotées (l'expérience épinglée d'une
+ * home) pose `data-zv-motion-skip` sur ses scènes : rien n'y est observé,
+ * ses timelines nommées gardent la main.
+ *
+ * S'importe une fois par page : `import '@zevra/ui/motion.js'`. Pour un
+ * armement avant première peinture (aucun éclair du contenu), l'app peut
+ * AUSSI poser la classe en inline dans <head> :
+ *   <script>document.documentElement.classList.add('zv-motion')</script>
+ * motion.js est idempotent par-dessus.
+ */
+(() => {
+  if (typeof document === 'undefined' || typeof IntersectionObserver === 'undefined') return;
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  document.documentElement.classList.add('zv-motion');
+
+  const ENTREES = '.zv-anim-rise, .zv-anim-glyph-in, .zv-anim-converge, .zv-anim-pop, .zv-anim-filet';
+
+  const armer = () => {
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (!e.isIntersecting) continue;
+          e.target.classList.add('zv-in');
+          io.unobserve(e.target);
+        }
+      },
+      /* Déclenche un peu AVANT que l'élément soit franchement visible :
+       * l'entrée accompagne l'arrivée au lieu de la suivre. */
+      { rootMargin: '0px 0px -8% 0px', threshold: 0.01 }
+    );
+
+    for (const el of document.querySelectorAll(ENTREES)) {
+      if (el.closest('[data-zv-motion-skip]')) continue;
+      io.observe(el);
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', armer, { once: true });
+  } else {
+    armer();
+  }
+})();

package/src/surfaces.css

@@ -138,6 +138,15 @@
   z-index: 1;
 }
 
+/* L'emphase de base.css pose --ink sur les strong de zv-body/zv-lead — sur
+ * le navy du manifeste, cette encre disparaît dans le fond. Dans la bande,
+ * l'emphase hérite de la couleur ambiante (blanc), et seule la graisse la
+ * distingue. */
+.zv-band .zv-body strong,
+.zv-band .zv-lead strong {
+  color: inherit;
+}
+
 /* Filigrane : le glyphe, blanchi et presque effacé, débordant du cadre. */
 .zv-band__watermark {
   position: absolute;