@cube-drone/marquee-css 0.3.0 → 0.5.0

package/marquee.css

@@ -123,6 +123,95 @@
   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;
+}
+
+/* ---- conflict / variant: a versioned-document merge conflict, shown inside
+   the body (the editor is the merge tool). Synthesized by the embedder at read
+   time, never authored. Stacked variants, each with an advisory label/when
+   line; the common ancestor (role=base) is de-emphasized, never hidden -
+   losing words is the one thing a conflict must not do. ---- */
+.mq-conflict {
+  /* A light red wash: enough to say "resolve me", not enough to alarm. Low
+     alpha so it tints correctly over a light or a dark page. */
+  border: 1px solid rgba(200, 70, 70, 0.5);
+  border-radius: 0.375rem;
+  margin: 1rem 0;
+  background: rgba(200, 70, 70, 0.07);
+}
+
+.mq-variant {
+  padding: 0.5rem 0.75rem;
+}
+
+.mq-variant + .mq-variant {
+  border-top: 1px solid rgba(200, 70, 70, 0.25);
+}
+
+.mq-variant-head {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+  margin-bottom: 0.25rem;
+  font-size: 0.85em;
+  opacity: 0.75;
+}
+
+.mq-variant-label {
+  font-weight: 600;
+}
+
+.mq-variant-when {
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}
+
+.mq-variant-base {
+  opacity: 0.6;
+}
+
 /* ---- the color slot: validated author values, property mapping ours ---- */
 
 .mq-color {
@@ -512,6 +601,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.5.0",
   "description": "The Marquee reference stylesheet: the mq-* class contract every renderer targets",
   "license": "MPL-2.0",
   "repository": {