@brumaombra/ui-vintage 0.9.6 → 0.9.7

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,5 +1,6 @@
 <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 { cn } from '../../../lib/utils';
@@ -9,7 +10,7 @@ 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;
 	class?: HTMLAttributes['class'];
@@ -19,10 +20,13 @@ const props = withDefaults(defineProps<{
 	dot: false,
 	pulse: 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));
 </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, 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>

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

@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
-import type { HeadingLevel } from '../../../lib/common-types';
+import type { HeadingLevel, HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
 	class?: HTMLAttributes['class'];
 	level?: HeadingLevel;
+	icon?: HugeiconsIconDefinition | null;
 }>(), {
-	level: 3
+	level: 3,
+	icon: null
 });
 </script>
 
 <template>
 	<component :is="`h${props.level}`"
 		data-slot="card-title"
-		:class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
+		:class="cn('leading-none font-semibold text-sm sm:text-base', props.icon && 'flex items-center gap-2', props.class)">
+		<!-- Leading icon -->
+		<HugeiconsIcon v-if="props.icon" :icon="props.icon" class="size-4 shrink-0" />
 		<slot />
 	</component>
 </template>

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

@@ -5,4 +5,5 @@ export { default as CardText } from './CardText.vue';
 export { default as CardDescription } from './CardDescription.vue';
 export { default as CardFooter } from './CardFooter.vue';
 export { default as CardHeader } from './CardHeader.vue';
+export { default as CardMedia } from './CardMedia.vue';
 export { default as CardTitle } from './CardTitle.vue';

package/src/components/ui/checkbox/Checkbox.vue

@@ -23,7 +23,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 
 <template>
 	<CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :id="fieldControlId" :class="cn(
-		'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
+		'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
 		'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
 		'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 		'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',

package/src/components/ui/combobox/ComboboxSelect.vue

@@ -134,10 +134,10 @@ const handleKeydown = (event: KeyboardEvent) => {
 			<div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
 				<!-- Selected tags (multiple mode) -->
 				<TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
-					<span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
+					<span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
 						<HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
 						<span class="truncate">{{ option.label }}</span>
-						<button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
+						<button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
 							<HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
 						</button>
 					</span>

package/src/components/ui/combobox/ComboboxTrigger.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
 	<ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
-		'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
+		'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
 		props.class
 	)
 		">

package/src/components/ui/data-table/DataTable.vue

@@ -157,7 +157,7 @@ const handleRowKeydown = (row: T, event: KeyboardEvent) => {
 					<!-- Column headers -->
 					<th v-for="column in props.columns" :key="column.key" :style="column.width ? { width: column.width } : undefined" :aria-sort="props.sort?.key === column.key ? (props.sort.direction === 'asc' ? 'ascending' : 'descending') : undefined" :class="cn('h-11 px-4 text-xs font-semibold whitespace-nowrap text-muted-foreground', alignClasses[column.align ?? 'left'], column.headerClass)">
 						<slot :name="`header-${column.key}`" :column="column">
-							<button v-if="column.sortable" type="button" :class="cn('group/sort -mx-1.5 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45', props.sort?.key === column.key && 'text-foreground', justifyClasses[column.align ?? 'left'])" @click="toggleSort(column)">
+							<button v-if="column.sortable" type="button" :class="cn('group/sort -mx-1.5 inline-flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45', props.sort?.key === column.key && 'text-foreground', justifyClasses[column.align ?? 'left'])" @click="toggleSort(column)">
 								{{ column.label }}
 								<HugeiconsIcon :icon="ArrowUp01Icon" :class="cn('size-3.5 transition-[rotate,opacity,color] duration-300 ease-spring', props.sort?.key === column.key ? 'text-primary opacity-100' : 'opacity-0 group-hover/sort:opacity-50', props.sort?.key === column.key && props.sort.direction === 'desc' && 'rotate-180')" />
 							</button>

package/src/components/ui/dialog/DialogContent.vue

@@ -7,6 +7,7 @@ import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
+import { dialogSizeClasses, type DialogSize } from '.';
 import { Button } from '../button';
 import DialogOverlay from './DialogOverlay.vue';
 
@@ -18,8 +19,10 @@ defineOptions({
 const props = withDefaults(defineProps<DialogContentProps & {
 	class?: HTMLAttributes['class'];
 	showCloseButton?: boolean;
+	size?: DialogSize;
 }>(), {
-	showCloseButton: false
+	showCloseButton: false,
+	size: 'sm'
 });
 
 const { t } = useI18n();
@@ -27,7 +30,7 @@ const { t } = useI18n();
 // Emits
 const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'size');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
@@ -36,7 +39,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 	<DialogPortal>
 		<DialogOverlay />
 		<DialogContent data-slot="dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-			'uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 shadow-elevated-xl outline-none sm:max-w-106.25',
+			'uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 shadow-elevated-xl outline-none',
+			dialogSizeClasses[props.size],
 			props.class
 		)
 			">

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -7,6 +7,7 @@ import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
+import { dialogSizeClasses, type DialogSize } from '.';
 import { Button } from '../button';
 
 defineOptions({
@@ -17,8 +18,10 @@ defineOptions({
 const props = withDefaults(defineProps<DialogContentProps & {
 	class?: HTMLAttributes['class'];
 	showCloseButton?: boolean;
+	size?: DialogSize;
 }>(), {
-	showCloseButton: false
+	showCloseButton: false,
+	size: 'sm'
 });
 
 const { t } = useI18n();
@@ -26,7 +29,7 @@ const { t } = useI18n();
 // Emits
 const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'size');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
@@ -35,7 +38,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 	<DialogPortal>
 		<DialogOverlay class="uv-overlay-motion fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/40 backdrop-blur-[3px] dark:bg-black/60">
 			<DialogContent :class="cn(
-				'uv-modal-motion relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground shadow-elevated-xl outline-none sm:max-w-106.25',
+				'uv-modal-motion relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground shadow-elevated-xl outline-none',
+				dialogSizeClasses[props.size],
 				props.class
 			)
 				" v-bind="{ ...$attrs, ...forwarded }" @pointer-down-outside="

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

@@ -7,4 +7,14 @@ export { default as DialogHeader } from './DialogHeader.vue';
 export { default as DialogOverlay } from './DialogOverlay.vue';
 export { default as DialogScrollContent } from './DialogScrollContent.vue';
 export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+// Max width per dialog size (sm is the compact default)
+export const dialogSizeClasses: Record<DialogSize, string> = {
+	sm: 'sm:max-w-106.25',
+	md: 'sm:max-w-md',
+	lg: 'sm:max-w-xl',
+	xl: 'sm:max-w-2xl'
+};

package/src/components/ui/file-dropzone/FileDropzone.vue

@@ -221,7 +221,7 @@ onBeforeUnmount(() => clearTimeout(rejectTimer));
 					<div class="pb-2">
 						<!-- File row -->
 						<div data-slot="file-dropzone-item" class="flex items-center gap-3 rounded border border-border bg-card py-2 pr-2 pl-3 shadow-elevated-sm">
-							<span class="flex size-9 shrink-0 items-center justify-center rounded-sm bg-surface text-muted-foreground">
+							<span class="flex size-9 shrink-0 items-center justify-center rounded bg-surface text-muted-foreground">
 								<HugeiconsIcon :icon="getFileIcon(file)" class="size-4.5" />
 							</span>
 							<div class="flex min-w-0 flex-1 flex-col">