@koehler8/cms 1.0.0-beta.9 → 1.1.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 {