fix(tab) :: underline only the active tab

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.

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

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}}"

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;

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);
+});