kmcom-nuxt-layers 6.0.0 → 6.1.0

package/layers/design-system/typography/app/components/Typography/Headline.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+  // Explicit import so Headline mounts under vitest's 'vue' project (no Nuxt auto-imports)
+  // — same exemption as ElementTw.vue (eslint.config.mjs).
+  import { computed } from 'vue'
+
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +16,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
   } from '../../types/typography'
 
   const {
@@ -20,13 +24,13 @@
     weight = 'font-bold',
     width = 'font-stretch-normal',
     slant = 'normal',
-    leading = 'leading-tight',
+    leading = undefined,
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
     color = undefined,
     size = undefined,
-    fluidSize = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6
@@ -39,43 +43,38 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const tag = computed(() => `h${level}` as const)
 
-  // Fluid by default (continuous scaling, no mobile-first breakpoint step) —
-  // only used when the caller passes neither `size` nor `fluidSize`.
-  const defaultFluidSizes: Record<number, FluidFontSize> = {
-    1: '6xl',
-    2: '5xl',
-    3: '4xl',
-    4: '3xl',
-    5: 'xl',
-    6: 'lg',
-  }
-
-  const appliedFluidSize = computed(() =>
-    size !== undefined ? undefined : (fluidSize ?? defaultFluidSizes[level])
-  )
+  // Display hierarchy by default: each level sits one scale step below the previous, starting
+  // at the fluid display step, so every level stays fluid (h1 51 → 97px, h2 40 → 77px …). Set as
+  // --step rather than a class so typography.css's h1–h6 base rules size it. Only when neither
+  // `step` nor `size` is passed; an explicit step beats size.
+  const defaultStepStyle = computed(() => {
+    if (step !== undefined || size !== undefined) return undefined
+    const below = level - 1
+    return { '--step': below ? `calc(var(--step-display) - ${below})` : 'var(--step-display)' }
+  })
 
   const { classes } = useTypography(() => ({
     weight,
     width,
     slant,
-    leading,
+    ...(leading !== undefined && { leading }),
     tracking,
     align,
     transform,
     ...(font !== undefined && { font }),
     ...(size !== undefined && { size }),
-    ...(appliedFluidSize.value !== undefined && { fluidSize: appliedFluidSize.value }),
+    ...(step !== undefined && { step }),
   }))
   const colorClass = useColor(() => color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[classes, colorClass]">
+  <component :is="tag" :class="[classes, colorClass]" :style="defaultStepStyle">
     <slot />
   </component>
 </template>

package/layers/design-system/typography/app/components/Typography/QuoteBlock.vue

@@ -3,7 +3,6 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +12,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
   } from '../../types/typography'
 
   const {
@@ -25,7 +25,7 @@
     transform = 'none',
     color = undefined,
     size = undefined,
-    fluidSize = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     weight?: FontWeight
@@ -37,7 +37,7 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const { classes } = useTypography(() => ({
@@ -50,7 +50,7 @@
     transform,
     ...(font !== undefined && { font }),
     ...(size !== undefined && { size }),
-    ...(fluidSize !== undefined && { fluidSize }),
+    ...(step !== undefined && { step }),
   }))
   const colorClass = useColor(() => color, 'text')
 </script>

package/layers/design-system/typography/app/components/Typography/RepeatText.vue

@@ -3,7 +3,7 @@
   import { useRepeatFill } from '../../composables/repeatFill'
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
-  import type { FluidFontSize, FontWeight, TypographyTag } from '../../types/typography'
+  import type { FontWeight, TypeStep, TypographyTag } from '../../types/typography'
 
   const {
     rows = 1,
@@ -12,7 +12,7 @@
     repeat = 'auto',
     separator = '',
     weight = undefined,
-    size = '4xl',
+    step = 7,
     color = undefined,
     offset = [],
     letterSpacing = undefined,
@@ -28,7 +28,7 @@
     repeat?: number | 'auto'
     separator?: string
     weight?: FontWeight | FontWeight[]
-    size?: FluidFontSize | FluidFontSize[]
+    step?: TypeStep | TypeStep[]
     color?: UiColors | UiColors[]
     offset?: string[]
     letterSpacing?: string | string[]
@@ -49,7 +49,7 @@
 
   const rowText = (i: number) => pick(text, i) ?? ''
   const rowWeight = (i: number) => pick(weight, i)
-  const rowSize = (i: number) => pick(size, i)
+  const rowStep = (i: number) => pick(step, i)
   const rowColor = (i: number) => pick(color, i)
   const rowOffset = (i: number) => offset[i] ?? '0'
   const rowLetterSpacing = (i: number) => pick(letterSpacing, i)
@@ -58,10 +58,11 @@
   const rowClasses = computed(() =>
     Array.from({ length: rows }, (_, i) => {
       const weight = rowWeight(i)
-      const fluidSize = rowSize(i)
+      const step = rowStep(i)
       return useTypography({
+        leading: 'leading-normal',
         ...(weight !== undefined && { weight }),
-        ...(fluidSize !== undefined && { fluidSize }),
+        ...(step !== undefined && { step }),
       }).classes.value
     })
   )

package/layers/design-system/typography/app/components/Typography/index.test.ts

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vite-plus/test'
+
+import ElementTw from '#layers/core/app/components/ElementTw.vue'
+
+import Typography from './index.vue'
+
+const classesOf = (props: Record<string, unknown> = {}) =>
+  mount(Typography, {
+    props,
+    slots: { default: 'Body copy' },
+    global: { components: { ElementTw } },
+  }).classes()
+
+describe('Typography size', () => {
+  it('inherits the surrounding size by default instead of pinning text-base', () => {
+    expect(classesOf()).not.toContain('text-base')
+  })
+
+  it('inherits the body line height by default', () => {
+    expect(classesOf().filter((c) => c.startsWith('leading-'))).toEqual([])
+  })
+
+  it('still applies an explicit size', () => {
+    expect(classesOf({ size: 'lg' })).toContain('text-lg')
+  })
+
+  it('applies an explicit step', () => {
+    expect(classesOf({ step: 1 })).toContain('text-step-1')
+  })
+})

package/layers/design-system/typography/app/components/Typography/index.vue

@@ -3,7 +3,6 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +12,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
     TypographyTag,
   } from '../../types/typography'
 
@@ -21,13 +21,15 @@
     weight = 'font-normal',
     width = 'font-stretch-normal',
     slant = 'normal',
-    leading = 'leading-normal',
+    leading = undefined,
     tracking = 'tracking-normal',
     align = 'left',
     transform = 'none',
     color = undefined,
-    size = 'base',
-    fluidSize = undefined,
+    // No default size: body copy inherits the body step (20 → 24px) rather than pinning
+    // Tailwind's 16px text-base inside it.
+    size = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     tag?: TypographyTag
@@ -40,20 +42,20 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const { classes } = useTypography(() => ({
     weight,
     width,
     slant,
-    leading,
+    ...(leading !== undefined && { leading }),
     tracking,
     align,
     transform,
-    size,
+    ...(size !== undefined && { size }),
     ...(font !== undefined && { font }),
-    ...(fluidSize !== undefined && { fluidSize }),
+    ...(step !== undefined && { step }),
   }))
   const colorClass = useColor(() => color, 'text')
 </script>

package/layers/design-system/typography/app/composables/typography.test.ts

@@ -0,0 +1,53 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vite-plus/test'
+
+import { TYPE_STEP_CLASSES, useTypography } from './typography'
+
+// Tailwind only emits a class that appears literally in source AND has an @utility — a map
+// entry without a utility renders unstyled, a utility without an entry is unreachable from the
+// components. Both fail silently, so pin the two lists to each other.
+const css = readFileSync(new URL('../assets/css/typography.css', import.meta.url), 'utf8')
+const utilities = [...css.matchAll(/@utility\s+(text-step-[\w-]+)/g)].map(([, name]) => name)
+const mapped = Object.values(TYPE_STEP_CLASSES)
+
+describe('TYPE_STEP_CLASSES ↔ typography.css', () => {
+  it('has an @utility for every mapped class', () => {
+    for (const cls of mapped) expect(utilities).toContain(cls)
+  })
+
+  it('maps every text-step @utility', () => {
+    for (const name of utilities) expect(mapped).toContain(name)
+  })
+
+  it('names each class after its step', () => {
+    for (const [step, cls] of Object.entries(TYPE_STEP_CLASSES)) {
+      expect(cls).toBe(`text-step-${step}`)
+    }
+  })
+})
+
+describe('useTypography step', () => {
+  const classesOf = (props: Parameters<typeof useTypography>[0]) =>
+    useTypography(props).classes.value.split(' ')
+
+  it('emits step 0 rather than treating it as unset', () => {
+    expect(classesOf({ step: 0 })).toContain('text-step-0')
+  })
+
+  it('wins over size instead of emitting two font sizes', () => {
+    const classes = classesOf({ step: 3, size: 'sm' })
+    expect(classes).toContain('text-step-3')
+    expect(classes).not.toContain('text-sm')
+  })
+
+  it('falls back to size when no step is given', () => {
+    expect(classesOf({ size: 'sm' })).toContain('text-sm')
+  })
+
+  // A leading-* class sorts after text-step-* and would override the step's line height.
+  it('emits no leading class unless one is given', () => {
+    expect(classesOf({ step: 3 }).filter((c) => c.startsWith('leading-'))).toEqual([])
+    expect(classesOf({ step: 3, leading: 'leading-tight' })).toContain('leading-tight')
+  })
+})

package/layers/design-system/typography/app/composables/typography.ts

@@ -1,7 +1,6 @@
-import { toValue, type MaybeRefOrGetter } from 'vue'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 
 import type {
-  FluidFontSize,
   FontFamily,
   FontLeading,
   FontSize,
@@ -11,6 +10,7 @@ import type {
   FontWidth,
   TextAlign,
   TextTransform,
+  TypeStep,
 } from '../types/typography'
 
 type AxisValue = string | number | undefined
@@ -36,39 +36,25 @@ function getSizeClass(size: FontSize | undefined): string {
 }
 
 // Literal map, not template-literal interpolation — Tailwind's content scanner
-// looks for complete class-name strings in source, so `text-fluid-${x}` is
-// invisible to it and silently drops the utility.
-const FLUID_SIZE_CLASSES: Record<FluidFontSize, string> = {
-  xs: 'text-fluid-xs',
-  sm: 'text-fluid-sm',
-  md: 'text-fluid-md',
-  lg: 'text-fluid-lg',
-  xl: 'text-fluid-xl',
-  '2xl': 'text-fluid-2xl',
-  '3xl': 'text-fluid-3xl',
-  '4xl': 'text-fluid-4xl',
-  '5xl': 'text-fluid-5xl',
-  '6xl': 'text-fluid-6xl',
-  '7xl': 'text-fluid-7xl',
-  '8xl': 'text-fluid-8xl',
-  '9xl': 'text-fluid-9xl',
-  'xs-cq': 'text-fluid-xs-cq',
-  'sm-cq': 'text-fluid-sm-cq',
-  'md-cq': 'text-fluid-md-cq',
-  'lg-cq': 'text-fluid-lg-cq',
-  'xl-cq': 'text-fluid-xl-cq',
-  '2xl-cq': 'text-fluid-2xl-cq',
-  '3xl-cq': 'text-fluid-3xl-cq',
-  '4xl-cq': 'text-fluid-4xl-cq',
-  '5xl-cq': 'text-fluid-5xl-cq',
-  '6xl-cq': 'text-fluid-6xl-cq',
-  '7xl-cq': 'text-fluid-7xl-cq',
-  '8xl-cq': 'text-fluid-8xl-cq',
-  '9xl-cq': 'text-fluid-9xl-cq',
-}
-
-function getFluidSizeClass(fluidSize: FluidFontSize | undefined): string {
-  return fluidSize ? FLUID_SIZE_CLASSES[fluidSize] : ''
+// looks for complete class-name strings in source, so `text-step-${x}` is
+// invisible to it and silently drops the utility. Kept in sync with
+// typography.css's @utility list by typography.test.ts.
+export const TYPE_STEP_CLASSES: Record<TypeStep, string> = {
+  sm: 'text-step-sm',
+  0: 'text-step-0',
+  1: 'text-step-1',
+  2: 'text-step-2',
+  3: 'text-step-3',
+  4: 'text-step-4',
+  5: 'text-step-5',
+  6: 'text-step-6',
+  7: 'text-step-7',
+  8: 'text-step-8',
+  9: 'text-step-9',
+  10: 'text-step-10',
+  11: 'text-step-11',
+  12: 'text-step-12',
+  display: 'text-step-display',
 }
 
 export function useTypography(
@@ -81,7 +67,7 @@ export function useTypography(
     align?: TextAlign
     transform?: TextTransform
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>
 ) {
@@ -103,20 +89,19 @@ export function useTypography(
         fallback: 'not-italic',
       }),
 
-      normalizeAxis(p.leading, {
-        prefix: 'leading',
-        fallback: 'leading-normal',
-      }),
+      // No fallback: a leading-* class sorts after text-step-* and would override the step's
+      // line height, so only emit one when asked.
+      normalizeAxis(p.leading, { prefix: 'leading' }),
 
       normalizeAxis(p.tracking, {
         prefix: 'tracking',
         fallback: 'tracking-normal',
       }),
 
-      // fluidSize is the parallel, opt-in namespace (see typography.css) — takes
+      // step is the parallel modular-scale namespace (see typography.css) — takes
       // precedence over size when both are set, rather than emitting two
-      // conflicting font-size utilities.
-      p.fluidSize ? getFluidSizeClass(p.fluidSize) : getSizeClass(p.size),
+      // conflicting font-size utilities. Checked against undefined: step 0 is valid.
+      p.step !== undefined ? TYPE_STEP_CLASSES[p.step] : getSizeClass(p.size),
 
       p.align ? `text-${p.align}` : '',
 

package/layers/design-system/typography/app/types/typography.ts

@@ -61,40 +61,13 @@ export type FontSize =
   | number
 
 /* ======================================================
-   Fluid Font Size
-   - Stepped clamp() scale, parallel to Tailwind's --text-*
-   - Companion to text-fluid-* utilities (typography.css)
+   Type Step
+   - Step on the modular scale: base × 1.26^step, parallel to Tailwind's --text-*
+   - Companion to text-step-* utilities (typography.css)
+   - 'sm' is step −1; 'display' is fluid, 5 → 7 with viewport width
    ====================================================== */
 
-export type FluidFontSize =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl'
-  | '7xl'
-  | '8xl'
-  | '9xl'
-  // Container-relative (cqi) variants — require a `container-type` ancestor
-  // (e.g. `@container`), otherwise cqi resolves against the small viewport.
-  | 'xs-cq'
-  | 'sm-cq'
-  | 'md-cq'
-  | 'lg-cq'
-  | 'xl-cq'
-  | '2xl-cq'
-  | '3xl-cq'
-  | '4xl-cq'
-  | '5xl-cq'
-  | '6xl-cq'
-  | '7xl-cq'
-  | '8xl-cq'
-  | '9xl-cq'
+export type TypeStep = 'sm' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'display'
 
 /* ======================================================
    Font Width

package/layers/structure/grid/app/assets/css/grid.css

@@ -3,15 +3,19 @@
    for the full derivation rationale. Column composition is NOT here — it comes from
    useGridTracks().toColumnsCss(), applied inline per grid-tracks instance. */
 
-@property --fs {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 1rem;
-}
+/* --fs stays unregistered on purpose: a registered <length> holding rem on :root, read by
+   :root's own line-height, is a dependency cycle in Gecko -- Firefox falls back to the initial
+   value and freezes the unit at 24px. Unregistered, it substitutes and resolves the same in
+   every engine. (An `initial-value: 1rem` @property is invalid anyway: rem is not
+   computationally independent.) */
 
 :root {
-  /* rem term keeps this WCAG 1.4.4 zoom-safe; svi never vw (viewport-bar-collapse safe) */
-  --fs: clamp(1rem, 0.95rem + 0.25svi, 1.125rem);
+  /* Shares the type scale's endpoints (typography.css --type-min/--type-max) but stays
+     continuous across 320 → 1280px, so the unit never takes the type base's 48rem jump.
+     Fallbacks keep grid valid on core alone. The slope is hand-fitted to 1rem → 1.2rem over
+     320 → 1280px — retune it if --type-min/--type-max change. rem term keeps this WCAG
+     1.4.4 zoom-safe; svi never vw (viewport-bar-collapse safe) */
+  --fs: clamp(var(--type-min, 1rem), 0.9333rem + 0.3333svi, var(--type-max, 1.2rem));
 
   /* rounded, not raw, so grid boundaries land on-pixel */
   line-height: round(nearest, var(--fs) * 1.5, 1px);

package/package.json

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