@brumaombra/ui-vintage 0.9.3 → 0.9.5

package/AGENTS.md

@@ -33,6 +33,7 @@ Only build something new when no entry point fits, and compose it from library p
 - Icons are Hugeicons definitions: import each one from its own module (`import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'`, never the `@hugeicons/core-free-icons` barrel, which makes the build parse the whole icon set) and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
 - Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
 - Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
+- Pass links as plain paths (`to: '/settings'`, `app-link-to="/"`), never `localePath()` results: the components render `NuxtLinkLocale`, which adds the language prefix and navigates client-side. External URLs work in the same props. For link buttons, give the `Button` a `to` (it renders the localized link itself), never a link wrapped around a button.
 
 ## 4. Check your work
 

package/COMPONENTS.md

@@ -31,7 +31,7 @@ Buttons, segmented controls, menus, and keyboard hints.
 
 ### `@brumaombra/ui-vintage/button`
 
-Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Use `as-child` to render a link.
+Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Give it a `to` to make it a navigation button (a localized link, external URLs work too).
 
 ```ts
 import { Button, buttonVariants } from '@brumaombra/ui-vintage/button';
@@ -44,8 +44,8 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
     Save changes
 </Button>
 
-<Button as-child>
-    <NuxtLink to="/pricing">Pricing</NuxtLink>
+<Button to="/pricing" variant="secondary">
+    Pricing
 </Button>
 ```
 
@@ -57,6 +57,7 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
 | `size` | `ButtonVariants['size']` |  |
 | `loading` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `to` | `string` |  |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `PrimitiveProps`.
@@ -255,7 +256,7 @@ import { LoadMoreButton } from '@brumaombra/ui-vintage/load-more-button';
 
 ### `@brumaombra/ui-vintage/text-link`
 
-Inline text link that renders an anchor or a router link component (pass `NuxtLink` as `link-component`).
+Inline text link for an internal path (localized with `NuxtLinkLocale`) or an external URL.
 
 ```ts
 import { TextLink } from '@brumaombra/ui-vintage/text-link';
@@ -267,7 +268,6 @@ import { TextLink } from '@brumaombra/ui-vintage/text-link';
 | --- | --- | --- |
 | `to` *(required)* | `string` |  |
 | `text` *(required)* | `string` |  |
-| `linkComponent` | `Component \| string` | `'a'` |
 
 - **Emits:** `click` (event: MouseEvent).
 
@@ -3057,14 +3057,14 @@ import { BackgroundGrid } from '@brumaombra/ui-vintage/background-grid';
 
 ### `@brumaombra/ui-vintage/dashboard-shell`
 
-Complete dashboard layout: collapsible sidebar built from `sidebar-sections`, mobile sheet, sticky topbar, and grid background. Pass `NuxtLink` as `sidebar-link-component` for client-side navigation.
+Complete dashboard layout: collapsible sidebar built from `sidebar-sections`, mobile sheet, sticky topbar, and grid background. Item `to` paths are localized and navigate client-side (`NuxtLinkLocale`).
 
 ```ts
 import { DashboardShell } from '@brumaombra/ui-vintage/dashboard-shell';
 ```
 
 ```vue
-<DashboardShell title="Projects" :sidebar-sections="sections" :sidebar-link-component="NuxtLink">
+<DashboardShell title="Projects" :sidebar-sections="sections">
     <template #topbar-trailing>
         <ThemeSelector />
     </template>
@@ -3084,8 +3084,7 @@ import { DashboardShell } from '@brumaombra/ui-vintage/dashboard-shell';
 | `description` | `string` | `''` |
 | `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` |
 | `compact` | `boolean` | `false` |
-| `sidebarSections` | `Array<{ id: string; label?: string; items: Array<{ id: string; label: string; description?: string; icon?: HugeiconsIconDefinition \| null; href?: string; to?: unknown; active?: boolean; newTab?: boolean }> }>` | `[]` |
-| `sidebarLinkComponent` | `Component \| string` | `'a'` |
+| `sidebarSections` | `Array<{ id: string; label?: string; items: Array<{ id: string; label: string; description?: string; icon?: HugeiconsIconDefinition \| null; to: string; active?: boolean; newTab?: boolean }> }>` | `[]` |
 | `showBackground` | `boolean` | `true` |
 | `insetClass` | `HTMLAttributes['class']` |  |
 | `topbarClass` | `HTMLAttributes['class']` |  |
@@ -3178,7 +3177,6 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 | `logoClass` | `HTMLAttributes['class']` |  |
 | `appDescription` | `string` | `''` |
 | `sections` | `LandingFooterSection[]` | `[]` |
-| `linkComponent` | `Component \| string` | `'a'` |
 | `authorName` | `string` | `''` |
 | `authorLink` | `string` | `''` |
 | `year` | `number` | `new Date().getFullYear()` |
@@ -3196,8 +3194,7 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 interface LandingFooterLink {
     id: string;
     label: string;
-    href?: string;
-    to?: unknown;
+    to: string;
     newTab?: boolean;
 }
 interface LandingFooterSection {
@@ -3244,7 +3241,6 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 | `logoClass` | `HTMLAttributes['class']` |  |
 | `appDescription` | `string` | `''` |
 | `sections` | `LandingFooterSection[]` | `[]` |
-| `linkComponent` | `Component \| string` | `'a'` |
 | `authorName` | `string` | `''` |
 | `authorLink` | `string` | `''` |
 | `year` | `number` | `new Date().getFullYear()` |
@@ -3262,8 +3258,7 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 interface LandingFooterLink {
     id: string;
     label: string;
-    href?: string;
-    to?: unknown;
+    to: string;
     newTab?: boolean;
 }
 interface LandingFooterSection {
@@ -3684,7 +3679,7 @@ import type { BlogPostData, BlogCategoryData, BlogTagData } from '@brumaombra/ui
 ```ts
 function slugify(value: unknown)
 function normalizeContentPath(path: string)
-function buildCategoriesFromPosts(posts: BlogPostData[], getPath: (slug: string) => string): BlogCategoryData[]
+function buildCategoriesFromPosts(posts: BlogPostData[], getPath: (slug: string) => string = slug => `/blog/categories/${slug}`): BlogCategoryData[]
 function buildTagsFromPosts(posts: BlogPostData[]): BlogTagData[]
 function sortByStableSeed(items: T[], seed: string, getKey: (item: T) => string)
 interface BlogPostData {

package/README.md

@@ -140,7 +140,7 @@ if (confirmed) {
 
 ### Build a layout
 
-Shells own the layout and responsive behavior; your app owns the navigation data and the content:
+Shells own the layout and responsive behavior; your app owns the navigation data and the content. Links take plain paths (`to: '/settings'`): the components render `NuxtLinkLocale`, which adds the current language prefix and navigates client-side, and leaves external URLs as they are:
 
 ```vue
 <script setup>
@@ -151,8 +151,8 @@ const sidebarSections = [{
     id: 'workspace',
     label: 'Workspace',
     items: [
-        { id: 'overview', label: 'Overview', href: '/', active: true },
-        { id: 'settings', label: 'Settings', href: '/settings' }
+        { id: 'overview', label: 'Overview', to: '/', active: true },
+        { id: 'settings', label: 'Settings', to: '/settings' }
     ]
 }];
 </script>
@@ -402,7 +402,7 @@ New entry points need an export in `package.json` and a description and category
 - Nuxt 4 and Vue 3.5 or newer.
 - Tailwind CSS v4 with `@tailwindcss/vite` registered in `vite.plugins`.
 - `@hugeicons/core-free-icons` 4.3 or newer and `@hugeicons/vue` 1 (the icons you pass to `:icon` props, and the ones the components render). Import each icon from its own module, as in the example above: the package barrel makes the build parse the whole icon set.
-- `vue-i18n` 9, 10, or 11 with an i18n setup, such as `@nuxtjs/i18n` (the components call `useI18n()`).
+- `@nuxtjs/i18n` 10 (the components call `useI18n()`, and every link renders `NuxtLinkLocale`).
 - `@nuxt/image` 2 for image components (the module installs it when needed).
 - `@nuxt/content` 3, only for the `blog` and `content` components.
 
@@ -411,7 +411,7 @@ New entry points need an export in `package.json` and a description and category
 - **Components can't resolve Nuxt imports:** check that the app runs Nuxt 4 and that `@brumaombra/ui-vintage` is registered in `nuxt.config`.
 - **Styles are missing:** register the module once, add `tailwindcss()` from `@tailwindcss/vite` to `vite.plugins`, and restart the dev server after changing `nuxt.config`.
 - **`NuxtImg` is unavailable:** install `@nuxt/image`, or let the module install it during setup.
-- **`useI18n` errors or missing translations:** register `@nuxtjs/i18n` (or install Vue I18n yourself); the components need an i18n composer, and the library messages are merged into it.
+- **`useI18n` errors, missing translations, or `NuxtLinkLocale` failing to resolve:** register `@nuxtjs/i18n`; the components need its composer and link component, and the library messages are merged into it.
 - **An import fails:** use the public subpath from `package.json`, such as `@brumaombra/ui-vintage/button`, never an internal `src/` path.
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brumaombra/ui-vintage",
-	"version": "0.9.3",
+	"version": "0.9.5",
 	"description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
 	"private": false,
 	"author": "Mauro Brambilla",

package/src/components/blog/BlogHeaderSection.vue

@@ -81,7 +81,7 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 <template>
 	<header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
 		<!-- Announcement (links to something new, such as the latest post) -->
-		<NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+		<NuxtLinkLocale v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
 			<span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
 				<span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
 					<span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
@@ -91,7 +91,7 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 				<span class="truncate opacity-80">{{ props.announcement.text }}</span>
 				<HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
 			</span>
-		</NuxtLink>
+		</NuxtLinkLocale>
 
 		<!-- Badges -->
 		<div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">

package/src/components/blog/BlogIndexPage.vue

@@ -13,14 +13,14 @@ import BlogViewAllLink from './BlogViewAllLink.vue';
 import CategoriesSection from './CategoriesSection.vue';
 import HeaderCarousel from './HeaderCarousel.vue';
 
-// Post shown in the carousel and in the list (paths already localized)
+// Post shown in the carousel and in the list (the links localize the paths)
 type BlogListPost = {
 	path: string;
 	title: string;
 	description?: string;
 	image?: string;
 	categoryText?: string;
-	categoryPath?: string;
+	categorySlug?: string;
 };
 
 // Props
@@ -57,6 +57,12 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// Featured posts with the link to their category page
+const carouselPosts = computed(() => props.featuredPosts.map(post => ({
+	...post,
+	categoryPath: post.categorySlug ? `/blog/categories/${post.categorySlug}` : undefined
+})));
+
 // Announce the latest post in the header
 const headerAnnouncement = computed(() => props.featuredPosts[0] ? { text: props.featuredPosts[0].title, to: props.featuredPosts[0].path } : null);
 
@@ -69,7 +75,7 @@ const headerStats = computed(() => [
 </script>
 
 <template>
-	<div class="space-y-16 md:space-y-24">
+	<div class="space-y-14 md:space-y-18">
 		<!-- Header section -->
 		<BlogHeaderSection :announcement="headerAnnouncement"
 			:title="props.title"
@@ -80,7 +86,7 @@ const headerStats = computed(() => [
 		<!-- Header carousel -->
 		<section>
 			<BlogSectionTitle :title="t('uiVintage.blog.latestPosts')" :description="t('uiVintage.blog.latestPostsDescription')" />
-			<HeaderCarousel :featured-posts="props.featuredPosts" />
+			<HeaderCarousel :featured-posts="carouselPosts" />
 		</section>
 
 		<!-- Categories section -->

package/src/components/blog/BlogInfoSection.vue

@@ -38,17 +38,17 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 		<!-- Author -->
 		<div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
 			<!-- Author image -->
-			<NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+			<NuxtLinkLocale :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
 				<NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover" />
-			</NuxtLink>
+			</NuxtLinkLocale>
 
 			<!-- Author name and bio -->
 			<div class="min-w-0 flex-1">
 				<p class="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
-				<NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link inline-flex items-center gap-1 text-sm font-semibold text-foreground outline-none transition-colors hover:text-primary focus-visible:underline md:text-base">
+				<NuxtLinkLocale :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link inline-flex items-center gap-1 text-sm font-semibold text-foreground outline-none transition-colors hover:text-primary focus-visible:underline md:text-base">
 					{{ props.author }}
 					<HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 group-hover/link:text-primary" />
-				</NuxtLink>
+				</NuxtLinkLocale>
 				<p v-if="props.authorBio" class="mt-1.5 text-xs leading-relaxed text-muted-foreground md:text-sm">
 					{{ props.authorBio }}
 				</p>

package/src/components/blog/BlogPostsPage.vue

@@ -7,7 +7,7 @@ import BlogHeaderSection from './BlogHeaderSection.vue';
 import BlogPageBreadcrumbs from './BlogPageBreadcrumbs.vue';
 import PostsList from './PostsList.vue';
 
-// Props (the posts of a category or a tag, their paths already localized)
+// Props (the posts of a category or a tag, the links localize their paths)
 const props = withDefaults(defineProps<{
 	section: 'categories' | 'tags';
 	title: string;

package/src/components/blog/CategoriesList.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4">
 		<!-- Category card -->
-		<NuxtLink v-for="(category, index) in props.categories" :key="category.path || category.slug" data-aos="blur-up" :data-aos-delay="(index % 4) * 80" :to="category.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+		<NuxtLinkLocale v-for="(category, index) in props.categories" :key="category.path || category.slug" data-aos="blur-up" :data-aos-delay="(index % 4) * 80" :to="category.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
 			<CategoryCard :name="category.name" :image="category.image" :count="category.count" />
-		</NuxtLink>
+		</NuxtLinkLocale>
 	</div>
 </template>

package/src/components/blog/HeaderCarousel.vue

@@ -112,10 +112,10 @@ onUnmounted(() => {
 		<div class="relative h-[28rem] w-full md:h-[32rem]">
 			<div v-for="(post, index) in props.featuredPosts" :id="`${slideIdPrefix}-${index}`" :key="post.path || post.title || index" role="group" aria-roledescription="slide" :aria-label="`${index + 1} / ${slideCount}`" :aria-hidden="currentSlide !== index" :inert="currentSlide !== index || undefined" :class="cn('absolute inset-0 transition-[opacity,scale] duration-700 ease-out-expo', currentSlide === index ? 'z-10 scale-100 opacity-100' : 'z-0 scale-[1.02] opacity-0')">
 				<!-- Slide image with a slow zoom -->
-				<NuxtLink :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
+				<NuxtLinkLocale :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
 					<NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="640" format="avif" quality="45" :sizes="{ 480: '480px', 1536: '1152px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" :class="cn('size-full object-cover', currentSlide === index && 'animate-uv-ken-burns')" />
 					<div v-else class="size-full bg-[radial-gradient(circle_at_20%_20%,color-mix(in_oklab,var(--primary)_45%,transparent),transparent_60%)] bg-surface" />
-				</NuxtLink>
+				</NuxtLinkLocale>
 
 				<!-- Legibility shade -->
 				<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/90 via-black/45 to-black/5" />
@@ -124,16 +124,16 @@ onUnmounted(() => {
 				<!-- Slide content (replays its entrance every time the slide becomes active) -->
 				<div class="absolute inset-x-0 bottom-0 flex flex-col gap-4 p-6 pb-20 text-white md:max-w-3xl md:p-10 md:pb-24">
 					<!-- Category badge -->
-					<NuxtLink v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" :class="cn('w-fit', currentSlide === index && 'animate-uv-fade-up')">
+					<NuxtLinkLocale v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" :class="cn('w-fit', currentSlide === index && 'animate-uv-fade-up')">
 						<Badge :text="post.categoryText" pulse class="border-white/25 bg-white/15 text-white backdrop-blur-md transition-colors hover:bg-white/25" />
-					</NuxtLink>
+					</NuxtLinkLocale>
 
 					<!-- Title -->
-					<NuxtLink :to="post.path" :class="cn('outline-none', currentSlide === index && 'animate-uv-fade-up [animation-delay:90ms]')">
+					<NuxtLinkLocale :to="post.path" :class="cn('outline-none', currentSlide === index && 'animate-uv-fade-up [animation-delay:90ms]')">
 						<h3 class="line-clamp-3 text-2xl leading-tight font-bold tracking-tight text-balance drop-shadow-sm md:text-5xl">
 							{{ post.title }}
 						</h3>
-					</NuxtLink>
+					</NuxtLinkLocale>
 
 					<!-- Description -->
 					<p v-if="post.description" :class="cn('line-clamp-2 max-w-2xl text-xs leading-relaxed text-white/80 md:text-base', currentSlide === index && 'animate-uv-fade-up [animation-delay:180ms]')">
@@ -143,10 +143,10 @@ onUnmounted(() => {
 					<!-- Read post button -->
 					<div :class="cn(currentSlide === index && 'animate-uv-fade-up [animation-delay:260ms]')">
 						<Button as-child size="lg" class="group/cta">
-							<NuxtLink :to="post.path">
+							<NuxtLinkLocale :to="post.path">
 								{{ t('uiVintage.blog.goToPost') }}
 								<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/cta:translate-x-1" />
-							</NuxtLink>
+							</NuxtLinkLocale>
 						</Button>
 					</div>
 				</div>

package/src/components/blog/PostsList.vue

@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 		<!-- Post cards rise in row by row as they scroll into view -->
-		<NuxtLink v-for="(post, index) in props.posts" :key="post.path" data-aos="blur-up" :data-aos-delay="(index % 3) * 90" :to="post.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+		<NuxtLinkLocale v-for="(post, index) in props.posts" :key="post.path" data-aos="blur-up" :data-aos-delay="(index % 3) * 90" :to="post.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
 			<PostCard class="h-full" :image="post.image" :category="post.categoryText" :title="post.title" :description="post.description" />
-		</NuxtLink>
+		</NuxtLinkLocale>
 	</div>
 </template>

package/src/components/blog/blogPageUtils.ts

@@ -38,8 +38,8 @@ export const slugify = (value: unknown) => {
 // Remove the trailing slashes of a route path, since content paths never have one ("/blog/post/" -> "/blog/post")
 export const normalizeContentPath = (path: string) => path.replace(/(.)\/+$/, '$1');
 
-// Build the unique categories of the posts, with their post count and the image of their first post
-export const buildCategoriesFromPosts = (posts: BlogPostData[], getPath: (slug: string) => string): BlogCategoryData[] => {
+// Build the unique categories of the posts, with their post count and the image of their first post (the path is the blog category page by default)
+export const buildCategoriesFromPosts = (posts: BlogPostData[], getPath: (slug: string) => string = slug => `/blog/categories/${slug}`): BlogCategoryData[] => {
 	const categoriesList = posts.map(post => post.categorySlug);
 	const uniqueCategories = categoriesList.filter((category, index, self): category is string => !!category && self.indexOf(category) === index);
 

package/src/components/dashboard-shell/DashboardShell.vue

@@ -2,7 +2,7 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { Component, HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
 import { ThemeSelector } from '../theme-selector';
@@ -11,7 +11,7 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupConte
 import { cn } from '../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-// Props
+// Props (item and home paths are localized by the links, external URLs work too)
 const props = withDefaults(defineProps<{
 	appName?: string;
 	appLogo?: string;
@@ -29,13 +29,11 @@ const props = withDefaults(defineProps<{
 			label: string;
 			description?: string;
 			icon?: HugeiconsIconDefinition | null;
-			href?: string;
-			to?: unknown;
+			to: string;
 			active?: boolean;
 			newTab?: boolean;
 		}>;
 	}>;
-	sidebarLinkComponent?: Component | string;
 	showBackground?: boolean;
 	insetClass?: HTMLAttributes['class'];
 	topbarClass?: HTMLAttributes['class'];
@@ -50,26 +48,14 @@ const props = withDefaults(defineProps<{
 	collapsible: 'offcanvas',
 	compact: false,
 	sidebarSections: () => [],
-	sidebarLinkComponent: 'a',
 	showBackground: true
 });
 
-// Resolve link props for sidebar items
+// Get the link props of a sidebar item (new tab links open in a separate, unlinked tab)
 const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>[number]['items'][number]) => {
-	const sharedProps = item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-	// If the link component is an anchor, use href. Otherwise, use to for router links.
-	if (props.sidebarLinkComponent === 'a') {
-		return {
-			href: item.href ?? '#',
-			...sharedProps
-		};
-	}
-
-	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
 	return {
-		to: item.to ?? item.href ?? '/',
-		...sharedProps
+		to: item.to,
+		...(item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})
 	};
 };
 
@@ -93,8 +79,9 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 				<slot name="sidebar-header">
 					<SidebarMenu>
 						<SidebarMenuItem>
+							<!-- Home link (the path is localized) -->
 							<SidebarMenuButton as-child size="lg">
-								<a :href="props.appLinkTo" class="inline-flex items-center gap-2">
+								<NuxtLinkLocale :to="props.appLinkTo" class="inline-flex items-center gap-2">
 									<div class="inline-flex items-center gap-2">
 										<!-- App logo -->
 										<template v-if="lightLogo">
@@ -105,7 +92,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 										<!-- App name -->
 										<span v-if="props.appName" class="text-xl font-semibold tracking-tight text-foreground">{{ props.appName }}</span>
 									</div>
-								</a>
+								</NuxtLinkLocale>
 							</SidebarMenuButton>
 						</SidebarMenuItem>
 					</SidebarMenu>
@@ -125,9 +112,9 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 						<SidebarMenu :class="cn('gap-1', props.compact && 'gap-0.5')">
 							<SidebarMenuItem v-for="item in section.items" :key="item.id">
 								<SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
-									<component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
-										<!-- Icon -->
-										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
+									<NuxtLinkLocale v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
+										<!-- Icon, centered on the capitals of the label (or of its first line, 1.25em tall): the line box alone centers it 0.08em too low, because of the space the font keeps for descenders (the size is important: the menu button shrinks its direct svg children to size-4) -->
+										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('size-5! shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-[calc((1.25em_-_20px)/2_-_0.08em)]' : 'self-center -translate-y-[0.08em]')" />
 
 										<!-- Label and optional description -->
 										<div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
@@ -139,7 +126,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 												{{ item.description }}
 											</span>
 										</div>
-									</component>
+									</NuxtLinkLocale>
 								</SidebarMenuButton>
 							</SidebarMenuItem>
 						</SidebarMenu>

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -2,16 +2,16 @@
 import { NuxtImg } from '#components';
 import FavouriteIcon from '@hugeicons/core-free-icons/FavouriteIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { computed, type Component, type HTMLAttributes } from 'vue';
+import { computed, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import type { HeadingLevel } from '../../../lib/common-types';
 
+// Footer link (the path is localized by the link, external URLs work too)
 export interface LandingFooterLink {
 	id: string;
 	label: string;
-	href?: string;
-	to?: unknown;
+	to: string;
 	newTab?: boolean;
 }
 
@@ -30,7 +30,6 @@ const props = withDefaults(defineProps<{
 	logoClass?: HTMLAttributes['class'];
 	appDescription?: string;
 	sections?: LandingFooterSection[];
-	linkComponent?: Component | string;
 	authorName?: string;
 	authorLink?: string;
 	year?: number;
@@ -45,7 +44,6 @@ const props = withDefaults(defineProps<{
 	appLinkTo: '/',
 	appDescription: '',
 	sections: () => [],
-	linkComponent: 'a',
 	authorName: '',
 	authorLink: '',
 	year: () => new Date().getFullYear(),
@@ -57,22 +55,11 @@ const { t } = useI18n();
 const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name: props.appName }) : t('uiVintage.common.home'));
 const hasSingleSection = computed(() => props.sections.length === 1);
 
-// Get link props based on the type of link component and whether the link should open in a new tab
+// Get the link props (new tab links open in a separate, unlinked tab)
 const getLinkProps = (link: LandingFooterLink) => {
-	const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-	// If the link component is an anchor, use href. Otherwise, use to for router links.
-	if (props.linkComponent === 'a') {
-		return {
-			href: link.href ?? '#',
-			...sharedProps
-		};
-	}
-
-	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
 	return {
-		to: link.to ?? link.href ?? '/',
-		...sharedProps
+		to: link.to,
+		...(link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})
 	};
 };
 
@@ -84,18 +71,19 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 
 <template>
 	<footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
-		<div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
+		<!-- Same width and padding as the landing content, so the footer lines up with the page -->
+		<div :class="cn('mx-auto max-w-6xl px-3 py-12 sm:px-6 lg:px-8', props.containerClass)">
 			<div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
 				<!-- Brand section -->
 				<div :class="cn('max-w-md flex-1', props.brandClass)">
-					<!-- App logo and name -->
-					<a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
+					<!-- App logo and name (home link, the path is localized) -->
+					<NuxtLinkLocale :to="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
 						<template v-if="lightLogo">
 							<NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
 							<NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('hidden size-8 shrink-0 object-contain dark:block', props.logoClass)" />
 						</template>
 						<span>{{ props.appName }}</span>
-					</a>
+					</NuxtLinkLocale>
 
 					<!-- App description -->
 					<p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">
@@ -114,9 +102,9 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 						<!-- Section links -->
 						<ul class="space-y-3 text-xs sm:text-sm">
 							<li v-for="link in props.sections[0]?.links" :key="link.id">
-								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+								<NuxtLinkLocale v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
 									{{ link.label }}
-								</component>
+								</NuxtLinkLocale>
 							</li>
 						</ul>
 					</div>
@@ -133,9 +121,9 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 						<!-- Section links -->
 						<ul class="space-y-3 text-xs sm:text-sm">
 							<li v-for="link in section.links" :key="link.id">
-								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+								<NuxtLinkLocale v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
 									{{ link.label }}
-								</component>
+								</NuxtLinkLocale>
 							</li>
 						</ul>
 					</div>

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -64,7 +64,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 				<!-- Left-aligned content -->
 				<div :class="cn('flex items-center', props.leftClass)">
 					<slot name="left">
-						<a v-if="lightLogo || props.appName" :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity duration-150 hover:opacity-80">
+						<!-- Home link (the path is localized) -->
+						<NuxtLinkLocale v-if="lightLogo || props.appName" :to="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity duration-150 hover:opacity-80">
 							<!-- App logo -->
 							<template v-if="lightLogo">
 								<NuxtImg :src="lightLogo" :alt="logoAlt" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
@@ -75,7 +76,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 							<span v-if="props.appName" class="hidden sm:inline! text-xl font-semibold tracking-tight text-foreground">
 								{{ props.appName }}
 							</span>
-						</a>
+						</NuxtLinkLocale>
 					</slot>
 				</div>
 

package/src/components/landing/landing-shell/LandingShell.vue

@@ -23,7 +23,8 @@ const hasStructuredSlots = computed(() => {
 </script>
 
 <template>
-	<div :class="cn('relative flex min-h-screen flex-col bg-background text-foreground', props.rootClass)">
+	<!-- Clip the horizontal overflow of decorations (glows, marquees), so the page never scrolls sideways on mobile -->
+	<div :class="cn('relative flex min-h-screen flex-col overflow-x-clip bg-background text-foreground', props.rootClass)">
 		<!-- Background grid -->
 		<BackgroundGrid v-if="props.showBackground" />
 

package/src/components/stat-strip/StatStrip.vue

@@ -23,7 +23,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<!-- Compact row of stats in one bordered strip -->
 	<ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
-		<li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+		<!-- Each stat draws a left and a top divider, shifted under the strip border where it is not needed (first column and first row), and grows to fill its row when the strip wraps -->
+		<li v-for="item in props.items" :key="item.label" class="-ml-px -mt-px flex grow items-center justify-center gap-2 border-l border-t border-border px-4 py-2.5">
 			<HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
 			<span class="font-semibold text-foreground tabular-nums">
 				<AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />

package/src/components/text-link/TextLink.vue

@@ -1,29 +1,15 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
-
-// Props
-const props = withDefaults(defineProps<{
+// Props (the path is localized by the link, external URLs work too)
+const props = defineProps<{
 	to: string;
 	text: string;
-	linkComponent?: Component | string;
-}>(), {
-	linkComponent: 'a'
-});
+}>();
 
 // Emits
 const emits = defineEmits<{
 	click: [event: MouseEvent];
 }>();
 
-// Get link props based on the type of link component
-const getLinkProps = () => {
-	if (props.linkComponent === 'a') {
-		return { href: props.to };
-	} else {
-		return { to: props.to };
-	}
-};
-
 // Handle click
 const handleClick = (event: MouseEvent) => {
 	emits('click', event);
@@ -31,7 +17,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-	<component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
+	<NuxtLinkLocale :to="props.to" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
 		{{ props.text }}
-	</component>
+	</NuxtLinkLocale>
 </template>

package/src/components/ui/button/Button.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { NuxtLinkLocale } from '#components';
 import type { PrimitiveProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
+import { computed, type HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '.';
 import { Primitive } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -13,16 +14,36 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 	size?: ButtonVariants['size'];
 	loading?: boolean;
 	disabled?: boolean;
+	to?: string;
 	class?: HTMLAttributes['class'];
 }>(), {
 	as: 'button',
 	loading: false,
 	disabled: false
 });
+
+// Disabled or loading: the button can't be pressed (or followed, for a navigation button)
+const isInactive = computed(() => props.disabled || props.loading);
+
+// Same-page anchor (like #setup): a plain link, since there is no route to localize
+const isAnchor = computed(() => !!props.to?.startsWith('#'));
+
+// Element to render: a localized link for navigation buttons (a plain anchor for same-page links, a span while inactive so it can't be followed), otherwise the as element
+const element = computed(() => {
+	if (!props.to) return props.as;
+	if (isInactive.value) return 'span';
+	return isAnchor.value ? 'a' : NuxtLinkLocale;
+});
+
+// Link attribute for the rendered element (href for a plain anchor, to for the localized link)
+const linkAttributes = computed(() => {
+	if (!props.to || isInactive.value) return {};
+	return isAnchor.value ? { href: props.to } : { to: props.to };
+});
 </script>
 
 <template>
-	<Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="props.disabled || props.loading || undefined" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+	<Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="(!props.to && isInactive) || undefined" :aria-disabled="(props.to && isInactive) || undefined" v-bind="linkAttributes" :as="element" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
 		<!-- As-child buttons delegate rendering to the slotted element -->
 		<slot v-if="asChild" />
 

package/src/components/ui/button/index.ts

@@ -32,7 +32,7 @@ export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cv
 	[
 		"relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
 		"[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,scale_380ms_var(--ease-spring)]",
-		"enabled:active:scale-[0.97] enabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100",
+		"not-disabled:not-aria-disabled:active:scale-[0.97] not-disabled:not-aria-disabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100 data-loading:aria-disabled:opacity-100",
 		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
 		"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/nuxt-components.d.ts

@@ -2,4 +2,5 @@ declare module '#components' {
 	import type { DefineComponent } from 'vue';
 
 	export const NuxtImg: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+	export const NuxtLinkLocale: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
 }