0
# Interactive States
1

2
Hover and active state variants for scrollbar components using WebKit pseudoelements.
3

4
## Capabilities
5

6
### Scrollbar Hover States
7

8
Interactive states for when users hover over scrollbar components.
9

10
```css { .api }
11
/**
12
 * Scrollbar thumb hover state - applies color when thumb is hovered
13
 */
14
.scrollbar-hover:scrollbar-thumb-{color} {
15
  &::-webkit-scrollbar-thumb:hover {
16
    --scrollbar-thumb: {color-value};
17
  }
18
}
19

20
/**
21
 * Scrollbar track hover state - applies color when track is hovered
22
 */
23
.scrollbar-track-hover:scrollbar-track-{color} {
24
  &::-webkit-scrollbar-track:hover {
25
    --scrollbar-track: {color-value};
26
  }
27
}
28

29
/**
30
 * Scrollbar corner hover state - applies color when corner is hovered
31
 */
32
.scrollbar-corner-hover:scrollbar-corner-{color} {
33
  &::-webkit-scrollbar-corner:hover {
34
    --scrollbar-corner: {color-value};
35
  }
36
}
37
```
38

39
**Usage Examples:**
40
```html
41
<!-- Thumb changes color on hover -->
42
<div class="scrollbar 
43
            scrollbar-thumb-gray-400 
44
            scrollbar-hover:scrollbar-thumb-gray-600 
45
            overflow-auto h-64">
46
  <div class="h-96">Hover over the scrollbar thumb</div>
47
</div>
48

49
<!-- Track changes color on hover -->
50
<div class="scrollbar 
51
            scrollbar-track-gray-100 
52
            scrollbar-track-hover:scrollbar-track-gray-200 
53
            overflow-auto h-64">
54
  <div class="h-96">Hover over the scrollbar track</div>
55
</div>
56

57
<!-- Corner changes color on hover -->
58
<div class="scrollbar 
59
            scrollbar-corner-gray-100 
60
            scrollbar-corner-hover:scrollbar-corner-gray-300 
61
            overflow-auto h-64 w-64">
62
  <div class="h-96 w-96">Hover over the scrollbar corner</div>
63
</div>
64
```
65

66
### Scrollbar Active States
67

68
Interactive states for when users click/press scrollbar components.
69

70
```css { .api }
71
/**
72
 * Scrollbar thumb active state - applies color when thumb is being clicked/dragged
73
 */
74
.scrollbar-active:scrollbar-thumb-{color} {
75
  &::-webkit-scrollbar-thumb:active {
76
    --scrollbar-thumb: {color-value};
77
  }
78
}
79

80
/**
81
 * Scrollbar track active state - applies color when track is being clicked
82
 */
83
.scrollbar-track-active:scrollbar-track-{color} {
84
  &::-webkit-scrollbar-track:active {
85
    --scrollbar-track: {color-value};
86
  }
87
}
88

89
/* Note: Corners cannot be active, so no corner active variant exists */
90
```
91

92
**Usage Examples:**
93
```html
94
<!-- Thumb changes color when clicked/dragged -->
95
<div class="scrollbar 
96
            scrollbar-thumb-blue-500 
97
            scrollbar-active:scrollbar-thumb-blue-700 
98
            overflow-auto h-64">
99
  <div class="h-96">Click and drag the scrollbar thumb</div>
100
</div>
101

102
<!-- Track changes color when clicked -->
103
<div class="scrollbar 
104
            scrollbar-track-gray-200 
105
            scrollbar-track-active:scrollbar-track-gray-400 
106
            overflow-auto h-64">
107
  <div class="h-96">Click on the scrollbar track</div>
108
</div>
109
```
110

111
### Complete Interactive Examples
112

113
Combine multiple interactive states for comprehensive scrollbar feedback:
114

115
```html
116
<!-- Full interactive thumb -->
117
<div class="scrollbar 
118
            scrollbar-thumb-blue-400 
119
            scrollbar-hover:scrollbar-thumb-blue-500 
120
            scrollbar-active:scrollbar-thumb-blue-700 
121
            overflow-auto h-64">
122
  <div class="h-96">Interactive blue thumb (hover and active states)</div>
123
</div>
124

125
<!-- Full interactive track -->
126
<div class="scrollbar 
127
            scrollbar-track-gray-100 
128
            scrollbar-track-hover:scrollbar-track-gray-200 
129
            scrollbar-track-active:scrollbar-track-gray-300 
130
            overflow-auto h-64">
131
  <div class="h-96">Interactive gray track (hover and active states)</div>
132
</div>
133

134
<!-- Complete interactive scrollbar -->
135
<div class="scrollbar 
136
            scrollbar-track-slate-100 
137
            scrollbar-thumb-slate-400 
138
            scrollbar-corner-slate-50
139
            scrollbar-track-hover:scrollbar-track-slate-200 
140
            scrollbar-hover:scrollbar-thumb-slate-500 
141
            scrollbar-corner-hover:scrollbar-corner-slate-100
142
            scrollbar-track-active:scrollbar-track-slate-300 
143
            scrollbar-active:scrollbar-thumb-slate-600 
144
            overflow-auto h-64 w-64">
145
  <div class="h-96 w-96">Fully interactive scrollbar with all states</div>
146
</div>
147
```
148

149
### Browser Compatibility
150

151
Interactive states are implemented using WebKit pseudoelements and work in:
152

153
- **Safari** (all versions)
154
- **Chrome/Chromium** (all versions)
155
- **Edge** (Chromium-based versions)
156
- **Opera** (Chromium-based versions)
157

158
**Firefox Compatibility:**
159
Firefox does not support interactive scrollbar states as it uses the standards-based `scrollbar-color` property which doesn't support hover/active states. The interactive utilities will be ignored in Firefox, but the base scrollbar colors will still work.
160

161
### Accessibility Considerations
162

163
Interactive states improve scrollbar usability by providing visual feedback:
164

165
#### Hover States
166
- Indicate that the scrollbar component is interactive
167
- Help users distinguish between scrollable and non-scrollable areas
168
- Provide immediate feedback when hovering over scrollbar elements
169

170
#### Active States
171
- Confirm user interaction with scrollbar components
172
- Provide feedback during drag operations
173
- Help users understand they are successfully interacting with the scrollbar
174

175
**Best Practices:**
176
```html
177
<!-- Good: Clear visual hierarchy -->
178
<div class="scrollbar 
179
            scrollbar-thumb-gray-300 
180
            scrollbar-hover:scrollbar-thumb-gray-400 
181
            scrollbar-active:scrollbar-thumb-gray-600">
182
  <!-- Subtle base color, medium hover, dark active -->
183
</div>
184

185
<!-- Good: Consistent color progression -->
186
<div class="scrollbar 
187
            scrollbar-thumb-blue-400 
188
            scrollbar-hover:scrollbar-thumb-blue-500 
189
            scrollbar-active:scrollbar-thumb-blue-600">
190
  <!-- Logical color progression: light → medium → dark -->
191
</div>
192
```
193

194
### Advanced Interactive Patterns
195

196
#### Themed Interactive States
197
```html
198
<!-- Green theme with interactive states -->
199
<div class="scrollbar 
200
            scrollbar-track-green-50 
201
            scrollbar-thumb-green-400 
202
            scrollbar-corner-green-25
203
            scrollbar-track-hover:scrollbar-track-green-100 
204
            scrollbar-hover:scrollbar-thumb-green-500 
205
            scrollbar-corner-hover:scrollbar-corner-green-50
206
            scrollbar-track-active:scrollbar-track-green-150 
207
            scrollbar-active:scrollbar-thumb-green-600">
208
  <div class="h-96">Green themed interactive scrollbar</div>
209
</div>
210
```
211

212
#### Dark Mode Interactive States
213
```html
214
<!-- Dark mode with interactive states -->
215
<div class="scrollbar 
216
            scrollbar-track-gray-700 
217
            scrollbar-thumb-gray-500 
218
            scrollbar-corner-gray-800
219
            scrollbar-track-hover:scrollbar-track-gray-600 
220
            scrollbar-hover:scrollbar-thumb-gray-400 
221
            scrollbar-corner-hover:scrollbar-corner-gray-700
222
            scrollbar-track-active:scrollbar-track-gray-500 
223
            scrollbar-active:scrollbar-thumb-gray-300
224
            dark:scrollbar-track-gray-800 
225
            dark:scrollbar-thumb-gray-600 
226
            dark:scrollbar-corner-gray-900
227
            dark:scrollbar-track-hover:scrollbar-track-gray-700 
228
            dark:scrollbar-hover:scrollbar-thumb-gray-500 
229
            dark:scrollbar-corner-hover:scrollbar-corner-gray-800
230
            dark:scrollbar-track-active:scrollbar-track-gray-600 
231
            dark:scrollbar-active:scrollbar-thumb-gray-400">
232
  <div class="h-96">Dark mode interactive scrollbar</div>
233
</div>
234
```
235

236
#### High Contrast Interactive States
237
```html
238
<!-- High contrast for accessibility -->
239
<div class="scrollbar 
240
            scrollbar-track-white 
241
            scrollbar-thumb-gray-800 
242
            scrollbar-corner-gray-100
243
            scrollbar-track-hover:scrollbar-track-gray-50 
244
            scrollbar-hover:scrollbar-thumb-black 
245
            scrollbar-corner-hover:scrollbar-corner-gray-200
246
            scrollbar-track-active:scrollbar-track-gray-100 
247
            scrollbar-active:scrollbar-thumb-gray-900">
248
  <div class="h-96">High contrast interactive scrollbar</div>
249
</div>
250
```
251

252
### Responsive Interactive States
253

254
Interactive states work with Tailwind's responsive system:
255

256
```html
257
<!-- Different interactive states on different screen sizes -->
258
<div class="scrollbar 
259
            scrollbar-thumb-blue-400 
260
            scrollbar-hover:scrollbar-thumb-blue-500 
261
            md:scrollbar-hover:scrollbar-thumb-green-500 
262
            lg:scrollbar-hover:scrollbar-thumb-purple-500 
263
            scrollbar-active:scrollbar-thumb-blue-700 
264
            md:scrollbar-active:scrollbar-thumb-green-700 
265
            lg:scrollbar-active:scrollbar-thumb-purple-700">
266
  <div class="h-96">Responsive interactive states</div>
267
</div>
268
```
269

270
### Implementation Details
271

272
The plugin generates these variants using Tailwind's `addVariant` function:
273

274
```javascript
275
// Internal plugin implementation
276
addVariant('scrollbar-hover', '&::-webkit-scrollbar-thumb:hover');
277
addVariant('scrollbar-track-hover', '&::-webkit-scrollbar-track:hover');
278
addVariant('scrollbar-corner-hover', '&::-webkit-scrollbar-corner:hover');
279
addVariant('scrollbar-active', '&::-webkit-scrollbar-thumb:active');
280
addVariant('scrollbar-track-active', '&::-webkit-scrollbar-track:active');
281
```
282

283
This ensures that interactive state utilities integrate seamlessly with Tailwind's variant system and can be combined with other utilities and modifiers.