@noirmd/previewer 2.0.4 → 2.1.0

package/dist/hovergallery.css

@@ -1,110 +1,80 @@
 /* ============================================================
    NoirMD Vanilla — Hover Gallery
+
+   Stacked images with invisible trigger strips.
+   JS toggles a `.nr-hg-active` class on the visible image.
+   CSS handles the crossfade transition.
    ============================================================ */
 
+/* ── Container ──────────────────────────────────────────────── */
+
 .nr-hover-gallery {
-  --items: 1;
-  display: inline-grid;
-  grid-template-columns: repeat(var(--items), 1fr);
+  position: relative;
   width: 100%;
   max-width: 100%;
-  gap: 1px;
+  aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--nr-radius-sm);
   background: var(--nr-bg-secondary);
   margin: 1rem 0;
 }
 
-.nr-hover-gallery:has(> :nth-child(3)) {
-  --items: 2;
-}
-
-.nr-hover-gallery:has(> :nth-child(4)) {
-  --items: 3;
-}
-
-.nr-hover-gallery:has(> :nth-child(5)) {
-  --items: 4;
-}
-
-.nr-hover-gallery:has(> :nth-child(6)) {
-  --items: 5;
-}
-
-.nr-hover-gallery:has(> :nth-child(7)) {
-  --items: 6;
-}
+/* ── Images (stacked) ───────────────────────────────────────── */
 
-.nr-hover-gallery:has(> :nth-child(8)) {
-  --items: 7;
-}
-
-.nr-hover-gallery:has(> :nth-child(9)) {
-  --items: 8;
-}
-
-.nr-hover-gallery:has(> :nth-child(10)) {
-  --items: 9;
-}
-
-.nr-hover-gallery > * {
-  opacity: 0;
+.nr-hover-gallery > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
   height: 100%;
-  grid-row: 1;
   object-fit: cover;
-  width: 100%;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
 }
 
-.nr-hover-gallery > :nth-child(1) {
-  grid-column: 1 / -1;
+.nr-hover-gallery > img.nr-hg-active {
   opacity: 1;
 }
 
-.nr-hover-gallery > :nth-child(2) {
-  grid-column: 1;
-}
+/* ── Trigger strips (invisible, full-height) ────────────────── */
 
-.nr-hover-gallery > :nth-child(3) {
-  grid-column: 2;
-}
-
-.nr-hover-gallery > :nth-child(4) {
-  grid-column: 3;
-}
-
-.nr-hover-gallery > :nth-child(5) {
-  grid-column: 4;
-}
-
-.nr-hover-gallery > :nth-child(6) {
-  grid-column: 5;
-}
-
-.nr-hover-gallery > :nth-child(7) {
-  grid-column: 6;
+.nr-hover-gallery > .nr-hg-trigger {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  z-index: 1;
 }
 
-.nr-hover-gallery > :nth-child(8) {
-  grid-column: 7;
-}
+/* ── Indicator dots ─────────────────────────────────────────── */
 
-.nr-hover-gallery > :nth-child(9) {
-  grid-column: 8;
+.nr-hover-gallery > .nr-hg-dots {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.35rem;
+  z-index: 2;
+  pointer-events: none;
 }
 
-.nr-hover-gallery > :nth-child(10) {
-  grid-column: 9;
+.nr-hover-gallery > .nr-hg-dots > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  transition: background 0.3s ease, transform 0.3s ease;
 }
 
-.nr-hover-gallery > :nth-child(n + 11) {
-  display: none;
+.nr-hover-gallery > .nr-hg-dots > span.nr-hg-dot-active {
+  background: rgba(255, 255, 255, 0.95);
+  transform: scale(1.3);
 }
 
-.nr-hover-gallery > *:hover {
-  grid-column: 1 / -1;
-  opacity: 1;
-}
+/* ── Cap at 10 images ───────────────────────────────────────── */
 
-.nr-hover-gallery:has(*:hover) > :nth-child(1) {
+.nr-hover-gallery > img:nth-of-type(n + 11),
+.nr-hover-gallery > .nr-hg-trigger:nth-of-type(n + 11) {
   display: none;
 }

package/dist/index.cjs

@@ -11953,6 +11953,7 @@ var hover3d_default = hover3dDirective;
 
 // vanilla/directives/hovergallery.ts
 var IMG_RE3 = /!\[([^\]]*)\]\(([^)]+)\)/g;
+var MAX_IMAGES = 10;
 var hovergalleryDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
@@ -11964,18 +11965,56 @@ var hovergalleryDirective = ({ props, slots }) => {
   if (images.length === 0) {
     return document.createDocumentFragment();
   }
+  const count = Math.min(images.length, MAX_IMAGES);
   const figure = document.createElement("figure");
   figure.className = "nr-hover-gallery";
   if (props.aspect) figure.style.aspectRatio = props.aspect;
   if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", props.style);
-  for (const img of images) {
+  if (props.style) figure.setAttribute("style", (figure.getAttribute("style") || "") + ";" + props.style);
+  const imgEls = [];
+  for (let i = 0; i < count; i++) {
     const el = document.createElement("img");
-    el.src = img.src;
-    el.alt = img.alt;
+    el.src = images[i].src;
+    el.alt = images[i].alt;
     el.loading = "lazy";
+    el.draggable = false;
+    if (i === 0) el.classList.add("nr-hg-active");
+    imgEls.push(el);
     figure.appendChild(el);
   }
+  for (let i = 0; i < count; i++) {
+    const strip = document.createElement("div");
+    strip.className = "nr-hg-trigger";
+    strip.style.left = `${i / count * 100}%`;
+    strip.style.width = `${1 / count * 100}%`;
+    strip.addEventListener("mouseenter", () => {
+      for (let j = 0; j < imgEls.length; j++) {
+        imgEls[j].classList.toggle("nr-hg-active", j === i);
+      }
+      for (let j = 0; j < dotEls.length; j++) {
+        dotEls[j].classList.toggle("nr-hg-dot-active", j === i);
+      }
+    });
+    figure.appendChild(strip);
+  }
+  figure.addEventListener("mouseleave", () => {
+    for (let j = 0; j < imgEls.length; j++) {
+      imgEls[j].classList.toggle("nr-hg-active", j === 0);
+    }
+    for (let j = 0; j < dotEls.length; j++) {
+      dotEls[j].classList.toggle("nr-hg-dot-active", j === 0);
+    }
+  });
+  const dotContainer = document.createElement("div");
+  dotContainer.className = "nr-hg-dots";
+  const dotEls = [];
+  for (let i = 0; i < count; i++) {
+    const dot = document.createElement("span");
+    if (i === 0) dot.classList.add("nr-hg-dot-active");
+    dotEls.push(dot);
+    dotContainer.appendChild(dot);
+  }
+  figure.appendChild(dotContainer);
   return figure;
 };
 var hovergallery_default = hovergalleryDirective;