@nuxtseo/design-system 0.1.4 → 0.1.5

package/README.md

@@ -96,7 +96,7 @@ export default {
 }
 ```
 
-**Type.** Set `--font-sans`, `--font-display`, `--font-title`, and `--font-mono` in your stylesheet, and register the faces with `fonts.families`. `--font-title` carries page titles (`.text-title` and the `font-title` utility). Its default is the display family. The layer ships no font files and registers no faces.
+**Type.** Set `--font-sans`, `--font-display`, `--font-title`, and `--font-mono` in your stylesheet, and register the faces with `fonts.families`. `--font-title` carries page titles (`.text-title`, its `sm:text-title` variant, and the `font-title` utility). Its default is the display family. The layer ships no font files and registers no faces.
 
 **Type scale.** Set these properties at `:root` to resize or recase the dense tiers. Unset, each keeps the value in the second column.
 

package/app/components/element/UiWizardShell.vue

@@ -10,11 +10,16 @@ import { UiFocusedSurface, UiLogoPro } from '#components'
 // `min-h-screen`; an embedded preview passes a fixed height.
 const {
   exitLabel = 'Dashboard',
+  exitTo,
+  exitExternal = false,
   showExit = true,
   as = 'main',
   wide = false,
 } = defineProps<{
   exitLabel?: string
+  /** Where the exit link goes. Unset, the exit is a button that emits `exit`. */
+  exitTo?: string
+  exitExternal?: boolean
   showExit?: boolean
   as?: string
   wide?: boolean
@@ -23,7 +28,7 @@ const emit = defineEmits<{ exit: [] }>()
 </script>
 
 <template>
-  <UiFocusedSurface :as="as" align="top" :exit-label="exitLabel" :show-exit="showExit" @exit="emit('exit')">
+  <UiFocusedSurface :as="as" align="top" :exit-label="exitLabel" :exit-to="exitTo" :exit-external="exitExternal" :show-exit="showExit" @exit="emit('exit')">
     <div class="w-full mx-auto mt-10 md:mt-16 relative z-10" :class="wide ? 'max-w-6xl' : 'max-w-2xl'">
       <div class="flex items-center gap-1 mb-8 [&>span]:!ml-0">
         <slot name="logo">

package/css/global.css

@@ -1404,6 +1404,22 @@ textarea {
   text-wrap-style: balance;
 }
 
+/* `.text-title` is a plain class, so Tailwind builds no variant of it. A
+   crumb that is body size on a phone and title size beside the page title
+   needs `sm:text-title`, so this ships that one variant at Tailwind's `sm`
+   breakpoint. */
+@media (width >= 40rem) {
+  .sm\:text-title {
+    font-family: var(--font-title);
+    font-size: var(--size-title);
+    font-weight: var(--wght-title);
+    font-stretch: var(--wdth-heading);
+    letter-spacing: var(--tracking-tight);
+    line-height: 1.15;
+    text-wrap-style: balance;
+  }
+}
+
 /* Section heading — groups of cards / a titled region within a page. */
 .text-heading {
   font-family: var(--font-display);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxtseo/design-system",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Nuxt SEO design system layer: UI primitives, tokens, motion, and chart helpers. Extend it from a Nuxt app.",
   "license": "MIT",
   "homepage": "https://nuxtseo.com",