@koehler8/cms 1.0.0-beta.9 → 1.1.0

package/src/components/Header.vue

@@ -8,13 +8,92 @@
       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"
+        @keydown.esc="closeNavMenu($event, 'escape')"
+        @focusout="onNavFocusOut"
+      >
         <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.
+
+            Below 720px the row collapses into a disclosure menu behind the
+            toggle button below. Before this existed the list was simply
+            display:none on narrow viewports, which left phone visitors with
+            no primary navigation at all.
+          -->
+          <slot name="nav" :items="navItems">
+            <ul
+              v-if="navItems.length"
+              id="site-header-nav-menu"
+              ref="navMenuRef"
+              class="site-header__nav-list"
+              :class="{ 'site-header__nav-list--open': isNavOpen }"
+            >
+              <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"
+                  @click="closeNavMenu(null, 'selection')"
+                >{{ item.text }}</a>
+              </li>
+            </ul>
+          </slot>
+          <button
+            v-if="navItems.length && !hasNavSlot"
+            ref="navToggleRef"
+            class="site-header__nav-toggle"
+            type="button"
+            aria-controls="site-header-nav-menu"
+            :aria-expanded="isNavOpen ? 'true' : 'false'"
+            :aria-label="isNavOpen ? 'Close menu' : 'Open menu'"
+            @click="toggleNavMenu"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true" width="22" height="22">
+              <path
+                v-if="isNavOpen"
+                d="M6 6l12 12M18 6L6 18"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+              />
+              <path
+                v-else
+                d="M4 7h16M4 12h16M4 17h16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+          <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 +102,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 +111,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 +143,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 +161,47 @@
 </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));
+  // A site overriding the nav slot owns its own responsive behaviour, so the
+  // bundled toggle must not render alongside it.
+  const hasNavSlot = computed(() => Boolean(slots.nav));
 
 const isLangOpen = ref(false);
+const isNavOpen = 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',
@@ -130,6 +239,8 @@ const localeEmojis = {
 };
   const langButtonRef = ref(null);
   const langMenuRef = ref(null);
+  const navToggleRef = ref(null);
+  const navMenuRef = ref(null);
   const localeWrapperRef = ref(null);
   const localeMenuStyle = ref({ animationDuration: '500ms' });
   const logoLinkRef = ref(null);
@@ -169,9 +280,21 @@ const updateLocaleMenuPosition = () => {
     if (isLangOpen.value) {
       updateLocaleMenuPosition();
     }
+    // Above the breakpoint the toggle is display:none. Leaving isNavOpen true
+    // would strand aria-expanded="true" on a button no longer in the a11y tree.
+    if (isNavOpen.value && typeof window !== 'undefined' && window.innerWidth >= 720) {
+      isNavOpen.value = false;
+    }
   };
 
   const onDocumentClick = (e) => {
+    const navBtn = navToggleRef.value;
+    const navMenu = navMenuRef.value;
+    if (isNavOpen.value && !navBtn?.contains(e.target) && !navMenu?.contains(e.target)) {
+      isNavOpen.value = false;
+      trackEvent('header_nav_menu_toggle', { state: 'close', trigger: 'outside_click' });
+    }
+
     const btn = langButtonRef.value;
     const menu = langMenuRef.value;
     if (btn && btn.contains(e.target)) return; // toggle handled by button
@@ -187,6 +310,72 @@ 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());
+    }
+  };
+
+  const toggleNavMenu = () => {
+    isNavOpen.value = !isNavOpen.value;
+    trackEvent('header_nav_menu_toggle', {
+      state: isNavOpen.value ? 'open' : 'close',
+      trigger: 'click',
+    });
+  };
+
+  // Mirrors closeLocaleMenu: ESC restores focus to the toggle so keyboard
+  // dismissal doesn't strand focus inside a hidden menu (WCAG 2.4.3, 1.4.13).
+  const closeNavMenu = (event, trigger = 'escape') => {
+    if (!isNavOpen.value) return;
+    if (event) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    }
+    isNavOpen.value = false;
+    trackEvent('header_nav_menu_toggle', { state: 'close', trigger });
+    if (trigger === 'escape') {
+      nextTick(() => navToggleRef.value?.focus());
+    }
+  };
+
+  // Closes the menu when focus leaves both the menu and its toggle. Scoped to
+  // those two elements rather than the whole <nav> so tabbing from a menu link
+  // to the locale button (also inside <nav>) still dismisses it.
+  const onNavFocusOut = (event) => {
+    if (!isNavOpen.value) return;
+    const next = event.relatedTarget;
+    if (!next) return;
+    if (navMenuRef.value?.contains(next)) return;
+    if (navToggleRef.value?.contains(next)) return;
+    closeNavMenu(null, 'focusout');
+  };
+
+  // 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 +420,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 +528,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();
@@ -342,6 +574,17 @@ const updateLocaleMenuPosition = () => {
       currentLocale.value = normalized;
     }
   );
+
+  // In-SPA navigation must dismiss the mobile menu. The link click handler
+  // covers taps on the menu's own links; this covers everything else that
+  // changes the route while it's open (back button, a link elsewhere on the
+  // page, a programmatic push).
+  watch(
+    () => route.path,
+    () => {
+      isNavOpen.value = false;
+    }
+  );
 </script>
 
 <style scoped>
@@ -396,6 +639,118 @@ 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.
+
+   Below 720px it becomes a disclosure panel dropped beneath the header bar,
+   opened by .site-header__nav-toggle. (It used to be plain display:none here,
+   with no toggle — phone visitors got no primary navigation at all.) Sites
+   that want something else still override the nav slot, which also suppresses
+   the bundled toggle. */
+.site-header__nav-list {
+  display: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: clamp(0.75rem, 2vw, 1.75rem);
+  align-items: center;
+}
+.site-header__nav-list--open {
+  /* Containing block is .site-header (position: sticky), so this drops the
+     panel flush under the full-width bar rather than under the inner column. */
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  padding: 0.5rem 0;
+  background: var(--brand-header-bg, #020409);
+  border-top: 1px solid var(--ui-header-divider, rgba(255, 255, 255, 0.12));
+  box-shadow: var(--site-header-shadow, 0 18px 45px rgba(0, 0, 0, 0.35));
+  max-height: calc(100dvh - 100%);
+  overflow-y: auto;
+}
+.site-header__nav-list--open a {
+  display: block;
+  /* Comfortably past the 24x24 minimum for pointer targets (WCAG 2.5.8). */
+  padding: 0.85rem clamp(1rem, 5vw, 2rem);
+}
+
+/* Toggle is mobile-only; the row speaks for itself at 720px and up. */
+.site-header__nav-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  /* 44px square — the comfortable touch target, well past WCAG 2.5.8's 24px. */
+  width: 44px;
+  height: 44px;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.site-header__nav-toggle:hover {
+  background: var(--ui-header-hover, rgba(255, 255, 255, 0.08));
+}
+
+@media (min-width: 720px) {
+  .site-header__nav-list {
+    display: flex;
+  }
+  /* Neutralize the open state above the breakpoint: resizing past it while the
+     menu is open must not leave a dropped panel on a desktop layout. */
+  .site-header__nav-list--open {
+    position: static;
+    flex-direction: row;
+    align-items: center;
+    gap: clamp(0.75rem, 2vw, 1.75rem);
+    padding: 0;
+    background: none;
+    border-top: 0;
+    box-shadow: none;
+    max-height: none;
+    overflow-y: visible;
+  }
+  .site-header__nav-list--open a {
+    display: inline;
+    padding: 0;
+  }
+  .site-header__nav-toggle {
+    display: none;
+  }
+}
+.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;