kmcom-nuxt-layers 6.2.0 → 6.3.0

package/layers/structure/navigation/app/components/Mast/NavModal.vue

@@ -14,7 +14,6 @@
   const activeSection = useState<string>('activeSection', () => '')
   const route = useRoute()
   const { close: closeNav } = useMastNav()
-  const { useZIndex } = useGridConfig()
 
   function dismiss() {
     emit('update:open', false)
@@ -35,43 +34,39 @@
 </script>
 
 <template>
-  <Transition name="nav-modal">
-    <div
-      v-if="open"
-      class="bg-default text-default fixed inset-0 flex flex-col items-center justify-center"
-      :style="{ zIndex: useZIndex('modal') }"
-    >
-      <button
-        class="absolute top-[3vh] right-[5vw] cursor-pointer border-0 bg-transparent p-2"
-        aria-label="Close navigation"
-        @click="dismiss"
-      >
-        <UIcon name="lucide:x" class="size-7" />
-      </button>
+  <!-- UModal supplies the dialog role, focus trap, Escape and portal; the title stays
+       visually hidden because the content slot replaces the header. -->
+  <UModal
+    :open
+    fullscreen
+    title="Site navigation"
+    :ui="{ overlay: 'z-(--z-modal)', content: 'bg-default text-default z-(--z-modal)' }"
+    @update:open="(value) => !value && dismiss()"
+  >
+    <template #content>
+      <div class="relative flex h-full flex-col items-center justify-center">
+        <UButton
+          icon="lucide:x"
+          color="neutral"
+          variant="ghost"
+          size="xl"
+          aria-label="Close navigation"
+          class="absolute top-4 right-4"
+          @click="dismiss"
+        />
 
-      <LinksGroup tag="nav" class="flex flex-col items-center gap-2">
-        <button
-          v-for="link in links"
-          :key="link.id"
-          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl tracking-widest uppercase transition-all"
-          :class="activeSection === link.id ? 'font-normal' : 'font-light'"
-          @click="() => handleNav(link)"
-        >
-          {{ link.label }}
-        </button>
-      </LinksGroup>
-    </div>
-  </Transition>
+        <HoverDimGroup tag="nav" class="flex flex-col items-center gap-2">
+          <button
+            v-for="link in links"
+            :key="link.id"
+            class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl tracking-widest uppercase transition-all"
+            :class="activeSection === link.id ? 'font-normal' : 'font-light'"
+            @click="() => handleNav(link)"
+          >
+            {{ link.label }}
+          </button>
+        </HoverDimGroup>
+      </div>
+    </template>
+  </UModal>
 </template>
-
-<style scoped>
-  .nav-modal-enter-active,
-  .nav-modal-leave-active {
-    transition: opacity 300ms ease;
-  }
-
-  .nav-modal-enter-from,
-  .nav-modal-leave-to {
-    opacity: 0;
-  }
-</style>

package/layers/structure/navigation/app/components/Site/Subtitle.vue

@@ -1,4 +1,14 @@
 <script setup lang="ts">
+  /**
+   * @deprecated Render `useSite().subtitleWords` directly. Unused in this repo and KMCOMv5;
+   * remove in the next major.
+   */
+  if (import.meta.dev)
+    // eslint-disable-next-line no-console -- one-time deprecation notice, dev only
+    console.warn(
+      '[navigation] <SiteSubtitle> is deprecated — render useSite().subtitleWords directly.'
+    )
+
   const site = useSite()
 </script>
 

package/layers/structure/navigation/app/components/Site/Title.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+  /**
+   * @deprecated Render `useSite().titleWords` directly. Unused in this repo and KMCOMv5;
+   * remove in the next major.
+   */
+  if (import.meta.dev)
+    // eslint-disable-next-line no-console -- one-time deprecation notice, dev only
+    console.warn('[navigation] <SiteTitle> is deprecated — render useSite().titleWords directly.')
+
   const site = useSite()
 </script>
 

package/layers/structure/navigation/nuxt.config.ts

@@ -1,7 +1,13 @@
 export default defineNuxtConfig({
   $meta: { name: 'navigation' },
 
-  extends: ['../../core', '../../motion/scroll', '../layout', '../../design-system/typography'],
+  extends: [
+    '../../core',
+    '../../motion/scroll',
+    '../layout',
+    '../../design-system/typography',
+    '../../design-system/visual',
+  ],
 
   alias: {
     '#layers/navigation': import.meta.dirname,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",