@brumaombra/ui-vintage 0.8.1 → 0.9.0

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

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue';
 import { ArrowDownRight01Icon, ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { AnimatedNumber } from '../ui/animated-number';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 import { cn } from '../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
@@ -33,11 +33,11 @@ const props = withDefaults(defineProps<{
 const valueClass = computed(() => {
     switch (props.valueColor) {
         case 'green':
-            return 'text-green-600 dark:text-green-400';
+            return 'text-success';
         case 'red':
-            return 'text-red-600 dark:text-red-400';
+            return 'text-destructive';
         case 'gray':
-            return 'text-gray-600 dark:text-gray-400';
+            return 'text-muted-foreground';
         default:
             return 'text-foreground';
     }
@@ -46,45 +46,43 @@ const valueClass = computed(() => {
 // Trend badge presentation
 const trendIsPositive = computed(() => (props.trend ?? 0) >= 0);
 const formattedTrend = computed(() => `${trendIsPositive.value ? '+' : ''}${props.trend}%`);
+
+// Value shown without the count-up (numbers are formatted only when formatOptions is given)
+const staticValue = computed(() => typeof props.value === 'number' && props.formatOptions ? new Intl.NumberFormat(undefined, props.formatOptions).format(props.value) : props.value);
 </script>
 
 <template>
-    <Card :class="cn('group/stat flex-row items-center p-4!', props.class)">
-        <CardContent class="w-full flex-row items-center gap-0 p-0!">
-            <!-- Icon -->
-            <Card color="gray" class="mr-4 flex size-12 shrink-0 items-center justify-center p-0! transition-[rotate,scale,border-color] duration-500 ease-bounce group-hover/stat:-rotate-6 group-hover/stat:scale-105 group-hover/stat:border-primary/50">
-                <HugeiconsIcon :icon="props.icon" class="size-5 transition-colors duration-300 group-hover/stat:text-primary" />
-            </Card>
-
-            <!-- Content -->
-            <div class="flex min-w-0 flex-1 flex-col">
-                <!-- Label -->
-                <span class="mb-1 truncate text-xs font-semibold text-muted-foreground">
-                    {{ props.label }}
-                </span>
+    <Card :class="cn('gap-0! p-4!', props.class)">
+        <!-- Label and icon -->
+        <div class="flex items-start justify-between gap-3">
+            <span class="min-w-0 text-[11px] font-semibold leading-5 tracking-wider text-muted-foreground uppercase">
+                {{ props.label }}
+            </span>
+            <span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                <HugeiconsIcon :icon="props.icon" class="size-4" />
+            </span>
+        </div>
 
-                <!-- Value and trend -->
-                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-                    <span :class="['text-2xl font-bold md:text-xl', valueClass]">
-                        <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
-                        <template v-else>{{ props.value }}</template>
-                    </span>
+        <!-- Value and trend -->
+        <div class="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1">
+            <span :class="['text-2xl font-semibold tracking-tight tabular-nums', valueClass]">
+                <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
+                <template v-else>{{ staticValue }}</template>
+            </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-bold', trendIsPositive ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-red-500/10 text-red-600 dark:text-red-400')">
-                        <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
-                        {{ formattedTrend }}
-                    </span>
-                    <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
-                        {{ props.trendLabel }}
-                    </span>
-                </div>
+            <!-- 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')">
+                <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
+                {{ formattedTrend }}
+            </span>
+            <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
+                {{ props.trendLabel }}
+            </span>
+        </div>
 
-                <!-- Description -->
-                <span v-if="props.description" class="mt-1 text-xs text-muted-foreground">
-                    {{ props.description }}
-                </span>
-            </div>
-        </CardContent>
+        <!-- Description -->
+        <span v-if="props.description" class="mt-1 text-xs leading-5 text-muted-foreground">
+            {{ props.description }}
+        </span>
     </Card>
-</template>
+</template>

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -57,6 +57,6 @@ const handleUpdateModelValue = (value?: number[]) => {
         </div>
 
         <!-- Slider control -->
-        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" @update:model-value="handleUpdateModelValue" />
+        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
     </Card>
 </template>

package/src/components/stat-strip/StatStrip.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { AnimatedNumber } from '../ui/animated-number';
+import { cn } from '../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
+
+// Props
+const props = withDefaults(defineProps<{
+    items: Array<{
+        label: string;
+        value: string | number;
+        icon?: HugeiconsIconDefinition;
+        formatOptions?: Intl.NumberFormatOptions;
+    }>;
+    animate?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    animate: true
+});
+</script>
+
+<template>
+    <!-- Compact row of stats in one bordered strip -->
+    <ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
+        <li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+            <HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
+            <span class="font-semibold text-foreground tabular-nums">
+                <AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
+                <template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
+                <template v-else>{{ item.value }}</template>
+            </span>
+            <span class="text-muted-foreground">{{ item.label }}</span>
+        </li>
+    </ul>
+</template>

package/src/components/stat-strip/index.ts

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

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -20,17 +20,17 @@ const emits = defineEmits<{
     <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
         <!-- Switch label and control -->
         <div class="flex items-center justify-between gap-4">
-            <!-- Switch label -->
-            <div class="text-sm font-semibold">
+            <!-- Switch label (names the switch and toggles it on click) -->
+            <label :for="props.id" class="cursor-pointer text-sm font-semibold">
                 {{ props.label }}
-            </div>
+            </label>
 
             <!-- Switch control -->
-            <Switch :id="props.id" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
+            <Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
         </div>
 
         <!-- Description -->
-        <div class="text-xs text-muted-foreground">
+        <div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
             {{ props.description }}
         </div>
     </Card>

package/src/components/text-link/TextLink.vue

@@ -31,7 +31,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-(--text-primary-light) hover:underline dark:text-(--text-primary-dark)" @click="handleClick">
+    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
         {{ props.text }}
     </component>
 </template>

package/src/components/theme-selector/ThemeSelector.vue

@@ -98,8 +98,8 @@ onUnmounted(() => {
         <!-- Theme options -->
         <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="currentTheme">
-                <CommandList>
-                    <CommandGroup :heading="t('uiVintage.theme.title')">
+                <CommandList :aria-label="t('uiVintage.theme.title')">
+                    <CommandGroup :heading="t('uiVintage.theme.title')" stagger>
                         <CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
                             <HugeiconsIcon :icon="option.icon" class="size-4" />
                             <span class="flex-1">{{ option.label }}</span>

package/src/components/theme-selector/theme-transition.ts

@@ -27,8 +27,14 @@ export const isDarkTheme = (theme: ThemeMode) => {
 // Read the persisted theme mode
 export const getStoredTheme = (): ThemeMode => {
     if (typeof localStorage === 'undefined') return 'auto';
-    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-    return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+
+    // Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
+    try {
+        const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+    } catch {
+        return 'auto';
+    }
 };
 
 // Apply the selected theme to the document and persist it
@@ -37,7 +43,13 @@ export const applyTheme = (theme: ThemeMode) => {
     const root = document.documentElement;
     root.classList.remove('light', 'dark');
     root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
-    localStorage.setItem(THEME_STORAGE_KEY, theme);
+
+    // Persisting is best effort: the theme still applies when storage is blocked
+    try {
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+        // Ignore storage errors
+    }
 };
 
 // Apply a theme with a circular reveal that grows from the origin point (View Transitions API)

package/src/components/ui/accordion/Accordion.vue

@@ -26,6 +26,7 @@ const emits = defineEmits<{
 }>();
 
 const contentId = useId();
+const triggerId = useId();
 const internalExpanded = ref(props.initiallyExpanded);
 
 // Support both controlled (v-model:open) and uncontrolled usage
@@ -40,34 +41,33 @@ const toggleExpanded = () => {
 </script>
 
 <template>
-    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden sm:gap-0! p-0! data-[state=open]:border-border-strong', props.class)">
+    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden p-0!', props.class)">
         <!-- Header -->
-        <button type="button" :aria-expanded="expanded" :aria-controls="contentId" class="flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left outline-none transition-colors duration-150 hover:bg-surface/70 focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
-            <div class="flex min-w-0 items-center gap-3">
-                <!-- Icon -->
-                <div v-if="props.icon" class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[border-color,color] duration-200 group-data-[state=open]/accordion:border-primary/60 md:size-10">
-                    <HugeiconsIcon :icon="props.icon" :class="cn('size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary', props.iconClass)" />
-                </div>
+        <button :id="triggerId" type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center gap-3 px-5 py-3.5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
+            <!-- Icon -->
+            <span v-if="props.icon" class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                <HugeiconsIcon :icon="props.icon" :class="cn('size-3.5', props.iconClass)" />
+            </span>
 
-                <!-- Title -->
-                <div class="text-left text-sm font-semibold text-foreground md:text-base!">
-                    {{ props.title }}
-                </div>
-            </div>
+            <!-- Title -->
+            <span class="min-w-0 flex-1 text-sm font-semibold text-foreground">
+                {{ props.title }}
+            </span>
+
+            <!-- Optional content before the toggle icon -->
+            <slot name="trailing" />
 
             <!-- Toggle icon -->
-            <div class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[rotate,border-color,background-color] duration-[420ms] ease-spring group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:border-primary/50 group-data-[state=open]/accordion:bg-primary/10">
-                <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary" />
-            </div>
+            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 shrink-0 text-muted-foreground transition-[rotate,color] duration-[420ms] ease-spring group-hover/trigger:text-primary group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:text-primary" />
         </button>
 
         <!-- Content -->
-        <div :id="contentId" role="region" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
+        <div :id="contentId" role="region" :aria-labelledby="triggerId" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
             <div class="overflow-hidden">
-                <div :class="['px-5 pb-5 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-0' : '-translate-y-2 blur-[2px]']">
+                <div :class="['border-t border-border px-5 py-4 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-none' : '-translate-y-2 blur-[2px]']">
                     <slot />
                 </div>
             </div>
         </div>
     </Card>
-</template>
+</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
+    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-semibold tracking-tight text-current', props.class)">
         <slot />
     </div>
 </template>

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

@@ -11,5 +11,5 @@ export type AlertColors = {
 };
 
 export const alertClasses: (props?: ClassProp) => string = cva(
-    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
+    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 content-start items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
 );

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

@@ -25,7 +25,8 @@ const initials = computed(() => getInitials(props.name));
 </script>
 
 <template>
-    <AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-bold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
+    <!-- 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)">
         <slot>{{ initials }}</slot>
     </AvatarFallback>
 </template>

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

@@ -38,6 +38,15 @@ function getChildren() {
     return flatten(slots.default?.() ?? []);
 }
 
+// Overlap per size, kept clear of the initials so stacked fallbacks stay readable
+const overlapClasses: Record<AvatarSize, string> = {
+    xs: '-space-x-1',
+    sm: '-space-x-1.5',
+    md: '-space-x-2',
+    lg: '-space-x-2.5',
+    xl: '-space-x-3'
+};
+
 // Whether a max limit applies
 function hasMax() {
     return props.max !== undefined && props.max >= 0;
@@ -60,15 +69,16 @@ const VNodeRenderer = (renderProps: { node: VNode }) => renderProps.node;
 
 <template>
     <div data-slot="avatar-group" :class="cn(
-        'flex items-center -space-x-2 hover:-space-x-0.5',
-        '*:ring-2 *:ring-background *:transition-[margin,translate] *:duration-380 *:ease-spring *:hover:-translate-y-0.5',
+        'flex items-center',
+        overlapClasses[props.size],
+        '*:ring-2 *:ring-background',
         props.class
     )">
         <!-- Visible avatars -->
         <VNodeRenderer v-for="(node, index) in getVisible()" :key="node.key ?? index" :node="node" />
 
         <!-- Overflow bubble -->
-        <span v-if="getOverflow() > 0" data-slot="avatar-group-overflow" :class="cn('relative inline-flex shrink-0 select-none items-center justify-center bg-surface font-bold text-muted-foreground', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], avatarTextClasses[props.size])">
+        <span v-if="getOverflow() > 0" data-slot="avatar-group-overflow" :class="cn('relative inline-flex shrink-0 select-none items-center justify-center bg-surface font-semibold text-muted-foreground', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], avatarTextClasses[props.size])">
             +{{ getOverflow() }}
         </span>
     </div>

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

@@ -14,10 +14,10 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+    <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)">
         <!-- Default slot content -->
         <slot>
-            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
+            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
         </slot>
 
         <!-- Screen reader text for accessibility -->

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('text-muted-foreground hover:underline', props.class)">
+    <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)">
         <slot />
     </Primitive>
 </template>

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

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <ol data-slot="breadcrumb-list" :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', props.class)">
+    <ol data-slot="breadcrumb-list" :class="cn('flex w-fit max-w-full flex-wrap items-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 text-xs wrap-break-word text-muted-foreground shadow-elevated-sm sm:gap-2 sm:text-sm', props.class)">
         <slot />
     </ol>
 </template>

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

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('text-foreground font-normal', props.class)">
+    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('min-w-0 font-semibold text-foreground', props.class)">
         <slot />
     </span>
 </template>

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 
 // Props
@@ -11,9 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
-        </slot>
+    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('font-semibold text-primary/50 select-none [&>svg]:size-3.5', props.class)">
+        <slot>/</slot>
     </li>
 </template>

package/src/components/ui/busy/Busy.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes } from 'vue';
-import { getUiVintageRuntimeMessage } from '../../../lib/i18n';
+import { useUiVintageMessage } from '../../../lib/i18n';
 import { cn } from '../../../lib/utils';
 import { Spinner } from '../spinner';
 
@@ -14,7 +14,8 @@ const props = withDefaults(defineProps<{
     show: false
 });
 
-const resolvedLabel = computed(() => props.label || getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'));
+const message = useUiVintageMessage();
+const resolvedLabel = computed(() => props.label || message('uiVintage.common.loading.title', 'Loading...'));
 </script>
 
 <template>
@@ -28,11 +29,8 @@ const resolvedLabel = computed(() => props.label || getUiVintageRuntimeMessage('
                 props.class,
             )">
                 <slot>
-                    <!-- Spinner with a soft glow -->
-                    <div class="relative flex items-center justify-center">
-                        <span class="absolute size-14 rounded-full bg-primary/15 blur-md" />
-                        <Spinner data-slot="busy-spinner" size="xl" class="text-primary" />
-                    </div>
+                    <!-- Spinner (decorative: the container already announces the label) -->
+                    <Spinner data-slot="busy-spinner" size="xl" aria-hidden="true" class="text-primary" />
 
                     <!-- Label -->
                     <span v-if="resolvedLabel" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">

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

@@ -12,15 +12,17 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     loading?: boolean;
+    disabled?: boolean;
     class?: HTMLAttributes['class'];
 }>(), {
     as: 'button',
-    loading: false
+    loading: false,
+    disabled: false
 });
 </script>
 
 <template>
-    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="props.loading || undefined" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="props.disabled || props.loading || undefined" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
         <!-- As-child buttons delegate rendering to the slotted element -->
         <slot v-if="asChild" />
 

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

@@ -28,9 +28,6 @@ export type ButtonVariants = {
     | undefined;
 };
 
-// Sheen sweep that crosses solid buttons on hover
-const sheenClasses = "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-transform before:duration-700 before:ease-out-expo hover:before:translate-x-full";
-
 export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cva(
     [
         "relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
@@ -43,7 +40,7 @@ export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cv
     {
         variants: {
             variant: {
-                primary: `${getButtonVariantClasses('primary')} ${sheenClasses}`,
+                primary: getButtonVariantClasses('primary'),
                 secondary: getButtonVariantClasses('secondary'),
                 ghost: getButtonVariantClasses('ghost'),
                 link: getButtonVariantClasses('link'),

package/src/components/ui/calendar/Calendar.vue

@@ -6,7 +6,8 @@ import { getLocalTimeZone, today } from '@internationalized/date';
 import { createReusableTemplate, reactiveOmit, useVModel } from '@vueuse/core';
 import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui';
 import { createYear, createYearRange, toDate } from 'reka-ui/date';
-import { computed, toRaw } from 'vue';
+import { computed, toRaw, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { NativeSelect, NativeSelectOption } from '../native-select';
 import {
@@ -43,7 +44,11 @@ const placeholder = useVModel(props, 'placeholder', emits, {
     defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
 }) as Ref<DateValue>;
 
-const formatter = useDateFormatter(props.locale ?? 'en');
+// Follow the app language unless a locale is passed explicitly
+const { t, locale: appLocale } = useI18n();
+const resolvedLocale = computed(() => props.locale || appLocale.value || 'en');
+const formatter = useDateFormatter(resolvedLocale.value);
+watch(resolvedLocale, value => formatter.setLocale(value));
 
 const yearRange = computed(() => {
     return (
@@ -81,11 +86,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <DefineMonthTemplate v-slot="{ date }">
         <div class="**:data-[slot=native-select-icon]:right-1">
-            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+            <div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
                 <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
                     {{ formatter.custom(toDate(date), { month: 'short' }) }}
                 </div>
-                <NativeSelect class="relative z-20 h-full min-h-0 w-23 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="
+                <NativeSelect :aria-label="t('uiVintage.datePicker.month')" class="relative z-20 h-full min-h-0 w-23 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="
                     (e: Event) => {
                         placeholder = placeholder.set({
                             month: Number((e?.target as any)?.value),
@@ -104,11 +109,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
     <DefineYearTemplate v-slot="{ date }">
         <div class="**:data-[slot=native-select-icon]:right-1">
-            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+            <div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
                 <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
                     {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
                 </div>
-                <NativeSelect class="relative z-20 h-full min-h-0 w-24 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="
+                <NativeSelect :aria-label="t('uiVintage.datePicker.year')" class="relative z-20 h-full min-h-0 w-24 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="
                     (e: Event) => {
                         placeholder = placeholder.set({
                             year: Number((e?.target as any)?.value),
@@ -125,7 +130,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         </div>
     </DefineYearTemplate>
 
-    <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" data-slot="calendar" :class="cn('p-3', props.class)">
+    <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" :locale="resolvedLocale" data-slot="calendar" :class="cn('p-3', props.class)">
         <CalendarHeader class="pt-0">
             <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
                 <CalendarPrevButton>

package/src/components/ui/calendar/CalendarCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
     <CalendarCell data-slot="calendar-cell" :class="cn(
-        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md',
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded',
         props.class,
     )
         " v-bind="forwardedProps">

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         // Disabled
         'data-disabled:text-muted-foreground data-disabled:opacity-50',
         // Unavailable
-        'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+        'data-unavailable:text-destructive data-unavailable:line-through',
         // Outside months
         'data-outside-view:text-muted-foreground',
         props.class,

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
     <CalendarHeadCell data-slot="calendar-head-cell" :class="cn(
-        'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]',
+        'text-muted-foreground rounded flex-1 font-normal text-[0.8rem]',
         props.class,
     )
         " v-bind="forwardedProps">

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         :class="
             cn(
                 buttonVariants({ variant: 'secondary' }),
-                'size-7 min-h-10 bg-transparent p-0 text-(--text-secondary-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:text-(--text-primary-dark)',
+                'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
                 props.class,
             )
         "