1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* Tabs
Follows the real WAI-ARIA tabs pattern: a `[role="tablist"]` of
`[role="tab"]` buttons controlling `[role="tabpanel"]`s. Those roles are
required for the pattern to be accessible in the first place, so they
double as the entire styling contract — no classes at all for the base
shape. The keyboard wiring lives in assets/js/system.js and is
variant-agnostic — it only cares about `[data-tabs]` / `[role=tab]`.
Two real variants: `underline` (mono labels over a hairline, the selected
one marked by a short accent bar — primary section nav, the default) and
`segmented` (pill track, active segment lifts to the surface — filters
like All · Overdue · Upcoming, never primary navigation), chosen with `data-variant="segmented"` on the tablist since
neither has a natural attribute of its own. */
/* Every rule below the list container pairs [role="tablist"] with
[role="tab"] rather than styling [role="tab"] alone — Tab buttons are
still literal <button> elements, so the compound selector's extra
specificity is what keeps Button's base styling (button.css) from
winning the cascade on shared properties like padding and background. */
[role="tablist"] {
display: flex;
gap: var(--gl-space-3xs);
border-bottom: var(--gl-border-w) solid var(--gl-color-border-hairline);
}
/* Underline. Mono labels standing on the hairline, with a 2px accent bar
drawn over the hairline under the selected label. Hover fills the tab
with surface-fill-2, squared off at the bottom so it reads as a tab
standing on the line rather than a floating pill. It is one step darker
than the surface-fill a quiet Button uses, because at ~1.1:1 that one
all but vanished on the card; hover also darkens the label to
text-primary. The bar is a pseudo-element, not a border, so it lies flat
instead of inheriting the button's radius and curling up at the ends.
Scoped away from segmented, which shares the element but none of this
shape. */
[role="tablist"]:not([data-variant="segmented"]) [role="tab"] {
position: relative;
padding: var(--gl-space-3xs) var(--gl-space-2xs);
background: none;
border: 0;
border-radius: var(--gl-radius-sm) var(--gl-radius-sm) 0 0;
color: var(--gl-color-text-secondary);
font-family: var(--gl-font-mono);
font-size: var(--gl-step--1);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.15;
cursor: pointer;
transition: background-color var(--gl-dur-fast) var(--gl-ease), color var(--gl-dur-fast) var(--gl-ease);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"]::after {
content: "";
position: absolute;
inset-inline: var(--gl-space-2xs);
bottom: calc(-1 * var(--gl-border-w));
height: 2px;
background: transparent;
transition: background-color var(--gl-dur-fast) var(--gl-ease);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"]:hover {
background: var(--gl-color-surface-fill-2);
color: var(--gl-color-text-primary);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"][aria-selected="true"] {
color: var(--gl-color-text-primary);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"][aria-selected="true"]::after {
background: var(--gl-color-accent);
}
[role="tablist"][data-variant="segmented"] {
display: inline-flex;
gap: 0.125rem;
padding: 0.1875rem;
border-bottom: 0;
background: var(--gl-color-surface-fill);
border-radius: var(--gl-radius-md);
}
[role="tablist"][data-variant="segmented"] [role="tab"] {
all: unset;
cursor: pointer;
padding: 0.375rem 0.875rem;
border-radius: var(--gl-radius-sm);
font-family: var(--gl-font-sans);
font-size: var(--gl-step--1);
font-weight: 550;
color: var(--gl-color-text-secondary);
transition: background-color var(--gl-dur-fast) var(--gl-ease), color var(--gl-dur-fast) var(--gl-ease);
}
[role="tablist"][data-variant="segmented"] [role="tab"]:hover { color: var(--gl-color-text-primary); }
[role="tablist"][data-variant="segmented"] [role="tab"][aria-selected="true"] {
color: var(--gl-color-text-primary);
background: var(--gl-color-surface-card);
box-shadow: var(--gl-shadow-sm);
}
[role="tabpanel"] { padding-top: var(--gl-space-s); }
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"]:focus-visible { outline-offset: 4px; }