@brumaombra/ui-vintage 0.8.2 → 0.9.1

package/src/components/content/Terminal.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { CheckmarkCircle02Icon, Copy01Icon, TerminalIcon } from '@hugeicons/core-free-icons';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import Copy01Icon from '@hugeicons/core-free-icons/Copy01Icon';
+import TerminalIcon from '@hugeicons/core-free-icons/TerminalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Button } from '../ui/button';
-import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -42,35 +43,58 @@ const copyCommands = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up" class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
-            <!-- Terminal header -->
-            <div class="flex items-center justify-between gap-3 border-b border-border bg-card px-3 py-2 sm:px-4">
-                <div class="flex min-w-0 items-center gap-2">
-                    <!-- Window dots -->
-                    <span aria-hidden="true" class="mr-1 flex items-center gap-1.5">
-                        <span class="size-2.5 rounded-full bg-red-400/80" />
-                        <span class="size-2.5 rounded-full bg-amber-400/80" />
-                        <span class="size-2.5 rounded-full bg-green-400/80" />
-                    </span>
-                    <HugeiconsIcon :icon="TerminalIcon" class="size-4 shrink-0 text-muted-foreground" />
-                    <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
+        <div data-aos="blur-up" data-terminal class="overflow-hidden rounded border border-border bg-card text-foreground shadow-elevated-sm">
+            <!-- Window title bar -->
+            <div class="relative flex h-8 items-center border-b border-border bg-surface px-3">
+                <!-- Traffic lights -->
+                <span aria-hidden="true" class="flex items-center gap-2">
+                    <span class="size-3 rounded-full bg-destructive/85" />
+                    <span class="size-3 rounded-full bg-warning/85" />
+                    <span class="size-3 rounded-full bg-success/85" />
+                </span>
+
+                <!-- Window title -->
+                <div class="pointer-events-none absolute inset-x-24 flex items-center justify-center gap-1.5 text-muted-foreground">
+                    <HugeiconsIcon :icon="TerminalIcon" class="size-3.5 shrink-0" />
+                    <span class="truncate text-xs font-medium">{{ resolvedTitle }}</span>
                 </div>
 
                 <!-- Copy command button -->
                 <Button v-if="props.copyable"
                     variant="ghost"
                     size="icon"
-                    class="size-7 text-muted-foreground hover:bg-accent hover:text-foreground"
-                    :aria-label="t('uiVintage.terminal.copy')"
-                    :title="t('uiVintage.terminal.copy')"
+                    class="ml-auto size-6 text-muted-foreground hover:bg-accent hover:text-foreground"
+                    :aria-label="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
+                    :title="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
                     :disabled="!commandText"
                     @click="copyCommands">
-                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-4" />
+                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-3.5" />
                 </Button>
+
+                <!-- Announce the copy to screen readers -->
+                <span v-if="props.copyable" class="sr-only" aria-live="polite">{{ copied ? t('uiVintage.terminal.copied') : '' }}</span>
             </div>
 
             <!-- Terminal commands -->
-            <pre class="overflow-x-auto bg-surface px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-3 select-none text-primary" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
-        </Card>
+            <pre class="overflow-x-auto px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-2 select-none text-primary" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span><span v-if="index === props.commands.length - 1" class="terminal-cursor ml-1 inline-block w-[0.6em] bg-primary/70" aria-hidden="true" /></span></code></pre>
+        </div>
     </div>
-</template>
+</template>
+
+<style scoped>
+.terminal-cursor {
+    animation: terminal-blink 1.1s steps(1) infinite;
+}
+
+@keyframes terminal-blink {
+    50% {
+        opacity: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .terminal-cursor {
+        animation: none;
+    }
+}
+</style>

package/src/components/cookie-consent/CookieConsent.vue

@@ -70,7 +70,7 @@ onMounted(() => {
             <Card class="gap-3! p-4 shadow-elevated-sm">
                 <p class="text-sm text-foreground">
                     {{ resolvedMessage }}
-                    <NuxtLinkLocale v-if="props.policyTo" :to="props.policyTo" class="font-bold underline underline-offset-2">{{ resolvedPolicyLabel }}</NuxtLinkLocale>
+                    <NuxtLinkLocale v-if="props.policyTo" :to="props.policyTo" class="font-semibold text-primary underline underline-offset-2">{{ resolvedPolicyLabel }}</NuxtLinkLocale>
                 </p>
                 <div class="flex flex-wrap justify-end gap-2">
                     <Button variant="secondary" size="sm" @click="handleDecline">{{ resolvedDeclineLabel }}</Button>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { PackageIcon } from '@hugeicons/core-free-icons';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
@@ -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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import FavouriteIcon from '@hugeicons/core-free-icons/FavouriteIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, type Component, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
@@ -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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowDown01Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
+import RefreshIcon from '@hugeicons/core-free-icons/RefreshIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 
@@ -25,24 +26,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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Loading03Icon } from '@hugeicons/core-free-icons';
+import Loading03Icon from '@hugeicons/core-free-icons/Loading03Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
@@ -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>