@cube-drone/marquee-css 0.3.0 → 0.4.0

package/marquee.css

@@ -123,6 +123,51 @@
   background: rgba(127, 127, 127, 0.12);
 }
 
+/* ---- spoilers: content present, visually withheld. Zero-JS: blurred,
+   revealed on hover or focus. The element is focusable (tabindex=0), so a
+   tap focuses and reveals it on phones too, where there is no hover - :focus
+   (not :focus-visible) because touch focus matches the former, not the
+   latter. That's the best a static page can do. An interactive renderer
+   wraps the document in .mq-root and click-gates it instead - hover/focus no
+   longer reveal, a deliberate click does (and sets data-mq-revealed).
+   Degrades to plain visible text without the sheet, because a hidden spoiler
+   is worse than a shown one. ---- */
+
+.mq-spoiler {
+  filter: blur(0.35em);
+  background: rgba(127, 127, 127, 0.22);
+  border-radius: 0.2em;
+  cursor: pointer;
+  transition: filter 0.12s ease;
+}
+
+.mq-spoiler:hover,
+.mq-spoiler:focus {
+  filter: none;
+}
+
+/* Under an interactive renderer: hover/focus must NOT reveal (a spoiler takes
+   a deliberate click); the click sets data-mq-revealed, which does. The
+   [data-mq-revealed] rule below is equal specificity but later, so a clicked
+   spoiler stays revealed even while it holds focus. */
+.mq-root .mq-spoiler:hover,
+.mq-root .mq-spoiler:focus {
+  filter: blur(0.35em);
+}
+
+.mq-root .mq-spoiler[data-mq-revealed] {
+  filter: none;
+  background: none;
+  cursor: text;
+}
+
+/* Block spoiler (`:::spoiler`): the same withholding, sized to a region -
+   an image, a paragraph - rather than a run of words. */
+.mq-spoiler-block {
+  display: block;
+  padding: 0.5rem;
+}
+
 /* ---- the color slot: validated author values, property mapping ours ---- */
 
 .mq-color {
@@ -512,6 +557,35 @@ big {
  * belong to the interactive renderer; this is the best-effort CSS reveal,
  * same tier as every other effect.) */
 
+/* ---- the interactive renderer's half of the animation contract.
+   Every rule here is inert without `.mq-js`, which only an interactive
+   renderer adds, and only AFTER mount - so a static page (or markup that
+   never hydrates) animates immediately, exactly as before. The hold exists
+   only where JavaScript is alive to release it: never a hostage situation.
+
+   `.mq-anim` marks an effect element; `[data-mq-play]` is the observer
+   saying "this one has been seen"; `[data-mq-skip]` on an ancestor is the
+   reader saying "enough" - which stills every effect and, because reveal
+   effects hide only inside their keyframes, shows all text whole. ---- */
+
+.mq-js .mq-anim,
+.mq-js .mq-anim .mq-l,
+.mq-js .mq-anim .mq-marquee-inner {
+  animation-play-state: paused;
+}
+
+.mq-js .mq-anim[data-mq-play],
+.mq-js .mq-anim[data-mq-play] .mq-l,
+.mq-js .mq-anim[data-mq-play] .mq-marquee-inner {
+  animation-play-state: running;
+}
+
+[data-mq-skip] .mq-anim,
+[data-mq-skip] .mq-anim .mq-l,
+[data-mq-skip] .mq-anim .mq-marquee-inner {
+  animation: none;
+}
+
 /* ---- layouts: picked, not authored ---- */
 
 .mq-page {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-drone/marquee-css",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The Marquee reference stylesheet: the mq-* class contract every renderer targets",
   "license": "MPL-2.0",
   "repository": {