@brumaombra/ui-vintage 0.7.13 → 0.8.1

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

@@ -1,12 +1,23 @@
 <script setup lang="ts">
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
 import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from './confirm-dialog-state';
 
 const currentDialog = computed(() => confirmDialogState.current);
+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') => {
+    pendingAction.value = action;
+    try {
+        await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());
+    } finally {
+        pendingAction.value = null;
+    }
+};
 
 // Close the dialog when the shell requests it
 const handleOpenChange = (open: boolean) => {
@@ -24,9 +35,9 @@ const handleOpenChange = (open: boolean) => {
             <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
                 <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
                     <!-- Dialog icon -->
-                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-(--border-light) bg-(--bg-surface-light) sm:size-10 sm:self-start dark:border-(--border-dark) dark:bg-(--bg-surface-dark)">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 text-(--button-primary-light) dark:text-(--button-primary-dark)" />
-                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 text-(--button-primary-light) dark:text-(--button-primary-dark)" />
+                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-primary/30 bg-primary/10 sm:size-10 sm:self-start">
+                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
+                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
                     </div>
 
                     <!-- Dialog header -->
@@ -44,13 +55,13 @@ const handleOpenChange = (open: boolean) => {
             <!-- Dialog actions -->
             <AlertDialogFooter>
                 <!-- Cancel button -->
-                <Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy" @click="cancelActiveConfirmDialog">
+                <Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'cancel'" :loading="pendingAction === 'cancel'" @click="runAction('cancel')">
                     <HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
                     {{ currentDialog.options.cancelText }}
                 </Button>
 
                 <!-- Confirm button -->
-                <Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy" @click="confirmActiveDialog">
+                <Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'confirm'" :loading="pendingAction === 'confirm'" @click="runAction('confirm')">
                     <HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
                     {{ currentDialog.options.confirmText }}
                 </Button>

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

@@ -1,6 +1,7 @@
 import { h, markRaw, reactive, render } from 'vue';
 import type { ButtonVariants } from '../ui/button';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
+import { getUiVintageRuntimeMessage } from '../../lib/i18n';
 
 export type DialogButtonVariant = NonNullable<ButtonVariants['variant']>;
 export type { HugeiconsIconDefinition };
@@ -183,10 +184,10 @@ export const showConfirmDialog = (options: ShowConfirmDialogOptions) => {
         enqueueConfirmDialog({
             id: nextConfirmDialogId += 1,
             options: {
-                title: options.title ?? 'Confirm',
+                title: options.title ?? getUiVintageRuntimeMessage('uiVintage.messageDialog.confirm', 'Confirm'),
                 message: options.message,
-                confirmText: options.confirmText ?? 'Confirm',
-                cancelText: options.cancelText ?? 'Cancel',
+                confirmText: options.confirmText ?? getUiVintageRuntimeMessage('uiVintage.buttons.confirm', 'Confirm'),
+                cancelText: options.cancelText ?? getUiVintageRuntimeMessage('uiVintage.buttons.cancel', 'Cancel'),
                 confirmButtonType: options.confirmButtonType ?? 'primary',
                 cancelButtonType: options.cancelButtonType ?? 'secondary',
                 icon: markIcon(options.icon),

package/src/components/content/BlogList.vue

@@ -14,12 +14,12 @@ const props = withDefaults(defineProps<{
 
 // Icon container classes
 const getIconContainerClasses = () => {
-    return 'flex items-center justify-center w-8 h-8 bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark) rounded mr-4 shrink-0';
+    return 'flex items-center justify-center w-8 h-8 bg-card border border-border rounded mr-4 shrink-0';
 };
 
 // Icon color classes
 const getIconClasses = () => {
-    return 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) text-xs';
+    return 'text-muted-foreground text-xs';
 };
 </script>
 
@@ -51,7 +51,7 @@ const getIconClasses = () => {
 
                         <!-- Content -->
                         <div class="flex-1">
-                            <div class="text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed">
+                            <div class="text-foreground leading-relaxed">
                                 {{ item }}
                             </div>
                         </div>

package/src/components/content/BlogTable.vue

@@ -15,16 +15,16 @@ const props = withDefaults(defineProps<{
 
 // Header cell classes
 const getHeaderClasses = (colIndex: number) => {
-    const baseClasses = 'text-left font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark)' : '';
+    const baseClasses = 'text-left font-semibold text-foreground';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
     return [baseClasses, highlightClass];
 };
 
 // Body cell classes
 const getCellClasses = (colIndex: number) => {
-    const baseClasses = 'align-top text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed whitespace-normal';
-    const firstColClass = colIndex === 0 ? 'font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)' : '';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark)' : '';
+    const baseClasses = 'align-top text-foreground leading-relaxed whitespace-normal';
+    const firstColClass = colIndex === 0 ? 'font-semibold text-muted-foreground' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
@@ -37,7 +37,7 @@ const getCellClasses = (colIndex: number) => {
                     <Table class="w-full text-sm text-left">
                         <!-- Table header -->
                         <TableHeader>
-                            <TableRow class="bg-transparent text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
+                            <TableRow class="bg-transparent text-sm text-muted-foreground hover:bg-transparent">
                                 <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
                                     {{ header }}
                                 </TableHead>
@@ -46,7 +46,7 @@ const getCellClasses = (colIndex: number) => {
 
                         <!-- Table body -->
                         <TableBody>
-                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
+                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-muted-foreground hover:bg-transparent">
                                 <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
                                     {{ cell }}
                                 </TableCell>

package/src/components/content/CodeBlock.vue

@@ -76,12 +76,12 @@ const copyCode = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
+        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
             <!-- Code header -->
             <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
                 <div class="flex min-w-0 items-center gap-2">
-                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
-                    <span class="truncate text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ resolvedTitle }}</span>
+                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-muted-foreground" />
+                    <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
                 </div>
 
                 <!-- Copy code button -->
@@ -98,7 +98,7 @@ const copyCode = async () => {
             </div>
 
             <!-- Code content -->
-            <div v-if="highlightedCode" class="code-block-content overflow-x-auto bg-(--bg-surface-light) dark:bg-(--bg-surface-dark)" v-html="highlightedCode" />
+            <div v-if="highlightedCode" class="code-block-content overflow-x-auto bg-surface" v-html="highlightedCode" />
             <pre v-else class="code-block-content overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code>{{ displayedCode }}</code></pre>
         </Card>
     </div>

package/src/components/content/Flow.vue

@@ -65,7 +65,7 @@ const isVertical = () => {
                         <Card class="flex-1 overflow-hidden md:flex md:items-center">
                             <CardContent class="w-full gap-3 md:justify-center">
                                 <!-- Flow item header -->
-                                <div class="inline-flex items-center gap-3 text-xs font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+                                <div class="inline-flex items-center gap-3 text-xs font-semibold text-foreground">
                                     <!-- Flow item number -->
                                     <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) text-xs font-semibold text-(--text-secondary-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark)">
                                         {{ index + 1 }}
@@ -76,14 +76,14 @@ const isVertical = () => {
                                 </div>
 
                                 <!-- Flow item description -->
-                                <p v-if="getItemDescription(item)" class="text-xs leading-6 text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:leading-5">
+                                <p v-if="getItemDescription(item)" class="text-xs leading-6 text-muted-foreground md:leading-5">
                                     {{ getItemDescription(item) }}
                                 </p>
                             </CardContent>
                         </Card>
 
                         <!-- Flow item separator -->
-                        <div v-if="index < props.items.length - 1" class="flex items-center justify-center text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
+                        <div v-if="index < props.items.length - 1" class="flex items-center justify-center text-muted-foreground">
                             <!-- Flow item separator for vertical orientation -->
                             <HugeiconsIcon v-if="isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0" />
 

package/src/components/content/ProseHr.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<{
             <div class="h-px flex-1 bg-linear-to-r from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
 
             <!-- Icon in the middle -->
-            <div class="flex h-9 w-9 items-center justify-center rounded bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark)">
-                <HugeiconsIcon :icon="props.icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+            <div class="flex h-9 w-9 items-center justify-center rounded bg-card border border-border">
+                <HugeiconsIcon :icon="props.icon" class="size-4 text-muted-foreground" />
             </div>
 
             <!-- Right line -->

package/src/components/content/Terminal.vue

@@ -42,12 +42,12 @@ const copyCommands = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
+        <Card 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-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
                 <div class="flex min-w-0 items-center gap-2">
-                    <HugeiconsIcon :icon="TerminalIcon" class="size-4 shrink-0 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
-                    <span class="truncate text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ resolvedTitle }}</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>
 
                 <!-- Copy command button -->
@@ -64,7 +64,7 @@ const copyCommands = async () => {
             </div>
 
             <!-- Terminal commands -->
-            <pre class="overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) 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-(--text-secondary-light) dark:text-(--text-secondary-dark)" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
+            <pre class="overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) 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-muted-foreground" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
         </Card>
     </div>
 </template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, type HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+import { cn } from '../../lib/utils';
+import { useCookieConsent } from './useCookieConsent';
+
+// Extra attributes go on the banner (the root is the Teleport)
+defineOptions({ inheritAttrs: false });
+
+// Props
+const props = withDefaults(defineProps<{
+    storageKey?: string;
+    message?: string;
+    policyTo?: string;
+    policyLabel?: string;
+    acceptLabel?: string;
+    declineLabel?: string;
+    class?: HTMLAttributes['class'];
+}>(), {
+    storageKey: 'cookieConsent',
+    message: undefined,
+    policyTo: undefined,
+    policyLabel: undefined,
+    acceptLabel: undefined,
+    declineLabel: undefined,
+    class: undefined
+});
+
+// Emits
+const emit = defineEmits<{
+    accept: [];
+    decline: [];
+}>();
+
+const { t } = useI18n();
+const { consent, accept, decline } = useCookieConsent(props.storageKey);
+const hasMounted = ref(false);
+
+// Shown in the browser only, until the visitor chooses (the stored choice is not known on the server)
+const isVisible = computed(() => hasMounted.value && consent.value === null);
+
+// Texts, with translated defaults
+const resolvedMessage = computed(() => props.message || t('uiVintage.cookieConsent.message'));
+const resolvedPolicyLabel = computed(() => props.policyLabel || t('uiVintage.cookieConsent.policy'));
+const resolvedAcceptLabel = computed(() => props.acceptLabel || t('uiVintage.cookieConsent.accept'));
+const resolvedDeclineLabel = computed(() => props.declineLabel || t('uiVintage.cookieConsent.decline'));
+
+// Save the choice and notify
+const handleAccept = () => {
+    accept();
+    emit('accept');
+};
+const handleDecline = () => {
+    decline();
+    emit('decline');
+};
+
+// Wait for the browser before showing the banner
+onMounted(() => {
+    hasMounted.value = true;
+});
+</script>
+
+<template>
+    <!-- Rendered in the body: a transformed or filtered ancestor (page transitions, reveal animations) would otherwise pin the fixed banner to itself instead of the viewport -->
+    <Teleport to="body">
+        <div v-if="isVisible" v-bind="$attrs" data-slot="cookie-consent" role="region" :aria-label="t('uiVintage.cookieConsent.region')" :class="cn('fixed inset-x-4 bottom-4 z-50 sm:left-auto sm:right-4 sm:max-w-md', props.class)">
+            <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>
+                </p>
+                <div class="flex flex-wrap justify-end gap-2">
+                    <Button variant="secondary" size="sm" @click="handleDecline">{{ resolvedDeclineLabel }}</Button>
+                    <Button variant="primary" size="sm" @click="handleAccept">{{ resolvedAcceptLabel }}</Button>
+                </div>
+            </Card>
+        </div>
+    </Teleport>
+</template>

package/src/components/cookie-consent/index.ts

@@ -0,0 +1,3 @@
+export { default } from './CookieConsent.vue';
+export { default as CookieConsent } from './CookieConsent.vue';
+export { useCookieConsent, type CookieConsentValue } from './useCookieConsent';

package/src/components/cookie-consent/useCookieConsent.ts

@@ -0,0 +1,55 @@
+import { ref, type Ref } from 'vue';
+
+// The visitor's choice: 'granted', 'denied' or null (not asked yet)
+export type CookieConsentValue = 'granted' | 'denied' | null;
+
+// One shared state per storage key, so the banner and the code loading the scripts stay in sync (browser only)
+const consentStates = new Map<string, Ref<CookieConsentValue>>();
+
+// Read the stored choice (storage can be unavailable, e.g. blocked in private windows)
+const readStoredConsent = (storageKey: string): CookieConsentValue => {
+    try {
+        const value = localStorage.getItem(storageKey);
+        return value === 'granted' || value === 'denied' ? value : null;
+    } catch {
+        return null;
+    }
+};
+
+// Cookie consent state: gate optional scripts (analytics, ads) on `consent.value === 'granted'` and call `reset()` to ask again
+export const useCookieConsent = (storageKey = 'cookieConsent') => {
+    // On the server there is no stored choice (and no state must be shared between requests)
+    if (typeof window === 'undefined') {
+        const consent = ref<CookieConsentValue>(null);
+        const noop = () => {};
+        return { consent, accept: noop, decline: noop, reset: noop };
+    }
+
+    // Shared state for this key
+    let consent = consentStates.get(storageKey);
+    if (!consent) {
+        consent = ref(readStoredConsent(storageKey));
+        consentStates.set(storageKey, consent);
+    }
+
+    // Save a choice (null removes it, so the banner asks again)
+    const state = consent;
+    const setConsent = (value: CookieConsentValue) => {
+        state.value = value;
+        try {
+            if (value) {
+                localStorage.setItem(storageKey, value);
+            } else {
+                localStorage.removeItem(storageKey);
+            }
+        } catch { }
+    };
+
+    // Return the state and the actions
+    return {
+        consent: state,
+        accept: () => setConsent('granted'),
+        decline: () => setConsent('denied'),
+        reset: () => setConsent(null)
+    };
+};

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

@@ -107,10 +107,10 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
                     <SidebarGroupContent>
                         <SidebarMenu :class="cn('gap-3', props.compact && 'gap-2')">
                             <SidebarMenuItem v-for="item in section.items" :key="item.id">
-                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group h-auto min-h-12 rounded border border-(--border-light) px-3 py-2.5 text-(--text-secondary-light) transition-all duration-200 hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) data-[active=true]:border-(--border-hover-light) data-[active=true]:bg-(--bg-selected-light) data-[active=true]:text-(--text-primary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark) dark:hover:border-(--border-hover-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) dark:data-[active=true]:border-(--border-hover-dark) dark:data-[active=true]:bg-(--bg-selected-dark) dark:data-[active=true]:text-(--text-primary-dark) sm:px-4 sm:py-3', item.description ? 'items-start' : 'items-center')">
+                                <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)">
                                         <!-- Icon -->
-                                        <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-opacity duration-200 group-hover:opacity-100', 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,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')" />
 
                                         <!-- Label and optional description -->
                                         <div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
@@ -146,7 +146,7 @@ const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>
             <BackgroundGrid v-if="props.showBackground" />
 
             <!-- Topbar -->
-            <header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar px-4 backdrop-blur', props.topbarClass)">
+            <header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
                 <!-- Sidebar trigger -->
                 <SidebarTrigger class="-ml-1" />
 

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

@@ -43,19 +43,19 @@ 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-(--text-secondary-light) opacity-40 dark:text-(--text-secondary-dark)">
-                <HugeiconsIcon :icon="props.icon" class="size-10" />
+            <div 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-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
+                class="text-sm font-bold text-foreground md:text-lg">
                 {{ resolvedTitle }}
             </component>
 
             <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

package/src/components/error-page/ErrorPage.vue

@@ -2,6 +2,7 @@
 import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, type HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
 import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
 import { Button } from '../ui/button';
 import { Card, CardContent, CardFooter } from '../ui/card';
@@ -22,10 +23,8 @@ const props = withDefaults(defineProps<{
     footerClass?: HTMLAttributes['class'];
 }>(), {
     statusCode: 500,
-    label: 'Error',
     title: undefined,
     message: undefined,
-    actionLabel: 'Go back',
     showBackground: true,
     showDefaultAction: true,
     class: undefined,
@@ -39,23 +38,26 @@ const emit = defineEmits<{
     action: [];
 }>();
 
-const resolvedStatusCode = computed(() => String(props.statusCode ?? 500));
+const { t } = useI18n();
+const resolvedStatusCode = computed(() => String(props.statusCode || 500));
+const resolvedLabel = computed(() => props.label || t('uiVintage.messageDialog.error'));
+const resolvedActionLabel = computed(() => props.actionLabel || t('uiVintage.buttons.goBack'));
 
-// Resolve the heading copy.
+// Resolve the heading copy
 const resolvedTitle = computed(() => {
     if (props.title) return props.title;
-    if (resolvedStatusCode.value === '404') return 'Page not found';
-    return 'Something went wrong';
+    if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.title');
+    return t('uiVintage.errorPage.unexpected.title');
 });
 
-// Resolve the supporting message.
+// Resolve the supporting message
 const resolvedMessage = computed(() => {
     if (props.message) return props.message;
-    if (resolvedStatusCode.value === '404') return 'The page you requested could not be found or may have been moved.';
-    return 'An unexpected error interrupted the current flow. Please try again or go back to a safe page.';
+    if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.message');
+    return t('uiVintage.errorPage.unexpected.message');
 });
 
-// Emit the default action.
+// Emit the default action
 const handleAction = () => {
     emit('action');
 };
@@ -83,8 +85,8 @@ const handleAction = () => {
                         <!-- Error copy -->
                         <div>
                             <!-- Status code -->
-                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-(--button-primary-light) dark:text-(--button-primary-dark)">
-                                {{ props.label }} {{ resolvedStatusCode }}
+                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-primary">
+                                {{ resolvedLabel }} {{ resolvedStatusCode }}
                             </div>
 
                             <!-- Title -->
@@ -93,7 +95,7 @@ const handleAction = () => {
                             </h1>
 
                             <!-- Message -->
-                            <p class="text-sm leading-7 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-base mt-4">
+                            <p class="text-sm leading-7 text-muted-foreground sm:text-base mt-4">
                                 {{ resolvedMessage }}
                             </p>
                         </div>
@@ -104,7 +106,7 @@ const handleAction = () => {
                         <slot name="actions" :on-action="handleAction">
                             <Button v-if="props.showDefaultAction" variant="primary" @click="handleAction">
                                 <HugeiconsIcon :icon="ArrowLeft01Icon" :stroke-width="1.8" class="size-4" />
-                                {{ props.actionLabel }}
+                                {{ resolvedActionLabel }}
                             </Button>
                         </slot>
                     </CardFooter>

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

@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<{
             <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-(--text-primary-light) dark:text-(--text-primary-dark)">
+                    <span class="text-base font-bold text-foreground">
                         {{ props.title }}
                     </span>
 

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

@@ -47,8 +47,9 @@ const props = withDefaults(defineProps<{
             </div>
         </nav>
 
+        <!-- Progress bar -->
         <div v-if="props.showProgress" class="absolute inset-x-0 bottom-0 translate-y-full">
-            <BlogProgressBar aria-label="Blog reading progress" />
+            <BlogProgressBar />
         </div>
     </header>
 </template>

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

@@ -22,8 +22,8 @@ const emits = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const resolvedText = computed(() => props.text || t('uiVintage.buttons.loadMore') || 'Load more');
-const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.buttons.loading') || 'Loading');
+const resolvedText = computed(() => props.text || t('uiVintage.buttons.loadMore'));
+const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.buttons.loading'));
 
 // Handle click event
 const handleClick = () => {

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

@@ -20,8 +20,8 @@ const props = withDefaults(defineProps<{
 });
 
 const { t } = useI18n();
-const resolvedTitle = computed(() => props.title || t('uiVintage.common.loading.title') || 'Loading...');
-const resolvedDescription = computed(() => props.description || t('uiVintage.common.loading.description') || 'Please wait a moment while we load the content.');
+const resolvedTitle = computed(() => props.title || t('uiVintage.common.loading.title'));
+const resolvedDescription = computed(() => props.description || t('uiVintage.common.loading.description'));
 </script>
 
 <template>
@@ -35,12 +35,12 @@ const resolvedDescription = computed(() => props.description || t('uiVintage.com
             <!-- Title -->
             <component :is="`h${props.level}`"
                 v-if="resolvedTitle"
-                class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
+                class="text-sm font-bold text-foreground md:text-lg">
                 {{ resolvedTitle }}
             </component>
 
             <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

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

@@ -36,11 +36,11 @@ const defaultMessageIcon = computed(() => {
 // Resolved container classes for the message icon
 const messageIconClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return 'border-(--border) bg-(--bg-surface-light) dark:bg-(--bg-surface-dark)';
+    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-(--bg-surface-light) dark:bg-(--bg-surface-dark)';
+    return 'border-(--border) bg-surface';
 });
 
 // Resolved glyph color classes
@@ -70,8 +70,8 @@ const handleOpenChange = (open: boolean) => {
                 <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
                     <!-- Dialog icon -->
                     <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border sm:size-10 sm:self-start" :class="messageIconClasses">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6" :class="messageGlyphClasses" />
-                        <HugeiconsIcon v-else :icon="defaultMessageIcon" :stroke-width="1.8" class="size-6" :class="messageGlyphClasses" />
+                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
+                        <HugeiconsIcon v-else :icon="defaultMessageIcon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
                     </div>
 
                     <!-- Dialog header -->