tio-design-make-experiments 0.0.1

package/src/app/components/design-system/ListItems.tsx

@@ -0,0 +1,234 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function ListItems() {
+  return (
+    <section>
+      <SectionHeader
+        title="List Items"
+        description="Various list item patterns used throughout the application"
+      />
+
+      {/* Session List Items */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Session Grid List Items
+        </p>
+        <div className="space-y-2.5 max-w-3xl">
+          {/* With all 3 counters */}
+          <div className="group/row bg-secondary rounded-md relative">
+            <div className="absolute inset-0 border border-secondary rounded-md pointer-events-none" />
+            <div className="flex items-center gap-2.5 px-5 py-2.5">
+              <div className="flex-1">
+                <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">Test session title</span>
+              </div>
+              <div className="flex items-center gap-5">
+                <div className="flex items-center gap-2.5">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d={svgPaths.p30b87920} fill="var(--chart-1)" />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground w-[15px]">50</span>
+                </div>
+                <div className="flex items-center gap-2.5">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d={svgPaths.p30bab400} fill="var(--chart-2)" />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground w-[15px]">10</span>
+                </div>
+                <div className="flex items-center gap-2.5">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d={svgPaths.p13555100} fill="var(--chart-3)" />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground w-[15px]">1</span>
+                </div>
+                <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground text-right w-[87px]">99 checks total</span>
+              </div>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-secondary rounded-md px-5 py-2.5 | border border-secondary" />
+            </div>
+          </div>
+
+          {/* Only passed */}
+          <div className="group/row bg-secondary rounded-md relative">
+            <div className="absolute inset-0 border border-secondary rounded-md pointer-events-none" />
+            <div className="flex items-center gap-2.5 px-5 py-2.5">
+              <div className="flex-1">
+                <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">All passing session</span>
+              </div>
+              <div className="flex items-center gap-5">
+                <div className="flex items-center gap-2.5">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d={svgPaths.p30b87920} fill="var(--chart-1)" />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground w-[15px]">99</span>
+                </div>
+                <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground text-right w-[87px]">99 checks total</span>
+              </div>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-secondary rounded-md px-5 py-2.5 | border border-secondary" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Splitview Collapsable Items */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Splitview Collapsable Items
+        </p>
+        <div className="space-y-2.5 max-w-2xl">
+          {/* Expanded */}
+          <div className="group/row bg-secondary h-11 rounded-t-lg relative">
+            <div className="flex items-center px-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d="M10 15L4 5H16L10 15Z" fill="var(--muted-foreground)" />
+              </svg>
+              <div className="w-2.5" />
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <circle cx="10" cy="10" r="8" stroke="var(--border)" strokeWidth="4" />
+              </svg>
+              <div className="w-[15px]" />
+              <span className="font-['Source_Sans_3',sans-serif] text-lg text-foreground flex-1 truncate" style={{ fontWeight: 300 }}>
+                https://pageurl.com
+              </span>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-secondary h-11 rounded-t-lg | expanded state" />
+            </div>
+          </div>
+
+          {/* Collapsed */}
+          <div className="group/row bg-secondary h-11 rounded-lg relative">
+            <div className="flex items-center px-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d="M15 10L5 16V4L15 10Z" fill="var(--muted-foreground)" />
+              </svg>
+              <div className="w-2.5" />
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <circle cx="10" cy="10" r="8" stroke="var(--border)" strokeWidth="4" />
+              </svg>
+              <div className="w-[15px]" />
+              <span className="font-['Source_Sans_3',sans-serif] text-lg text-foreground flex-1 truncate" style={{ fontWeight: 300 }}>
+                https://akademija.by/some_super_long_url
+              </span>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-secondary h-11 rounded-lg | collapsed state" />
+            </div>
+          </div>
+
+          {/* With counter */}
+          <div className="group/row bg-secondary h-11 rounded-lg relative">
+            <div className="flex items-center px-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d="M15 10L5 16V4L15 10Z" fill="var(--muted-foreground)" />
+              </svg>
+              <div className="w-2.5" />
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <circle cx="10" cy="10" r="8" stroke="var(--border)" strokeWidth="4" />
+              </svg>
+              <div className="w-[15px]" />
+              <span className="font-['Source_Sans_3',sans-serif] text-lg text-foreground flex-1 truncate" style={{ fontWeight: 300 }}>
+                https://pageurl.com
+              </span>
+              <div className="w-[15px]" />
+              <div className="flex items-center gap-2.5 shrink-0">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d={svgPaths.p3ed72680} fill="var(--muted-foreground)" />
+                </svg>
+                <span className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground">execute checks</span>
+              </div>
+              {/* New marker */}
+              <div className="absolute right-[7px] top-[7px]">
+                <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+                  <circle cx="2.5" cy="2.5" r="2.5" fill="var(--accent)" />
+                </svg>
+              </div>
+            </div>
+            <div className="absolute top-1 right-8 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-secondary h-11 rounded-lg | with new-marker: var(--accent) 5px dot" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Child Items */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Splitview Child Items
+        </p>
+        <div className="max-w-2xl">
+          <div className="bg-secondary h-10 relative">
+            <div className="flex items-center gap-[15px] pl-[50px] pr-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d={svgPaths.p3ed72680} fill="var(--muted-foreground)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground flex-1" style={{ fontWeight: 300 }}>
+                Check title
+              </span>
+              <div className="absolute right-[7px] top-[7px]">
+                <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+                  <circle cx="2.5" cy="2.5" r="2.5" fill="var(--accent)" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div className="bg-background h-px" />
+          <div className="bg-secondary h-10">
+            <div className="flex items-center gap-[15px] pl-[50px] pr-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d={svgPaths.p30b87920} fill="var(--chart-1)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground flex-1" style={{ fontWeight: 300 }}>
+                Another check (passed)
+              </span>
+            </div>
+          </div>
+          <div className="bg-background h-px" />
+          <div className="bg-secondary h-10">
+            <div className="flex items-center gap-[15px] pl-[50px] pr-5 py-2.5 size-full">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                <path d={svgPaths.p30bab400} fill="var(--chart-2)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground flex-1" style={{ fontWeight: 300 }}>
+                Failed check
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Check Steps */}
+      <div>
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Check Step Items
+        </p>
+        <div className="space-y-2.5 max-w-2xl">
+          {["Action", "Another action", "Doing some nice things", "Scroll bottom"].map((step, i) => (
+            <div key={step} className="flex h-10 rounded-lg overflow-hidden">
+              <div className="bg-secondary flex-1 relative">
+                <div className="flex items-center gap-2.5 pl-[60px] pr-2.5 py-2.5 h-full">
+                  <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">{step}</span>
+                  <div className="absolute bg-muted flex items-center justify-center left-0 top-0 rounded-l-lg size-10">
+                    <span className="font-['Source_Sans_3',sans-serif] text-lg text-foreground" style={{ fontWeight: 800 }}>{i + 1}</span>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-secondary flex items-center justify-center rounded-r-lg">
+                <div className="p-2.5 size-10 flex items-center justify-center">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M15 16L5 10L15 4V16Z" fill="var(--muted-foreground)" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/Navigation.tsx

@@ -0,0 +1,344 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { imgLogoTestinator } from "../../../imports/svg-hm2n0";
+import imgProfileDropdown from "figma:asset/6276cd19433d265f363bddc7f52f4937da9b1dd4.png";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+/* ─── Icon helpers ─── */
+function TestIcon({ className = "fill-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path clipRule="evenodd" d={svgPaths.p390b0800} className={className} fillRule="evenodd" />
+    </svg>
+  );
+}
+
+function PlusIcon({ className = "fill-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p185c8f80} className={className} />
+    </svg>
+  );
+}
+
+function CheckCircleFilledIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p30b87920} className="fill-chart-1" />
+    </svg>
+  );
+}
+
+function CrossCircleFilledIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p30bab400} className="fill-destructive" />
+    </svg>
+  );
+}
+
+function BlockedIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p13555100} className="fill-chart-3" />
+    </svg>
+  );
+}
+
+/* ─── Logo component ─── */
+function Logo() {
+  return (
+    <div className="h-[34px] w-[148px] overflow-clip relative shrink-0">
+      <div
+        className="absolute inset-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_0px] mask-size-[148px_34px]"
+        style={{ maskImage: `url('${imgLogoTestinator}')` }}
+      >
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 147.351 34.0003">
+          <path d={svgPaths.pd3f4900} fill="white" />
+          <path d={svgPaths.p2ef9e700} fill="white" />
+          <path d={svgPaths.p1507e900} fill="white" />
+          <path d={svgPaths.p63b5500} fill="white" />
+          <path d={svgPaths.p73e5c00} fill="white" />
+          <path d={svgPaths.p269eee80} fill="white" />
+          <path d={svgPaths.p32f5f900} fill="white" />
+          <path d={svgPaths.p166df900} fill="white" />
+          <path d={svgPaths.p3af52100} fill="white" />
+          <path d={svgPaths.p224ff200} fill="white" />
+          <path d={svgPaths.p29a28100} fill="white" />
+          <path d={svgPaths.p38feaa80} fill="white" />
+          <path d={svgPaths.p1649b700} fill="white" />
+          <path d={svgPaths.p5b04f70} fill="white" />
+          <path d={svgPaths.pafbcd00} fill="white" />
+          <path d={svgPaths.p94ead80} fill="white" />
+          <path d={svgPaths.p3e1a5280} fill="white" />
+          <path d={svgPaths.p288b2800} fill="#7954FF" />
+          <path clipRule="evenodd" d={svgPaths.p1f8b5980} fill="#78EAC1" fillRule="evenodd" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Sub-section label ─── */
+function SubLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-['Source_Sans_3',sans-serif] text-foreground mb-5">
+      {children}
+    </p>
+  );
+}
+
+/* ─── Section title (lighter weight, larger) ─── */
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-['Source_Sans_Pro',sans-serif] text-foreground mb-2.5" style={{ fontWeight: 300, fontSize: 25, lineHeight: "28px" }}>
+      {children}
+    </p>
+  );
+}
+
+/* ════════════════════════════════════════════════════
+   Main export
+   ════════════════════════════════════════════════════ */
+export function Navigation() {
+  return (
+    <section>
+      <SectionHeader
+        title="Navigation"
+        description="Header bar, navlinks, and tab navigation — extracted as CSS component classes in header.css and navlinks.css"
+      />
+
+      {/* ═══════════ HEADER ═══════════ */}
+      <div className="mb-12">
+        <SectionTitle>Header</SectionTitle>
+
+        {/* ── Header: Signed In ── */}
+        <SubLabel>Header when the user is signed in</SubLabel>
+        <div className="group/nav header-bar rounded-xl overflow-hidden relative mb-8">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/nav:opacity-100 transition-opacity z-10">
+            <CopyButton token="header-bar" />
+          </div>
+          <div className="header-wrapper">
+            <Logo />
+            <div className="header-left">
+              <div className="header-left-inner">
+                <div className="header-nav">
+                  <a className="navlink hover:[&_svg_path]:fill-link-hover-foreground">
+                    <div className="flex items-center pr-2 shrink-0">
+                      <PlusIcon className="fill-foreground transition-colors duration-200" />
+                    </div>
+                    <span>New Test Session</span>
+                  </a>
+                  <a className="navlink"><span>Test Sessions</span></a>
+                  <a className="navlink"><span>Check Suites</span></a>
+                </div>
+              </div>
+            </div>
+            <div className="header-right">
+              <div className="header-avatar">
+                <img alt="Profile" src={imgProfileDropdown} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── Header: Not Signed In ── */}
+        <SubLabel>Header when the user is not signed in</SubLabel>
+        <div className="group/nav header-bar rounded-xl overflow-hidden relative">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/nav:opacity-100 transition-opacity z-10">
+            <CopyButton token="header-bar (no-auth)" />
+          </div>
+          <div className="header-wrapper">
+            <Logo />
+            <div className="header-left">
+              <div className="header-left-inner">
+                <div className="header-nav" />
+              </div>
+            </div>
+            <div className="header-right">
+              <a className="navlink-highlight"><span>Sign in</span></a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ═══════════ NAVLINKS ═══════════ */}
+      <div className="mb-12">
+        <SectionTitle>Navlinks</SectionTitle>
+
+        {/* ── Navlinks used in the header ── */}
+        <SubLabel>Navlinks used in the header</SubLabel>
+        <div className="flex flex-wrap gap-2.5 items-start mb-8">
+          {/* Default */}
+          <div className="group/item relative">
+            <div className="navlink pointer-events-none"><span>Nav link</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink" />
+            </div>
+          </div>
+          {/* Active */}
+          <div className="group/item relative">
+            <div className="navlink-active pointer-events-none"><span>Active</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-active" />
+            </div>
+          </div>
+          {/* Hover */}
+          <div className="group/item relative">
+            <div className="navlink bg-link-hover text-link-hover-foreground pointer-events-none"><span>Hover</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink (hover state)" />
+            </div>
+          </div>
+          {/* Active Hover */}
+          <div className="group/item relative">
+            <div className="navlink-active bg-link-hover text-link-hover-foreground pointer-events-none"><span>Active Hover</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-active (hover state)" />
+            </div>
+          </div>
+          {/* Highlight */}
+          <div className="group/item relative">
+            <div className="navlink-highlight pointer-events-none"><span>Highlight</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-highlight" />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Navlinks with icons ── */}
+        <SubLabel>Navlinks with icons</SubLabel>
+        <div className="flex flex-wrap gap-2.5 items-start">
+          {/* Default */}
+          <div className="group/item relative">
+            <div className="navlink pointer-events-none">
+              <div className="flex items-center pr-2 shrink-0"><TestIcon className="fill-foreground" /></div>
+              <span>Nav link</span>
+            </div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink + icon" />
+            </div>
+          </div>
+          {/* Active */}
+          <div className="group/item relative">
+            <div className="navlink-active pointer-events-none">
+              <div className="flex items-center pr-2 shrink-0"><TestIcon className="fill-foreground" /></div>
+              <span>Active</span>
+            </div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-active + icon" />
+            </div>
+          </div>
+          {/* Hover */}
+          <div className="group/item relative">
+            <div className="navlink bg-link-hover text-link-hover-foreground pointer-events-none">
+              <div className="flex items-center pr-2 shrink-0"><TestIcon className="fill-link-hover-foreground" /></div>
+              <span>Hover</span>
+            </div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink (hover) + icon" />
+            </div>
+          </div>
+          {/* Active Hover */}
+          <div className="group/item relative">
+            <div className="navlink-active bg-link-hover text-link-hover-foreground pointer-events-none">
+              <div className="flex items-center pr-2 shrink-0"><TestIcon className="fill-link-hover-foreground" /></div>
+              <span>Active Hover</span>
+            </div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-active (hover) + icon" />
+            </div>
+          </div>
+          {/* Highlight */}
+          <div className="group/item relative">
+            <div className="navlink-highlight pointer-events-none">
+              <div className="flex items-center pr-2 shrink-0"><TestIcon className="fill-primary-foreground" /></div>
+              <span>Highlight</span>
+            </div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".navlink-highlight + icon" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ═══════════ TABNAVIGATION ═══════════ */}
+      <div>
+        <SectionTitle>Tabnavigation</SectionTitle>
+
+        {/* ── Tab navigation ── */}
+        <SubLabel>Tab navigation</SubLabel>
+        <div className="mb-8">
+          <div className="group/tabs relative flex items-center -ml-[15px]">
+            <a className="tablink-active"><span>11 Pages</span></a>
+            <a className="tablink"><span>6 checks</span></a>
+            <div className="absolute -top-1 right-0 opacity-0 group-hover/tabs:opacity-100 transition-opacity">
+              <CopyButton token=".tablink-active | .tablink" />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Tab navigation with metrics ── */}
+        <SubLabel>Tab navigation with metrics</SubLabel>
+        <div className="mb-8">
+          <div className="group/tabs relative flex items-center -ml-[15px]">
+            <a className="tablink-active"><span>11 Pages</span></a>
+            <a className="tablink"><span>6 checks</span></a>
+            <div className="flex-1" />
+            <div className="flex items-center gap-5">
+              <div className="tab-metric">
+                <CheckCircleFilledIcon />
+                <span className="tab-metric-value">50</span>
+              </div>
+              <div className="tab-metric">
+                <CrossCircleFilledIcon />
+                <span className="tab-metric-value">10</span>
+              </div>
+              <div className="tab-metric">
+                <BlockedIcon />
+                <span className="tab-metric-value">1</span>
+              </div>
+            </div>
+            <div className="absolute -top-1 right-0 opacity-0 group-hover/tabs:opacity-100 transition-opacity">
+              <CopyButton token=".tab-metric + .tab-metric-value" />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Tab navigation navlinks ── */}
+        <SubLabel>Tab navigation navlinks</SubLabel>
+        <div className="flex flex-wrap gap-2.5 items-start">
+          {/* Default (muted) */}
+          <div className="group/item relative">
+            <div className="tablink pointer-events-none"><span>Navlink</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".tablink" />
+            </div>
+          </div>
+          {/* Hover (purple + marker) */}
+          <div className="group/item relative">
+            <div className="tablink-active bg-link-hover text-link-hover-foreground pointer-events-none"><span>Hover</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".tablink (hover state)" />
+            </div>
+          </div>
+          {/* Active (white + marker) */}
+          <div className="group/item relative">
+            <div className="tablink-active pointer-events-none"><span>Active</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".tablink-active" />
+            </div>
+          </div>
+          {/* Active Hover (purple + marker) */}
+          <div className="group/item relative">
+            <div className="tablink-active bg-link-hover text-link-hover-foreground pointer-events-none"><span>Active Hover</span></div>
+            <div className="absolute -top-1 -right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".tablink-active (hover state)" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}