kmcom-nuxt-layers 1.6.12 → 1.6.16

package/layers/theme/app/assets/css/theme.css

@@ -6,6 +6,15 @@
  * same Tailwind pass as all utility generation (avoids HMR regeneration shift).
  */
 
+/* --- Theme Transition --- */
+@layer utilities {
+  .theme-transition {
+    transition-property: color, background-color, border-color, fill, stroke, box-shadow;
+    transition-duration: 700ms;
+    transition-delay: 0ms;
+  }
+}
+
 /* --- Reduced Motion --- */
 [data-theme-motion='reduced'] *,
 [data-theme-motion='reduced'] *::before,

package/layers/ui/app/assets/css/ui.css

@@ -18,3 +18,9 @@
 [data-theme-transparency='reduced'] .accent-blob {
   opacity: 0 !important;
 }
+
+@layer utilities {
+  .site-word {
+    display: block;
+  }
+}

package/layers/ui/app/components/Site/Subtitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <span v-for="(word, index) in useSite().subtitleWords" :key="index" class="site-word">
+    {{ word }}
+  </span>
+</template>

package/layers/ui/app/components/Site/Title.vue

@@ -1,15 +1,5 @@
-<script lang="ts" setup>
-import { splitSpaces } from '../../utils/regex'
-
-defineProps<{
-  siteTitle: string
-  tag: string
-  titleVariant: string
-}>()
-</script>
-
 <template>
-  <component :is="tag" :v-bind="$attrs">
-    {{ titleVariant == 'split' ? splitSpaces(siteTitle) : siteTitle }}
-  </component>
+  <span v-for="(word, index) in useSite().titleWords" :key="index" class="site-word">
+    {{ word }}
+  </span>
 </template>

package/layers/ui/app/components/Typography/HeadlineScreen.vue

@@ -44,7 +44,14 @@ const props = withDefaults(
 )
 
 const tag = computed(() => `h${props.level}` as const)
-const sizeClass = computed(() => `text-${props.size}`)
+
+const sizeMap: Record<string, string> = {
+  screen: 'text-screen',
+  'screen-xl': 'text-screen-xl',
+  'screen-xxl': 'text-screen-xxl',
+  'screen-xxxl': 'text-screen-xxxl',
+}
+const sizeClass = computed(() => sizeMap[props.size] ?? 'text-screen-xxl')
 
 const { classes } = useTypography({
   weight: props.weight,

package/layers/ui/app/composables/useSite.ts

@@ -0,0 +1,13 @@
+import { splitSpaces } from '../utils/regex'
+
+export function useSite() {
+  const config = useAppConfig().site
+
+  return {
+    title: config.title as string,
+    titleWords: splitSpaces(config.title as string) as string[],
+    subtitle: config.subtitle as string,
+    subtitleWords: splitSpaces(config.subtitle as string) as string[],
+    description: config.description as string,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.12",
+  "version": "1.6.16",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",