@brumaombra/ui-vintage 0.9.7 → 0.9.8

package/COMPONENTS.md

@@ -964,7 +964,7 @@ import { RadioGroup, RadioGroupItem, RadioGroupCard } from '@brumaombra/ui-vinta
 
 ### `@brumaombra/ui-vintage/select`
 
-Styled Reka select. `SelectValueContent` and `SelectItemContent` render an icon, label, and description.
+Styled Reka select. `SelectValueContent` and `SelectItemContent` render an icon, label, and description; the default slot of `SelectItemContent` replaces the icon with any leading visual, such as a `LanguageFlag`.
 
 ```ts
 import { Select, SelectContent, SelectGroup, SelectItem, SelectItemContent, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectValueContent } from '@brumaombra/ui-vintage/select';
@@ -1019,6 +1019,8 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectItemContent, Sele
 | `textClass` | `HTMLAttributes['class']` |  |
 | `descriptionClass` | `HTMLAttributes['class']` |  |
 
+- **Slots:** `default`.
+
 #### `SelectItemText`
 
 - **Also accepts** all props of Reka `SelectItemTextProps`.
@@ -1373,6 +1375,7 @@ import { Badge } from '@brumaombra/ui-vintage/badge';
 | `color` | `ToneColor \| 'primary'` | `'gray'` |
 | `dot` | `boolean` | `false` |
 | `pulse` | `boolean` | `false` |
+| `interactive` | `boolean` | `false` |
 | `class` | `HTMLAttributes['class']` |  |
 
 ---

package/package.json

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

package/src/components/blog/BlogContentRenderer.vue

@@ -91,13 +91,6 @@ const props = defineProps<{
 	line-height: 1.85;
 }
 
-/* Lede: the opening paragraph reads a little larger */
-.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-	font-size: 17px;
-	line-height: 1.8;
-	color: var(--muted-foreground);
-}
-
 .blog-content :deep(:is(p, blockquote, li):not(.not-prose):not(.not-prose *) strong) {
 	font-weight: 700;
 	color: var(--foreground);
@@ -215,10 +208,6 @@ const props = defineProps<{
 		line-height: 1.8;
 	}
 
-	.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-		font-size: 15px;
-	}
-
 	.blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
 		margin-top: 2.25rem;
 		margin-bottom: 1rem;

package/src/components/blog/BlogFAQSection.vue

@@ -20,7 +20,7 @@ const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
 </script>
 
 <template>
-	<div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
+	<div v-if="hasValidFAQs" class="mt-10 lg:mt-12">
 		<!-- Title and description -->
 		<BlogSectionTitle :title="t('uiVintage.blog.faq.title')" :description="t('uiVintage.blog.faq.description')" />
 

package/src/components/blog/BlogIndexPage.vue

@@ -75,7 +75,7 @@ const headerStats = computed(() => [
 </script>
 
 <template>
-	<div class="space-y-14 md:space-y-18">
+	<div class="space-y-12 md:space-y-14">
 		<!-- Header section -->
 		<BlogHeaderSection :announcement="headerAnnouncement"
 			:title="props.title"

package/src/components/blog/BlogInfoSection.vue

@@ -34,12 +34,12 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 
 <template>
 	<!-- Author and date information -->
-	<Card data-aos="blur-up" class="gap-0! overflow-hidden p-0!">
+	<Card data-aos="blur-up" padding="none">
 		<!-- Author -->
-		<div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
-			<!-- Author image -->
+		<div :class="['group/author flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
+			<!-- Author image (grows softly while the author row is hovered) -->
 			<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" />
+				<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 transition-[scale] duration-500 ease-spring group-hover/author:scale-110" />
 			</NuxtLinkLocale>
 
 			<!-- Author name and bio -->

package/src/components/blog/BlogPostHeader.vue

@@ -67,7 +67,7 @@ const hasCategory = computed(() => Boolean(props.categoryText && props.categoryS
 // Whether the details row has any column to show
 const hasDetails = computed(() => Boolean(props.author || formattedDate.value || resolvedReadingMinutes.value || hasCategory.value));
 
-const badgeLinkClasses = 'rounded outline-none transition-opacity duration-150 hover:opacity-80 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+const badgeLinkClasses = 'rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45';
 
 // Shared classes for the details cells (exposed to the meta slot)
 const detailCellClasses = 'min-w-0 border-t border-l border-border py-4 pl-4 pr-4';
@@ -153,7 +153,7 @@ const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-
 					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.category') }}</dt>
 					<dd class="mt-1.5">
 						<NuxtLinkLocale :to="categoryPath" :class="['inline-flex', badgeLinkClasses]">
-							<Badge color="yellow" :text="props.categoryText" pulse />
+							<Badge color="yellow" :text="props.categoryText" pulse interactive />
 						</NuxtLinkLocale>
 					</dd>
 				</div>
@@ -166,15 +166,14 @@ const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-
 		<!-- Tags -->
 		<div v-if="props.tags.length > 0" :class="['mt-4 flex flex-wrap items-center gap-2', enter('animate-uv-fade-up [animation-delay:600ms]')]">
 			<NuxtLinkLocale v-for="tag in props.tags" :key="tag.slug" :to="tagPath(tag.slug)" :class="badgeLinkClasses">
-				<Badge :text="`#${tag.name}`" />
+				<Badge :text="`#${tag.name}`" interactive />
 			</NuxtLinkLocale>
 		</div>
 
 		<!-- Featured image (replaceable through the media slot) -->
 		<slot name="media">
-			<div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-xl', enter('animate-uv-fade-up [animation-delay:650ms]')]">
+			<div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-lg', enter('animate-uv-fade-up [animation-delay:650ms]')]">
 				<NuxtImg :src="props.image" :alt="props.title" format="avif" quality="50" :sizes="{ 480: '480px', 1536: '896px' }" loading="eager" fetchpriority="high" preload :class="['size-full object-cover', enter('animate-uv-ken-burns')]" />
-				<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
 			</div>
 		</slot>
 	</header>

package/src/components/blog/BlogPostPage.vue

@@ -88,7 +88,7 @@ const postTags = computed(() => ((props.post.tags as string[] | undefined) || []
 		</article>
 
 		<!-- Related posts -->
-		<section v-if="props.relatedPosts.length" class="mt-16 md:mt-24">
+		<section v-if="props.relatedPosts.length" class="mt-12 md:mt-16">
 			<BlogSectionTitle :title="t('uiVintage.blog.readAlso')" />
 			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 				<NuxtLinkLocale v-for="(relatedPost, index) in props.relatedPosts" :key="relatedPost.path" :to="relatedPost.path" data-aos="blur-up" :data-aos-delay="(index % 2) * 90" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
@@ -102,7 +102,7 @@ const postTags = computed(() => ((props.post.tags as string[] | undefined) || []
 		</section>
 
 		<!-- Related categories -->
-		<section v-if="props.relatedCategories.length" class="mt-16 md:mt-24">
+		<section v-if="props.relatedCategories.length" class="mt-12 md:mt-16">
 			<BlogSectionTitle :title="t('uiVintage.blog.exploreCategories')">
 				<template #action>
 					<BlogViewAllLink to="/blog/categories" :label="t('uiVintage.blog.exploreAllCategories')" />

package/src/components/blog/BlogTagsSection.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
 	<div v-if="props.tags.length" class="flex flex-wrap gap-2">
 		<!-- Tag chip -->
 		<span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
-			<NuxtLinkLocale :to="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+			<NuxtLinkLocale :to="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-[translate,border-color,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-elevated-md focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
 				<!-- Name -->
 				<span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
 					<span aria-hidden="true" class="text-primary">#</span>

package/src/components/blog/CategoryCard.vue

@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-	<Card class="group/category h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
+	<Card padding="none" interactive class="group/category h-full">
 		<!-- Image -->
 		<div class="h-32 w-full overflow-hidden border-b border-border bg-surface">
 			<NuxtImg v-if="props.image" :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/category:scale-[1.03]" />

package/src/components/blog/PostCard.vue

@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-	<Card class="group/post h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
+	<Card padding="none" interactive class="group/post h-full">
 		<!-- Featured image -->
 		<div v-if="props.image" class="aspect-video w-full overflow-hidden border-b border-border bg-surface">
 			<NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/post:scale-[1.03]" />

package/src/components/ui/badge/Badge.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { getSurfaceToneClasses, type ToneColor } from '../../../lib/color-tokens';
+import { getInteractiveSurfaceToneClasses, getSurfaceToneClasses, type ToneColor } from '../../../lib/color-tokens';
 import { cn } from '../../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
@@ -13,20 +13,33 @@ const props = withDefaults(defineProps<{
 	color?: ToneColor | 'primary';
 	dot?: boolean;
 	pulse?: boolean;
+	interactive?: boolean;
 	class?: HTMLAttributes['class'];
 }>(), {
 	icon: null,
 	color: 'gray',
 	dot: false,
-	pulse: false
+	pulse: false,
+	interactive: false
 });
 
 // Surface of the badge: a tone, or a soft primary tint (for highlights like a category)
 const colorClasses = computed(() => props.color === 'primary' ? 'border border-primary/30 bg-primary/10 text-primary' : getSurfaceToneClasses(props.color));
+
+// Hover of a badge used as a link: it lifts and tints like the cards (a gray badge takes the primary tint, a tone badge its stronger tone)
+const interactiveClasses = computed(() => {
+	if (!props.interactive) return '';
+	const tint = props.color === 'gray'
+		? 'hover:border-primary/40 hover:bg-primary/10 hover:text-primary'
+		: props.color === 'primary'
+			? 'hover:border-primary/50 hover:bg-primary/15'
+			: getInteractiveSurfaceToneClasses(props.color);
+	return `cursor-pointer transition-[translate,color,background-color,border-color] duration-200 ease-out-expo hover:-translate-y-0.5 ${tint}`;
+});
 </script>
 
 <template>
-	<span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-150', colorClasses, props.class)">
+	<span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-150', colorClasses, interactiveClasses, props.class)">
 		<!-- Status dot -->
 		<span v-if="props.dot || props.pulse" class="relative flex size-1.5 shrink-0">
 			<span v-if="props.pulse" class="absolute inset-0 animate-uv-ping-soft rounded-full bg-current" />

package/src/components/ui/select/SelectItemContent.vue

@@ -18,9 +18,11 @@ const props = defineProps<{
 
 <template>
 	<div data-slot="select-item-content" :class="cn('flex min-w-0 flex-1 items-center gap-2', props.class)">
-		<!-- Icon -->
-		<div v-if="props.icon" data-slot="select-item-content-icon" :class="cn('shrink-0 self-center', props.iconClass)">
-			<HugeiconsIcon :icon="props.icon" class="block size-3 sm:size-4" />
+		<!-- Leading visual: the default slot (for example a flag), or the icon -->
+		<div v-if="$slots.default || props.icon" data-slot="select-item-content-icon" :class="cn('shrink-0 self-center', props.iconClass)">
+			<slot>
+				<HugeiconsIcon :icon="props.icon" class="block size-3 sm:size-4" />
+			</slot>
 		</div>
 
 		<!-- Text and description -->