srcdev-nuxt-components 9.1.46 → 9.1.47

package/.claude/skills/components/scroll-reveal-image.md

@@ -24,6 +24,7 @@ For arbitrary slot content — a grid of images, video, markup — use `ScrollRe
 | `parallaxOffset` | `string` | `"36rem"` | Distance the image travels vertically across the full scroll range. Larger = more dramatic reveal. |
 | `focalX` | `string` | `"50%"` | Horizontal focal point — CSS `object-position` x-axis value. Controls which horizontal slice stays in view. |
 | `radius` | `string` | `"0px"` | `border-radius` applied to the clipping frame. |
+| `loading` | `"lazy" \| "eager"` | `"lazy"` | Image loading strategy. Use `"eager"` if this is the LCP image (e.g. partially in view on load). |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<figure>`. |
 
 ## Basic usage
@@ -157,7 +158,7 @@ See `scroll-reveal-frame.md` for the full guide. For portrait images the default
 ## Notes
 
 - The root `<figure>` has `margin: 0` set in the component — browser default `<figure>` margins are neutralised at source.
-- `loading="lazy"` and `decoding="async"` are hardcoded on the `<img>`. If this component is the LCP image, override with `loading="eager"` via a CSS-only approach is not possible — use `ScrollRevealFrame` with a manual `NuxtImg` instead and set `:loading="'eager'"`.
+- `decoding="async"` is always set on the `<img>`. Use `:loading="'eager'"` if this component is the LCP image (e.g. a hero partially in view on load) — the default `"lazy"` is correct for below-fold usage.
 - Do not place inside a container with `overflow: hidden` or `overflow: clip` — breaks the `view-timeline` scroll detection inherited from `ScrollRevealFrame`.
 - Reduced-motion: animation is disabled and the image falls back to a static crop centred at `object-position: <focalX> 50%`.
 - Storybook: the `"none"` image provider is active (`nuxt.config.ts`), so `src` paths pass through unchanged. Always provide explicit `img-width` and `img-height` props to avoid the `w=1536` fallback in deployed Storybook.

package/app/components/01.atoms/animations/scroll-reveal-image/ScrollRevealImage.vue

@@ -12,7 +12,7 @@
       :alt="alt"
       :width="imgWidth"
       :height="imgHeight"
-      loading="lazy"
+      :loading="loading"
       decoding="async"
     />
   </ScrollRevealFrame>
@@ -51,6 +51,7 @@ interface Props {
   focalX?: string;
   /** Optional rounded corners on the frame. */
   radius?: string;
+  loading?: "lazy" | "eager";
   styleClassPassthrough?: string | string[];
 }
 
@@ -62,6 +63,7 @@ withDefaults(defineProps<Props>(), {
   parallaxOffset: "36rem",
   focalX: "50%",
   radius: "0px",
+  loading: "lazy",
   styleClassPassthrough: () => [],
 });
 </script>

package/app/components/01.atoms/animations/scroll-reveal-image/tests/ScrollRevealImage.spec.ts

@@ -32,6 +32,7 @@ describe("ScrollRevealImage", () => {
         parallaxOffset: "20rem",
         focalX: "30%",
         radius: "1.6rem",
+        loading: "eager",
         styleClassPassthrough: ["custom-class"],
       },
     });
@@ -179,13 +180,20 @@ describe("ScrollRevealImage", () => {
     expect(img.attributes("height")).toBe("1920");
   });
 
-  it("sets loading=lazy on the image element", async () => {
+  it("sets loading=lazy on the image element by default", async () => {
     const wrapper = await mountSuspended(ScrollRevealImage, {
       props: { src: "/images/test.jpg" },
     });
     expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("lazy");
   });
 
+  it("passes loading=eager to the image element when set", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", loading: "eager" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("eager");
+  });
+
   it("sets decoding=async on the image element", async () => {
     const wrapper = await mountSuspended(ScrollRevealImage, {
       props: { src: "/images/test.jpg" },

package/app/components/01.atoms/animations/scroll-reveal-image/tests/__snapshots__/ScrollRevealImage.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`ScrollRevealImage > renders correct HTML structure (all props set) 1`] = `
 "<figure class="reveal-frame custom-class" style="--_frame-height: 400px; --_parallax-offset: 20rem; --_radius: 1.6rem; --_focal-x: 30%;">
-  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="lazy" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
+  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="eager" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
 </figure>"
 `;
 

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -100,11 +100,6 @@ watch(
       }
 
       .profile-info {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-        height: stretch;
-
         .profile-info-content {
           .profile-info-block {
             margin-block-end: 1.5rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.46",
+  "version": "9.1.47",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",