@brumaombra/ui-vintage 0.8.2 → 0.9.0

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { Component, HTMLAttributes } from 'vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
@@ -13,6 +15,7 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 const props = withDefaults(defineProps<{
     appName?: string;
     appLogo?: string;
+    appLogoDark?: string;
     appLinkTo?: string;
     title?: string;
     description?: string;
@@ -40,6 +43,7 @@ const props = withDefaults(defineProps<{
 }>(), {
     appName: '',
     appLogo: '',
+    appLogoDark: '',
     appLinkTo: '/',
     title: '',
     description: '',
@@ -68,6 +72,16 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
         ...sharedProps
     };
 };
+
+const { t } = useI18n();
+
+// 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);
+
+// 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>
@@ -75,7 +89,7 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
         <!-- Sidebar -->
         <Sidebar :collapsible="props.collapsible" :compact="props.compact">
             <!-- Sidebar header -->
-            <SidebarHeader v-if="props.appName || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
+            <SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
                 <slot name="sidebar-header">
                     <SidebarMenu>
                         <SidebarMenuItem>
@@ -83,10 +97,13 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
                                 <a :href="props.appLinkTo" class="inline-flex items-center gap-2">
                                     <div class="inline-flex items-center gap-2">
                                         <!-- App logo -->
-                                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" class="size-8 shrink-0 object-contain" />
+                                        <template v-if="lightLogo">
+                                            <NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" :class="['size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden']" />
+                                            <NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" class="hidden size-8 shrink-0 object-contain dark:block" />
+                                        </template>
 
                                         <!-- App name -->
-                                        <span v-if="props.appName" class="text-xl font-bold tracking-tight text-foreground">{{ props.appName }}</span>
+                                        <span v-if="props.appName" class="text-xl font-semibold tracking-tight text-foreground">{{ props.appName }}</span>
                                     </div>
                                 </a>
                             </SidebarMenuButton>
@@ -105,12 +122,12 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
 
                     <!-- Section content -->
                     <SidebarGroupContent>
-                        <SidebarMenu :class="cn('gap-3', props.compact && 'gap-2')">
+                        <SidebarMenu :class="cn('gap-1', props.compact && 'gap-0.5')">
                             <SidebarMenuItem v-for="item in section.items" :key="item.id">
-                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-12 overflow-hidden rounded border border-border px-3 py-2.5 text-muted-foreground [transition:color_150ms,background-color_150ms,border-color_150ms,scale_300ms_var(--ease-spring)] hover:border-border-strong hover:bg-accent hover:text-foreground active:scale-[0.98] data-[active=true]:border-border-strong data-[active=true]:bg-accent data-[active=true]:text-foreground sm:px-4 sm:py-3', 'before:absolute before:inset-y-2 before:left-0 before:w-[3px] before:origin-center before:scale-y-0 before:rounded-r-full before:bg-primary before:transition-transform before:duration-[420ms] before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
-                                    <component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)">
+                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
+                                    <component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
                                         <!-- Icon -->
-                                        <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,translate,color] duration-300 ease-spring group-hover/nav:translate-x-0.5 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
+                                        <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
 
                                         <!-- Label and optional description -->
                                         <div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -43,14 +43,14 @@ const resolvedDescription = computed(() => props.description
     <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">
             <!-- Icon -->
-            <div class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
+            <div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
                 <HugeiconsIcon :icon="props.icon" class="size-10 animate-uv-float" />
             </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/error-page/ErrorPage.vue

@@ -64,7 +64,7 @@ const handleAction = () => {
 </script>
 
 <template>
-    <div :class="cn('relative min-h-screen bg-(--bg-main-light) text-(--text-primary-light) dark:bg-(--bg-main-dark) dark:text-(--text-primary-dark)', props.class)">
+    <div :class="cn('relative min-h-screen bg-background text-foreground', props.class)">
         <!-- Decorative background -->
         <BackgroundGrid v-if="props.showBackground" />
 
@@ -85,12 +85,12 @@ const handleAction = () => {
                         <!-- Error copy -->
                         <div>
                             <!-- Status code -->
-                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-primary">
+                            <div class="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
                                 {{ resolvedLabel }} {{ resolvedStatusCode }}
                             </div>
 
                             <!-- Title -->
-                            <h1 class="text-2xl font-bold mt-3">
+                            <h1 class="mt-3 text-2xl font-semibold tracking-tight">
                                 {{ resolvedTitle }}
                             </h1>
 

package/src/components/info-card/InfoCard.vue

@@ -20,15 +20,15 @@ const props = withDefaults(defineProps<{
     <Card :class="['flex flex-col items-center p-4! sm:flex-row', props.class]">
         <CardContent class="flex w-full flex-col items-center gap-0 p-0! sm:flex-row">
             <!-- Icon -->
-            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 shrink-0 items-center justify-center p-0! sm:mb-0 sm:mr-4">
-                <HugeiconsIcon :icon="props.icon" class="size-5" />
-            </Card>
+            <span aria-hidden="true" class="mb-3 flex size-10 shrink-0 items-center justify-center rounded border border-primary/30 text-primary sm:mb-0 sm:mr-4">
+                <HugeiconsIcon :icon="props.icon" class="size-4.5" />
+            </span>
 
             <!-- Content -->
             <div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
                 <div class="flex flex-col w-full gap-2 sm:gap-1">
                     <!-- Title -->
-                    <span class="text-base font-bold text-foreground">
+                    <span class="text-sm font-semibold text-foreground md:text-base">
                         {{ props.title }}
                     </span>
 

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,20 +75,25 @@ 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>
     <footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
-        <!-- Accent line -->
-        <div aria-hidden="true" class="absolute inset-x-0 -top-px h-px bg-linear-to-r from-transparent via-primary/60 to-transparent" />
-
         <div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
             <div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
                 <!-- 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,scale] duration-300 ease-spring hover:scale-[1.02] hover:opacity-90">
-                        <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>
 
@@ -107,8 +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="group/link inline-flex items-center gap-1.5 text-muted-foreground transition-colors duration-150 hover:text-primary">
-                                    <span class="h-px w-0 bg-primary transition-[width] duration-300 ease-spring group-hover/link:w-3" />
+                                <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>
@@ -127,8 +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="group/link inline-flex items-center gap-1.5 text-muted-foreground transition-colors duration-150 hover:text-primary">
-                                    <span class="h-px w-0 bg-primary transition-[width] duration-300 ease-spring group-hover/link:w-3" />
+                                <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>
@@ -147,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-600 transition-[scale] duration-300 ease-bounce hover:scale-125 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,7 +1,8 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+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';
 
@@ -9,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'];
@@ -19,6 +21,7 @@ const props = withDefaults(defineProps<{
 }>(), {
     appName: '',
     appLogo: '',
+    appLogoDark: '',
     appLinkTo: '/',
     showProgress: false
 });
@@ -41,6 +44,16 @@ onMounted(() => {
 onBeforeUnmount(() => {
     window.removeEventListener('scroll', handleScroll);
 });
+
+// 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);
+
+const { t } = useI18n();
+
+// 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>
@@ -51,12 +64,15 @@ onBeforeUnmount(() => {
                 <!-- 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,scale] duration-300 ease-spring hover:scale-[1.02] hover:opacity-90">
+                        <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 -->
-                            <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)" />
+                            <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-bold tracking-tight text-foreground">
+                            <span v-if="props.appName" class="hidden sm:inline! text-xl font-semibold tracking-tight text-foreground">
                                 {{ props.appName }}
                             </span>
                         </a>
@@ -69,8 +85,8 @@ onBeforeUnmount(() => {
                 </div>
             </nav>
 
-            <!-- Reading progress along the bottom edge of the floating bar -->
-            <div v-if="props.showProgress" :class="cn('absolute inset-x-1 bottom-0 transition-opacity duration-300', isScrolled ? 'opacity-100' : 'opacity-0')">
+            <!-- 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>

package/src/components/landing/landing-shell/LandingShell.vue

@@ -24,13 +24,8 @@ const hasStructuredSlots = computed(() => {
 
 <template>
     <div :class="cn('relative flex min-h-screen flex-col bg-background text-foreground', props.rootClass)">
-        <!-- Background grid and a warm ambient glow at the top -->
-        <template v-if="props.showBackground">
-            <BackgroundGrid />
-            <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 z-0 h-[36rem] overflow-hidden">
-                <div class="absolute -top-48 left-1/2 h-96 w-[56rem] max-w-[140%] -translate-x-1/2 rounded-full bg-primary/10 blur-[110px]" />
-            </div>
-        </template>
+        <!-- Background grid -->
+        <BackgroundGrid v-if="props.showBackground" />
 
         <!-- If structured slots are provided, render them -->
         <template v-if="hasStructuredSlots">

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>