@stackonward/cli 1.2.1 → 1.3.0

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

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 const site = useSiteShell();
+const { localeProperties, t } = useI18n();
+const localeHead = useLocaleHead({ seo: true });
 
 useHead(() => ({
-  htmlAttrs: {
-    lang: site.value.defaultLocale,
-  },
+  htmlAttrs: localeHead.value.htmlAttrs,
   titleTemplate: (title?: string) => (title ? `${title} | ${site.value.name}` : site.value.name),
   meta: [
-    { name: "description", content: site.value.description },
+    ...(localeHead.value.meta || []),
+    { name: "description", content: t(site.value.descriptionKey) },
     { property: "og:site_name", content: site.value.name },
     { property: "og:type", content: "website" },
   ],
+  link: localeHead.value.link || [],
   script: site.value.url
     ? [
         {
@@ -20,8 +22,8 @@ useHead(() => ({
             "@type": "WebSite",
             name: site.value.name,
             url: site.value.url,
-            description: site.value.description,
-            inLanguage: site.value.defaultLocale,
+            description: t(site.value.descriptionKey),
+            inLanguage: localeProperties.value.language || site.value.defaultLocale,
           }),
         },
       ]
@@ -32,6 +34,7 @@ useHead(() => ({
 <template>
   <UApp>
     <div class="site-root">
+      <a class="skip-link" href="#site-content">{{ t("site.skipToContent") }}</a>
       <NuxtLoadingIndicator color="var(--site-color-primary)" />
       <NuxtLayout>
         <NuxtPage />

package/dist/resources/components/nuxt/site-source/app/assets/css/site-shell.css

@@ -90,6 +90,24 @@
   color-scheme: light;
 }
 
+.dark {
+  --site-color-bg: #0b0f14;
+  --site-color-bg-soft: #101720;
+  --site-color-surface: #121922;
+  --site-color-surface-muted: #18212c;
+  --site-color-surface-elevated: #202c38;
+  --site-color-text: #f5f7fa;
+  --site-color-muted: #aab6c3;
+  --site-color-dimmed: #7f8c99;
+  --site-color-border: #2b3947;
+  --site-color-border-strong: #405163;
+  --site-shadow-soft: 0 18px 44px rgb(0 0 0 / 34%);
+  --site-shadow-strong: 0 30px 70px rgb(0 0 0 / 46%);
+  --ui-border-muted: #202c38;
+
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -137,6 +155,24 @@ summary {
   min-height: 100dvh;
 }
 
+.skip-link {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 100;
+  min-height: 44px;
+  border-radius: var(--site-radius-md);
+  background: var(--site-color-surface);
+  padding: 11px 16px;
+  color: var(--site-color-text);
+  box-shadow: var(--site-shadow-soft);
+  transform: translateY(calc(-100% - 20px));
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
 .base-button,
 .icon-button {
   display: inline-flex;
@@ -178,7 +214,7 @@ summary {
 
 .base-button--secondary {
   border-color: rgb(168 101 80 / 34%);
-  background: rgb(255 255 255 / 82%);
+  background: color-mix(in srgb, var(--site-color-surface) 82%, transparent);
   color: var(--site-color-primary);
 }
 
@@ -193,7 +229,7 @@ summary {
   height: 44px;
   border-color: rgb(168 101 80 / 22%);
   border-radius: var(--site-radius-md);
-  background: rgb(255 255 255 / 78%);
+  background: color-mix(in srgb, var(--site-color-surface) 78%, transparent);
   color: var(--site-color-primary);
 }
 
@@ -251,7 +287,7 @@ summary {
   top: 0;
   z-index: 40;
   border-bottom: 1px solid rgb(219 227 232 / 82%);
-  background: rgb(255 255 255 / 88%);
+  background: color-mix(in srgb, var(--site-color-surface) 88%, transparent);
   backdrop-filter: blur(18px);
 }
 
@@ -316,7 +352,7 @@ summary {
   gap: 6px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-lg);
-  background: rgb(255 255 255 / 98%);
+  background: color-mix(in srgb, var(--site-color-surface) 98%, transparent);
   padding: 8px;
   box-shadow: var(--site-shadow-soft);
   transform: translateX(-50%);
@@ -345,7 +381,91 @@ summary {
 }
 
 .marketing-header__actions > .base-button--secondary {
-  background: rgb(255 255 255 / 78%);
+  background: color-mix(in srgb, var(--site-color-surface) 78%, transparent);
+}
+
+.marketing-header__preferences,
+.mobile-nav__preferences {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.site-preference {
+  position: relative;
+}
+
+.site-preference > summary {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-md);
+  background: color-mix(in srgb, var(--site-color-surface) 84%, transparent);
+  padding: 0 10px;
+  color: var(--site-color-text);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  list-style: none;
+}
+
+.site-preference > summary::-webkit-details-marker {
+  display: none;
+}
+
+.site-preference[open] > summary,
+.site-preference > summary:hover {
+  border-color: var(--site-color-border-strong);
+  background: var(--site-color-surface-muted);
+}
+
+.site-preference__chevron {
+  transition: transform var(--site-transition-fast);
+}
+
+.site-preference[open] .site-preference__chevron {
+  transform: rotate(180deg);
+}
+
+.site-preference__menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 60;
+  display: grid;
+  width: max-content;
+  min-width: 180px;
+  gap: 4px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: var(--site-color-surface);
+  padding: 6px;
+  box-shadow: var(--site-shadow-soft);
+}
+
+.site-preference__menu button {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--site-radius-md);
+  background: transparent;
+  padding: 0 10px;
+  color: var(--site-color-text);
+  cursor: pointer;
+  text-align: start;
+}
+
+.site-preference__menu button:hover,
+.site-preference__menu button[aria-pressed="true"] {
+  background: var(--site-color-surface-muted);
+}
+
+.site-preference__check {
+  margin-inline-start: auto;
 }
 
 .marketing-header__menu-button {
@@ -358,7 +478,7 @@ summary {
 
 .marketing-footer {
   border-top: 1px solid var(--site-color-border);
-  background: linear-gradient(180deg, var(--site-color-surface), #edf5f7), var(--site-color-bg);
+  background: linear-gradient(180deg, var(--site-color-surface), var(--site-color-bg-soft));
   color: var(--site-color-text);
 }
 
@@ -397,15 +517,25 @@ summary {
 }
 
 .marketing-footer__social a,
-.marketing-footer__legal a {
+.marketing-footer__legal a,
+.consent-settings-button {
   color: var(--site-color-muted);
 }
 
 .marketing-footer__social a:hover,
-.marketing-footer__legal a:hover {
+.marketing-footer__legal a:hover,
+.consent-settings-button:hover {
   color: var(--site-color-accent);
 }
 
+.consent-settings-button {
+  min-height: 44px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
 .marketing-footer__nav {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -450,9 +580,6 @@ summary {
 }
 
 .back-to-top {
-  position: fixed;
-  right: 24px;
-  z-index: 45;
   display: grid;
   width: 44px;
   height: 44px;
@@ -572,19 +699,60 @@ summary {
 }
 
 .site-consent {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
-  z-index: 50;
   display: grid;
-  width: calc(100vw - 32px);
-  max-width: 430px;
+  width: 100%;
+  max-height: min(70dvh, 560px);
   gap: 14px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-lg);
-  background: rgb(255 255 255 / 96%);
+  background: color-mix(in srgb, var(--site-color-surface) 96%, transparent);
   padding: 16px;
   box-shadow: var(--site-shadow-strong);
+  overflow-y: auto;
+}
+
+.site-floating-stack {
+  position: fixed;
+  inset-block-end: max(24px, env(safe-area-inset-bottom));
+  inset-inline-end: max(24px, env(safe-area-inset-right));
+  z-index: 50;
+  display: flex;
+  width: min(430px, calc(100vw - 48px));
+  max-height: calc(100dvh - 48px - env(safe-area-inset-bottom));
+  align-items: flex-end;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.site-floating-stack > * {
+  pointer-events: auto;
+}
+
+.site-consent__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.site-consent__header h2 {
+  margin: 0;
+  color: var(--site-color-text);
+  font-size: 18px;
+}
+
+.site-consent__close {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--site-color-surface-muted);
+  color: var(--site-color-text);
+  cursor: pointer;
 }
 
 .site-consent__message {
@@ -593,6 +761,23 @@ summary {
   line-height: 1.55;
 }
 
+.site-consent__policy {
+  width: fit-content;
+  color: var(--site-color-primary);
+  font-weight: 650;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.site-consent__status {
+  margin: 0;
+  border-inline-start: 3px solid var(--site-color-warning);
+  padding-inline-start: 10px;
+  color: var(--site-color-muted);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
 .site-consent__actions {
   display: flex;
   flex-wrap: wrap;
@@ -600,14 +785,6 @@ summary {
   gap: 10px;
 }
 
-@media (width <= 520px) {
-  .site-consent {
-    right: 16px;
-    left: 16px;
-    width: auto;
-  }
-}
-
 .application-shell {
   height: 100dvh;
   min-height: 0;
@@ -625,7 +802,7 @@ summary {
   align-items: center;
   gap: 16px;
   border-bottom: 1px solid var(--site-color-border);
-  background: rgb(255 255 255 / 90%);
+  background: color-mix(in srgb, var(--site-color-surface) 90%, transparent);
   padding: 0 20px;
   backdrop-filter: blur(16px);
 }
@@ -851,6 +1028,38 @@ summary {
   font-weight: 450;
 }
 
+.storage-inventory {
+  width: 100%;
+  margin: 20px 0;
+  overflow-x: auto;
+}
+
+.storage-inventory table {
+  width: 100%;
+  min-width: 720px;
+  border-collapse: collapse;
+  color: var(--site-color-muted);
+  font-size: 14px;
+}
+
+.storage-inventory th,
+.storage-inventory td {
+  border-bottom: 1px solid var(--site-color-border);
+  padding: 12px;
+  text-align: start;
+  vertical-align: top;
+}
+
+.storage-inventory thead th {
+  color: var(--site-color-text);
+  font-weight: 650;
+}
+
+.storage-inventory code {
+  color: var(--site-color-text);
+  white-space: nowrap;
+}
+
 @media (width <= 860px) {
   :root {
     --site-shell-header-height: 64px;
@@ -870,6 +1079,7 @@ summary {
   }
 
   .marketing-header__nav,
+  .marketing-header__preferences,
   .marketing-header__actions > .base-button {
     display: none;
   }
@@ -886,7 +1096,7 @@ summary {
     display: none;
     width: min(100%, 100vw);
     border-top: 1px solid var(--site-color-border);
-    background: rgb(255 255 255 / 98%);
+    background: color-mix(in srgb, var(--site-color-surface) 98%, transparent);
     padding: 10px 12px 18px;
   }
 
@@ -915,6 +1125,25 @@ summary {
     cursor: pointer;
   }
 
+  .mobile-nav__preferences {
+    padding: 8px 12px 0;
+  }
+
+  .mobile-nav__preferences .site-preference {
+    flex: 1;
+  }
+
+  .mobile-nav__preferences .site-preference > summary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .mobile-nav__preferences .site-preference__menu {
+    right: auto;
+    left: 0;
+    width: 100%;
+  }
+
   .marketing-footer__inner,
   .marketing-footer__nav,
   .content-list__grid {
@@ -998,11 +1227,6 @@ summary {
   .content-article__related > h2 {
     width: min(100% - 32px, 960px);
   }
-
-  .site-consent {
-    right: 16px;
-    bottom: 102px;
-  }
 }
 
 @media (width <= 520px) {
@@ -1022,6 +1246,17 @@ summary {
   .site-consent__actions .base-button {
     flex: 1;
   }
+
+  .site-floating-stack {
+    inset-block-end: max(16px, env(safe-area-inset-bottom));
+    inset-inline: 16px;
+    width: auto;
+    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
+  }
+
+  .site-preference__current {
+    display: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const site = useSiteShell();
+const { t } = useI18n();
 
 defineEmits<{
   toggleSidebar: [];
@@ -12,7 +13,7 @@ defineEmits<{
       <button
         type="button"
         class="icon-button application-header__menu-button"
-        aria-label="Toggle sidebar"
+        :aria-label="t('navigation.toggleSidebar')"
         @click="$emit('toggleSidebar')"
       >
         <span aria-hidden="true">☰</span>
@@ -26,9 +27,11 @@ defineEmits<{
 
     <div class="application-header__right">
       <slot name="actions">
-        <NuxtLink :to="site.homePath" class="base-button base-button--secondary">
-          Site
-        </NuxtLink>
+        <ThemeSwitcher />
+        <LocaleSwitcher />
+        <NuxtLinkLocale :to="site.homePath" class="base-button base-button--secondary">
+          {{ t("site.openMarketingSite") }}
+        </NuxtLinkLocale>
       </slot>
     </div>
   </header>

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

@@ -48,7 +48,7 @@ watch(
         </slot>
       </div>
 
-      <main ref="appContentRef" class="application-shell__content" tabindex="-1">
+      <main id="site-content" ref="appContentRef" class="application-shell__content" tabindex="-1">
         <slot />
       </main>
     </div>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { appNavGroups } = useNavigation();
+const { t } = useI18n();
 
 defineEmits<{
   navigate: [];
@@ -7,7 +8,7 @@ defineEmits<{
 </script>
 
 <template>
-  <aside class="application-sidebar" aria-label="Application">
+  <aside class="application-sidebar" :aria-label="t('navigation.application')">
     <nav class="application-sidebar__nav">
       <section
         v-for="group in appNavGroups"
@@ -15,7 +16,7 @@ defineEmits<{
         class="application-sidebar__group"
       >
         <h2 v-if="group.label">{{ group.label }}</h2>
-        <NuxtLink
+        <NuxtLinkLocale
           v-for="item in group.items"
           :key="item.to"
           :to="item.to"
@@ -33,7 +34,7 @@ defineEmits<{
           }}</span>
           <span>{{ item.label }}</span>
           <small v-if="item.badge">{{ item.badge }}</small>
-        </NuxtLink>
+        </NuxtLinkLocale>
       </section>
     </nav>
   </aside>

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

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    bottomOffset?: number;
-  }>(),
-  {
-    bottomOffset: 24,
-  },
-);
-
 const isVisible = ref(false);
+const { t } = useI18n();
 
 function updateVisibility(): void {
   isVisible.value = window.scrollY > 320;
 }
 
 function scrollToTop(): void {
-  window.scrollTo({ top: 0, behavior: "smooth" });
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  window.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
 }
 
 onMounted(() => {
@@ -33,8 +26,7 @@ onBeforeUnmount(() => {
     type="button"
     class="back-to-top"
     :class="{ 'back-to-top--visible': isVisible }"
-    :style="{ bottom: `${props.bottomOffset}px` }"
-    aria-label="Back to top"
+    :aria-label="t('site.backToTop')"
     @click="scrollToTop"
   >
     <UIcon name="i-lucide-chevron-up" class="back-to-top__icon" />

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const site = useSiteShell();
+const analytics = useAnalytics();
+const consent = useConsent();
+const { t } = useI18n();
+
+const visible = computed(
+  () =>
+    site.value.consent.enabled &&
+    analytics.status.value !== "disabled" &&
+    consent.state.value.ready,
+);
+</script>
+
+<template>
+  <button
+    v-if="visible"
+    type="button"
+    class="consent-settings-button"
+    @click="consent.openSettings"
+  >
+    {{ t("consent.settings") }}
+  </button>
+</template>

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

@@ -5,6 +5,7 @@ defineProps<{
   article: ContentArticle;
   related?: ContentListItem[];
 }>();
+const { t } = useI18n();
 </script>
 
 <template>
@@ -13,9 +14,16 @@ defineProps<{
       <p v-if="article.category" class="page-heading__eyebrow">{{ article.category }}</p>
       <h1>{{ article.title }}</h1>
       <p v-if="article.description">{{ article.description }}</p>
-      <span v-if="article.author || article.date || article.updatedAt" class="content-article__meta">
+      <span
+        v-if="article.author || article.date || article.updatedAt"
+        class="content-article__meta"
+      >
         {{
-          [article.author, article.date, article.updatedAt && `Updated ${article.updatedAt}`]
+          [
+            article.author,
+            article.date,
+            article.updatedAt && t("content.updated", { date: article.updatedAt }),
+          ]
             .filter(Boolean)
             .join(" · ")
         }}
@@ -26,14 +34,18 @@ defineProps<{
       <slot />
     </div>
 
-    <aside v-if="related?.length" class="content-article__related" aria-label="Related content">
-      <h2>Related</h2>
+    <aside
+      v-if="related?.length"
+      class="content-article__related"
+      :aria-label="t('content.relatedRegion')"
+    >
+      <h2>{{ t("content.related") }}</h2>
       <div class="content-list__grid">
-        <NuxtLink v-for="item in related" :key="item.to" :to="item.to" class="content-card">
+        <NuxtLinkLocale v-for="item in related" :key="item.to" :to="item.to" class="content-card">
           <small v-if="item.category">{{ item.category }}</small>
           <h3>{{ item.title }}</h3>
           <p v-if="item.description">{{ item.description }}</p>
-        </NuxtLink>
+        </NuxtLinkLocale>
       </div>
     </aside>
   </article>

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

@@ -17,14 +17,14 @@ defineProps<{
     </header>
 
     <div class="content-list__grid">
-      <NuxtLink v-for="item in items" :key="item.to" :to="item.to" class="content-card">
+      <NuxtLinkLocale v-for="item in items" :key="item.to" :to="item.to" class="content-card">
         <small v-if="item.category">{{ item.category }}</small>
         <h2>{{ item.title }}</h2>
         <p v-if="item.description">{{ item.description }}</p>
         <span v-if="item.date || item.author">
           {{ [item.author, item.date].filter(Boolean).join(" · ") }}
         </span>
-      </NuxtLink>
+      </NuxtLinkLocale>
     </div>
   </section>
 </template>