From 231ed30ceb989b0675a43878ba258f240c246865 Mon Sep 17 00:00:00 2001
From: 81reap <prayag.bhakar@gmail.com>
Date: Thu, 29 Oct 2026 20:59:41 -0400
Subject: [PATCH] fix(tab) :: underline only the active tab

Now colour is properly passed through to theme Tabler's underline on the active tab.

Fixes :: #791

Assisted-By :: Claude Opus 5.5
---
 CHANGELOG.md                                        |  2 ++
 .../official-site/sqlpage/migrations/13_tab.sql     |  2 +-
 sqlpage/templates/tab.handlebars                    |  2 +-
 tests/end-to-end/fixtures/tab/colored/index.sql     |  3 +++
 tests/end-to-end/fixtures/tab/colored/test.ts       | 13 +++++++++++++
 5 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 tests/end-to-end/fixtures/tab/colored/index.sql
 create mode 100644 tests/end-to-end/fixtures/tab/colored/test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index beb9eb9d2..975f5ca4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## unreleased
 
+- Now a tab with a `color` is underlined only when it is active. ([#791](https://github.com/sqlpage/SQLPage/issues/791))
+
 - Shell submenus stay open again when you click inside them. ([#1011](https://github.com/sqlpage/SQLPage/issues/1011))
 
 - Refined the official website with muted blue accents, simpler navigation, a clearer primary action, and a level SQL ribbon with vertical separators, and a grounded studio scene with brushed metal and physical reflections. Restored visible progress in the streaming comparison animation.
diff --git a/examples/official-site/sqlpage/migrations/13_tab.sql b/examples/official-site/sqlpage/migrations/13_tab.sql
index bccbaca21..162386f15 100644
--- a/examples/official-site/sqlpage/migrations/13_tab.sql
+++ b/examples/official-site/sqlpage/migrations/13_tab.sql
@@ -48,7 +48,7 @@ VALUES (
     (
         'tab',
         'color',
-        'Color of the tab. See preview.tabler.io/colors.html for a list of available colors.',
+        'Color of the tab''s text, and of its underline when it is active. See preview.tabler.io/colors.html for a list of available colors.',
         'TEXT',
         FALSE,
         TRUE
diff --git a/sqlpage/templates/tab.handlebars b/sqlpage/templates/tab.handlebars
index eb6980c65..3196ee056 100644
--- a/sqlpage/templates/tab.handlebars
+++ b/sqlpage/templates/tab.handlebars
@@ -5,7 +5,7 @@
             class="nav-link {{#if active~}}
                 active
             {{~/if}} {{#if color~}}
-                text-{{color}} border-{{color}}
+                text-{{color}}{{#if active}} border-{{color}}{{/if}}
             {{~/if}} {{#if center~}}
                 mx-auto
             {{~/if}}"
diff --git a/tests/end-to-end/fixtures/tab/colored/index.sql b/tests/end-to-end/fixtures/tab/colored/index.sql
new file mode 100644
index 000000000..754f7beb1
--- /dev/null
+++ b/tests/end-to-end/fixtures/tab/colored/index.sql
@@ -0,0 +1,3 @@
+SELECT 'tab' AS component;
+SELECT 'Red' AS title, 'red' AS color;
+SELECT 'Green' AS title, 'green' AS color, TRUE AS active;
diff --git a/tests/end-to-end/fixtures/tab/colored/test.ts b/tests/end-to-end/fixtures/tab/colored/test.ts
new file mode 100644
index 000000000..1830b1b8b
--- /dev/null
+++ b/tests/end-to-end/fixtures/tab/colored/test.ts
@@ -0,0 +1,13 @@
+import { expect, test } from "../../../fixture.ts";
+
+test("only the active colored tab is underlined, in its color", async ({
+  page,
+}) => {
+  const inactive = page.getByRole("link", { name: "Red" });
+  const active = page.getByRole("link", { name: "Green" });
+  await expect(inactive).toHaveCSS("border-bottom-color", "rgba(0, 0, 0, 0)");
+  const activeColor = await active.evaluate(
+    (link) => getComputedStyle(link).color,
+  );
+  await expect(active).toHaveCSS("border-bottom-color", activeColor);
+});