@stackonward/cli 1.2.1 → 1.3.0

package/dist/resources/components/nuxt/site-source/app/components/site/CookieConsent.vue

@@ -1,17 +1,57 @@
 <script setup lang="ts">
 const site = useSiteShell();
 const consent = useConsent();
+const { t } = useI18n();
+
+const persistenceMessage = computed(() => {
+  if (consent.state.value.error === "read-failed") {
+    return t("consent.storageUnavailable");
+  }
+  if (consent.state.value.error === "clear-failed") {
+    return t("consent.storageCleanupFailed");
+  }
+  if (consent.state.value.persistence === "cleared") {
+    return t("consent.storageCleared");
+  }
+  if (consent.state.value.persistence === "session-only") {
+    return t("consent.sessionOnly");
+  }
+  return "";
+});
 </script>
 
 <template>
-  <section v-if="consent.visible.value" class="site-consent" role="region" aria-label="Consent">
-    <p class="site-consent__message">{{ site.consent.message }}</p>
+  <section
+    v-if="consent.visible.value"
+    class="site-consent"
+    role="region"
+    :aria-label="t('consent.region')"
+  >
+    <div class="site-consent__header">
+      <h2>{{ t("consent.title") }}</h2>
+      <button
+        v-if="consent.state.value.decision"
+        type="button"
+        class="site-consent__close"
+        :aria-label="t('consent.close')"
+        @click="consent.closeSettings"
+      >
+        <UIcon name="i-lucide-x" aria-hidden="true" />
+      </button>
+    </div>
+    <p class="site-consent__message">{{ t("consent.message") }}</p>
+    <NuxtLink class="site-consent__policy" :to="site.consent.policyPath">
+      {{ t("consent.policy") }}
+    </NuxtLink>
+    <p v-if="persistenceMessage" class="site-consent__status" role="status">
+      {{ persistenceMessage }}
+    </p>
     <div class="site-consent__actions">
       <button type="button" class="base-button base-button--secondary" @click="consent.reject">
-        {{ site.consent.rejectLabel }}
+        {{ t("consent.decline") }}
       </button>
       <button type="button" class="base-button base-button--primary" @click="consent.accept">
-        {{ site.consent.acceptLabel }}
+        {{ t("consent.allow") }}
       </button>
     </div>
   </section>

package/dist/resources/components/nuxt/site-source/app/components/site/LocaleSwitcher.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const emit = defineEmits<{ changed: [] }>();
+const { locale, locales, setLocale, t } = useI18n();
+const dropdown = ref<HTMLDetailsElement | null>(null);
+
+const options = computed(() =>
+  locales.value.map((item) => ({
+    code: item.code,
+    name: item.name || item.code.toUpperCase(),
+  })),
+);
+const current = computed(
+  () => options.value.find((option) => option.code === locale.value) || options.value[0],
+);
+
+async function selectLocale(code: typeof locale.value): Promise<void> {
+  dropdown.value?.removeAttribute("open");
+  if (code !== locale.value) await setLocale(code);
+  emit("changed");
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Escape" || !dropdown.value?.open) return;
+  event.preventDefault();
+  dropdown.value.open = false;
+  dropdown.value.querySelector<HTMLElement>("summary")?.focus();
+}
+
+onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
+</script>
+
+<template>
+  <details
+    v-if="options.length > 1"
+    ref="dropdown"
+    class="site-preference"
+    @keydown="handleKeydown"
+  >
+    <summary :aria-label="t('language.current', { language: current?.name || locale })">
+      <UIcon name="i-lucide-languages" aria-hidden="true" />
+      <span>{{ current?.code.toUpperCase() || locale.toUpperCase() }}</span>
+      <UIcon class="site-preference__chevron" name="i-lucide-chevron-down" aria-hidden="true" />
+    </summary>
+    <div class="site-preference__menu" :aria-label="t('language.select')">
+      <button
+        v-for="option in options"
+        :key="option.code"
+        type="button"
+        :aria-pressed="option.code === locale"
+        @click="selectLocale(option.code)"
+      >
+        <span>{{ option.name }}</span>
+        <UIcon v-if="option.code === locale" name="i-lucide-check" aria-hidden="true" />
+      </button>
+    </div>
+  </details>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingFooter.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 const site = useSiteShell();
 const { footerGroups, legalLinks, socialLinks } = useNavigation();
+const { t } = useI18n();
 const year = new Date().getFullYear();
 </script>
 
 <template>
   <footer class="marketing-footer">
     <div class="marketing-footer__inner">
-      <section class="marketing-footer__brand" aria-label="Site">
+      <section class="marketing-footer__brand" :aria-label="t('site.region')">
         <SiteBrand />
-        <p>{{ site.description }}</p>
+        <p>{{ t(site.descriptionKey) }}</p>
         <div v-if="socialLinks.length" class="marketing-footer__social">
           <a
             v-for="link in socialLinks"
@@ -23,7 +24,7 @@ const year = new Date().getFullYear();
         </div>
       </section>
 
-      <nav class="marketing-footer__nav" aria-label="Footer">
+      <nav class="marketing-footer__nav" :aria-label="t('footer.navigation')">
         <section v-for="group in footerGroups" :key="group.title" class="marketing-footer__group">
           <h2>{{ group.title }}</h2>
           <ul>
@@ -31,9 +32,9 @@ const year = new Date().getFullYear();
               <a v-if="link.external" :href="link.to" target="_blank" rel="noopener noreferrer">
                 {{ link.label }}
               </a>
-              <NuxtLink v-else :to="link.to || site.homePath">
+              <NuxtLinkLocale v-else :to="link.to || site.homePath">
                 {{ link.label }}
-              </NuxtLink>
+              </NuxtLinkLocale>
             </li>
           </ul>
         </section>
@@ -41,11 +42,12 @@ const year = new Date().getFullYear();
     </div>
 
     <div class="marketing-footer__legal">
-      <span>© {{ year }} {{ site.name }}</span>
-      <nav aria-label="Legal">
-        <NuxtLink v-for="link in legalLinks" :key="link.label" :to="link.to">
+      <span>{{ t("footer.copyright", { year, site: site.name }) }}</span>
+      <nav :aria-label="t('footer.legal')">
+        <NuxtLinkLocale v-for="link in legalLinks" :key="link.label" :to="link.to">
           {{ link.label }}
-        </NuxtLink>
+        </NuxtLinkLocale>
+        <ConsentSettingsButton />
       </nav>
     </div>
   </footer>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingHeader.vue

@@ -2,7 +2,8 @@
 import type { MarketingNavigationItem } from "~/types/site-shell";
 
 const site = useSiteShell();
-const { marketingNav } = useNavigation();
+const { marketingNav, primaryActionLabel, secondaryActionLabel } = useNavigation();
+const { t } = useI18n();
 const menuOpen = ref(false);
 
 function closeMenu(): void {
@@ -19,12 +20,12 @@ function hasChildren(item: MarketingNavigationItem): boolean {
     <div class="marketing-header__inner">
       <SiteBrand />
 
-      <nav class="marketing-header__nav" aria-label="Primary">
+      <nav class="marketing-header__nav" :aria-label="t('navigation.primary')">
         <template v-for="item in marketingNav" :key="item.label">
           <details v-if="hasChildren(item)" class="marketing-nav-menu">
             <summary>{{ item.label }}</summary>
             <div class="marketing-nav-menu__panel">
-              <NuxtLink
+              <NuxtLinkLocale
                 v-for="child in item.children"
                 :key="child.label"
                 :to="child.to || site.homePath"
@@ -32,7 +33,7 @@ function hasChildren(item: MarketingNavigationItem): boolean {
               >
                 <span>{{ child.label }}</span>
                 <small v-if="child.description">{{ child.description }}</small>
-              </NuxtLink>
+              </NuxtLinkLocale>
             </div>
           </details>
           <a
@@ -44,31 +45,38 @@ function hasChildren(item: MarketingNavigationItem): boolean {
           >
             {{ item.label }}
           </a>
-          <NuxtLink v-else class="marketing-nav-link" :to="item.to || site.homePath">
+          <NuxtLinkLocale v-else class="marketing-nav-link" :to="item.to || site.homePath">
             {{ item.label }}
-          </NuxtLink>
+          </NuxtLinkLocale>
         </template>
       </nav>
 
       <div class="marketing-header__actions">
+        <div class="marketing-header__preferences">
+          <ThemeSwitcher />
+          <LocaleSwitcher />
+        </div>
         <slot name="actions">
-          <NuxtLink :to="site.secondaryActionPath" class="base-button base-button--secondary">
-            {{ site.secondaryActionLabel }}
-          </NuxtLink>
-          <NuxtLink :to="site.appPath" class="base-button base-button--primary">
-            {{ site.primaryActionLabel }}
+          <NuxtLinkLocale :to="site.secondaryActionPath" class="base-button base-button--secondary">
+            {{ secondaryActionLabel }}
+          </NuxtLinkLocale>
+          <NuxtLinkLocale :to="site.appPath" class="base-button base-button--primary">
+            {{ primaryActionLabel }}
             <UIcon name="i-lucide-arrow-right" />
-          </NuxtLink>
+          </NuxtLinkLocale>
         </slot>
         <button
           type="button"
           class="icon-button marketing-header__menu-button"
           :aria-expanded="menuOpen"
           aria-controls="mobile-nav"
-          aria-label="Toggle navigation"
+          :aria-label="t('navigation.toggle')"
           @click="menuOpen = !menuOpen"
         >
-          <UIcon :name="menuOpen ? 'i-lucide-x' : 'i-lucide-menu'" class="marketing-header__menu-icon" />
+          <UIcon
+            :name="menuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
+            class="marketing-header__menu-icon"
+          />
         </button>
       </div>
     </div>
@@ -77,20 +85,20 @@ function hasChildren(item: MarketingNavigationItem): boolean {
       id="mobile-nav"
       class="mobile-nav"
       :class="{ 'mobile-nav--open': menuOpen }"
-      aria-label="Mobile primary"
+      :aria-label="t('navigation.mobilePrimary')"
     >
       <template v-for="item in marketingNav" :key="item.label">
-        <NuxtLink
+        <NuxtLinkLocale
           v-if="!hasChildren(item)"
           :to="item.to || site.homePath"
           class="mobile-nav__link"
           @click="closeMenu"
         >
           {{ item.label }}
-        </NuxtLink>
+        </NuxtLinkLocale>
         <details v-else class="mobile-nav__group">
           <summary>{{ item.label }}</summary>
-          <NuxtLink
+          <NuxtLinkLocale
             v-for="child in item.children"
             :key="child.label"
             :to="child.to || site.homePath"
@@ -98,9 +106,13 @@ function hasChildren(item: MarketingNavigationItem): boolean {
             @click="closeMenu"
           >
             {{ child.label }}
-          </NuxtLink>
+          </NuxtLinkLocale>
         </details>
       </template>
+      <div class="mobile-nav__preferences">
+        <ThemeSwitcher @changed="closeMenu" />
+        <LocaleSwitcher @changed="closeMenu" />
+      </div>
     </nav>
   </header>
 </template>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingShell.vue

@@ -7,9 +7,6 @@ const LazyMarketingFooter = defineLazyHydrationComponent(
   "visible",
   () => import("./MarketingFooter.vue"),
 );
-
-const consent = useConsent();
-const backToTopOffset = computed(() => (consent.visible.value ? 104 : 24));
 </script>
 
 <template>
@@ -18,7 +15,7 @@ const backToTopOffset = computed(() => (consent.visible.value ? 104 : 24));
       <LazyMarketingHeader :hydrate-on-idle="800" />
     </slot>
 
-    <main class="marketing-shell__main">
+    <main id="site-content" class="marketing-shell__main">
       <slot />
     </main>
 
@@ -26,10 +23,11 @@ const backToTopOffset = computed(() => (consent.visible.value ? 104 : 24));
       <LazyMarketingFooter hydrate-on-visible />
     </slot>
 
-    <BackToTop :bottom-offset="backToTopOffset" />
-
-    <slot name="consent">
-      <CookieConsent />
-    </slot>
+    <div class="site-floating-stack">
+      <BackToTop />
+      <slot name="consent">
+        <CookieConsent />
+      </slot>
+    </div>
   </div>
 </template>

package/dist/resources/components/nuxt/site-source/app/components/site/SiteBrand.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 const site = useSiteShell();
+const { t } = useI18n();
 </script>
 
 <template>
-  <NuxtLink :to="site.homePath" class="site-brand" aria-label="Home">
+  <NuxtLinkLocale :to="site.homePath" class="site-brand" :aria-label="t('site.home')">
     <span class="site-brand__mark" aria-hidden="true">{{ site.logoText.slice(0, 1) }}</span>
     <span class="site-brand__text">{{ site.logoText }}</span>
-  </NuxtLink>
+  </NuxtLinkLocale>
 </template>

package/dist/resources/components/nuxt/site-source/app/components/site/StaticPage.vue

@@ -4,6 +4,7 @@ defineProps<{
   description?: string;
   updatedAt?: string;
 }>();
+const { t } = useI18n();
 </script>
 
 <template>
@@ -11,7 +12,7 @@ defineProps<{
     <header class="page-heading">
       <h1>{{ title }}</h1>
       <p v-if="description">{{ description }}</p>
-      <span v-if="updatedAt">Updated {{ updatedAt }}</span>
+      <span v-if="updatedAt">{{ t("content.updated", { date: updatedAt }) }}</span>
     </header>
 
     <div class="static-page__body">

package/dist/resources/components/nuxt/site-source/app/components/site/ThemeSwitcher.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+type ThemePreference = "system" | "light" | "dark";
+
+const emit = defineEmits<{ changed: [] }>();
+const colorMode = useColorMode();
+const { t } = useI18n();
+const dropdown = ref<HTMLDetailsElement | null>(null);
+const options = [
+  { value: "system", labelKey: "theme.system", icon: "i-lucide-monitor" },
+  { value: "light", labelKey: "theme.light", icon: "i-lucide-sun" },
+  { value: "dark", labelKey: "theme.dark", icon: "i-lucide-moon" },
+] as const satisfies readonly { value: ThemePreference; labelKey: string; icon: string }[];
+const preference = computed<ThemePreference>(() => {
+  const value = colorMode.preference;
+  return value === "light" || value === "dark" ? value : "system";
+});
+const current = computed(
+  () => options.find((option) => option.value === preference.value) ?? options[0],
+);
+
+function selectTheme(value: ThemePreference): void {
+  colorMode.preference = value;
+  dropdown.value?.removeAttribute("open");
+  emit("changed");
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Escape" || !dropdown.value?.open) return;
+  event.preventDefault();
+  dropdown.value.open = false;
+  dropdown.value.querySelector<HTMLElement>("summary")?.focus();
+}
+
+onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
+</script>
+
+<template>
+  <details ref="dropdown" class="site-preference" @keydown="handleKeydown">
+    <summary :aria-label="t('theme.current', { theme: t(current.labelKey) })">
+      <UIcon :name="current.icon" aria-hidden="true" />
+      <span class="site-preference__current">{{ t(current.labelKey) }}</span>
+      <UIcon class="site-preference__chevron" name="i-lucide-chevron-down" aria-hidden="true" />
+    </summary>
+    <div class="site-preference__menu" :aria-label="t('theme.select')">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        :aria-pressed="option.value === preference"
+        @click="selectTheme(option.value)"
+      >
+        <UIcon :name="option.icon" aria-hidden="true" />
+        <span>{{ t(option.labelKey) }}</span>
+        <UIcon
+          v-if="option.value === preference"
+          class="site-preference__check"
+          name="i-lucide-check"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+  </details>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ToastViewport.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const { toasts, dismiss } = useToasts();
+const { t } = useI18n();
 </script>
 
 <template>
-  <div class="toast-viewport" role="region" aria-label="Notifications">
+  <div class="toast-viewport" role="region" :aria-label="t('notifications.region')">
     <TransitionGroup name="site-toast" tag="div" class="toast-viewport__stack">
       <section
         v-for="toast in toasts"
@@ -16,7 +17,7 @@ const { toasts, dismiss } = useToasts();
           <h2>{{ toast.title }}</h2>
           <p v-if="toast.description">{{ toast.description }}</p>
         </div>
-        <button type="button" aria-label="Dismiss notification" @click="dismiss(toast.id)">
+        <button type="button" :aria-label="t('notifications.dismiss')" @click="dismiss(toast.id)">
           ×
         </button>
       </section>