@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -25,6 +25,7 @@ export interface LandingFooterSection {
 const props = withDefaults(defineProps<{
     appName: string;
     appLogo?: string;
+    appLogoDark?: string;
     appLinkTo?: string;
     logoClass?: HTMLAttributes['class'];
     appDescription?: string;
@@ -49,10 +50,11 @@ const props = withDefaults(defineProps<{
     authorLink: '',
     year: () => new Date().getFullYear(),
     showBottomBar: true,
-    level: 3
+    level: 2
 });
 
 const { t } = useI18n();
+const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name: props.appName }) : t('uiVintage.common.home'));
 const hasSingleSection = computed(() => props.sections.length === 1);
 
 // Get link props based on the type of link component and whether the link should open in a new tab
@@ -73,6 +75,11 @@ const getLinkProps = (link: LandingFooterLink) => {
         ...sharedProps
     };
 };
+
+// Logo sources for each theme (either one falls back to the other)
+const lightLogo = computed(() => props.appLogo || props.appLogoDark);
+const darkLogo = computed(() => props.appLogoDark || props.appLogo);
+const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 </script>
 
 <template>
@@ -82,8 +89,11 @@ const getLinkProps = (link: LandingFooterLink) => {
                 <!-- Brand section -->
                 <div :class="cn('max-w-md flex-1', props.brandClass)">
                     <!-- App logo and name -->
-                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity hover:opacity-80">
-                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', props.logoClass)" />
+                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
+                        <template v-if="lightLogo">
+                            <NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
+                            <NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('hidden size-8 shrink-0 object-contain dark:block', props.logoClass)" />
+                        </template>
                         <span>{{ props.appName }}</span>
                     </a>
 
@@ -104,7 +114,7 @@ const getLinkProps = (link: LandingFooterLink) => {
                         <!-- Section links -->
                         <ul class="space-y-3 text-xs sm:text-sm">
                             <li v-for="link in props.sections[0]?.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
                                     {{ link.label }}
                                 </component>
                             </li>
@@ -123,7 +133,7 @@ const getLinkProps = (link: LandingFooterLink) => {
                         <!-- Section links -->
                         <ul class="space-y-3 text-xs sm:text-sm">
                             <li v-for="link in section.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
                                     {{ link.label }}
                                 </component>
                             </li>
@@ -142,7 +152,7 @@ const getLinkProps = (link: LandingFooterLink) => {
                 <!-- Author -->
                 <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
                     <span>{{ t('uiVintage.footer.madeWith') }}</span>
-                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-700 dark:text-red-400" />
+                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-destructive" />
                     <span>{{ t('uiVintage.footer.by') }}</span>
                     <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
                         {{ props.authorName }}

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import type { HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
 import BlogProgressBar from '../../blog/BlogProgressBar.vue';
 import { cn } from '../../../lib/utils';
 
@@ -8,6 +10,7 @@ import { cn } from '../../../lib/utils';
 const props = withDefaults(defineProps<{
     appName?: string;
     appLogo?: string;
+    appLogoDark?: string;
     appLinkTo?: string;
     logoClass?: HTMLAttributes['class'];
     class?: HTMLAttributes['class'];
@@ -18,65 +21,74 @@ const props = withDefaults(defineProps<{
 }>(), {
     appName: '',
     appLogo: '',
+    appLogoDark: '',
     appLinkTo: '/',
     showProgress: false
 });
-</script>
 
-<template>
-    <header :class="cn('sticky top-0 z-30 flex h-20 w-full flex-wrap border-b border-transparent bg-transparent text-card-foreground landing-navbar-sticky sm:flex-nowrap sm:justify-start', props.class)">
-        <nav :class="cn('mx-auto flex max-w-6xl basis-full items-center justify-between px-3 sm:px-6 lg:px-8', props.containerClass)">
-            <!-- Left-aligned content -->
-            <div :class="cn('flex items-center', props.leftClass)">
-                <slot name="left">
-                    <a :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity hover:opacity-80">
-                        <!-- App logo -->
-                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
+const SCROLL_THRESHOLD_PX = 12;
+const isScrolled = ref(false);
 
-                        <!-- App name -->
-                        <span v-if="props.appName" class="hidden sm:inline! text-xl font-bold tracking-tight text-foreground">
-                            {{ props.appName }}
-                        </span>
-                    </a>
-                </slot>
-            </div>
+// Float the navbar once the page leaves the top
+const handleScroll = () => {
+    isScrolled.value = window.scrollY > SCROLL_THRESHOLD_PX;
+};
 
-            <!-- Right-aligned content -->
-            <div :class="cn('flex items-center justify-end gap-2 sm:gap-3', props.rightClass)">
-                <slot name="right" />
-            </div>
-        </nav>
+// On component mounted
+onMounted(() => {
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+});
 
-        <!-- Progress bar -->
-        <div v-if="props.showProgress" class="absolute inset-x-0 bottom-0 translate-y-full">
-            <BlogProgressBar />
-        </div>
-    </header>
-</template>
+// On before component unmount
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
 
-<style scoped>
-.landing-navbar-sticky {
-    animation: landing-navbar-scroll linear both;
-    animation-range: 0 160px;
-    animation-timeline: scroll(root);
-}
+// Logo sources for each theme (either one falls back to the other)
+const lightLogo = computed(() => props.appLogo || props.appLogoDark);
+const darkLogo = computed(() => props.appLogoDark || props.appLogo);
+const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 
-@keyframes landing-navbar-scroll {
-    from {
-        background-color: transparent;
-        border-bottom-color: transparent;
-    }
+const { t } = useI18n();
 
-    to {
-        background-color: var(--card);
-        border-bottom-color: var(--border);
-    }
-}
+// Logo alt text (also names the home link when the app name is not shown)
+const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name: props.appName }) : t('uiVintage.common.home'));
+</script>
+
+<template>
+    <!-- Transparent at the top of the page, a floating card once scrolled -->
+    <header :data-scrolled="isScrolled ? '' : undefined" :class="cn('sticky top-0 z-30 w-full text-card-foreground transition-[padding] duration-500 ease-out-expo', isScrolled ? 'px-2 pt-2 sm:px-4 sm:pt-3' : 'px-0 pt-0', props.class)">
+        <div :class="cn('relative mx-auto border transition-[max-width,border-radius,background-color,border-color,box-shadow] duration-500 ease-out-expo', isScrolled ? 'max-w-5xl rounded border-border bg-card shadow-elevated-md' : 'max-w-6xl rounded-none border-transparent bg-transparent shadow-none')">
+            <nav :class="cn('flex items-center justify-between px-3 transition-[height] duration-500 ease-out-expo sm:px-6 lg:px-8', isScrolled ? 'h-16 sm:px-5 lg:px-5' : 'h-20', props.containerClass)">
+                <!-- Left-aligned content -->
+                <div :class="cn('flex items-center', props.leftClass)">
+                    <slot name="left">
+                        <a v-if="lightLogo || props.appName" :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity duration-150 hover:opacity-80">
+                            <!-- App logo -->
+                            <template v-if="lightLogo">
+                                <NuxtImg :src="lightLogo" :alt="logoAlt" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
+                                <NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" :class="cn('hidden size-11 sm:size-9 shrink-0 object-contain dark:block', props.logoClass)" />
+                            </template>
+
+                            <!-- App name -->
+                            <span v-if="props.appName" class="hidden sm:inline! text-xl font-semibold tracking-tight text-foreground">
+                                {{ props.appName }}
+                            </span>
+                        </a>
+                    </slot>
+                </div>
 
-@supports not (animation-timeline: scroll()) {
-    .landing-navbar-sticky {
-        border-bottom-color: var(--border);
-        background-color: var(--card);
-    }
-}
-</style>
+                <!-- Right-aligned content -->
+                <div :class="cn('flex items-center justify-end gap-2 sm:gap-3', props.rightClass)">
+                    <slot name="right" />
+                </div>
+            </nav>
+
+            <!-- Reading progress along the bottom edge of the floating bar (edge to edge, clipped to its rounded corners) -->
+            <div v-if="props.showProgress" :class="cn('absolute inset-x-0 bottom-0 overflow-hidden rounded-b-[inherit] transition-opacity duration-300', isScrolled ? 'opacity-100' : 'opacity-0')">
+                <BlogProgressBar />
+            </div>
+        </div>
+    </header>
+</template>

package/src/components/language-flag/index.ts

@@ -7,5 +7,6 @@ export { default as GermanFlag } from './flags/GermanFlag.vue';
 export { default as ItalianFlag } from './flags/ItalianFlag.vue';
 export { default as ChineseFlag } from './flags/ChineseFlag.vue';
 export { default as JapaneseFlag } from './flags/JapaneseFlag.vue';
+export { default as PortugueseFlag } from './flags/PortugueseFlag.vue';
 export { default as RussianFlag } from './flags/RussianFlag.vue';
 export { default as SpanishFlag } from './flags/SpanishFlag.vue';

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

@@ -31,10 +31,10 @@ const isOpen = ref(false);
 const supportedLanguages = [
     { code: 'en', label: 'English', loadFlag: () => import('../language-flag/flags/EnglishFlag.vue') },
     { code: 'it', label: 'Italiano', loadFlag: () => import('../language-flag/flags/ItalianFlag.vue') },
-    { code: 'fr', label: 'Francais', loadFlag: () => import('../language-flag/flags/FrenchFlag.vue') },
-    { code: 'es', label: 'Espanol', loadFlag: () => import('../language-flag/flags/SpanishFlag.vue') },
+    { code: 'fr', label: 'Français', loadFlag: () => import('../language-flag/flags/FrenchFlag.vue') },
+    { code: 'es', label: 'Español', loadFlag: () => import('../language-flag/flags/SpanishFlag.vue') },
     { code: 'de', label: 'Deutsch', loadFlag: () => import('../language-flag/flags/GermanFlag.vue') },
-    { code: 'pt', label: 'Portugues', loadFlag: () => import('../language-flag/flags/PortugueseFlag.vue') },
+    { code: 'pt', label: 'Português', loadFlag: () => import('../language-flag/flags/PortugueseFlag.vue') },
     { code: 'zh', label: '中文', loadFlag: () => import('../language-flag/flags/ChineseFlag.vue') },
     { code: 'ja', label: '日本語', loadFlag: () => import('../language-flag/flags/JapaneseFlag.vue') },
     { code: 'ru', label: 'Русский', loadFlag: () => import('../language-flag/flags/RussianFlag.vue') }
@@ -73,10 +73,18 @@ const languageDisplayNames = computed(() => {
     return typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale.value], { type: 'language' }) : null;
 });
 
+// Base language of a code ('it-IT' and 'it_IT' become 'it')
+const getBaseLanguageCode = (code: string) => code.toLowerCase().split(/[-_]/)[0] ?? '';
+
+// Supported flag code for a language code, including regional codes
+const getFlagCode = (code: string) => {
+    const languageCode = getBaseLanguageCode(code);
+    return isSupportedLanguageCode(languageCode) ? languageCode : null;
+};
+
 // Get the display label for a given language code
 const getLanguageLabel = (code: string) => {
-    const normalizedCode = code.toLowerCase();
-    const languageCode = normalizedCode.split('-')[0];
+    const languageCode = getBaseLanguageCode(code);
     const supportedLanguage = isSupportedLanguageCode(languageCode) ? getSupportedLanguage(languageCode) : null;
     return supportedLanguage?.label || languageDisplayNames.value?.of(languageCode) || code.toUpperCase();
 };
@@ -92,7 +100,7 @@ const normalizedLanguages = computed(() => {
 // Compute the available flag codes based on the provided language list
 const availableFlagCodes = computed<SupportedLanguageCode[]>(() => {
     // Extract supported language codes from the normalized list
-    const supportedCodes = normalizedLanguages.value.map(language => language.code).filter(isSupportedLanguageCode);
+    const supportedCodes = normalizedLanguages.value.map(language => getFlagCode(language.code)).filter((code): code is SupportedLanguageCode => code !== null);
     if (supportedCodes.length > 0) {
         return [...new Set(supportedCodes)];
     }
@@ -103,8 +111,8 @@ const availableFlagCodes = computed<SupportedLanguageCode[]>(() => {
 
 // Resolve the flag component for a specific code, falling back to the first available code
 const resolveFlagComponent = (code?: string) => {
-    const isValid = code && isSupportedLanguageCode(code) && availableFlagCodes.value.includes(code);
-    const resolvedCode = isValid ? code : availableFlagCodes.value[0];
+    const flagCode = code ? getFlagCode(code) : null;
+    const resolvedCode = flagCode && availableFlagCodes.value.includes(flagCode) ? flagCode : availableFlagCodes.value[0];
     return getAsyncFlagComponent(resolvedCode);
 };
 
@@ -138,8 +146,8 @@ const handleSelectLanguage = (language: string) => {
         <!-- Popover content with language options -->
         <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="props.modelValue">
-                <CommandList>
-                    <CommandGroup :heading="t('uiVintage.language.title')">
+                <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]" />
                             <span class="flex-1">{{ option.label }}</span>

package/src/components/load-more-button/LoadMoreButton.vue

@@ -25,24 +25,19 @@ const { t } = useI18n();
 const resolvedText = computed(() => props.text || t('uiVintage.buttons.loadMore'));
 const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.buttons.loading'));
 
-// Handle click event
+// Handle click event (ignored while loading, so the button stays focusable without firing twice)
 const handleClick = () => {
+    if (props.busy) return;
     emits('load-more');
 };
 </script>
 
 <template>
     <div class="flex justify-center">
-        <!-- Loading button -->
-        <Button v-if="props.busy" variant="secondary" class="w-full md:w-auto" :disabled="true">
-            <HugeiconsIcon :icon="RefreshIcon" class="size-4 animate-spin" />
-            {{ resolvedLoadingText }}
-        </Button>
-
-        <!-- Load more button -->
-        <Button v-else variant="secondary" class="w-full md:w-auto" @click="handleClick">
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
-            {{ resolvedText }}
+        <!-- A single button for both states keeps keyboard focus on it while the next page loads -->
+        <Button variant="secondary" :class="['w-full md:w-auto', props.busy && 'cursor-wait']" :aria-disabled="props.busy || undefined" :aria-busy="props.busy || undefined" @click="handleClick">
+            <HugeiconsIcon :icon="props.busy ? RefreshIcon : ArrowDown01Icon" :class="['size-4', props.busy && 'animate-spin']" />
+            {{ props.busy ? resolvedLoadingText : resolvedText }}
         </Button>
     </div>
-</template>
+</template>

package/src/components/loading-state-card/LoadingStateCard.vue

@@ -28,14 +28,14 @@ const resolvedDescription = computed(() => props.description || t('uiVintage.com
     <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
         <CardContent class="flex flex-col items-center justify-center p-0! text-center">
             <!-- Loading spinner icon -->
-            <div class="flex items-center justify-center text-4xl text-(--text-secondary-light) opacity-60 dark:text-(--text-secondary-dark)">
+            <div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-60">
                 <HugeiconsIcon :icon="props.icon" class="size-10 animate-spin" />
             </div>
 
             <!-- Title -->
             <component :is="`h${props.level}`"
                 v-if="resolvedTitle"
-                class="text-sm font-bold text-foreground md:text-lg">
+                class="text-sm font-semibold text-foreground md:text-base">
                 {{ resolvedTitle }}
             </component>
 

package/src/components/message-dialog/MessageDialog.vue

@@ -36,21 +36,21 @@ const defaultMessageIcon = computed(() => {
 // Resolved container classes for the message icon
 const messageIconClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return 'border-(--border) bg-surface';
-    if (current.options.type === 'error') return 'border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30';
-    if (current.options.type === 'warning') return 'border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30';
-    if (current.options.type === 'success') return 'border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30';
-    return 'border-(--border) bg-surface';
+    if (!current) return 'border-border bg-surface';
+    if (current.options.type === 'error') return 'border-destructive/25 bg-destructive/10';
+    if (current.options.type === 'warning') return 'border-warning/25 bg-warning/10';
+    if (current.options.type === 'success') return 'border-success/25 bg-success/10';
+    return 'border-border bg-surface';
 });
 
 // Resolved glyph color classes
 const messageGlyphClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return 'text-blue-600';
-    if (current.options.type === 'error') return 'text-red-600';
-    if (current.options.type === 'warning') return 'text-amber-600';
-    if (current.options.type === 'success') return 'text-green-600';
-    return 'text-blue-600';
+    if (!current) return 'text-info';
+    if (current.options.type === 'error') return 'text-destructive';
+    if (current.options.type === 'warning') return 'text-warning';
+    if (current.options.type === 'success') return 'text-success';
+    return 'text-info';
 });
 
 // Close the dialog when the shell requests it
@@ -91,7 +91,7 @@ const handleOpenChange = (open: boolean) => {
 
             <!-- Dialog actions -->
             <AlertDialogFooter class="items-end">
-                <Button variant="secondary" :disabled="messageDialogState.busy" @click="resolveActiveMessageDialog">
+                <Button variant="secondary" @click="resolveActiveMessageDialog">
                     <HugeiconsIcon v-if="currentDialog.options.closeButtonIcon" :icon="currentDialog.options.closeButtonIcon" class="size-4" />
                     {{ resolvedCloseText }}
                 </Button>

package/src/components/message-dialog/message-dialog-state.ts

@@ -24,7 +24,6 @@ interface MessageDialogRequest {
 
 interface MessageDialogState {
     current: MessageDialogRequest | null;
-    busy: boolean;
     isOpen: boolean;
 }
 
@@ -39,7 +38,6 @@ const MESSAGE_DIALOG_ROOT_ID = 'ui-vintage-message-dialog-root';
 // Shared message dialog state
 export const messageDialogState: MessageDialogState = reactive({
     current: null,
-    busy: false,
     isOpen: false
 });
 
@@ -104,7 +102,6 @@ const enqueueMessageDialog = (request: MessageDialogRequest) => {
 
 // Clear the active dialog and continue the queue
 const clearCurrentMessageDialog = () => {
-    messageDialogState.busy = false;
     messageDialogState.isOpen = false;
     messageDialogState.current = null;
     openNextMessageDialog();
@@ -141,7 +138,7 @@ export const closeMessageDialog = () => {
 // Resolve the active message dialog
 export const resolveActiveMessageDialog = () => {
     const current = messageDialogState.current;
-    if (!current || messageDialogState.busy) return;
+    if (!current || !messageDialogState.isOpen) return;
     current.resolve();
     scheduleCloseCurrentMessageDialog();
 };

package/src/components/message-toast/MessageToast.vue

@@ -30,18 +30,18 @@ const getToastIcon = (toast: MessageToastItem) => {
 
 // Resolve the tinted icon tile classes for each toast type
 const toneClasses: Record<MessageToastType, string> = {
-    success: 'border-green-200 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-400',
-    info: 'border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400',
-    warning: 'border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-400',
-    error: 'border-red-200 bg-red-50 text-red-600 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400'
+    success: 'border-success/25 bg-success/10 text-success',
+    info: 'border-info/25 bg-info/10 text-info',
+    warning: 'border-warning/25 bg-warning/10 text-warning',
+    error: 'border-destructive/25 bg-destructive/10 text-destructive'
 };
 
 // Progress bar color for each toast type
 const progressClasses: Record<MessageToastType, string> = {
-    success: 'bg-green-500',
-    info: 'bg-blue-500',
-    warning: 'bg-amber-500',
-    error: 'bg-red-500'
+    success: 'bg-success',
+    info: 'bg-info',
+    warning: 'bg-warning',
+    error: 'bg-destructive'
 };
 
 const toasts = computed(() => messageToastState.toasts);
@@ -86,11 +86,17 @@ const getToastStyle = (toast: MessageToastItem, index: number) => {
     };
 };
 
+// Toast content elements currently watched by the observer, by toast id
+const observedElements = new Map<number, HTMLElement>();
+
 // Measure toast content heights so the stack can lay itself out
 const resizeObserver = typeof ResizeObserver !== 'undefined'
     ? new ResizeObserver((entries) => {
         for (const entry of entries) {
             const id = Number((entry.target as HTMLElement).dataset.toastId);
+
+            // Skip late notifications for toasts that already left
+            if (observedElements.get(id) !== entry.target) continue;
             heights.set(id, (entry.target as HTMLElement).offsetHeight);
         }
     })
@@ -99,7 +105,10 @@ const resizeObserver = typeof ResizeObserver !== 'undefined'
 // Register toast content elements with the observer
 const observeToast = (element: unknown) => {
     if (element instanceof HTMLElement && resizeObserver) {
-        heights.set(Number(element.dataset.toastId), element.offsetHeight);
+        const id = Number(element.dataset.toastId);
+        if (observedElements.get(id) === element) return;
+        heights.set(id, element.offsetHeight);
+        observedElements.set(id, element);
         resizeObserver.observe(element);
     }
 };
@@ -153,6 +162,11 @@ const handleAction = async (toast: MessageToastItem) => {
 // Forget measurements of removed toasts
 const handleAfterLeave = (element: Element) => {
     const id = Number((element as HTMLElement).dataset.toastId);
+    const content = observedElements.get(id);
+    if (content) {
+        resizeObserver?.unobserve(content);
+        observedElements.delete(id);
+    }
     heights.delete(id);
     leaveDirection.delete(id);
 };
@@ -167,6 +181,7 @@ watch(() => toasts.value.length, (length) => {
 // Stop observing on unmount
 onBeforeUnmount(() => {
     resizeObserver?.disconnect();
+    observedElements.clear();
 });
 </script>
 

package/src/components/message-toast/message-toast-state.ts

@@ -52,6 +52,7 @@ const MAX_TOASTS = 5;
 const MESSAGE_TOAST_ROOT_ID = 'ui-vintage-message-toast-root';
 
 const toastTimers = new Map<number, ToastTimer>();
+const pendingToastIds = new Set<number>();
 let messageToastMountPromise: Promise<void> | null = null;
 let nextToastId = 0;
 
@@ -143,6 +144,13 @@ export const resumeMessageToasts = () => {
 export const closeMessageToast = (id?: number) => {
     const ids = id === undefined ? messageToastState.toasts.map(toast => toast.id) : [id];
 
+    // Cancel toasts that were requested but are still waiting for the toaster to mount
+    if (id === undefined) {
+        pendingToastIds.clear();
+    } else {
+        pendingToastIds.delete(id);
+    }
+
     // Clear timers and remove the toasts from the stack
     for (const toastId of ids) {
         stopToastTimer(toastId);
@@ -170,11 +178,23 @@ export const showMessageToast = (options: ShowMessageToastOptions) => {
         duration
     };
 
+    // Toasts are client-only: never store them in the module state shared across server requests
+    if (typeof document === 'undefined') {
+        return id;
+    }
+
     // Expose the newest toast synchronously, as the single-toast API always did
     messageToastState.current = { message: toast.message, type: toast.type };
 
     // Mount first so the enter transition runs once the renderer exists
+    pendingToastIds.add(id);
     void ensureMessageToastMounted().then(() => {
+        // Skip toasts that were closed before the toaster finished mounting
+        if (!pendingToastIds.delete(id)) {
+            syncLegacyState();
+            return;
+        }
+
         // Push the newest toast on top and trim the overflow
         messageToastState.toasts = [toast, ...messageToastState.toasts];
         for (const overflow of messageToastState.toasts.slice(MAX_TOASTS)) {

package/src/components/page-header/PageHeader.vue

@@ -27,7 +27,7 @@ const hasSlotContent = computed(() => {
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-bold text-foreground';
+    const baseClasses = 'font-semibold tracking-tight text-foreground';
 
     // Return classes based on size
     switch (size) {

package/src/components/progress-component/ProgressComponent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useId } from 'vue';
 import { Progress } from '../ui/progress';
 
 // Props
@@ -12,14 +13,17 @@ const props = withDefaults(defineProps<{
     bottomLeftLabel: '',
     bottomRightLabel: ''
 });
+
+// Name the progress bar after the visible title
+const titleId = useId();
 </script>
 
 <template>
     <div class="space-y-3">
-        <!-- Header with icon and label -->
+        <!-- Header with label and value -->
         <div class="flex items-center justify-between">
             <!-- Title of the progress bar -->
-            <span class="text-sm font-semibold text-foreground">
+            <span :id="titleId" class="text-sm font-semibold text-foreground">
                 {{ props.title }}
             </span>
 
@@ -30,7 +34,7 @@ const props = withDefaults(defineProps<{
         </div>
 
         <!-- Progress bar -->
-        <Progress :model-value="props.value" :max="props.max" />
+        <Progress :model-value="props.value" :max="props.max" :aria-labelledby="titleId" />
 
         <!-- Bottom labels -->
         <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">