From 64b7a106db68a67bdcb39d98d5518a660f2bf7ac Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 18 Jul 2026 07:45:15 +0300
Subject: [PATCH] feat(ui): accent underline indicator for properties tabs

- Selected Design/Code/AI tab now shows an accent underline instead of
  only a weight/color change, giving a clear active affordance
- Normalize tab text to 11px to match the panel type scale
---
 src/components/PropertiesPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index ffe7a0ad7..3ccd96c32 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -24,14 +24,14 @@ const { panels } = useI18n()
         <TabsTrigger
           value="design"
           data-test-id="properties-tab-design"
-          class="rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
+          class="relative rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
         >
           {{ panels.design }}
         </TabsTrigger>
         <TabsTrigger
           value="code"
           data-test-id="properties-tab-code"
-          class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
+          class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
         >
           <icon-lucide-code class="size-3" />
           {{ panels.code }}
@@ -39,7 +39,7 @@ const { panels } = useI18n()
         <TabsTrigger
           value="ai"
           data-test-id="properties-tab-ai"
-          class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
+          class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
         >
           <icon-lucide-sparkles class="size-3" />
           {{ panels.ai }}