@brumaombra/ui-vintage 0.9.6 → 0.9.8

package/src/components/blog/BlogSummary.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import Idea01Icon from '@hugeicons/core-free-icons/Idea01Icon';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card } from '../ui/card';
+
+// Props (the short answer of the post, from the summary field of its frontmatter)
+const props = defineProps<{
+	summary: string;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<Card data-slot="blog-summary" role="region" padding="none" class="mb-6" :aria-label="t('uiVintage.blog.inShort')">
+		<!-- Header (same layout as the table of contents accordion) -->
+		<div class="flex items-center gap-3 px-5 py-3.5">
+			<!-- Icon tile -->
+			<span class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+				<HugeiconsIcon :icon="Idea01Icon" class="size-3.5" />
+			</span>
+
+			<!-- Label -->
+			<p class="text-sm font-semibold text-foreground">{{ t('uiVintage.blog.inShort') }}</p>
+		</div>
+
+		<!-- Summary -->
+		<p class="border-t border-border px-5 py-4 text-sm leading-7 text-foreground md:text-base">{{ props.summary }}</p>
+	</Card>
+</template>

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/blog/blogPageUtils.ts

@@ -3,6 +3,7 @@ export interface BlogPostData {
 	path?: string;
 	title?: string;
 	description?: string;
+	summary?: string;
 	image?: string;
 	categoryText?: string;
 	categorySlug?: string;

package/src/components/blog/index.ts

@@ -5,6 +5,7 @@ export { default as BlogInfoSection } from './BlogInfoSection.vue';
 export { default as BlogPostHeader } from './BlogPostHeader.vue';
 export { default as BlogHeaderSection } from './BlogHeaderSection.vue';
 export { default as BlogSectionTitle } from './BlogSectionTitle.vue';
+export { default as BlogSummary } from './BlogSummary.vue';
 export { default as BlogTagsSection } from './BlogTagsSection.vue';
 export { default as CategoriesList } from './CategoriesList.vue';
 export { default as CategoriesSection } from './CategoriesSection.vue';

package/src/components/chip/Chip.vue

@@ -37,7 +37,7 @@ const handleRemove = () => {
 		<span class="leading-none">{{ props.text }}</span>
 
 		<!-- Remove button -->
-		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
+		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
 			<HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
 		</button>
 	</div>

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

@@ -75,7 +75,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 		<!-- Sidebar -->
 		<Sidebar :collapsible="props.collapsible" :compact="props.compact">
 			<!-- Sidebar header -->
-			<SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
+			<SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center shadow-[inset_0_-1px_0_var(--sidebar-border)]">
 				<slot name="sidebar-header">
 					<SidebarMenu>
 						<SidebarMenuItem>
@@ -149,8 +149,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 			<!-- Background -->
 			<BackgroundGrid v-if="props.showBackground" />
 
-			<!-- Topbar -->
-			<header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
+			<!-- Topbar (its bottom line is an inset shadow, so the whole 64px is free and the content centers on whole pixels) -->
+			<header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 shadow-[inset_0_-1px_0_var(--sidebar-border)] bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
 				<!-- Sidebar trigger -->
 				<SidebarTrigger class="-ml-1" />
 

package/src/components/data-list/DataListText.vue

@@ -2,14 +2,17 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (long text is clamped to 3 lines, wrap shows all of it, keeping its line breaks)
+const props = withDefaults(defineProps<{
+	wrap?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	wrap: false
+});
 </script>
 
 <template>
-	<div data-slot="data-list-text" :class="cn('line-clamp-3', props.class)">
+	<div data-slot="data-list-text" :class="cn(props.wrap ? 'whitespace-pre-wrap break-words' : 'line-clamp-3', props.class)">
 		<slot />
 	</div>
 </template>

package/src/components/language-flag/flags/ChineseFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="#ee1c25" d="M0 0h640v480H0z" />
 		<path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(.55555 0 0 .55555 53.333 53.333)" />
 		<path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(-.0955 -.15916 .15916 -.0955 240.3 48)" />

package/src/components/language-flag/flags/EnglishFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="#012169" d="M0 0h640v480H0z" />
 		<path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z" />
 		<path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z" />

package/src/components/language-flag/flags/FrenchFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 3 2" aria-hidden="true" focusable="false">
 		<rect width="1" height="2" x="0" fill="#002654" />
 		<rect width="1" height="2" x="1" fill="#ffffff" />
 		<rect width="1" height="2" x="2" fill="#ce1126" />

package/src/components/language-flag/flags/GermanFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 5 3" aria-hidden="true" focusable="false">
 		<rect width="5" height="1" y="0" fill="#000000" />
 		<rect width="5" height="1" y="1" fill="#dd0000" />
 		<rect width="5" height="1" y="2" fill="#ffce00" />

package/src/components/language-flag/flags/ItalianFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<g fill-rule="evenodd" stroke-width="1pt">
 			<path fill="#fff" d="M0 0h640v480H0z" />
 			<path fill="#009246" d="M0 0h213.3v480H0z" />

package/src/components/language-flag/flags/JapaneseFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="#fff" d="M0 0h640v480H0z" />
 		<circle cx="320" cy="240" r="112" fill="#bc002d" />
 	</svg>

package/src/components/language-flag/flags/PortugueseFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="red" d="M256 0h384v480H256z" />
 		<path fill="#060" d="M0 0h256v480H0z" />
 		<g fill="#ff0" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".6">

package/src/components/language-flag/flags/RussianFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="#fff" d="M0 0h640v160H0z" />
 		<path fill="#0039a6" d="M0 160h640v160H0z" />
 		<path fill="#d52b1e" d="M0 320h640v160H0z" />

package/src/components/language-flag/flags/SpanishFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 750 500" aria-hidden="true" focusable="false">
 		<rect width="750" height="500" fill="#c60b1e" />
 		<rect y="125" width="750" height="250" fill="#ffc400" />
 	</svg>

package/src/components/language-selector/LanguageSelector.vue

@@ -139,7 +139,7 @@ const handleSelectLanguage = (language: string) => {
 		<!-- Trigger button showing the current language flag -->
 		<PopoverTrigger as-child>
 			<Button variant="secondary" size="icon" :aria-label="t('uiVintage.language.ariaLabel')">
-				<component :is="currentFlagComponent" v-if="currentFlagComponent" class="h-4 w-[1.35rem] rounded-[2px]" />
+				<component :is="currentFlagComponent" v-if="currentFlagComponent" />
 			</Button>
 		</PopoverTrigger>
 
@@ -149,7 +149,7 @@ const handleSelectLanguage = (language: string) => {
 				<CommandList :aria-label="t('uiVintage.language.title')">
 					<CommandGroup :heading="t('uiVintage.language.title')" stagger>
 						<CommandItem v-for="option in normalizedLanguages" :key="option.code" :value="option.code" @select="handleSelectLanguage(option.code)">
-							<component :is="resolveFlagComponent(option.code)" class="h-4 w-[1.35rem] rounded-[2px]" />
+							<component :is="resolveFlagComponent(option.code)" />
 							<span class="flex-1">{{ option.label }}</span>
 							<HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="props.modelValue === option.code ? 'opacity-100' : 'opacity-0'" />
 						</CommandItem>

package/src/components/section-title/SectionTitle.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
+
+// Props (a section heading over a rule that starts with a primary segment, with an optional icon tile, description and trailing action)
+const props = withDefaults(defineProps<{
+	title: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition | null;
+	headingLevel?: HeadingLevel;
+}>(), {
+	description: '',
+	icon: null,
+	headingLevel: 2
+});
+</script>
+
+<template>
+	<div data-slot="section-title" :class="['relative mb-6 flex gap-3 border-b border-border pb-4 md:mb-8', props.description ? 'flex-col sm:flex-row sm:items-end sm:justify-between' : 'items-center justify-between']">
+		<!-- Primary segment at the start of the rule -->
+		<span aria-hidden="true" class="absolute -bottom-px left-0 h-0.5 w-12 bg-primary" />
+
+		<div class="flex min-w-0 items-center gap-3">
+			<!-- Icon tile -->
+			<span v-if="props.icon" class="flex size-9 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+				<HugeiconsIcon :icon="props.icon" class="size-4.5" :stroke-width="1.6" />
+			</span>
+
+			<div class="min-w-0">
+				<!-- Title -->
+				<component :is="`h${props.headingLevel}`" class="text-xl font-semibold tracking-tight text-foreground md:text-2xl">
+					{{ props.title }}
+				</component>
+
+				<!-- Description -->
+				<p v-if="props.description" class="mt-1 max-w-2xl text-xs leading-6 text-muted-foreground md:text-sm">
+					{{ props.description }}
+				</p>
+			</div>
+		</div>
+
+		<!-- Optional trailing action (for example a "View all" link) -->
+		<div v-if="$slots.action" class="shrink-0">
+			<slot name="action" />
+		</div>
+	</div>
+</template>

package/src/components/section-title/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SectionTitle.vue';
+export { default as SectionTitle } from './SectionTitle.vue';

package/src/components/single-value-card/SingleValueCard.vue

@@ -72,7 +72,7 @@ const staticValue = computed(() => typeof props.value === 'number' && props.form
 			</span>
 
 			<!-- Trend badge -->
-			<span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-semibold tabular-nums', trendIsPositive ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive')">
+			<span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[11px] font-semibold tabular-nums', trendIsPositive ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive')">
 				<HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
 				{{ formattedTrend }}
 			</span>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -4,17 +4,17 @@ import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { AlertDialogAction } from 'reka-ui';
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from '../button';
+import { buttonVariants, type ButtonVariants } from '../button';
 
-// Props
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
+// Props (variant styles the action like a Button, for example red for a destructive confirmation)
+const props = defineProps<AlertDialogActionProps & { variant?: ButtonVariants['variant']; class?: HTMLAttributes['class'] }>();
 
-// Omit local class from delegated props
-const delegatedProps = reactiveOmit(props, 'class');
+// Omit local props from delegated props
+const delegatedProps = reactiveOmit(props, 'class', 'variant');
 </script>
 
 <template>
-	<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+	<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants({ variant: props.variant }), props.class)">
 		<slot />
 	</AlertDialogAction>
 </template>

package/src/components/ui/avatar/Avatar.vue

@@ -14,13 +14,15 @@ const props = withDefaults(defineProps<AvatarRootProps & {
 	size?: AvatarSize;
 	shape?: AvatarShape;
 	status?: AvatarStatus;
+	ring?: boolean;
 	class?: HTMLAttributes['class'];
 }>(), {
 	size: 'md',
 	shape: 'circle',
+	ring: false,
 });
 
-const delegatedProps = reactiveOmit(props, 'class', 'size', 'shape', 'status');
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'shape', 'status', 'ring');
 
 const { t } = useI18n();
 
@@ -49,7 +51,7 @@ const statusPositionClass = computed(() => props.shape === 'square' ? '-right-0.
 </script>
 
 <template>
-	<span data-slot="avatar" :data-size="props.size" :data-shape="props.shape" :data-status="props.status" :class="cn('relative inline-flex shrink-0 select-none align-middle', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], props.class)">
+	<span data-slot="avatar" :data-size="props.size" :data-shape="props.shape" :data-status="props.status" :class="cn('relative inline-flex shrink-0 select-none align-middle', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], props.ring && 'ring-2 ring-card', props.class)">
 		<!-- Avatar surface -->
 		<AvatarRoot v-bind="delegatedProps" :class="cn('relative flex size-full items-center justify-center overflow-hidden bg-surface', avatarShapeClasses[props.shape])">
 			<slot />

package/src/components/ui/avatar/AvatarFallback.vue

@@ -7,13 +7,33 @@ import { computed, inject } from 'vue';
 import { cn } from '../../../lib/utils';
 import { avatarContextKey, avatarShapeClasses, avatarTextClasses, getInitials } from '.';
 
-// Props
-const props = defineProps<AvatarFallbackProps & {
+// Props (auto tints the initials with a stable color picked from the name, primary uses the brand color, for example for the current user)
+const props = withDefaults(defineProps<AvatarFallbackProps & {
 	name?: string;
+	color?: 'neutral' | 'auto' | 'primary';
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	color: 'neutral'
+});
 
-const delegatedProps = reactiveOmit(props, 'class', 'name');
+const delegatedProps = reactiveOmit(props, 'class', 'name', 'color');
+
+// Tints built on the chart tokens, so they adapt to the theme (the text is mixed with the foreground, so it stays readable on the tint in both themes)
+const autoColorClasses = [
+	'bg-[color-mix(in_oklab,var(--chart-1)_22%,var(--card))] text-[color-mix(in_oklab,var(--chart-1)_45%,var(--foreground))]',
+	'bg-[color-mix(in_oklab,var(--chart-2)_22%,var(--card))] text-[color-mix(in_oklab,var(--chart-2)_45%,var(--foreground))]',
+	'bg-[color-mix(in_oklab,var(--chart-3)_22%,var(--card))] text-[color-mix(in_oklab,var(--chart-3)_45%,var(--foreground))]',
+	'bg-[color-mix(in_oklab,var(--chart-4)_22%,var(--card))] text-[color-mix(in_oklab,var(--chart-4)_45%,var(--foreground))]',
+	'bg-[color-mix(in_oklab,var(--chart-5)_22%,var(--card))] text-[color-mix(in_oklab,var(--chart-5)_45%,var(--foreground))]'
+];
+
+// Surface and text color (the same name always gets the same tint)
+const colorClass = computed(() => {
+	if (props.color === 'primary') return 'bg-primary text-primary-foreground';
+	if (props.color !== 'auto') return 'bg-surface text-muted-foreground';
+	const hash = [...(props.name ?? '')].reduce((total, character) => total + character.charCodeAt(0), 0);
+	return autoColorClasses[hash % autoColorClasses.length];
+});
 
 // Size and shape come from the parent avatar
 const context = inject(avatarContextKey, null);
@@ -26,7 +46,7 @@ const initials = computed(() => getInitials(props.name));
 
 <template>
 	<!-- With a name the initials act as an image of the person, so screen readers announce the name instead of the letters -->
-	<AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :role="props.name ? 'img' : undefined" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-semibold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
+	<AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :role="props.name ? 'img' : undefined" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center font-semibold uppercase', colorClass, textClass, shapeClass, props.class)">
 		<slot>{{ initials }}</slot>
 	</AvatarFallback>
 </template>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 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';
 
@@ -9,20 +10,36 @@ import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 const props = withDefaults(defineProps<{
 	text: string;
 	icon?: HugeiconsIconDefinition | null;
-	color?: ToneColor;
+	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', getSurfaceToneClasses(props.color), 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/breadcrumb/BreadcrumbEllipsis.vue

@@ -14,7 +14,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-	<span data-slot="breadcrumb-ellipsis" role="presentation" :class="cn('flex size-6 items-center justify-center rounded-sm transition-colors duration-150 hover:bg-accent hover:text-primary', props.class)">
+	<span data-slot="breadcrumb-ellipsis" role="presentation" :class="cn('flex size-6 items-center justify-center rounded transition-colors duration-150 hover:bg-accent hover:text-primary', props.class)">
 		<!-- Default slot content -->
 		<slot>
 			<HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
 </script>
 
 <template>
-	<Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('rounded-sm bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground outline-none transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/45', props.class)">
+	<Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('rounded bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground outline-none transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/45', props.class)">
 		<slot />
 	</Primitive>
 </template>

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

@@ -4,6 +4,7 @@ import type { PrimitiveProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '.';
 import { Primitive } from 'reka-ui';
+import { getSurfaceToneClasses } from '../../../lib/color-tokens';
 import { cn } from '../../../lib/utils';
 import { Spinner } from '../spinner';
 import { buttonVariants } from '.';
@@ -15,11 +16,15 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 	loading?: boolean;
 	disabled?: boolean;
 	to?: string;
+	count?: number | null;
+	countMax?: number;
 	class?: HTMLAttributes['class'];
 }>(), {
 	as: 'button',
 	loading: false,
-	disabled: false
+	disabled: false,
+	count: null,
+	countMax: 99
 });
 
 // Disabled or loading: the button can't be pressed (or followed, for a navigation button)
@@ -35,6 +40,10 @@ const element = computed(() => {
 	return isAnchor.value ? 'a' : NuxtLinkLocale;
 });
 
+// Notification count shown in a badge on the corner (capped, like 99+)
+const hasCount = computed(() => !props.asChild && typeof props.count === 'number' && props.count > 0);
+const countText = computed(() => props.count && props.count > props.countMax ? `${props.countMax}+` : String(props.count));
+
 // 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 {};
@@ -43,7 +52,7 @@ const linkAttributes = computed(() => {
 </script>
 
 <template>
-	<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)">
+	<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 }), hasCount && 'overflow-visible', props.class)">
 		<!-- As-child buttons delegate rendering to the slotted element -->
 		<slot v-if="asChild" />
 
@@ -58,6 +67,13 @@ const linkAttributes = computed(() => {
 			<span v-if="props.loading" class="absolute inset-0 flex items-center justify-center">
 				<Spinner size="sm" />
 			</span>
+
+			<!-- Notification count: a soft badge on an opaque backing (so the tint never shows the button through), its digits trimmed to the cap height so they sit centered in any font -->
+			<span v-if="hasCount" data-slot="button-count" class="pointer-events-none absolute -top-2 -right-2 z-10 flex rounded bg-background">
+				<span :class="cn('flex h-5 min-w-5 items-center justify-center rounded px-1 text-[0.6875rem] font-semibold leading-none tabular-nums', getSurfaceToneClasses('red'))">
+					<span class="[text-box:trim-both_cap_alphabetic]">{{ countText }}</span>
+				</span>
+			</span>
 		</template>
 	</Primitive>
 </template>

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

@@ -59,6 +59,10 @@ export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cv
 				'icon-lg': 'size-[52px]',
 			},
 		},
+		// Link buttons read as inline links, so they have no box padding
+		compoundVariants: [
+			{ variant: 'link', class: 'min-h-0 px-0 py-0 has-[>svg]:px-0' },
+		],
 		defaultVariants: {
 			variant: 'primary',
 			size: 'default',

package/src/components/ui/card/Card.vue

@@ -8,16 +8,36 @@ import {
 import { cn } from '../../../lib/utils';
 
 type CardColor = 'default' | ToneColor;
+type CardPadding = 'default' | 'none';
+type CardElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl';
 
 // Props
 const props = withDefaults(defineProps<{
 	color?: CardColor;
+	padding?: CardPadding;
+	elevation?: CardElevation;
 	interactive?: boolean;
 	class?: HTMLAttributes['class'];
 }>(), {
+	padding: 'default',
 	interactive: false
 });
 
+// Shadow per elevation level
+const elevationClasses: Record<CardElevation, string> = {
+	none: 'shadow-none',
+	sm: 'shadow-elevated-sm',
+	md: 'shadow-elevated-md',
+	lg: 'shadow-elevated-lg',
+	xl: 'shadow-elevated-xl'
+};
+
+// Inner spacing: the default fits CardHeader / CardContent / CardFooter, none is for cards that lay out their own sections edge to edge (clipped to the corners)
+const paddingClasses: Record<CardPadding, string> = {
+	default: 'gap-4 sm:gap-6 py-6',
+	none: 'gap-0 overflow-hidden'
+};
+
 // Get the appropriate classes
 const colorClasses = computed(() => {
 	// If color is not specified or is "default", use the default card styles
@@ -32,8 +52,12 @@ const colorClasses = computed(() => {
 
 <template>
 	<div data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
-		'relative flex flex-col gap-4 sm:gap-6 rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
+		'relative flex flex-col rounded transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
+		paddingClasses[props.padding],
+		// A CardMedia as first child bleeds to the top edge, clipped to the corners
+		'has-[>[data-slot=card-media]:first-child]:overflow-hidden has-[>[data-slot=card-media]:first-child]:pt-0',
 		colorClasses,
+		props.elevation && elevationClasses[props.elevation],
 		props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated-md active:translate-y-0 active:duration-100',
 		props.class,
 	)">

package/src/components/ui/card/CardMedia.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props (edge-to-edge media, like an image or a chart: as the first child of a Card it bleeds to the top edge)
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="card-media" :class="cn('overflow-hidden', props.class)">
+		<slot />
+	</div>
+</template>