@brumaombra/ui-vintage 0.9.6 → 0.9.8

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">

package/src/components/ui/input/Input.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { useVModel } from '@vueuse/core';
+import { computed, ref, useSlots, type HTMLAttributes } from 'vue';
+import { useElementSize, useVModel } from '@vueuse/core';
 import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';
 
+defineOptions({
+	inheritAttrs: false
+});
+
 // Props
 const props = defineProps<{
 	defaultValue?: string | number;
 	modelValue?: string | number;
+	size?: 'default' | 'sm';
 	class?: HTMLAttributes['class'];
 }>();
 
@@ -23,14 +28,42 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 // Let a surrounding Field label point to this control
 const fieldControlId = useFieldControlId();
+
+// Field look, shared by the plain input and the one with a suffix
+const inputClasses = computed(() => cn(
+	'uv-field w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+	props.size === 'sm' ? 'h-10 py-2' : 'h-13',
+	'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 placeholder:transition-opacity focus-visible:placeholder:opacity-40',
+	'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',
+	'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
+	props.class
+));
+
+// Optional prefix (like a search icon) and suffix (like a unit) inside the field: the text never runs under them
+const slots = useSlots();
+const prefixRef = ref<HTMLElement | null>(null);
+const suffixRef = ref<HTMLElement | null>(null);
+const { width: prefixWidth } = useElementSize(prefixRef);
+const { width: suffixWidth } = useElementSize(suffixRef);
+const affixPadding = computed(() => ({
+	...(slots.prefix && prefixWidth.value ? { paddingLeft: `calc(${prefixWidth.value}px + 1.5rem)` } : {}),
+	...(slots.suffix && suffixWidth.value ? { paddingRight: `calc(${suffixWidth.value}px + 1.75rem)` } : {})
+}));
 </script>
 
 <template>
-	<input :id="fieldControlId" v-model="modelValue" data-slot="input" :class="cn(
-		'uv-field h-13 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
-		'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 placeholder:transition-opacity focus-visible:placeholder:opacity-40',
-		'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',
-		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
-		props.class
-	)" />
+	<div v-if="$slots.prefix || $slots.suffix" data-slot="input-group" class="relative w-full min-w-0">
+		<!-- Prefix -->
+		<span v-if="$slots.prefix" ref="prefixRef" data-slot="input-prefix" class="pointer-events-none absolute inset-y-0 left-3.5 flex items-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4">
+			<slot name="prefix" />
+		</span>
+
+		<input :id="fieldControlId" v-model="modelValue" data-slot="input" v-bind="$attrs" :style="affixPadding" :class="inputClasses" />
+
+		<!-- Suffix -->
+		<span v-if="$slots.suffix" ref="suffixRef" data-slot="input-suffix" class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-xs font-semibold text-muted-foreground sm:text-sm">
+			<slot name="suffix" />
+		</span>
+	</div>
+	<input v-else :id="fieldControlId" v-model="modelValue" data-slot="input" v-bind="$attrs" :class="inputClasses" />
 </template>

package/src/components/ui/kbd/Kbd.vue

@@ -2,17 +2,21 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (lg is a big standalone key, for example to show a shortcut in a hint)
+const props = withDefaults(defineProps<{
 	class?: HTMLAttributes['class'];
 	pressed?: boolean;
-}>();
+	size?: 'default' | 'lg';
+}>(), {
+	size: 'default'
+});
 </script>
 
 <template>
 	<kbd data-slot="kbd" :data-pressed="props.pressed ? '' : undefined" :class="cn(
-		'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
+		'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
 		'data-pressed:translate-y-px data-pressed:border-b data-pressed:shadow-none',
+		props.size === 'lg' && 'h-10 min-w-10 px-3 text-sm',
 		props.class
 	)
 		">

package/src/components/ui/number-field/NumberField.vue

@@ -92,7 +92,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 	)" @update:model-value="animateChange">
 		<!-- Decrement button -->
 		<NumberFieldDecrement data-slot="number-field-decrement" :aria-label="resolvedDecrementLabel" :class="cn(
-			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
 			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
@@ -119,7 +119,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 
 		<!-- Increment button -->
 		<NumberFieldIncrement data-slot="number-field-increment" :aria-label="resolvedIncrementLabel" :class="cn(
-			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
 			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'

package/src/components/ui/progress/Progress.vue

@@ -6,16 +6,28 @@ import { reactiveOmit } from '@vueuse/core';
 import { ProgressIndicator, ProgressRoot } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
+type ProgressColor = 'primary' | 'green' | 'red' | 'yellow';
+
 // Props
 const props = withDefaults(defineProps<ProgressRootProps & {
 	indeterminate?: boolean;
+	color?: ProgressColor;
 	class?: HTMLAttributes['class'];
 }>(), {
 	modelValue: 0,
-	indeterminate: false
+	indeterminate: false,
+	color: 'primary'
 });
 
-const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
+const delegatedProps = reactiveOmit(props, 'class', 'indeterminate', 'color');
+
+// Fill color of the bar
+const colorClasses: Record<ProgressColor, string> = {
+	primary: 'bg-primary',
+	green: 'bg-success',
+	red: 'bg-destructive',
+	yellow: 'bg-warning'
+};
 
 // Resolve the fill percentage against the configured max
 const percentage = computed(() => {
@@ -27,13 +39,13 @@ const percentage = computed(() => {
 
 <template>
 	<ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
-		'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
+		'relative h-2 w-full overflow-hidden rounded bg-muted',
 		props.class
 	)">
 		<!-- Indeterminate bar -->
-		<div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
+		<div v-if="props.indeterminate" data-slot="progress-indicator" :class="cn('absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded', colorClasses[props.color])" />
 
 		<!-- Determinate bar -->
-		<ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
+		<ProgressIndicator v-else data-slot="progress-indicator" :class="cn('relative h-full w-full flex-1 overflow-hidden rounded transition-transform duration-700 ease-out-expo', colorClasses[props.color])" :style="`transform: translateX(-${100 - percentage}%);`" />
 	</ProgressRoot>
 </template>

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

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
 	<SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
 		props.class
 	)
 		">

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 -->

package/src/components/ui/skeleton/Skeleton.vue

@@ -3,14 +3,18 @@ import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
 // Props
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+	circle?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	circle: false
+});
 </script>
 
 <template>
 	<div data-slot="skeleton" :class="cn(
-		'relative overflow-hidden rounded border border-border bg-surface',
+		'relative overflow-hidden border border-border bg-surface',
+		props.circle ? 'rounded-full' : 'rounded',
 		'after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)]',
 		props.class
 	)" />

package/src/components/ui/switch/Switch.vue

@@ -29,7 +29,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 		props.class
 	)">
 		<SwitchThumb data-slot="switch-thumb" :class="cn(
-			'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-[0.2rem] bg-muted-foreground ring-0',
+			'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded bg-muted-foreground ring-0',
 			'[transition:translate_380ms_var(--ease-spring),width_220ms_var(--ease-spring),background-color_200ms]',
 			'group-active/switch:w-5 data-[state=checked]:translate-x-6 data-[state=checked]:bg-primary group-active/switch:data-[state=checked]:translate-x-5'
 		)">

package/src/components/ui/table/TableHeader.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-	<thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)">
+	<thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border [&_tr]:hover:bg-transparent', props.class)">
 		<slot />
 	</thead>
 </template>

package/src/components/ui/table/TableRow.vue

@@ -2,15 +2,22 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (static rows don't highlight on hover, interactive rows show a pointer for clickable rows; data-state="selected" highlights a row with a soft primary tint)
+const props = withDefaults(defineProps<{
+	static?: boolean;
+	interactive?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	static: false,
+	interactive: false
+});
 </script>
 
 <template>
 	<tr data-slot="table-row" :class="cn(
-		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+		'data-[state=selected]:bg-primary/5 data-[state=selected]:hover:bg-primary/10 border-b border-border transition-colors',
+		!props.static && 'hover:bg-muted/50',
+		props.interactive && 'cursor-pointer',
 		props.class
 	)
 		">

package/src/components/ui/tabs/Tabs.vue

@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2', props.class)">
+	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2 data-[orientation=vertical]:gap-4 sm:data-[orientation=vertical]:flex-row', props.class)">
 		<slot v-bind="slotProps" />
 	</TabsRoot>
 </template>

package/src/components/ui/tabs/TabsContent.vue

@@ -5,16 +5,19 @@ import { reactiveOmit } from '@vueuse/core';
 import { TabsContent } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<TabsContentProps & {
+// Props (boxed frames the panel in a bordered surface)
+const props = withDefaults(defineProps<TabsContentProps & {
+	variant?: 'plain' | 'boxed';
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	variant: 'plain'
+});
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'variant');
 </script>
 
 <template>
-	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.class)" v-bind="delegatedProps">
+	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.variant === 'boxed' && 'rounded border border-border bg-surface/50 p-4', props.class)" v-bind="delegatedProps">
 		<slot />
 	</TabsContent>
 </template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 	<TabsTrigger data-slot="tabs-trigger" :class="cn(
 		'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
 		'[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
-		'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
+		'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60 group-aria-[orientation=vertical]/tabs-list:justify-start',
 		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
 		props.class
 	)" v-bind="forwardedProps">

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
 	<TagsInputItemDelete data-slot="tags-input-item-delete" v-bind="forwardedProps" :class="cn(
-		'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+		'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 		'[transition:rotate_320ms_var(--ease-spring),scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy)]',
 		'hover:rotate-90 hover:bg-accent hover:text-foreground active:scale-[0.8] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 		'group-data-[state=active]/tag:text-primary data-disabled:pointer-events-none',

package/src/components/ui/textarea/Textarea.vue

@@ -27,7 +27,7 @@ const fieldControlId = useFieldControlId();
 
 <template>
 	<textarea :id="fieldControlId" v-model="modelValue" data-slot="textarea" :class="cn(
-		'uv-field flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+		'uv-field flex field-sizing-content min-h-30 w-full min-w-0 resize-none rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
 		'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60',
 		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
 		props.class

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -34,7 +34,7 @@ const isSingle = computed(() => {
 });
 
 // Share size and indicator mode with the items
-provide(toggleGroupContextKey, { size: toRef(props, 'size'), indicator: isSingle });
+provide(toggleGroupContextKey, { size: toRef(props, 'size'), indicator: isSingle, highlight: toRef(props, 'highlight') });
 
 // Sliding indicator geometry
 const rootRef = ref();
@@ -83,7 +83,7 @@ const indicatorStyle = computed<CSSProperties>(() => ({
 	<ToggleGroupRoot ref="rootRef" v-slot="slotProps" data-slot="toggle-group" :data-size="props.size" v-bind="forwarded" :class="cn('relative inline-flex w-fit items-center gap-1 rounded border border-border bg-card p-1 shadow-elevated-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', props.class)">
 		<!-- Sliding indicator behind the active item -->
 		<span v-if="isSingle" data-slot="toggle-group-indicator" aria-hidden="true" :style="indicatorStyle" :class="cn(
-			'pointer-events-none absolute top-0 left-0 z-0 rounded-sm border',
+			'pointer-events-none absolute top-0 left-0 z-0 rounded border', // Same radius as the tab triggers, so every switch looks alike
 			animated && '[transition:transform_380ms_var(--ease-spring),width_380ms_var(--ease-spring),height_380ms_var(--ease-spring),opacity_180ms_var(--ease-snappy)]',
 			props.highlight ? 'border-primary/40 bg-primary/10' : 'border-border-strong bg-surface shadow-elevated-sm'
 		)" />

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -17,16 +17,18 @@ const props = defineProps<ToggleGroupItemProps & {
 const delegatedProps = reactiveOmit(props, 'class', 'size');
 const forwardedProps = useForwardProps(delegatedProps);
 
-// Size and indicator mode come from the group
+// Size, indicator mode and highlight come from the group
 const context = inject(toggleGroupContextKey, null);
 const size = computed(() => props.size ?? context?.size.value ?? 'default');
 const hasIndicator = computed(() => context?.indicator.value ?? false);
+const isHighlighted = computed(() => context?.highlight.value ?? false);
 </script>
 
 <template>
 	<ToggleGroupItem v-slot="slotProps" data-slot="toggle-group-item" :data-size="size" v-bind="forwardedProps" :class="cn(
 		toggleGroupItemVariants({ size }),
 		!hasIndicator && 'hover:bg-accent data-[state=on]:bg-accent',
+		isHighlighted && 'data-[state=on]:text-primary', // The highlighted group tints the active item like the active tab
 		props.class
 	)">
 		<slot v-bind="slotProps" />

package/src/components/ui/toggle-group/index.ts

@@ -45,7 +45,7 @@ export const toggleVariants: (props?: ToggleVariants & ClassProp) => string = cv
 // Segmented control item (sits above the sliding indicator)
 export const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null } & ClassProp) => string = cva(
 	[
-		"relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
+		"relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
 		"[transition:color_150ms,background-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
 		"hover:text-foreground data-[state=on]:text-foreground active:scale-[0.96] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
 		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
@@ -66,4 +66,4 @@ export const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null }
 );
 
 // Context shared by a toggle group with its items
-export const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean> }> = Symbol('uv-toggle-group');
+export const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean>; highlight: Ref<boolean> }> = Symbol('uv-toggle-group');

package/src/i18n/de.json

@@ -79,6 +79,7 @@
 			"readMore": "Weiterlesen",
 			"goToPost": "Zum Beitrag",
 			"new": "Neu",
+			"inShort": "Kurz gesagt",
 			"tableOfContents": "Inhaltsverzeichnis",
 			"tableOfContentsDescription": "Zu einem Abschnitt dieses Artikels springen",
 			"tableOfContentsSections": "{count} Abschnitt | {count} Abschnitte",

package/src/i18n/en.json

@@ -79,6 +79,7 @@
 			"readMore": "Read more",
 			"goToPost": "Go to post",
 			"new": "New",
+			"inShort": "In short",
 			"tableOfContents": "Table of contents",
 			"tableOfContentsDescription": "Jump to a section of this article",
 			"tableOfContentsSections": "{count} section | {count} sections",

package/src/i18n/es.json

@@ -79,6 +79,7 @@
 			"readMore": "Leer mas",
 			"goToPost": "Ir al articulo",
 			"new": "Nuevo",
+			"inShort": "En resumen",
 			"tableOfContents": "Tabla de contenidos",
 			"tableOfContentsDescription": "Ir a una seccion de este articulo",
 			"tableOfContentsSections": "{count} seccion | {count} secciones",

package/src/i18n/fr.json

@@ -79,6 +79,7 @@
 			"readMore": "Lire la suite",
 			"goToPost": "Aller a l'article",
 			"new": "Nouveau",
+			"inShort": "En bref",
 			"tableOfContents": "Table des matieres",
 			"tableOfContentsDescription": "Aller a une section de cet article",
 			"tableOfContentsSections": "{count} section | {count} sections",