@brumaombra/ui-vintage 0.9.4 → 0.9.6

package/AGENTS.md

@@ -33,7 +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 your own link buttons, use `<Button as-child>` around a `NuxtLinkLocale`.
+- 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`.

package/package.json

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

package/src/components/blog/BlogIndexPage.vue

@@ -75,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"

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

@@ -113,8 +113,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 							<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')">
 									<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]')" />
+										<!-- 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 sizes its direct svg children itself, down to size-3.5 in compact mode) -->
+										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('size-4! 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_-_16px)/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')">

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

@@ -71,7 +71,8 @@ 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)">

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/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>;
 }