@koehler8/cms 1.0.0-beta.9 → 1.0.0

package/src/components/DraftGate.vue

@@ -0,0 +1,211 @@
+<template>
+  <section
+    ref="dialogRef"
+    class="draft-gate"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="draft-gate-title"
+    aria-describedby="draft-gate-description"
+  >
+    <div class="draft-gate-card">
+      <p class="draft-gate-eyebrow">Draft</p>
+      <h1 id="draft-gate-title" class="draft-gate-title">
+        This page is not yet public
+      </h1>
+      <p id="draft-gate-description" class="draft-gate-body">
+        {{ bodyText }}
+      </p>
+      <form class="draft-gate-form" @submit.prevent="handleSubmit" novalidate>
+        <label class="draft-gate-label" for="draft-gate-password">
+          Password
+        </label>
+        <input
+          id="draft-gate-password"
+          ref="inputRef"
+          v-model="passwordInput"
+          type="password"
+          autocomplete="current-password"
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          :aria-invalid="hasError ? 'true' : 'false'"
+          aria-describedby="draft-gate-error"
+          class="draft-gate-input"
+        />
+        <p
+          id="draft-gate-error"
+          class="draft-gate-error"
+          aria-live="polite"
+          role="status"
+        >
+          {{ errorMessage }}
+        </p>
+        <button type="submit" class="draft-gate-submit">
+          {{ submitLabel }}
+        </button>
+      </form>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useFocusTrap } from '../composables/useFocusTrap.js';
+
+const props = defineProps({
+  hasPassword: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const passwordInput = ref('');
+const inputRef = ref(null);
+const dialogRef = ref(null);
+const hasError = computed(() => Boolean(props.errorMessage));
+
+// The gate IS the page while locked, so the trap is permanently active and
+// deliberately has no Escape dismiss. Focus lands on the password input.
+useFocusTrap(dialogRef, () => true, { initialFocusRef: inputRef });
+
+const bodyText = computed(() =>
+  props.hasPassword
+    ? 'Enter the password to preview this content.'
+    : 'No password is required — submit to continue.',
+);
+
+const submitLabel = computed(() => (props.hasPassword ? 'Unlock' : 'Continue'));
+
+function handleSubmit() {
+  emit('submit', passwordInput.value);
+}
+</script>
+
+<style scoped>
+.draft-gate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  background: var(--brand-surface, #f7f7f8);
+  color: var(--brand-text, #1f2a44);
+  font-family: var(--ui-font-body, system-ui, -apple-system, sans-serif);
+}
+
+.draft-gate-card {
+  width: 100%;
+  max-width: 28rem;
+  padding: clamp(1.75rem, 4vw, 2.5rem);
+  background: var(--brand-surface-elevated, #ffffff);
+  border: 1px solid var(--brand-border, rgba(31, 42, 68, 0.12));
+  border-radius: clamp(12px, 2vw, 18px);
+  box-shadow: 0 18px 38px rgba(15, 22, 42, 0.08);
+  outline: none;
+}
+
+.draft-gate-eyebrow {
+  margin: 0 0 0.5rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.6));
+}
+
+.draft-gate-title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.draft-gate-body {
+  margin: 0 0 1.5rem;
+  font-size: 1rem;
+  line-height: 1.55;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.75));
+}
+
+.draft-gate-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.draft-gate-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--brand-text, #1f2a44);
+}
+
+.draft-gate-input {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.85rem;
+  font-size: 1rem;
+  font-family: inherit;
+  background: var(--brand-surface, #ffffff);
+  color: inherit;
+  border: 1px solid var(--brand-border, rgba(31, 42, 68, 0.25));
+  border-radius: var(--brand-input-radius, 8px);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.draft-gate-input:focus-visible {
+  outline: 2px solid var(--brand-primary, #1f2a44);
+  outline-offset: 2px;
+  border-color: var(--brand-primary, #1f2a44);
+}
+
+.draft-gate-input[aria-invalid='true'] {
+  border-color: var(--brand-criticalText, #b3261e);
+}
+
+.draft-gate-error {
+  min-height: 1.25rem;
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--brand-criticalText, #b3261e);
+}
+
+.draft-gate-submit {
+  margin-top: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.4rem;
+  font-size: 1rem;
+  font-family: inherit;
+  font-weight: 600;
+  color: var(--brand-primary-cta-text, #ffffff);
+  background: var(--brand-primary-cta, var(--brand-primary, #1f2a44));
+  border: none;
+  border-radius: var(--brand-button-radius, 10px);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.draft-gate-submit:hover {
+  transform: translateY(-1px);
+}
+
+.draft-gate-submit:focus-visible {
+  outline: 2px solid var(--brand-primary, #1f2a44);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .draft-gate-submit,
+  .draft-gate-input {
+    transition: none;
+  }
+  .draft-gate-submit:hover {
+    transform: none;
+  }
+}
+</style>

package/src/components/Footer.vue

@@ -2,10 +2,10 @@
   <footer class="site-footer ui-footer" data-analytics-section="footer">
     <div class="container ui-footer__grid">
       <div class="ui-footer__brand">
-        <a class="ui-footer__logo" href="/" aria-label="Return home">
+        <a class="ui-footer__logo" href="/">
           <img
             :src="logoSrc"
-            :alt="siteName"
+            :alt="`${siteName} – home`"
             class="site-footer__logo-img"
             loading="lazy"
             decoding="async"
@@ -25,6 +25,7 @@
                 rel="noopener noreferrer"
               >
                 <span>{{ link.text }}</span>
+                <span class="ui-footer__sr-only">(opens in a new tab)</span>
                 <span class="ui-footer__link-icon" aria-hidden="true">&gt;</span>
               </a>
             </li>
@@ -62,4 +63,16 @@ const footerLinks = computed(() =>
 .ui-footer__text {
   margin-bottom: 0;
 }
+
+.ui-footer__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 </style>

package/src/components/FooterMinimal.vue

@@ -3,7 +3,7 @@
     <div class="container" role="presentation">
       <div class="footer-grid">
         <a class="footer-logo" href="/">
-          <img :src="logoSrc" :alt="siteName" class="img-fluid" />
+          <img :src="logoSrc" :alt="`${siteName} – home`" class="img-fluid" />
         </a>
         <p class="footer-text">{{ footerText }}</p>
         <p v-if="footerDisclaimer" class="footer-disclaimer">
@@ -78,7 +78,10 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
     --footer-bg,
     color-mix(in srgb, var(--brand-bg-900, #070410) 88%, var(--brand-bg-800, #120b1f) 12%)
   );
-  color: var(--footer-text, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)));
+  /* Read from --brand-footer-text (defined by the theme via tokens.footer.text)
+     so the default light/text-on-dark pairing always holds. The intermediate
+     --footer-text exists for site-level overrides. */
+  color: var(--footer-text, var(--brand-footer-text, #f0eaf3));
   padding: 48px 0 28px;
 }
 
@@ -96,7 +99,7 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
 .footer-text {
   max-width: 520px;
   margin: 0;
-  color: var(--footer-text, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)));
+  color: var(--footer-text, var(--brand-footer-text, #f0eaf3));
   font-size: 0.9rem;
   line-height: 1.55;
 }
@@ -107,10 +110,7 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
   font-size: 0.75rem;
   font-style: italic;
   line-height: 1.6;
-  color: var(
-    --footer-disclaimer,
-    color-mix(in srgb, var(--ui-text-muted, var(--brand-card-text, #f0eaf3)) 70%, transparent)
-  );
+  color: var(--footer-disclaimer, var(--brand-footer-text-muted, #c8c2cf));
 }
 
 .footer-links {
@@ -124,19 +124,20 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
 }
 
 .footer-link {
-  color: var(
-    --footer-link-color,
-    color-mix(in srgb, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)) 75%, transparent)
-  );
+  color: var(--footer-link-color, var(--brand-footer-link-color, #f0eaf3));
   text-decoration: none;
   transition: color 0.2s ease, text-decoration 0.2s ease;
 }
 
 .footer-link:hover,
 .footer-link:focus-visible {
-  color: var(--footer-link-hover, var(--brand-accent-electric, #27f3ff));
+  color: var(--footer-link-hover, var(--brand-footer-link-hover, #ffffff));
   text-decoration: underline;
 }
+.footer-link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .footer-link {

package/src/components/Header.vue

@@ -8,13 +8,46 @@
       class="site-header__section ui-header__section"
       :class="{ 'ui-header__section--compact': isHeaderCompact }"
     >
-      <nav class="site-header__nav">
+      <nav class="site-header__nav" aria-label="Primary">
         <div class="container">
           <div class="site-header__inner">
-            <a href="/" ref="logoLinkRef" class="site-header__logo logo-flash-trigger">
-            <img :src="logoSrc" :alt="siteName" class="logo-flash-image" />
+            <a href="/" ref="logoLinkRef" class="site-header__logo logo-flash-trigger" :aria-label="`${siteName || 'Home'} – home`">
+              <!--
+                Logo slot. Default rendering: <img> if site/assets/img/logo.png
+                exists or `content.header.logoSrc` is set, otherwise text from
+                `content.header.logoText` or the site title. Sites that wrap
+                Header in a parent component can override entirely via
+                <template #logo>.
+              -->
+              <slot name="logo" :src="logoSrc" :text="logoText" :site-name="siteName">
+                <img
+                  v-if="logoSrc"
+                  :src="logoSrc"
+                  :alt="siteName"
+                  class="logo-flash-image"
+                />
+                <span v-else class="site-header__logo-text">{{ logoText || siteName }}</span>
+              </slot>
           </a>
-          <div v-if="hasHeaderActions || showLocaleLinks" class="site-header__actions">
+          <!--
+            Nav slot. Defaults to a horizontal <ul> of links built from
+            `content.header.navItems[]` (each entry: { text, href, target? }).
+            No items, no nav.
+          -->
+          <slot name="nav" :items="navItems">
+            <ul v-if="navItems.length" class="site-header__nav-list">
+              <li v-for="(item, idx) in navItems" :key="`${item.href || item.text}-${idx}`">
+                <a
+                  :href="item.href"
+                  :target="item.target || null"
+                  :rel="item.target === '_blank' ? 'noopener noreferrer' : null"
+                >{{ item.text }}</a>
+              </li>
+            </ul>
+          </slot>
+          <div v-if="hasHeaderActions || showLocaleLinks || hasActionsSlot" class="site-header__actions">
+            <!-- Site-provided extra actions, rendered before the locale dropdown. -->
+            <slot name="actions" />
             <component
               v-if="headerActionsComponent"
               :is="headerActionsComponent"
@@ -23,6 +56,8 @@
               v-if="showLocaleLinks && availableLocales.length > 1"
               ref="localeWrapperRef"
               class="locale-wrapper"
+              @keydown.esc="closeLocaleMenu($event, 'escape')"
+              @focusout="onLocaleWrapperFocusOut"
             >
               <button
                 id="languages-dropdown-invoker-2"
@@ -30,8 +65,8 @@
                 class="locale-toggle"
                 type="button"
                 aria-controls="languages-dropdown-2"
-                aria-haspopup="true"
                 :aria-expanded="isLangOpen ? 'true' : 'false'"
+                aria-label="Change language"
                 @click="toggleLocaleMenu"
               >
                 <span class="locale-flag" aria-hidden="true">
@@ -62,7 +97,7 @@
                 <li v-for="locale in availableLocales" :key="locale">
                   <a
                     class="locale-option"
-                    :href="`/${locale}`"
+                    :href="localeHref(locale)"
                     @click="handleLocaleLinkClick(locale)"
                   >
                     <span class="locale-flag" aria-hidden="true">{{ localeEmojis[locale] || '🌐' }}</span>
@@ -80,19 +115,43 @@
 </template>
 
 <script setup>
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue';
   import { useRoute } from 'vue-router';
   import { resolveAsset } from '../utils/assetResolver.js';
 import { trackEvent } from '../utils/analytics.js';
 import { getExtensionComponent } from '../extensions/extensionLoader.js';
-import { availableLocales as siteLocales } from '../utils/loadConfig.js';
+import { availableLocales as siteLocales, baseLocale as siteBaseLocale } from '../utils/loadConfig.js';
+import { readStoredLocale, writeStoredLocale } from '../utils/webStorage.js';
 
-  const logoSrc = computed(() => resolveAsset('img/logo.png'));
+  const slots = useSlots();
+  const hasActionsSlot = computed(() => Boolean(slots.actions));
 
 const isLangOpen = ref(false);
 const isHeaderCompact = ref(false);
 const currentLocale = ref('');
 const availableLocales = computed(() => siteLocales.map((code) => code.trim()).filter(Boolean));
+
+// Switching language keeps the visitor on the SAME page rather than bouncing
+// them to the locale's home. Slugs are shared across locales, so take the
+// current path, strip any leading non-base locale segment, and re-prefix with
+// the target locale. The base locale is served unprefixed (`/path`); others at
+// `/{locale}/path`. (`/{baseLocale}/path` doesn't pre-render and would 404,
+// hence the base stays unprefixed.)
+const localeHref = (locale) => {
+  const segments = (route.path || '/').split('/').filter(Boolean);
+  if (segments.length) {
+    const first = segments[0].toLowerCase();
+    if (first !== siteBaseLocale && availableLocales.value.includes(first)) {
+      segments.shift();
+    }
+  }
+  const rest = segments.join('/');
+  const slash = injectedSiteData.value?.site?.trailingSlash === true ? '/' : '';
+  if (locale === siteBaseLocale) {
+    return rest ? `/${rest}${slash}` : '/';
+  }
+  return rest ? `/${locale}/${rest}${slash}` : `/${locale}${slash}`;
+};
 const localeLabels = {
   en: 'English',
   fr: 'Français',
@@ -187,6 +246,37 @@ const updateLocaleMenuPosition = () => {
     }
   };
 
+  // Closes the dropdown and (for keyboard dismissal) returns focus to the
+  // toggle button. Without focus restoration, ESC would leave focus on a
+  // hidden menu item — failing 1.4.13 (Content on Hover or Focus).
+  const closeLocaleMenu = (event, trigger = 'escape') => {
+    if (!isLangOpen.value) return;
+    if (event) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    }
+    isLangOpen.value = false;
+    trackEvent('header_locale_menu_toggle', {
+      state: 'close',
+      trigger,
+      active_locale: currentLocale.value || 'en',
+    });
+    if (trigger === 'escape') {
+      nextTick(() => langButtonRef.value?.focus());
+    }
+  };
+
+  // Closes the menu when keyboard focus leaves the wrapper entirely.
+  // Without this, Tab would walk past the dropdown but leave it visible
+  // and clickable — also fails 1.4.13's "dismissable" requirement.
+  const onLocaleWrapperFocusOut = (event) => {
+    if (!isLangOpen.value) return;
+    const wrapper = localeWrapperRef.value;
+    const next = event.relatedTarget;
+    if (wrapper && next && wrapper.contains(next)) return;
+    closeLocaleMenu(null, 'focusout');
+  };
+
   const prefersReducedMotion = () =>
     typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -231,6 +321,40 @@ const updateLocaleMenuPosition = () => {
 
   const siteName = computed(() => injectedSiteData.value?.site?.title || '');
 
+  // Header content (merged from shared.json + per-page overrides). Three
+  // optional knobs sites can use to customise the bundled Header without
+  // wrapping it in a parent component:
+  //   - content.header.logoText  → text shown in place of the site title
+  //   - content.header.logoSrc   → full URL to use as the logo image
+  //                                 (overrides the site/assets/img/logo.png
+  //                                 asset resolution)
+  //   - content.header.navItems  → array of { text, href, target? } to
+  //                                 render as a top-level nav menu
+  const headerContent = computed(() => {
+    const fromPage = pageContent.value?.header;
+    if (fromPage && typeof fromPage === 'object') return fromPage;
+    const fromSite = injectedSiteData.value?.header;
+    return (fromSite && typeof fromSite === 'object') ? fromSite : {};
+  });
+  const logoText = computed(() => {
+    const t = headerContent.value?.logoText;
+    return typeof t === 'string' && t.trim() ? t.trim() : '';
+  });
+  const logoSrc = computed(() => {
+    const customSrc = headerContent.value?.logoSrc;
+    if (typeof customSrc === 'string' && customSrc.trim()) {
+      return customSrc.trim();
+    }
+    // Fall back to the conventional site/assets/img/logo.png. resolveAsset
+    // returns '' when the asset doesn't exist; we treat that as "no image"
+    // and the template renders the text fallback instead of a broken <img>.
+    return resolveAsset('img/logo.png') || '';
+  });
+  const navItems = computed(() => {
+    const items = headerContent.value?.navItems;
+    return Array.isArray(items) ? items.filter((it) => it && typeof it === 'object') : [];
+  });
+
   const resolveHeaderSettings = () => {
     const pageHeader = pageContent.value?.header;
     if (pageHeader && typeof pageHeader === 'object') {
@@ -305,11 +429,20 @@ const updateLocaleMenuPosition = () => {
       });
     }
     isLangOpen.value = false;
+    // Persist the user's explicit choice so it survives navigation to the
+    // unprefixed base-locale URL (`/`). The router guard only writes
+    // localStorage when a locale param is present in the URL — clicking
+    // the base locale navigates to `/` (no param), so the write must
+    // happen here instead. Also keeps loadConfigData's localStorage
+    // fallback in sync with the active selection.
+    if (!import.meta.env.SSR) {
+      writeStoredLocale(locale);
+    }
   };
 
   onMounted(() => {
     handleHeaderScroll();
-    const loc = (route.params.locale || (typeof localStorage !== 'undefined' && localStorage.getItem('locale')) || 'en').toString();
+    const loc = (route.params.locale || readStoredLocale() || 'en').toString();
     currentLocale.value = loc;
     document.addEventListener('click', onDocumentClick);
     setupLogoFlash();
@@ -396,6 +529,47 @@ const updateLocaleMenuPosition = () => {
   width: auto;
 }
 
+/* Text fallback when no logo asset / logoSrc is provided. Uses theme tokens
+   so the active theme drives appearance; consumers can override via scoped
+   CSS in a wrapping component or a brand-var override. */
+.site-header__logo-text {
+  font-family: var(--ui-font-display, var(--ui-font-body, inherit));
+  font-weight: 600;
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  letter-spacing: 0.02em;
+  color: var(--brand-header-text, var(--brand-fg-100, inherit));
+  white-space: nowrap;
+}
+
+/* Nav menu rendered from content.header.navItems[]. Sits between the logo
+   and the actions cluster. Hidden on narrow viewports — sites that need
+   responsive nav should override the slot. */
+.site-header__nav-list {
+  display: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: clamp(0.75rem, 2vw, 1.75rem);
+  align-items: center;
+}
+@media (min-width: 720px) {
+  .site-header__nav-list {
+    display: flex;
+  }
+}
+.site-header__nav-list a {
+  color: var(--brand-header-text, var(--brand-fg-100, inherit));
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: opacity 0.15s ease;
+}
+.site-header__nav-list a:hover,
+.site-header__nav-list a:focus-visible {
+  opacity: 0.7;
+  text-decoration: underline;
+}
+
 .site-header__actions {
   display: inline-flex;
   align-items: center;

package/src/components/Hero.vue

@@ -7,7 +7,7 @@
 >
     <div class="container text-center hero-content hero-inner">
       <div class="hero-eyebrow fade-up-in js-scroll-fade" style="--fade-up-delay: 0s">
-        <h2
+        <p
           :class="[
             'h4',
             'text-uppercase',
@@ -16,9 +16,9 @@
           ]"
         >
           {{ tagLine }}
-        </h2>
+        </p>
       </div>
-      <h3
+      <h1
         :class="[
           'display-heading',
           'text-uppercase',
@@ -38,7 +38,7 @@
         >
           {{ part }}
         </span>
-      </h3>
+      </h1>
       <div
         class="hero-cta-stack fade-up-in js-scroll-fade"
         style="--fade-up-delay: 0.2s"
@@ -94,7 +94,6 @@ const heroHeadlineParts = computed(() => {
 });
 
 const promoImageSet = useResponsiveImage('img/promo', {
-  widths: [960, 1440, 1920],
   fallbackFormat: 'jpg',
 });
 
@@ -256,8 +255,9 @@ function getHeaderOffset() {
   letter-spacing: 0.12em;
   font-size: clamp(1.1rem, 1.5vw, 1.55rem);
   line-height: 1.35;
-  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+  color: var(--hero-eyebrow-color, var(--brand-hero-text-on-dark, var(--brand-hero-text, #f0eaf3)));
   border-bottom: 1px solid currentColor;
+  margin: 0;
 }
 
 .hero-headline {
@@ -266,16 +266,25 @@ function getHeaderOffset() {
   line-height: 1.08;
   margin-bottom: clamp(18px, 2.5vw, 28px);
   letter-spacing: 0.04em;
-  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+  color: var(--hero-text-color, var(--brand-hero-text-on-dark, var(--brand-hero-text, #f0eaf3)));
 }
 
 .promo-surface {
   position: relative;
   min-height: var(--promo-surface-min-height, calc(100vh + 75px));
-  background: var(
+  background-color: var(
     --promo-surface-bg,
     var(--hero-surface-bg, var(--theme-body-background, #060212))
   );
+  /* Two background-image declarations form a CSS-cascade fallback chain.
+     The first sets a basic url(); the second, if the browser parses
+     image-set() (and the type() argument), overrides with format
+     negotiation. Browsers that can't parse image-set fall back to the
+     url() above. Custom properties are populated by usePromoBackgroundStyles
+     via Vue's :style object binding — see that composable for why this
+     pattern is needed instead of a single background-image string. */
+  background-image: var(--promo-bg-fallback);
+  background-image: var(--promo-bg-set, var(--promo-bg-fallback));
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;