ferst-core 0.7.11 → 0.7.12

package/components/recipes/Hero.astro

@@ -46,7 +46,10 @@ const provider = bgLink ? videoEmbed(bgLink)?.provider : undefined;
 const watchLabel = media?.linkLabel || (provider ? `Watch the full video on ${provider}` : 'Watch the full video');
 // The still: the image (no motion), or an embed's poster until the player may load.
 const stillSrc = embed ? media?.poster ?? still : !media?.video && !slides.length ? still : undefined;
-const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
+// Drawn as a real <img>, never a CSS background: a picture set through a CSS variable is
+// found late (never by the preload scanner), so the hero sat grey until it arrived, and
+// some browsers kept it grey. A real image, loaded first, is found early and painted.
+const heroImg = isMedia && stillSrc ? stillSrc : undefined;
 ---
 
 <section
@@ -58,10 +61,11 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
   data-linked={bgLink ? 'true' : undefined}
   data-parallax={isMedia && parallax ? 'true' : undefined}
   data-full-bleed={isMedia && fullBleed ? 'true' : undefined}
-  style={isMedia ? `--hero-overlay: ${overlay}; ${bgImage}${focus ? `; --hero-focus: ${focus}` : ''}` : undefined}
+  style={isMedia ? `--hero-overlay: ${overlay}${focus ? `; --hero-focus: ${focus}` : ''}` : undefined}
 >
   {isMedia && (
     <div class="b-hero__bg" aria-hidden="true">
+      {heroImg && <img class="b-hero__img" src={heroImg} alt="" loading="eager" fetchpriority="high" decoding="async" />}
       {embed && <div class="b-hero__embed" data-embed-url={embed.embedUrl} data-provider={embed.provider}></div>}
       {media?.video && !embed ? (
         <video autoplay muted loop playsinline poster={media.poster} preload="metadata">
@@ -69,7 +73,7 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
         </video>
       ) : null}
       {slides.map((src, i) => (
-        <span class:list={['b-hero__slide', { 'is-on': i === 0 }]} style={`background-image: url('${src}')`}></span>
+        <img class:list={['b-hero__slide', { 'is-on': i === 0 }]} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} fetchpriority={i === 0 ? 'high' : undefined} decoding="async" />
       ))}
       <span class="b-hero__scrim"></span>
     </div>
@@ -346,11 +350,20 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     position: absolute;
     inset: 0;
     z-index: -1;
-    background-image: var(--hero-image, none);
-    background-size: cover;
-    background-position: var(--hero-focus, center);
     background-color: var(--bg-section);
   }
+  /* The picture (and each rotating slide) covers the band, framed by `focus`. */
+  .b-hero__img,
+  .b-hero__slide {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: var(--hero-focus, center);
+    display: block;
+    max-width: none;
+  }
   /* Parallax: give the background room to drift without uncovering an edge. */
   .b-hero.is-parallax .b-hero__bg {
     inset: 0 0 -35% 0;
@@ -390,10 +403,6 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     display: none;
   }
   .b-hero__slide {
-    position: absolute;
-    inset: 0;
-    background-size: cover;
-    background-position: var(--hero-focus, center);
     opacity: 0;
     transition: opacity 1.6s ease-in-out;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "type": "module",
   "description": "Ferst Core \u2014 the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",