@vvedantb/ui 0.39.0 → 0.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/package.json +4 -3
  2. package/src/ai-elements/__snapshots__/queue.test.tsx.snap +3 -3
  3. package/src/ai-elements/activity-shared.tsx +1 -103
  4. package/src/ai-elements/activity-step-label.ts +1 -1
  5. package/src/ai-elements/activity-step-types.ts +107 -0
  6. package/src/ai-elements/activity-tasks-utils.ts +1 -1
  7. package/src/ai-elements/queue.tsx +1 -1
  8. package/src/ai-elements/trace.tsx +3 -2
  9. package/src/icons/nav-icon-base.tsx +1 -1
  10. package/src/ui/__snapshots__/alt-wrappers.test.tsx.snap +3 -3
  11. package/src/ui/__snapshots__/sonner-dom.test.tsx.snap +1 -1
  12. package/src/ui/button.tsx +1 -1
  13. package/src/ui/clear-input.tsx +1 -1
  14. package/src/ui/command.tsx +1 -1
  15. package/src/ui/input.tsx +1 -1
  16. package/src/ui/search-input.tsx +1 -1
  17. package/src/ui/select.tsx +1 -1
  18. package/src/ui/sonner.tsx +11 -0
  19. package/src/ui/textarea.tsx +1 -1
  20. package/tokens/src/css/base.css +23 -0
  21. package/tokens/src/css/markdown.css +4 -2
  22. package/tokens/src/css/marquee.css +8 -5
  23. package/tokens/src/css/nav-icons.css +121 -152
  24. package/tokens/src/css/scrollbar-thin.css +17 -13
  25. package/tokens/src/css/tabs-pills.css +9 -7
  26. package/tokens/src/css/tabs.css +5 -1
  27. package/tokens/src/css/utilities.css +2 -2
  28. package/tokens/src/tokens.css +8 -6
package/tokens/src/css/markdown.css CHANGED
@@ -181,8 +181,10 @@
181
181
  text-underline-offset: 0.2em;
182
182
  transition: text-decoration-color var(--motion-fast, 150ms) ease-out;
183
183
  }
184
- .markdown-link:hover {
185
- text-decoration-color: currentColor;
184
+ @media (hover: hover) and (pointer: fine) {
185
+ .markdown-link:hover {
186
+ text-decoration-color: currentColor;
187
+ }
186
188
  }
187
189
  .markdown-link-icon {
188
190
  display: inline-block;
package/tokens/src/css/marquee.css CHANGED
@@ -35,9 +35,12 @@
35
35
  will-change: transform;
36
36
  }
37
37
 
38
- .mq-host[data-mq-overflow="true"]:hover .mq-inner,
39
- .group:hover .mq-host[data-mq-overflow="true"] .mq-inner {
40
- max-width: none; /* let the text spill to its full width; the host clips it */
41
- transform: translateX(calc(-1 * var(--mq-shift, 0px)));
42
- transition: transform var(--mq-dur, 0s) linear var(--mq-delay, 400ms);
38
+ /* Fine pointers only: on touch a tap leaves :hover stuck and the text scrolled. */
39
+ @media (hover: hover) and (pointer: fine) {
40
+ .mq-host[data-mq-overflow="true"]:hover .mq-inner,
41
+ .group:hover .mq-host[data-mq-overflow="true"] .mq-inner {
42
+ max-width: none; /* let the text spill to its full width; the host clips it */
43
+ transform: translateX(calc(-1 * var(--mq-shift, 0px)));
44
+ transition: transform var(--mq-dur, 0s) linear var(--mq-delay, 400ms);
45
+ }
43
46
  }
package/tokens/src/css/nav-icons.css CHANGED
@@ -5,7 +5,8 @@
5
5
  * @import "@vvedantb/ui/tokens/css/nav-icons.css";
6
6
  *
7
7
  * Every icon is an `svg.vv-icon` with:
8
- * data-animate="hover" animate while an ancestor with the `group` class is hovered (default)
8
+ * data-animate="hover" animate while an ancestor with the `group` class is hovered (default;
9
+ * fine pointers only, so a tap on a phone does not leave it running)
9
10
  * data-animate="true" animate all the time
10
11
  * data-animate="false" never animate, no hover scale
11
12
  * data-hover-scale root scale on group hover: "1.15" (spring) or "1.12" (ease out)
@@ -29,11 +30,28 @@
29
30
  .vv-icon[data-hover-scale="1.12"] {
30
31
  transition: transform 0.25s var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
31
32
  }
32
- .group:hover .vv-icon[data-hover-scale="1.15"]:not([data-animate="false"]) {
33
- transform: scale(1.15);
33
+ @media (hover: hover) and (pointer: fine) {
34
+ .group:hover .vv-icon[data-hover-scale="1.15"]:not([data-animate="false"]) {
35
+ transform: scale(1.15);
36
+ }
37
+ .group:hover .vv-icon[data-hover-scale="1.12"]:not([data-animate="false"]) {
38
+ transform: scale(1.12);
39
+ }
40
+ }
41
+
42
+ /* ── Parts: each shape sets --vv-icon-animation; these rules run it. Hover runs
43
+ * only on a fine pointer: on touch a tap leaves :hover stuck. */
44
+ @property --vv-icon-animation {
45
+ syntax: "*";
46
+ inherits: false;
47
+ }
48
+ .vv-icon[data-animate="true"] [class*="vv-icon-"] {
49
+ animation: var(--vv-icon-animation, none);
34
50
  }
35
- .group:hover .vv-icon[data-hover-scale="1.12"]:not([data-animate="false"]) {
36
- transform: scale(1.12);
51
+ @media (hover: hover) and (pointer: fine) {
52
+ .group:hover .vv-icon[data-animate="hover"] [class*="vv-icon-"] {
53
+ animation: var(--vv-icon-animation, none);
54
+ }
37
55
  }
38
56
 
39
57
  /* ── SVG transforms need an explicit box and origin */
@@ -108,13 +126,11 @@
108
126
  opacity: 0;
109
127
  }
110
128
  }
111
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-memory-core,
112
- .vv-icon[data-animate="true"] .vv-icon-memory-core {
113
- animation: vv-icon-memory-core calc(1s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
129
+ .vv-icon .vv-icon-memory-core {
130
+ --vv-icon-animation: vv-icon-memory-core calc(1s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
114
131
  }
115
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-memory-ring,
116
- .vv-icon[data-animate="true"] .vv-icon-memory-ring {
117
- animation: vv-icon-memory-ring calc(1s * var(--vv-icon-duration-scale, 1)) ease-out infinite;
132
+ .vv-icon .vv-icon-memory-ring {
133
+ --vv-icon-animation: vv-icon-memory-ring calc(1s * var(--vv-icon-duration-scale, 1)) ease-out infinite;
118
134
  }
119
135
 
120
136
  /* ── BuildingIcon: windows blink in turn */
@@ -132,23 +148,19 @@
132
148
  opacity: 1;
133
149
  }
134
150
  }
135
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-building-window-1,
136
- .vv-icon[data-animate="true"] .vv-icon-building-window-1 {
137
- animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
151
+ .vv-icon .vv-icon-building-window-1 {
152
+ --vv-icon-animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
138
153
  }
139
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-building-window-2,
140
- .vv-icon[data-animate="true"] .vv-icon-building-window-2 {
141
- animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
154
+ .vv-icon .vv-icon-building-window-2 {
155
+ --vv-icon-animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
142
156
  calc(0.18s * var(--vv-icon-duration-scale, 1)) infinite;
143
157
  }
144
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-building-window-3,
145
- .vv-icon[data-animate="true"] .vv-icon-building-window-3 {
146
- animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
158
+ .vv-icon .vv-icon-building-window-3 {
159
+ --vv-icon-animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
147
160
  calc(0.36s * var(--vv-icon-duration-scale, 1)) infinite;
148
161
  }
149
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-building-window-4,
150
- .vv-icon[data-animate="true"] .vv-icon-building-window-4 {
151
- animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
162
+ .vv-icon .vv-icon-building-window-4 {
163
+ --vv-icon-animation: vv-icon-building-window-blink calc(1.6s * var(--vv-icon-duration-scale, 1)) ease-in-out
152
164
  calc(0.54s * var(--vv-icon-duration-scale, 1)) infinite;
153
165
  }
154
166
 
@@ -162,9 +174,8 @@
162
174
  transform: translate(2.5px, -2.5px);
163
175
  }
164
176
  }
165
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-files-back,
166
- .vv-icon[data-animate="true"] .vv-icon-files-back {
167
- animation: vv-icon-files-slide calc(1.4s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
177
+ .vv-icon .vv-icon-files-back {
178
+ --vv-icon-animation: vv-icon-files-slide calc(1.4s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
168
179
  }
169
180
 
170
181
  /* ── BoltIcon: flashes big then settles */
@@ -180,9 +191,8 @@
180
191
  transform: scale(0.94);
181
192
  }
182
193
  }
183
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-bolt,
184
- .vv-icon[data-animate="true"] .vv-icon-bolt {
185
- animation: vv-icon-bolt-flash calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
194
+ .vv-icon .vv-icon-bolt {
195
+ --vv-icon-animation: vv-icon-bolt-flash calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
186
196
  }
187
197
 
188
198
  /* ── InboxIcon: letter drops into the tray */
@@ -206,9 +216,8 @@
206
216
  opacity: 0;
207
217
  }
208
218
  }
209
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-inbox-letter,
210
- .vv-icon[data-animate="true"] .vv-icon-inbox-letter {
211
- animation: vv-icon-inbox-drop calc(1.3s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
219
+ .vv-icon .vv-icon-inbox-letter {
220
+ --vv-icon-animation: vv-icon-inbox-drop calc(1.3s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
212
221
  }
213
222
 
214
223
  /* ── SettingsIcon (default variant="spin"): continuous spin */
@@ -217,9 +226,8 @@
217
226
  transform: rotate(360deg);
218
227
  }
219
228
  }
220
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-gear,
221
- .vv-icon[data-animate="true"] .vv-icon-gear {
222
- animation: vv-icon-gear-spin calc(2.5s * var(--vv-icon-duration-scale, 1)) linear infinite;
229
+ .vv-icon .vv-icon-gear {
230
+ --vv-icon-animation: vv-icon-gear-spin calc(2.5s * var(--vv-icon-duration-scale, 1)) linear infinite;
223
231
  }
224
232
 
225
233
  /* ── SettingsIcon variant="turn": six-tooth gear clicks round one notch at a time */
@@ -252,9 +260,8 @@
252
260
  transform: rotate(360deg);
253
261
  }
254
262
  }
255
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-gear-turn,
256
- .vv-icon[data-animate="true"] .vv-icon-gear-turn {
257
- animation: vv-icon-gear-turn calc(2.4s * var(--vv-icon-duration-scale, 1))
263
+ .vv-icon .vv-icon-gear-turn {
264
+ --vv-icon-animation: vv-icon-gear-turn calc(2.4s * var(--vv-icon-duration-scale, 1))
258
265
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) infinite;
259
266
  }
260
267
 
@@ -316,33 +323,29 @@
316
323
  .vv-icon-board-traveler {
317
324
  opacity: 0;
318
325
  }
319
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-board-card-1,
320
- .vv-icon[data-animate="true"] .vv-icon-board-card-1 {
321
- animation:
326
+ .vv-icon .vv-icon-board-card-1 {
327
+ --vv-icon-animation:
322
328
  vv-icon-board-card-drop calc(0.55s * var(--vv-icon-duration-scale, 1))
323
329
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) both,
324
330
  vv-icon-board-card-breathe calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out
325
331
  calc(0.55s * var(--vv-icon-duration-scale, 1)) infinite;
326
332
  }
327
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-board-card-2,
328
- .vv-icon[data-animate="true"] .vv-icon-board-card-2 {
329
- animation:
333
+ .vv-icon .vv-icon-board-card-2 {
334
+ --vv-icon-animation:
330
335
  vv-icon-board-card-drop calc(0.55s * var(--vv-icon-duration-scale, 1))
331
336
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.1s * var(--vv-icon-duration-scale, 1)) both,
332
337
  vv-icon-board-card-breathe calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out
333
338
  calc(0.75s * var(--vv-icon-duration-scale, 1)) infinite;
334
339
  }
335
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-board-card-3,
336
- .vv-icon[data-animate="true"] .vv-icon-board-card-3 {
337
- animation:
340
+ .vv-icon .vv-icon-board-card-3 {
341
+ --vv-icon-animation:
338
342
  vv-icon-board-card-drop calc(0.55s * var(--vv-icon-duration-scale, 1))
339
343
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.2s * var(--vv-icon-duration-scale, 1)) both,
340
344
  vv-icon-board-card-breathe calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out
341
345
  calc(0.95s * var(--vv-icon-duration-scale, 1)) infinite;
342
346
  }
343
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-board-traveler,
344
- .vv-icon[data-animate="true"] .vv-icon-board-traveler {
345
- animation: vv-icon-board-traveler calc(1.8s * var(--vv-icon-duration-scale, 1)) ease-in-out
347
+ .vv-icon .vv-icon-board-traveler {
348
+ --vv-icon-animation: vv-icon-board-traveler calc(1.8s * var(--vv-icon-duration-scale, 1)) ease-in-out
346
349
  calc(0.5s * var(--vv-icon-duration-scale, 1)) infinite;
347
350
  }
348
351
 
@@ -387,34 +390,28 @@
387
390
  transform: scaleX(1);
388
391
  }
389
392
  }
390
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-check-1,
391
- .vv-icon[data-animate="true"] .vv-icon-checklist-check-1 {
392
- animation: vv-icon-checklist-check-loop calc(1.6s * var(--vv-icon-duration-scale, 1))
393
+ .vv-icon .vv-icon-checklist-check-1 {
394
+ --vv-icon-animation: vv-icon-checklist-check-loop calc(1.6s * var(--vv-icon-duration-scale, 1))
393
395
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
394
396
  }
395
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-check-2,
396
- .vv-icon[data-animate="true"] .vv-icon-checklist-check-2 {
397
- animation: vv-icon-checklist-check-loop calc(1.6s * var(--vv-icon-duration-scale, 1))
397
+ .vv-icon .vv-icon-checklist-check-2 {
398
+ --vv-icon-animation: vv-icon-checklist-check-loop calc(1.6s * var(--vv-icon-duration-scale, 1))
398
399
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.25s * var(--vv-icon-duration-scale, 1)) infinite;
399
400
  }
400
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-ring-1,
401
- .vv-icon[data-animate="true"] .vv-icon-checklist-ring-1 {
402
- animation: vv-icon-checklist-ring-burst calc(1.6s * var(--vv-icon-duration-scale, 1))
401
+ .vv-icon .vv-icon-checklist-ring-1 {
402
+ --vv-icon-animation: vv-icon-checklist-ring-burst calc(1.6s * var(--vv-icon-duration-scale, 1))
403
403
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.4s * var(--vv-icon-duration-scale, 1)) infinite;
404
404
  }
405
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-ring-2,
406
- .vv-icon[data-animate="true"] .vv-icon-checklist-ring-2 {
407
- animation: vv-icon-checklist-ring-burst calc(1.6s * var(--vv-icon-duration-scale, 1))
405
+ .vv-icon .vv-icon-checklist-ring-2 {
406
+ --vv-icon-animation: vv-icon-checklist-ring-burst calc(1.6s * var(--vv-icon-duration-scale, 1))
408
407
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.65s * var(--vv-icon-duration-scale, 1)) infinite;
409
408
  }
410
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-line-1,
411
- .vv-icon[data-animate="true"] .vv-icon-checklist-line-1 {
412
- animation: vv-icon-checklist-line-sweep calc(1.6s * var(--vv-icon-duration-scale, 1))
409
+ .vv-icon .vv-icon-checklist-line-1 {
410
+ --vv-icon-animation: vv-icon-checklist-line-sweep calc(1.6s * var(--vv-icon-duration-scale, 1))
413
411
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
414
412
  }
415
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-checklist-line-2,
416
- .vv-icon[data-animate="true"] .vv-icon-checklist-line-2 {
417
- animation: vv-icon-checklist-line-sweep calc(1.6s * var(--vv-icon-duration-scale, 1))
413
+ .vv-icon .vv-icon-checklist-line-2 {
414
+ --vv-icon-animation: vv-icon-checklist-line-sweep calc(1.6s * var(--vv-icon-duration-scale, 1))
418
415
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.25s * var(--vv-icon-duration-scale, 1)) infinite;
419
416
  }
420
417
 
@@ -456,27 +453,22 @@
456
453
  transform: scale(0);
457
454
  opacity: 0;
458
455
  }
459
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-terminal-prompt,
460
- .vv-icon[data-animate="true"] .vv-icon-terminal-prompt {
461
- animation: vv-icon-terminal-prompt-nudge calc(0.7s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
456
+ .vv-icon .vv-icon-terminal-prompt {
457
+ --vv-icon-animation: vv-icon-terminal-prompt-nudge calc(0.7s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
462
458
  }
463
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-terminal-cursor,
464
- .vv-icon[data-animate="true"] .vv-icon-terminal-cursor {
465
- animation: vv-icon-terminal-cursor-blink calc(0.45s * var(--vv-icon-duration-scale, 1)) steps(2, end) infinite;
459
+ .vv-icon .vv-icon-terminal-cursor {
460
+ --vv-icon-animation: vv-icon-terminal-cursor-blink calc(0.45s * var(--vv-icon-duration-scale, 1)) steps(2, end) infinite;
466
461
  }
467
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-terminal-typed-1,
468
- .vv-icon[data-animate="true"] .vv-icon-terminal-typed-1 {
469
- animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
462
+ .vv-icon .vv-icon-terminal-typed-1 {
463
+ --vv-icon-animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
470
464
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) 0s infinite;
471
465
  }
472
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-terminal-typed-2,
473
- .vv-icon[data-animate="true"] .vv-icon-terminal-typed-2 {
474
- animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
466
+ .vv-icon .vv-icon-terminal-typed-2 {
467
+ --vv-icon-animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
475
468
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.2s * var(--vv-icon-duration-scale, 1)) infinite;
476
469
  }
477
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-terminal-typed-3,
478
- .vv-icon[data-animate="true"] .vv-icon-terminal-typed-3 {
479
- animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
470
+ .vv-icon .vv-icon-terminal-typed-3 {
471
+ --vv-icon-animation: vv-icon-terminal-typed calc(1.4s * var(--vv-icon-duration-scale, 1))
480
472
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.4s * var(--vv-icon-duration-scale, 1)) infinite;
481
473
  }
482
474
 
@@ -502,24 +494,20 @@
502
494
  transform: rotate(-25deg) scale(0.78);
503
495
  }
504
496
  }
505
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-document-line-1,
506
- .vv-icon[data-animate="true"] .vv-icon-document-line-1 {
507
- animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
497
+ .vv-icon .vv-icon-document-line-1 {
498
+ --vv-icon-animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
508
499
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
509
500
  }
510
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-document-line-2,
511
- .vv-icon[data-animate="true"] .vv-icon-document-line-2 {
512
- animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
501
+ .vv-icon .vv-icon-document-line-2 {
502
+ --vv-icon-animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
513
503
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.15s * var(--vv-icon-duration-scale, 1)) infinite;
514
504
  }
515
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-document-line-3,
516
- .vv-icon[data-animate="true"] .vv-icon-document-line-3 {
517
- animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
505
+ .vv-icon .vv-icon-document-line-3 {
506
+ --vv-icon-animation: vv-icon-document-line-draw calc(1.5s * var(--vv-icon-duration-scale, 1))
518
507
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.3s * var(--vv-icon-duration-scale, 1)) infinite;
519
508
  }
520
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-document-corner,
521
- .vv-icon[data-animate="true"] .vv-icon-document-corner {
522
- animation: vv-icon-document-corner-fold calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out
509
+ .vv-icon .vv-icon-document-corner {
510
+ --vv-icon-animation: vv-icon-document-corner-fold calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out
523
511
  calc(0.2s * var(--vv-icon-duration-scale, 1)) infinite;
524
512
  }
525
513
 
@@ -551,27 +539,22 @@
551
539
  transform: rotate(9deg);
552
540
  }
553
541
  }
554
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-flask,
555
- .vv-icon[data-animate="true"] .vv-icon-flask {
556
- animation: vv-icon-flask-slosh calc(1.4s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
542
+ .vv-icon .vv-icon-flask {
543
+ --vv-icon-animation: vv-icon-flask-slosh calc(1.4s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
557
544
  }
558
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-flask-bubble-1,
559
- .vv-icon[data-animate="true"] .vv-icon-flask-bubble-1 {
560
- animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out infinite;
545
+ .vv-icon .vv-icon-flask-bubble-1 {
546
+ --vv-icon-animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out infinite;
561
547
  }
562
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-flask-bubble-2,
563
- .vv-icon[data-animate="true"] .vv-icon-flask-bubble-2 {
564
- animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
548
+ .vv-icon .vv-icon-flask-bubble-2 {
549
+ --vv-icon-animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
565
550
  calc(0.27s * var(--vv-icon-duration-scale, 1)) infinite;
566
551
  }
567
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-flask-bubble-3,
568
- .vv-icon[data-animate="true"] .vv-icon-flask-bubble-3 {
569
- animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
552
+ .vv-icon .vv-icon-flask-bubble-3 {
553
+ --vv-icon-animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
570
554
  calc(0.55s * var(--vv-icon-duration-scale, 1)) infinite;
571
555
  }
572
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-flask-bubble-4,
573
- .vv-icon[data-animate="true"] .vv-icon-flask-bubble-4 {
574
- animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
556
+ .vv-icon .vv-icon-flask-bubble-4 {
557
+ --vv-icon-animation: vv-icon-flask-bubble-rise calc(1.1s * var(--vv-icon-duration-scale, 1)) ease-out
575
558
  calc(0.82s * var(--vv-icon-duration-scale, 1)) infinite;
576
559
  }
577
560
 
@@ -608,14 +591,12 @@
608
591
  .vv-icon-inbox-notif {
609
592
  opacity: 0;
610
593
  }
611
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-inbox-arrow,
612
- .vv-icon[data-animate="true"] .vv-icon-inbox-arrow {
613
- animation: vv-icon-inbox-arrow-drop calc(1.1s * var(--vv-icon-duration-scale, 1))
594
+ .vv-icon .vv-icon-inbox-arrow {
595
+ --vv-icon-animation: vv-icon-inbox-arrow-drop calc(1.1s * var(--vv-icon-duration-scale, 1))
614
596
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) infinite;
615
597
  }
616
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-inbox-notif,
617
- .vv-icon[data-animate="true"] .vv-icon-inbox-notif {
618
- animation: vv-icon-inbox-notif-pulse calc(0.7s * var(--vv-icon-duration-scale, 1)) ease-in-out
598
+ .vv-icon .vv-icon-inbox-notif {
599
+ --vv-icon-animation: vv-icon-inbox-notif-pulse calc(0.7s * var(--vv-icon-duration-scale, 1)) ease-in-out
619
600
  calc(0.3s * var(--vv-icon-duration-scale, 1)) infinite;
620
601
  opacity: 1;
621
602
  }
@@ -649,17 +630,14 @@
649
630
  .vv-icon-automation-sparks {
650
631
  opacity: 0;
651
632
  }
652
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-automation-orbit,
653
- .vv-icon[data-animate="true"] .vv-icon-automation-orbit {
654
- animation: vv-icon-automation-orbit-spin calc(1.8s * var(--vv-icon-duration-scale, 1)) linear infinite;
633
+ .vv-icon .vv-icon-automation-orbit {
634
+ --vv-icon-animation: vv-icon-automation-orbit-spin calc(1.8s * var(--vv-icon-duration-scale, 1)) linear infinite;
655
635
  }
656
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-automation-play,
657
- .vv-icon[data-animate="true"] .vv-icon-automation-play {
658
- animation: vv-icon-automation-play-pulse calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
636
+ .vv-icon .vv-icon-automation-play {
637
+ --vv-icon-animation: vv-icon-automation-play-pulse calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
659
638
  }
660
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-automation-sparks,
661
- .vv-icon[data-animate="true"] .vv-icon-automation-sparks {
662
- animation: vv-icon-automation-sparks-burst calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
639
+ .vv-icon .vv-icon-automation-sparks {
640
+ --vv-icon-animation: vv-icon-automation-sparks-burst calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
663
641
  }
664
642
 
665
643
  /* ── BarChartIcon: bars grow with a bounce, trend line draws. */
@@ -693,24 +671,20 @@
693
671
  stroke-dashoffset: 0;
694
672
  }
695
673
  }
696
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-chart-bar-1,
697
- .vv-icon[data-animate="true"] .vv-icon-chart-bar-1 {
698
- animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
674
+ .vv-icon .vv-icon-chart-bar-1 {
675
+ --vv-icon-animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
699
676
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) infinite;
700
677
  }
701
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-chart-bar-2,
702
- .vv-icon[data-animate="true"] .vv-icon-chart-bar-2 {
703
- animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
678
+ .vv-icon .vv-icon-chart-bar-2 {
679
+ --vv-icon-animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
704
680
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.12s * var(--vv-icon-duration-scale, 1)) infinite;
705
681
  }
706
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-chart-bar-3,
707
- .vv-icon[data-animate="true"] .vv-icon-chart-bar-3 {
708
- animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
682
+ .vv-icon .vv-icon-chart-bar-3 {
683
+ --vv-icon-animation: vv-icon-chart-bar-grow calc(1.6s * var(--vv-icon-duration-scale, 1))
709
684
  var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.24s * var(--vv-icon-duration-scale, 1)) infinite;
710
685
  }
711
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-chart-trend,
712
- .vv-icon[data-animate="true"] .vv-icon-chart-trend {
713
- animation: vv-icon-chart-trend-draw calc(1.6s * var(--vv-icon-duration-scale, 1))
686
+ .vv-icon .vv-icon-chart-trend {
687
+ --vv-icon-animation: vv-icon-chart-trend-draw calc(1.6s * var(--vv-icon-duration-scale, 1))
714
688
  var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) calc(0.4s * var(--vv-icon-duration-scale, 1)) infinite;
715
689
  }
716
690
 
@@ -738,13 +712,11 @@
738
712
  transform: scale(1.6);
739
713
  }
740
714
  }
741
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-search,
742
- .vv-icon[data-animate="true"] .vv-icon-search {
743
- animation: vv-icon-search-scan calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
715
+ .vv-icon .vv-icon-search {
716
+ --vv-icon-animation: vv-icon-search-scan calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
744
717
  }
745
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-search-glint,
746
- .vv-icon[data-animate="true"] .vv-icon-search-glint {
747
- animation: vv-icon-search-glint calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
718
+ .vv-icon .vv-icon-search-glint {
719
+ --vv-icon-animation: vv-icon-search-glint calc(1.2s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
748
720
  }
749
721
 
750
722
  /* ── SidebarToggleIcon: panel squeezes, chevron nudges the way it points. */
@@ -778,15 +750,12 @@
778
750
  transform: translateX(2.5px);
779
751
  }
780
752
  }
781
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-sidebar-panel,
782
- .vv-icon[data-animate="true"] .vv-icon-sidebar-panel {
783
- animation: vv-icon-sidebar-squeeze calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
753
+ .vv-icon .vv-icon-sidebar-panel {
754
+ --vv-icon-animation: vv-icon-sidebar-squeeze calc(0.9s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
784
755
  }
785
- .group:hover .vv-icon[data-animate="hover"] .vv-icon-sidebar-chevron,
786
- .vv-icon[data-animate="true"] .vv-icon-sidebar-chevron {
787
- animation: vv-icon-sidebar-nudge calc(0.8s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
756
+ .vv-icon .vv-icon-sidebar-chevron {
757
+ --vv-icon-animation: vv-icon-sidebar-nudge calc(0.8s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
788
758
  }
789
- .group:hover .vv-icon[data-animate="hover"].vv-icon-sidebar-collapsed .vv-icon-sidebar-chevron,
790
- .vv-icon[data-animate="true"].vv-icon-sidebar-collapsed .vv-icon-sidebar-chevron {
791
- animation: vv-icon-sidebar-nudge-out calc(0.8s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
759
+ .vv-icon.vv-icon-sidebar-collapsed .vv-icon-sidebar-chevron {
760
+ --vv-icon-animation: vv-icon-sidebar-nudge-out calc(0.8s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
792
761
  }
package/tokens/src/css/scrollbar-thin.css CHANGED
@@ -30,13 +30,15 @@
30
30
  transparent;
31
31
  }
32
32
 
33
- .scrollbar-thin:hover {
34
- scrollbar-color: color-mix(
35
- in oklch,
36
- var(--scrollbar) var(--scrollbar-thin-hover),
37
- transparent
38
- )
39
- transparent;
33
+ @media (hover: hover) and (pointer: fine) {
34
+ .scrollbar-thin:hover {
35
+ scrollbar-color: color-mix(
36
+ in oklch,
37
+ var(--scrollbar) var(--scrollbar-thin-hover),
38
+ transparent
39
+ )
40
+ transparent;
41
+ }
40
42
  }
41
43
 
42
44
  @supports not (scrollbar-color: auto) {
@@ -57,12 +59,14 @@
57
59
  border-radius: 3px;
58
60
  }
59
61
 
60
- .scrollbar-thin:hover::-webkit-scrollbar-thumb {
61
- background-color: color-mix(
62
- in oklch,
63
- var(--scrollbar) var(--scrollbar-thin-hover),
64
- transparent
65
- );
62
+ @media (hover: hover) and (pointer: fine) {
63
+ .scrollbar-thin:hover::-webkit-scrollbar-thumb {
64
+ background-color: color-mix(
65
+ in oklch,
66
+ var(--scrollbar) var(--scrollbar-thin-hover),
67
+ transparent
68
+ );
69
+ }
66
70
  }
67
71
  }
68
72
  }
package/tokens/src/css/tabs-pills.css CHANGED
@@ -43,13 +43,15 @@
43
43
  padding: 0;
44
44
  background: transparent;
45
45
  }
46
- .t-tabs--pills
47
- .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover {
48
- background: color-mix(
49
- in oklch,
50
- var(--tabs-pill-active-bg) 50%,
51
- transparent
52
- );
46
+ @media (hover: hover) and (pointer: fine) {
47
+ .t-tabs--pills
48
+ .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover {
49
+ background: color-mix(
50
+ in oklch,
51
+ var(--tabs-pill-active-bg) 50%,
52
+ transparent
53
+ );
54
+ }
53
55
  }
54
56
  .t-tabs--pills .t-tab[aria-selected="true"],
55
57
  .t-tabs--pills .t-tab[data-state="active"] {
package/tokens/src/css/tabs.css CHANGED
@@ -42,11 +42,15 @@
42
42
  .t-tab:active {
43
43
  transform: scale(0.97);
44
44
  }
45
- .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
46
45
  .t-tab[aria-selected="true"],
47
46
  .t-tab[data-state="active"] {
48
47
  color: var(--tabs-text-active);
49
48
  }
49
+ @media (hover: hover) and (pointer: fine) {
50
+ .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover {
51
+ color: var(--tabs-text-active);
52
+ }
53
+ }
50
54
  .t-tabs-pill {
51
55
  position: absolute;
52
56
  top: 3px;
package/tokens/src/css/utilities.css CHANGED
@@ -25,11 +25,11 @@
25
25
  }
26
26
 
27
27
  /* Row actions that only appear on group-hover. Touch has no hover, so the
28
- control stays visible on phones and hides only where hover exists. */
28
+ control stays visible on phones and hides only for a fine hovering pointer. */
29
29
  @utility reveal-on-hover {
30
30
  opacity: 1;
31
31
 
32
- @media (hover: hover) and (width >= theme(--breakpoint-sm)) {
32
+ @media (hover: hover) and (pointer: fine) and (width >= theme(--breakpoint-sm)) {
33
33
  opacity: 0;
34
34
 
35
35
  &:is(:where(.group):hover *),
package/tokens/src/tokens.css CHANGED
@@ -284,11 +284,13 @@
284
284
  );
285
285
  }
286
286
 
287
- .sidebar-section-label:hover {
288
- color: color-mix(
289
- in oklch,
290
- var(--muted) var(--sidebar-section-label-hover-mix),
291
- transparent
292
- );
287
+ @media (hover: hover) and (pointer: fine) {
288
+ .sidebar-section-label:hover {
289
+ color: color-mix(
290
+ in oklch,
291
+ var(--muted) var(--sidebar-section-label-hover-mix),
292
+ transparent
293
+ );
294
+ }
293
295
  }
294
296
  }