@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/components/content/CodeBlock.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { CheckmarkCircle02Icon, Copy01Icon, CodeIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { codeToHtml } from 'shiki';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Button } from '../ui/button';
-import { Card } from '../ui/card';
 
 type CodeLanguage = string;
 
@@ -27,15 +25,31 @@ const copied = ref(false);
 const highlightedCode = ref('');
 let highlightRequest = 0;
 const resolvedTitle = computed(() => props.title || t('uiVintage.code.title'));
+const languageLabels: Record<string, string> = {
+    js: 'JavaScript',
+    javascript: 'JavaScript',
+    ts: 'TypeScript',
+    typescript: 'TypeScript',
+    vue: 'Vue',
+    html: 'HTML',
+    css: 'CSS',
+    json: 'JSON',
+    md: 'Markdown',
+    markdown: 'Markdown',
+    yaml: 'YAML',
+    yml: 'YAML',
+};
+const languageLabel = computed(() => props.language === 'text' ? t('uiVintage.code.plainText') : languageLabels[props.language] || props.language);
 const displayedCode = computed(() => {
-    if (props.language !== 'json') return props.code;
+    if (props.language !== 'json') return props.code.replace(/\n$/, '');
 
     try {
         return JSON.stringify(JSON.parse(props.code), null, 2);
     } catch {
-        return props.code;
+        return props.code.replace(/\n$/, '');
     }
 });
+const codeLines = computed(() => displayedCode.value.split(/\r?\n/));
 
 // Highlight code in the library so all consumers share the same rendering behavior.
 const highlightCode = async () => {
@@ -45,9 +59,12 @@ const highlightCode = async () => {
     if (!displayedCode.value || props.language === 'text') return;
 
     try {
+        // Load the highlighter only when a code block is rendered, so pages without code never download it
+        const { codeToHtml } = await import('shiki');
         const html = await codeToHtml(displayedCode.value, {
             lang: props.language,
-            theme: 'github-dark'
+            themes: { light: 'github-light', dark: 'github-dark' },
+            defaultColor: false
         });
 
         if (requestId === highlightRequest) {
@@ -76,31 +93,59 @@ 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-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-muted-foreground" />
-                    <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
-                </div>
+        <div data-aos="blur-up" data-code-window 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 truncate text-center text-xs text-muted-foreground">{{ resolvedTitle }}</div>
 
                 <!-- Copy code button -->
                 <Button v-if="props.copyable"
                     variant="ghost"
                     size="icon"
-                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
-                    :aria-label="t('uiVintage.code.copy')"
-                    :title="t('uiVintage.code.copy')"
+                    class="ml-auto size-6 text-muted-foreground hover:bg-accent hover:text-foreground"
+                    :aria-label="copied ? t('uiVintage.code.copied') : t('uiVintage.code.copy')"
+                    :title="copied ? t('uiVintage.code.copied') : t('uiVintage.code.copy')"
                     :disabled="!displayedCode"
                     @click="copyCode">
-                    <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.code.copied') : '' }}</span>
+            </div>
+
+            <!-- Editor tabs -->
+            <div class="flex h-9 items-stretch border-b border-border bg-surface">
+                <!-- Active tab -->
+                <div class="flex min-w-0 items-center gap-2 -mb-px border-r border-border border-t-2 border-t-primary bg-card px-3 text-foreground">
+                    <HugeiconsIcon :icon="CodeIcon" class="size-3.5 shrink-0 text-primary" />
+                    <span class="truncate text-xs">{{ resolvedTitle }}</span>
+                </div>
             </div>
 
             <!-- Code content -->
-            <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 v-if="highlightedCode" class="code-block-content uv-code-block-content overflow-x-auto" v-html="highlightedCode" />
+            <div v-else class="code-block-content overflow-x-auto">
+                <pre><code><template v-for="(line, index) in codeLines" :key="index"><span class="line">{{ line }}</span>{{ index < codeLines.length - 1 ? '\n' : '' }}</template></code></pre>
+            </div>
+
+            <!-- Status bar -->
+            <div class="flex h-6 items-center justify-between gap-3 border-t border-border bg-surface px-3 text-[11px] text-muted-foreground">
+                <span class="truncate">{{ t('uiVintage.code.position', { line: codeLines.length, column: 1 }) }}</span>
+                <span class="flex shrink-0 items-center gap-3">
+                    <span>UTF-8</span>
+                    <span>{{ languageLabel }}</span>
+                </span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -108,15 +153,44 @@ const copyCode = async () => {
 .code-block-content :deep(pre) {
     margin: 0;
     min-width: max-content;
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 1rem 0.75rem 0;
+    background-color: transparent !important;
+    color: var(--foreground);
     font-size: 0.75rem;
     line-height: 1.5rem;
+    counter-reset: line;
+}
+
+/* Line numbers in the editor gutter */
+.code-block-content :deep(.line)::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 2.75rem;
+    margin-right: 1rem;
+    padding-right: 0.25rem;
+    text-align: right;
+    color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
+    user-select: none;
 }
 
 @media (min-width: 640px) {
     .code-block-content :deep(pre) {
-        padding: 1rem 1.25rem;
+        padding: 1rem 1.25rem 1rem 0;
         font-size: 0.875rem;
     }
 }
-</style>
+</style>
+
+<style>
+/* Shiki emits both themes as CSS variables; pick the one matching the library's `.dark` class and drop Nuxt Content's per-token backgrounds */
+.uv-code-block-content .shiki span {
+    color: var(--shiki-light);
+    background-color: transparent;
+}
+
+.dark .uv-code-block-content .shiki span {
+    color: var(--shiki-dark);
+    background-color: transparent;
+}
+</style>

package/src/components/content/Flow.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ArrowDown01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
 
 type FlowItem = string | {
@@ -38,11 +36,16 @@ const getItemDescription = (item: FlowItem) => {
 const isVertical = () => {
     return props.orientation === 'vertical';
 };
+
+// Format the step number with a leading zero
+const formatNumber = (index: number) => {
+    return String(index + 1).padStart(2, '0');
+};
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
+        <Card data-aos="blur-up">
             <!-- Card header -->
             <CardHeader v-if="props.title || props.description">
                 <!-- Card title -->
@@ -58,42 +61,33 @@ const isVertical = () => {
 
             <!-- Card content -->
             <CardContent>
-                <div :class="[isVertical() ? 'flex flex-col gap-3' : 'flex flex-col gap-3 md:flex-row md:items-stretch']">
-                    <!-- Flow items -->
-                    <template v-for="(item, index) in props.items" :key="`${getItemLabel(item)}-${index}`">
-                        <!-- Flow item -->
-                        <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-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 }}
-                                    </span>
-
-                                    <!-- Flow item label -->
-                                    <span>{{ getItemLabel(item) }}</span>
-                                </div>
-
-                                <!-- Flow item description -->
-                                <p v-if="getItemDescription(item)" class="text-xs leading-6 text-muted-foreground md:leading-5">
-                                    {{ getItemDescription(item) }}
-                                </p>
-                            </CardContent>
-                        </Card>
+                <ol :class="['flex flex-col', !isVertical() && 'md:flex-row md:gap-4']">
+                    <!-- Flow step -->
+                    <li v-for="(item, index) in props.items"
+                        :key="`${getItemLabel(item)}-${index}`"
+                        data-aos="blur-up"
+                        :data-aos-delay="100 + index * 90"
+                        :class="['relative flex gap-4 pb-6 last:pb-0', !isVertical() && 'md:flex-1 md:flex-col md:gap-3 md:pb-0']">
+                        <!-- Step number -->
+                        <span class="relative z-10 flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 bg-card text-[11px] font-semibold tabular-nums text-primary">
+                            {{ formatNumber(index) }}
+                        </span>
 
-                        <!-- Flow item separator -->
-                        <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" />
+                        <!-- Connector to the next step -->
+                        <span v-if="index < props.items.length - 1"
+                            aria-hidden="true"
+                            :class="['absolute top-8 bottom-1 left-3.5 w-px bg-border', !isVertical() && 'md:top-3.5 md:bottom-auto md:left-10 md:-right-2 md:h-px md:w-auto md:bg-linear-to-r md:from-primary/40 md:to-border']" />
 
-                            <!-- Flow item separator for horizontal orientation -->
-                            <HugeiconsIcon v-else :icon="ArrowRight01Icon" class="hidden size-5 shrink-0 md:block" />
-                            <HugeiconsIcon v-if="!isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0 md:hidden" />
+                        <!-- Step text -->
+                        <div :class="['flex min-w-0 flex-col gap-1 pt-1', !isVertical() && 'md:pt-0']">
+                            <span class="text-xs font-semibold leading-5 text-foreground md:text-sm">{{ getItemLabel(item) }}</span>
+                            <p v-if="getItemDescription(item)" class="text-xs leading-5 text-muted-foreground">
+                                {{ getItemDescription(item) }}
+                            </p>
                         </div>
-                    </template>
-                </div>
+                    </li>
+                </ol>
             </CardContent>
         </Card>
     </div>
-</template>
+</template>

package/src/components/content/ProseHr.vue

@@ -12,18 +12,18 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div aria-hidden="true" class="not-prose my-6 sm:my-12">
+    <div aria-hidden="true" data-aos="blur-up" class="not-prose my-8 sm:my-14">
         <div class="flex items-center gap-3 sm:gap-4">
             <!-- Left line -->
-            <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)" />
+            <div class="h-px flex-1 bg-linear-to-r from-transparent via-border to-primary/40" />
 
             <!-- Icon in the middle -->
-            <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 class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 bg-card text-primary">
+                <HugeiconsIcon :icon="props.icon" class="size-3.5" />
             </div>
 
             <!-- Right line -->
-            <div class="h-px flex-1 bg-linear-to-l from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
+            <div class="h-px flex-1 bg-linear-to-l from-transparent via-border to-primary/40" />
         </div>
     </div>
-</template>
+</template>

package/src/components/content/ProsePre.vue

@@ -3,13 +3,18 @@ import { computed } from 'vue';
 import CodeBlock from './CodeBlock.vue';
 import Terminal from './Terminal.vue';
 
+// Nuxt Content passes `shiki` classes; keep them off Terminal and CodeBlock, whose utilities the unlayered `.shiki span` styles override
+defineOptions({ inheritAttrs: false });
+
 // Props
 const props = withDefaults(defineProps<{
     code?: string;
     language?: string;
+    filename?: string;
 }>(), {
     code: '',
-    language: ''
+    language: '',
+    filename: ''
 });
 
 const normalizedLanguage = computed(() => props.language.toLowerCase());
@@ -19,11 +24,11 @@ const commands = computed(() => props.code.replace(/\n$/, '').split(/\r?\n/));
 
 <template>
     <!-- Terminal value -->
-    <Terminal v-if="isShellBlock" :commands="commands" />
+    <Terminal v-if="isShellBlock" :commands="commands" :title="props.filename" />
 
     <!-- Code block -->
-    <CodeBlock v-else-if="normalizedLanguage" :code="props.code" :language="normalizedLanguage" />
+    <CodeBlock v-else-if="normalizedLanguage" :code="props.code" :language="normalizedLanguage" :title="props.filename" />
 
     <!-- Fallback pre block -->
-    <pre v-else><slot /></pre>
+    <pre v-else v-bind="$attrs"><slot /></pre>
 </template>

package/src/components/content/Terminal.vue

@@ -4,7 +4,6 @@ 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,29 +41,58 @@ 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-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-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-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
-                    :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-(--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>
+            <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

@@ -43,14 +43,14 @@ const resolvedDescription = computed(() => props.description
     <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
         <CardContent class="flex flex-col items-center justify-center p-0! text-center">
             <!-- Icon -->
-            <div class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
+            <div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
                 <HugeiconsIcon :icon="props.icon" class="size-10 animate-uv-float" />
             </div>
 
             <!-- Title -->
             <component :is="`h${props.level}`"
                 v-if="resolvedTitle"
-                class="text-sm font-bold text-foreground md:text-lg">
+                class="text-sm font-semibold text-foreground md:text-base">
                 {{ resolvedTitle }}
             </component>
 

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

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

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

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