@brumaombra/ui-vintage 0.8.2 → 0.9.0

package/src/components/blog/BlogTagsSection.vue

@@ -6,20 +6,29 @@ const props = withDefaults(defineProps<{
         slug: string;
         count: number;
     }>;
+    blogPath?: string;
 }>(), {
-    tags: () => []
+    tags: () => [],
+    blogPath: '/blog'
 });
 </script>
 
 <template>
-    <div v-if="props.tags.length" class="flex flex-wrap gap-3">
+    <div v-if="props.tags.length" class="flex flex-wrap gap-2">
         <!-- Tag chip -->
         <span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
-            <NuxtLinkLocale :to="`/blog/tags/${tag.slug}`" class="group/tag inline-flex items-center gap-2 rounded border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground shadow-elevated-sm outline-none [transition:translate_300ms_var(--ease-spring),border-color_150ms,color_150ms,box-shadow_200ms] hover:-translate-y-0.5 hover:border-primary/50 hover:text-primary hover:shadow-elevated-md focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
-                <span aria-hidden="true" class="text-primary transition-[rotate] duration-300 ease-bounce group-hover/tag:rotate-12">#</span>
-                {{ tag.name }}
-                <span class="rounded-sm bg-surface px-1.5 py-0.5 text-[11px] text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">{{ tag.count }}</span>
+            <NuxtLinkLocale :to="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+                <!-- Name -->
+                <span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+                    <span aria-hidden="true" class="text-primary">#</span>
+                    {{ tag.name }}
+                </span>
+
+                <!-- Post count -->
+                <span class="inline-flex items-center border-l border-border bg-surface px-2 text-[11px] font-semibold text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:border-primary/40 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+                    {{ tag.count }}
+                </span>
             </NuxtLinkLocale>
         </span>
     </div>
-</template>
+</template>

package/src/components/blog/CategoryCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
+import { ArrowRight01Icon, Folder01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 
@@ -15,31 +15,26 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <Card interactive class="group/category h-full gap-0! overflow-hidden p-0! sm:gap-0!">
-        <div class="relative h-40 w-full overflow-hidden bg-surface">
-            <!-- Background image -->
-            <NuxtImg v-if="props.image" :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/category:scale-110" />
+    <Card class="group/category h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
+        <!-- Image -->
+        <div class="h-32 w-full overflow-hidden border-b border-border bg-surface">
+            <NuxtImg v-if="props.image" :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/category:scale-[1.03]" />
 
             <!-- Fallback when there is no image -->
-            <div v-else aria-hidden="true" class="size-full bg-[radial-gradient(circle_at_30%_20%,color-mix(in_oklab,var(--primary)_35%,transparent),transparent_65%)]" />
-
-            <!-- Legibility shade -->
-            <div aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-black/0" />
+            <div v-else aria-hidden="true" class="flex size-full items-center justify-center text-primary/60">
+                <HugeiconsIcon :icon="Folder01Icon" class="size-8" />
+            </div>
+        </div>
 
-            <!-- Arrow that appears on hover -->
-            <span aria-hidden="true" class="absolute top-3 right-3 flex size-8 scale-75 items-center justify-center rounded border border-white/25 bg-black/30 text-white opacity-0 backdrop-blur-md transition-[opacity,scale] duration-300 ease-spring group-hover/category:scale-100 group-hover/category:opacity-100">
-                <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4" />
+        <!-- Name, post count and arrow -->
+        <div class="flex grow items-center gap-3 bg-surface px-4 py-3 transition-colors duration-200 group-hover/category:bg-primary/10">
+            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground transition-colors duration-200 group-hover/category:text-primary">
+                {{ props.name }}
             </span>
-
-            <!-- Name and count -->
-            <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-4">
-                <span class="truncate text-base font-bold text-white transition-[translate] duration-300 ease-spring group-hover/category:-translate-y-0.5">
-                    {{ props.name }}
-                </span>
-                <span class="shrink-0 rounded-sm border border-white/25 bg-white/15 px-2 py-0.5 text-xs font-bold text-white tabular-nums backdrop-blur-md">
-                    {{ props.count }}
-                </span>
-            </div>
+            <span class="shrink-0 rounded border border-primary/30 px-1.5 text-[11px] font-semibold leading-5 text-primary tabular-nums">
+                {{ props.count }}
+            </span>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 shrink-0 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/category:translate-x-1 group-hover/category:text-primary" />
         </div>
     </Card>
-</template>
+</template>

package/src/components/blog/HeaderCarousel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
@@ -30,8 +30,17 @@ const SWIPE_THRESHOLD_PX = 50;
 // Carousel state
 const currentSlide = ref(0);
 const isPaused = ref(false);
-const autoplayEnabled = ref(false);
+const motionAllowed = ref(false);
 const slideCount = computed(() => props.featuredPosts.length || 0);
+const autoplayEnabled = computed(() => motionAllowed.value && slideCount.value > 1);
+const slideIdPrefix = `carousel-${useId()}-slide`;
+
+// Keep the active slide in range when the list of posts shrinks
+watch(slideCount, (count) => {
+    if (currentSlide.value >= count) {
+        currentSlide.value = Math.max(0, count - 1);
+    }
+});
 let swipeStartX: number | null = null;
 
 // Handle next slide press
@@ -84,9 +93,9 @@ const handleProgressEnd = () => {
     if (autoplayEnabled.value) nextSlide();
 };
 
-// Start autoplay when component mounts (never with reduced motion)
+// Allow autoplay once mounted (never with reduced motion); it starts as soon as there are at least two posts
 onMounted(() => {
-    autoplayEnabled.value = slideCount.value > 1 && !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    motionAllowed.value = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
     document.addEventListener('visibilitychange', handleVisibilityChange);
 });
 
@@ -100,7 +109,7 @@ onUnmounted(() => {
     <div v-if="props.featuredPosts.length > 0" role="region" aria-roledescription="carousel" :aria-label="t('uiVintage.blog.carouselNavigation')" class="group/carousel relative isolate overflow-hidden rounded border border-border bg-card shadow-elevated-lg outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45" tabindex="0" @mouseenter="pause" @mouseleave="resume" @focusin="pause" @focusout="resume" @keydown="handleKeydown" @pointerdown="handlePointerDown" @pointerup="handlePointerUp">
         <!-- Slides (stacked; the active one crossfades in) -->
         <div class="relative h-[28rem] w-full md:h-[32rem]">
-            <div v-for="(post, index) in props.featuredPosts" :id="`carousel-slide-${index}`" :key="post.path || post.title || index" role="group" aria-roledescription="slide" :aria-label="`${index + 1} / ${slideCount}`" :aria-hidden="currentSlide !== index" :inert="currentSlide !== index || undefined" :class="cn('absolute inset-0 transition-[opacity,scale] duration-700 ease-out-expo', currentSlide === index ? 'z-10 scale-100 opacity-100' : 'z-0 scale-[1.02] opacity-0')">
+            <div v-for="(post, index) in props.featuredPosts" :id="`${slideIdPrefix}-${index}`" :key="post.path || post.title || index" role="group" aria-roledescription="slide" :aria-label="`${index + 1} / ${slideCount}`" :aria-hidden="currentSlide !== index" :inert="currentSlide !== index || undefined" :class="cn('absolute inset-0 transition-[opacity,scale] duration-700 ease-out-expo', currentSlide === index ? 'z-10 scale-100 opacity-100' : 'z-0 scale-[1.02] opacity-0')">
                 <!-- Slide image with a slow zoom -->
                 <NuxtLink :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
                     <NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="640" format="avif" quality="45" :sizes="{ 480: '480px', 1536: '1152px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" :class="cn('size-full object-cover', currentSlide === index && 'animate-uv-ken-burns')" />
@@ -147,7 +156,7 @@ onUnmounted(() => {
         <div v-if="slideCount > 1" class="absolute inset-x-0 bottom-0 z-20 flex items-center justify-between gap-4 p-6 md:px-10 md:pb-8">
             <!-- Slide indicators (the active one fills up until the next slide) -->
             <div class="flex items-center gap-2" role="tablist" :aria-label="t('uiVintage.blog.carouselNavigation')">
-                <button v-for="(_, index) in props.featuredPosts" :key="index" type="button" role="tab" :aria-selected="currentSlide === index" :aria-controls="`carousel-slide-${index}`" :aria-label="t('uiVintage.blog.goToSlide', { index: index + 1 })" :class="cn('relative h-1.5 cursor-pointer overflow-hidden rounded-full bg-white/30 outline-none transition-[width,background-color] duration-500 ease-spring hover:bg-white/50 focus-visible:ring-2 focus-visible:ring-white', currentSlide === index ? 'w-12' : 'w-4')" @click="goToSlide(index)">
+                <button v-for="(_, index) in props.featuredPosts" :key="index" type="button" role="tab" :aria-selected="currentSlide === index" :aria-controls="`${slideIdPrefix}-${index}`" :aria-label="t('uiVintage.blog.goToSlide', { index: index + 1 })" :class="cn('relative h-1.5 cursor-pointer overflow-hidden rounded-full bg-white/30 outline-none transition-[width,background-color] duration-500 ease-spring hover:bg-white/50 focus-visible:ring-2 focus-visible:ring-white', currentSlide === index ? 'w-12' : 'w-4')" @click="goToSlide(index)">
                     <span v-if="currentSlide === index" :key="`progress-${currentSlide}`" class="absolute inset-0 origin-left rounded-full bg-primary" :style="autoplayEnabled ? { animation: `uv-grow-x ${AUTOPLAY_DURATION_MS}ms linear both`, animationPlayState: isPaused ? 'paused' : 'running' } : undefined" @animationend="handleProgressEnd" />
                 </button>
             </div>

package/src/components/blog/PostCard.vue

@@ -3,7 +3,6 @@ import { NuxtImg } from '#components';
 import { useI18n } from 'vue-i18n';
 import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Badge } from '../ui/badge';
 import { Card } from '../ui/card';
 
 const { t } = useI18n();
@@ -23,25 +22,19 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <Card interactive class="group/post h-full gap-0! overflow-hidden p-0! sm:gap-0!">
+    <Card class="group/post h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
         <!-- Featured image -->
-        <div v-if="props.image" class="relative aspect-video w-full overflow-hidden border-b border-border bg-surface">
-            <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale,filter] duration-700 ease-out-expo group-hover/post:scale-[1.06] group-hover/post:saturate-125" />
-
-            <!-- Shade that deepens on hover -->
-            <div aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-black/45 via-black/0 to-black/0 opacity-60 transition-opacity duration-500 group-hover/post:opacity-100" />
-
-            <!-- Category over the image -->
-            <Badge v-if="props.category" :text="props.category" class="absolute top-3 left-3 border-white/25 bg-black/35 text-white backdrop-blur-md" />
+        <div v-if="props.image" class="aspect-video w-full overflow-hidden border-b border-border bg-surface">
+            <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/post:scale-[1.03]" />
         </div>
 
         <!-- Content -->
-        <div class="flex grow flex-col gap-3 p-5 sm:p-6">
-            <!-- Category (when there is no image to sit on) -->
-            <Badge v-if="props.category && !props.image" :text="props.category" />
+        <div class="flex grow flex-col gap-2 px-5 py-4">
+            <!-- Category -->
+            <span v-if="props.category" class="text-[11px] font-semibold uppercase tracking-wider text-primary">{{ props.category }}</span>
 
             <!-- Post title -->
-            <h2 class="line-clamp-2 text-base leading-snug font-bold text-foreground transition-colors duration-200 group-hover/post:text-primary">
+            <h2 class="line-clamp-2 text-sm leading-snug font-semibold text-foreground transition-colors duration-200 group-hover/post:text-primary md:text-base">
                 {{ props.title }}
             </h2>
 
@@ -49,12 +42,12 @@ const props = withDefaults(defineProps<{
             <p class="line-clamp-3 grow text-xs leading-relaxed text-muted-foreground md:text-sm">
                 {{ props.description }}
             </p>
+        </div>
 
-            <!-- Read more -->
-            <span class="mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-primary sm:text-sm">
-                {{ t('uiVintage.blog.readMore') }}
-                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/post:translate-x-1" />
-            </span>
+        <!-- Read more -->
+        <div class="flex items-center justify-between border-t border-border bg-surface px-5 py-2.5 text-xs text-muted-foreground transition-colors duration-200 group-hover/post:bg-primary/10 group-hover/post:text-primary">
+            <span class="font-medium">{{ t('uiVintage.blog.readMore') }}</span>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/post:translate-x-1" />
         </div>
     </Card>
-</template>
+</template>

package/src/components/blog/SocialShareSidebar.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 const { t } = useI18n();
 const copied = ref(false);
 
-// Social platforms config (each one lights up in its brand color on hover)
+// Social platforms config (each icon turns its brand color on hover)
 const socialPlatforms = computed(() => {
     const encodedUrl = encodeURIComponent(props.url);
     const encodedTitle = encodeURIComponent(props.title);
@@ -22,37 +22,37 @@ const socialPlatforms = computed(() => {
         name: 'facebook',
         url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
         icon: Facebook01Icon,
-        color: 'hover:border-[#1877F2] hover:bg-[#1877F2]',
+        color: 'hover:text-[#1877F2]',
         label: t('uiVintage.blog.share.facebook')
     }, {
         name: 'twitter',
         url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
         icon: NewTwitterIcon,
-        color: 'hover:border-foreground hover:bg-foreground hover:text-background!',
+        color: 'hover:text-foreground',
         label: t('uiVintage.blog.share.x')
     }, {
         name: 'whatsapp',
         url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
         icon: WhatsappIcon,
-        color: 'hover:border-[#25D366] hover:bg-[#25D366]',
+        color: 'hover:text-[#25D366]',
         label: t('uiVintage.blog.share.whatsapp')
     }, {
         name: 'linkedin',
         url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
         icon: Linkedin01Icon,
-        color: 'hover:border-[#0A66C2] hover:bg-[#0A66C2]',
+        color: 'hover:text-[#0A66C2]',
         label: t('uiVintage.blog.share.linkedin')
     }, {
         name: 'telegram',
         url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
         icon: TelegramIcon,
-        color: 'hover:border-[#229ED9] hover:bg-[#229ED9]',
+        color: 'hover:text-[#229ED9]',
         label: t('uiVintage.blog.share.telegram')
     }];
 });
 
 // Shared button classes
-const buttonClasses = 'flex size-10 cursor-pointer items-center justify-center rounded border border-border bg-secondary text-muted-foreground shadow-elevated-sm outline-none [transition:background-color_150ms,border-color_150ms,color_150ms,scale_300ms_var(--ease-spring)] hover:scale-110 hover:text-white active:scale-95 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+const buttonClasses = 'flex size-9 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none [transition:background-color_150ms,color_150ms,scale_300ms_var(--ease-spring)] hover:bg-accent active:scale-95 focus-visible:ring-[3px] focus-visible:ring-ring/45';
 
 // Copy the article link to the clipboard
 const copyLink = async () => {
@@ -69,9 +69,12 @@ const copyLink = async () => {
     <Teleport to="body">
         <!-- Desktop sidebar on the right -->
         <div class="fixed top-35 right-[max(6.875rem,calc(50%-38.125rem))] z-20 hidden animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.6s_both] xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
-            <div class="flex flex-col items-center gap-3 rounded border border-border bg-card p-3 shadow-elevated-sm">
+            <div class="flex flex-col items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
                 <!-- Share icon -->
-                <HugeiconsIcon :icon="Share08Icon" class="mb-1 size-5 text-primary" />
+                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
+                </span>
+                <span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
 
                 <!-- Social share links (desktop) -->
                 <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :title="platform.label" :class="[buttonClasses, platform.color]">
@@ -79,8 +82,8 @@ const copyLink = async () => {
                 </a>
 
                 <!-- Copy link -->
-                <div class="my-1 h-px w-6 bg-border" />
-                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :title="t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:border-primary hover:bg-primary hover:text-primary-foreground!', copied && 'border-primary text-primary']" @click="copyLink">
+                <span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
+                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :title="t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
                     <Transition mode="out-in" enter-active-class="transition-[opacity,scale] duration-300 ease-bounce" enter-from-class="opacity-0 scale-50" leave-active-class="transition-opacity duration-100" leave-to-class="opacity-0">
                         <HugeiconsIcon :key="String(copied)" :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
                     </Transition>
@@ -90,17 +93,24 @@ const copyLink = async () => {
 
         <!-- Mobile view (floating bar at bottom) -->
         <div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.8s_both] xl:hidden">
-            <div class="flex items-center gap-2 rounded border border-border bg-card p-2 shadow-elevated-sm">
+            <div class="flex items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
+                <!-- Share icon -->
+                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
+                </span>
+                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+
                 <!-- Social share links (mobile) -->
                 <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :class="[buttonClasses, platform.color]">
                     <HugeiconsIcon :icon="platform.icon" class="size-4" />
                 </a>
 
                 <!-- Copy link -->
-                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:border-primary hover:bg-primary hover:text-primary-foreground!', copied && 'border-primary text-primary']" @click="copyLink">
+                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
                     <HugeiconsIcon :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
                 </button>
             </div>
         </div>
     </Teleport>
-</template>
+</template>

package/src/components/blog/TableOfContents.vue

@@ -18,6 +18,7 @@ interface TocHeading {
     id: string;
     text: string;
     level: number;
+    number: string;
 }
 
 // Props
@@ -68,7 +69,8 @@ const headings = computed(() => {
             const currentHeading = {
                 id: link.id ?? '',
                 text: link.text ?? '',
-                level: link.depth ?? 0
+                level: link.depth ?? 0,
+                number: ''
             };
 
             // Recursively flatten the children links
@@ -77,13 +79,23 @@ const headings = computed(() => {
         });
     };
 
-    // Return the flattened list of headings
-    return flattenLinks(tocLinks).filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3);
+    // Keep h2 and h3 headings and number the main sections
+    let sectionNumber = 0;
+    return flattenLinks(tocLinks)
+        .filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3)
+        .map(heading => ({
+            ...heading,
+            number: heading.level === 2 ? String(++sectionNumber).padStart(2, '0') : ''
+        }));
 });
 
+// Number of main sections shown in the header
+const sectionCount = computed(() => headings.value.filter(heading => heading.level === 2).length);
+
 // Title and description for the table of contents
 const tocTitle = computed(() => t('uiVintage.blog.tableOfContents'));
 const tocDescription = computed(() => t('uiVintage.blog.tableOfContentsDescription'));
+const tocSections = computed(() => t('uiVintage.blog.tableOfContentsSections', { count: sectionCount.value }, sectionCount.value));
 
 // Prefer reduced motion for heading scroll
 const prefersReducedMotion = () => {
@@ -265,11 +277,14 @@ const scrollToHeading = (id: string, options: { closeMobile?: boolean } = {}) =>
             history.replaceState(null, '', `#${id}`);
         }
     };
-    restoreMobileTriggerFocus = false;
-
     if (options.closeMobile && isMobileOpen.value) {
+        // The heading takes focus after the scroll, so skip the trigger focus restore for this close only
+        restoreMobileTriggerFocus = false;
         mobileTriggerRef.value?.focus();
         isMobileOpen.value = false;
+        nextTick(() => {
+            restoreMobileTriggerFocus = true;
+        });
         window.clearTimeout(mobileScrollTimeout);
         mobileScrollTimeout = window.setTimeout(runScroll, MOBILE_CLOSE_SCROLL_DELAY_MS);
         return;
@@ -286,21 +301,19 @@ const openMobileToc = () => {
 // Get classes for heading button
 const getHeadingButtonClasses = (level: number, isActive: boolean) => {
     // Base classes for all titles
-    const baseClasses = 'relative block w-full cursor-pointer rounded px-2.5 py-2 text-left outline-none transition-[background-color,color,padding] duration-200 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45 md:px-3 before:absolute before:inset-y-1.5 before:left-0 before:w-[3px] before:origin-center before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring';
-
-    // Add classes based on heading level
-    let levelClasses = '';
-    if (level === 2) {
-        levelClasses = 'text-foreground font-semibold text-xs md:text-sm';
-    } else {
-        levelClasses = 'text-muted-foreground pl-6! text-xs md:text-sm';
-    }
+    const baseClasses = 'flex w-full cursor-pointer gap-3 rounded-r py-1.5 pr-2 text-left text-xs outline-none transition-colors duration-200 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45 md:text-sm';
 
-    // Add classes if the heading is active
-    const activeClasses = isActive ? 'bg-accent text-foreground! before:scale-y-100' : '';
+    // Main sections carry a number, subsections align with their text
+    const levelClasses = level === 2 ? 'pl-4 font-medium' : 'pl-12 md:text-xs';
+
+    // Add classes based on the active state
+    let stateClasses = level === 2 ? 'text-foreground/80' : 'text-muted-foreground';
+    if (isActive) {
+        stateClasses = 'font-semibold text-foreground';
+    }
 
     // Return combined classes
-    return [baseClasses, levelClasses, activeClasses];
+    return [baseClasses, levelClasses, stateClasses];
 };
 
 // Watch for changes in the headings and update the visible heading IDs and active heading ID accordingly
@@ -343,10 +356,22 @@ onUnmounted(() => {
         <!-- In-flow accordion; replaced by the mobile control after it scrolls away -->
         <div ref="inlineRef" class="mb-6" :aria-hidden="isDocked" :inert="isDocked">
             <Accordion :title="tocTitle" :icon="Bookmark01Icon">
-                <nav :aria-label="tocTitle" class="space-y-1">
-                    <button v-for="heading in headings" :key="`inline-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id)">
-                        {{ heading.text }}
-                    </button>
+                <!-- Section count -->
+                <template #trailing>
+                    <span class="shrink-0 text-xs text-muted-foreground">{{ tocSections }}</span>
+                </template>
+
+                <nav :aria-label="tocTitle">
+                    <ol>
+                        <li v-for="heading in headings" :key="`inline-${heading.id}`" class="relative border-l border-border">
+                            <!-- Active marker on the track -->
+                            <span aria-hidden="true" :class="['absolute inset-y-1 -left-px w-0.5 origin-center bg-primary transition-transform duration-300 ease-spring', heading.id === activeHeadingId ? 'scale-y-100' : 'scale-y-0']" />
+                            <button type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id)">
+                                <span v-if="heading.number" :class="['w-5 shrink-0 text-[11px] leading-5 tabular-nums transition-colors', heading.id === activeHeadingId ? 'text-primary' : 'text-muted-foreground']">{{ heading.number }}</span>
+                                <span>{{ heading.text }}</span>
+                            </button>
+                        </li>
+                    </ol>
                 </nav>
             </Accordion>
         </div>
@@ -366,8 +391,8 @@ onUnmounted(() => {
                         <!-- Mobile table of contents header -->
                         <div class="flex min-w-0 items-center gap-3">
                             <!-- Mobile table of contents icon -->
-                            <div class="flex size-10 shrink-0 items-center justify-center rounded border border-primary/30 bg-primary/10">
-                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-primary" />
+                            <div class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-3.5" />
                             </div>
 
                             <!-- Mobile table of contents title and description -->
@@ -378,6 +403,9 @@ onUnmounted(() => {
                                 <SheetDescription class="sr-only">
                                     {{ tocDescription }}
                                 </SheetDescription>
+                                <p aria-hidden="true" class="text-xs text-muted-foreground">
+                                    {{ tocSections }}
+                                </p>
                             </div>
                         </div>
 
@@ -391,11 +419,16 @@ onUnmounted(() => {
 
                     <!-- Mobile table of contents navigation -->
                     <nav :aria-label="tocTitle" class="flex-1 overflow-y-auto p-5">
-                        <div class="space-y-1">
-                            <button v-for="heading in headings" :key="`mobile-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id, { closeMobile: true })">
-                                {{ heading.text }}
-                            </button>
-                        </div>
+                        <ol>
+                            <li v-for="heading in headings" :key="`mobile-${heading.id}`" class="relative border-l border-border">
+                                <!-- Active marker on the track -->
+                                <span aria-hidden="true" :class="['absolute inset-y-1 -left-px w-0.5 bg-primary', heading.id === activeHeadingId ? 'opacity-100' : 'opacity-0']" />
+                                <button type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id, { closeMobile: true })">
+                                    <span v-if="heading.number" :class="['w-5 shrink-0 text-[11px] leading-5 tabular-nums', heading.id === activeHeadingId ? 'text-primary' : 'text-muted-foreground']">{{ heading.number }}</span>
+                                    <span>{{ heading.text }}</span>
+                                </button>
+                            </li>
+                        </ol>
                     </nav>
                 </SheetContent>
             </Sheet>

package/src/components/blog/index.ts

@@ -2,6 +2,7 @@ export { default as AllPostsSection } from './AllPostsSection.vue';
 export { default as BlogContentRenderer } from './BlogContentRenderer.vue';
 export { default as BlogFAQSection } from './BlogFAQSection.vue';
 export { default as BlogInfoSection } from './BlogInfoSection.vue';
+export { default as BlogPostHeader } from './BlogPostHeader.vue';
 export { default as BlogHeaderSection } from './BlogHeaderSection.vue';
 export { default as BlogSectionTitle } from './BlogSectionTitle.vue';
 export { default as BlogTagsSection } from './BlogTagsSection.vue';

package/src/components/card-grid/CardGrid.vue

@@ -52,8 +52,8 @@ const handleLoadMore = () => {
             <slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
         </div>
 
-        <!-- Load more button -->
-        <div v-if="props.hasMore || (props.loadMoreBusy && props.items.length > 0)" class="flex justify-center mt-6">
+        <!-- Load more button (only under a grid, never under the loading or empty state) -->
+        <div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
             <LoadMoreButton :busy="props.loadMoreBusy"
                 @load-more="handleLoadMore" />
         </div>

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -11,6 +11,11 @@ const pendingAction = ref<'confirm' | 'cancel' | null>(null);
 
 // Run an action while showing a spinner on the button that triggered it
 const runAction = async (action: 'confirm' | 'cancel') => {
+    // Ignore clicks while another action is still running
+    if (pendingAction.value) {
+        return;
+    }
+
     pendingAction.value = action;
     try {
         await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());

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

@@ -120,10 +120,10 @@ const clearCurrentConfirmDialog = () => {
     openNextConfirmDialog();
 };
 
-// Close the current dialog after the leave transition
-const scheduleCloseCurrentConfirmDialog = () => {
-    // Guard against missing or already closed dialogs
-    if (!confirmDialogState.current || !confirmDialogState.isOpen) return;
+// Close the current dialog after the leave transition (only if it is still the given request)
+const scheduleCloseCurrentConfirmDialog = (request: ConfirmDialogRequest) => {
+    // Guard against missing, replaced, or already closed dialogs
+    if (confirmDialogState.current !== request || !confirmDialogState.isOpen) return;
     confirmDialogState.isOpen = false;
 
     // Clear any existing close timer to avoid racing conditions
@@ -138,40 +138,40 @@ const scheduleCloseCurrentConfirmDialog = () => {
     }, DIALOG_CLOSE_DURATION_MS);
 };
 
-// Resolve the dialog as cancelled
+// Resolve the dialog as cancelled (ignored while a confirm or cancel handler is still running)
 export const closeConfirmDialog = () => {
     const current = confirmDialogState.current;
-    if (!current || !confirmDialogState.isOpen) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     current.resolve(false);
-    scheduleCloseCurrentConfirmDialog();
+    scheduleCloseCurrentConfirmDialog(current);
 };
 
-// Run the cancel handler for the active dialog
-export const cancelActiveConfirmDialog = async () => {
+// Run a dialog handler, then resolve and close the dialog it belongs to
+const runConfirmDialogHandler = async (handler: (() => void | Promise<void>) | null, result: boolean) => {
     const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     confirmDialogState.busy = true;
 
     try {
-        await current.options.onCancel?.();
+        await handler?.();
+        current.resolve(result);
+    } catch (error) {
+        // Settle the caller's promise even when the handler throws, then surface the error
         current.resolve(false);
+        throw error;
     } finally {
-        scheduleCloseCurrentConfirmDialog();
+        scheduleCloseCurrentConfirmDialog(current);
     }
 };
 
+// Run the cancel handler for the active dialog
+export const cancelActiveConfirmDialog = async () => {
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onCancel ?? null, false);
+};
+
 // Run the confirm handler for the active dialog
 export const confirmActiveDialog = async () => {
-    const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
-    confirmDialogState.busy = true;
-
-    try {
-        await current.options.onConfirm?.();
-        current.resolve(true);
-    } finally {
-        scheduleCloseCurrentConfirmDialog();
-    }
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onConfirm ?? null, true);
 };
 
 // Queue and show a confirm dialog