@sarimarcus/content-sites-ui 0.29.1 → 0.29.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.29.2 (2026-10-06)
+
+- `./navigation`: `ArticlesNavMenu`'s feature image is a CSS background applied once the menu has opened, so a page load no longer fetches it; it stays painted through the close fade (the controller marks a dropdown `data-opened` on its first open), falls back to the 1x file where `image-set()` is unsupported, and is decorative when there is no alt text (SLA-2993).
+
 ## 0.29.1 (2026-10-06)
 
 - `./editorial`: `ArticleTopicPage` takes `proseClass`, the overview's prose theme modifier added to `prose` (default `prose-lg`, as before), so a dark site can render the overview in its own prose colours (SLA-2994).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.29.1",
+  "version": "0.29.2",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.29.1"
+    "@sarimarcus/content-sites-core": "0.29.2"
   }
 }

package/src/navigation/ArticlesNavMenu.astro

@@ -7,7 +7,7 @@
  */
 import { normalizePagePath } from '@sarimarcus/content-sites-core/url';
 import { formatUtcDate } from '@sarimarcus/content-sites-core/dates';
-import ResponsiveImage from '../primitives/ResponsiveImage.astro';
+import { getImage } from 'astro:assets';
 import NavDropdown from './NavDropdown.astro';
 import NavMenuLink from './NavMenuLink.astro';
 import MobileNavSection from './MobileNavSection.astro';
@@ -51,6 +51,14 @@ const day = (iso?: string) => formatUtcDate(iso, { day: 'numeric', month: 'short
 const [first, ...rest] = latest;
 const feature = first?.image ? first : undefined;
 const rows = feature ? rest : latest;
+// The feature image is a CSS background that only an open menu applies, so a page load never fetches it
+// (an <img> in the hidden panel would load on every page). A background has no srcset, so this is the one place
+// that picks widths instead of ResponsiveImage; the variant service snaps them to existing files.
+const featureBg = feature?.image
+  ? await Promise.all([480, 960].map((width) => getImage({ src: feature.image!, width })))
+  : undefined;
+const featureStyle = featureBg
+  && `--articles-nav-feature-1x: url("${featureBg[0].src}"); --articles-nav-feature: image-set(url("${featureBg[0].src}") 1x, url("${featureBg[1].src}") 2x)`;
 ---
 
 {variant === 'desktop' ? (
@@ -67,7 +75,7 @@ const rows = feature ? rest : latest;
             {feature && (
               <a href={feature.href} aria-current={here(feature.href) ? 'page' : undefined} class:list={[`group block p-2 rounded-lg hover:bg-muted transition-colors ${ring}`, here(feature.href) && 'bg-muted']}>
                 <div class="aspect-video rounded-md overflow-hidden bg-muted">
-                  <ResponsiveImage src={feature.image!} alt={feature.imageAlt ?? ''} sizes="16rem" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />
+                  <div role={feature.imageAlt ? 'img' : undefined} aria-label={feature.imageAlt || undefined} aria-hidden={feature.imageAlt ? undefined : 'true'} class="articles-nav-feature w-full h-full bg-cover bg-center transition-transform duration-300 group-hover:scale-[1.03]" style={featureStyle} />
                 </div>
                 {(feature.eyebrow || feature.date) && (
                   <span class="mt-2 block text-xs">
@@ -115,3 +123,19 @@ const rows = feature ? rest : latest;
     {topics.map((link) => <MobileNavLink link={link} tone={tone} active={on(link.href)} />)}
   </MobileNavSection>
 )}
+
+<style>
+  /* data-opened is set on the first open and kept; :focus-within covers a keyboard visit before any script runs. */
+  :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
+  :global(.nav-dropdown:focus-within) .articles-nav-feature {
+    background-image: var(--articles-nav-feature, none);
+  }
+
+  /* A var() holding an unsupported image-set() computes to none, so older engines get the 1x file instead. */
+  @supports not (background-image: image-set(url('x.webp') 1x)) {
+    :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
+    :global(.nav-dropdown:focus-within) .articles-nav-feature {
+      background-image: var(--articles-nav-feature-1x, none);
+    }
+  }
+</style>

package/src/navigation/navigation.ts

@@ -17,6 +17,8 @@ const controlled = (el: Element) => {
 function setDropdown(button: HTMLButtonElement, open: boolean): void {
   if (open) dropdownButtons().forEach((other) => other !== button && other.setAttribute('aria-expanded', 'false'));
   button.setAttribute('aria-expanded', String(open));
+  // Stays set after the first open, so content deferred until then (ArticlesNavMenu's image) never unpaints mid-fade.
+  if (open) button.closest<HTMLElement>('[data-nav-dropdown]')?.setAttribute('data-opened', '');
 }
 
 function setMobileMenu(root: HTMLElement, toggle: HTMLButtonElement, open: boolean, focus: boolean): void {