@womp/kookie-ui 0.13.1 → 0.13.3

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 (174) hide show
  1. package/components.css +491 -738
  2. package/dist/cjs/components/_internal/menu-context.js +1 -1
  3. package/dist/cjs/components/_internal/menu-context.js.map +3 -3
  4. package/dist/cjs/components/alert-dialog.js +1 -1
  5. package/dist/cjs/components/alert-dialog.js.map +3 -3
  6. package/dist/cjs/components/badge.js +1 -1
  7. package/dist/cjs/components/badge.js.map +3 -3
  8. package/dist/cjs/components/button.js +1 -1
  9. package/dist/cjs/components/button.js.map +3 -3
  10. package/dist/cjs/components/chatbar.js +2 -2
  11. package/dist/cjs/components/chatbar.js.map +3 -3
  12. package/dist/cjs/components/checkbox-cards.js +1 -1
  13. package/dist/cjs/components/checkbox-cards.js.map +3 -3
  14. package/dist/cjs/components/combobox.js +1 -1
  15. package/dist/cjs/components/combobox.js.map +3 -3
  16. package/dist/cjs/components/context-menu.js +1 -1
  17. package/dist/cjs/components/context-menu.js.map +3 -3
  18. package/dist/cjs/components/dialog.js +1 -1
  19. package/dist/cjs/components/dialog.js.map +3 -3
  20. package/dist/cjs/components/dropdown-menu.js +1 -1
  21. package/dist/cjs/components/dropdown-menu.js.map +3 -3
  22. package/dist/cjs/components/hover-card.js +1 -1
  23. package/dist/cjs/components/hover-card.js.map +3 -3
  24. package/dist/cjs/components/icon-button.js +1 -1
  25. package/dist/cjs/components/icon-button.js.map +3 -3
  26. package/dist/cjs/components/index.js +4 -4
  27. package/dist/cjs/components/index.js.map +3 -3
  28. package/dist/cjs/components/message-scroller.js +1 -1
  29. package/dist/cjs/components/message-scroller.js.map +3 -3
  30. package/dist/cjs/components/notice.js +2 -2
  31. package/dist/cjs/components/notice.js.map +3 -3
  32. package/dist/cjs/components/popover.js +1 -1
  33. package/dist/cjs/components/popover.js.map +3 -3
  34. package/dist/cjs/components/radio-cards.js +1 -1
  35. package/dist/cjs/components/radio-cards.js.map +3 -3
  36. package/dist/cjs/components/select.js +1 -1
  37. package/dist/cjs/components/select.js.map +3 -3
  38. package/dist/cjs/components/sheet.js +1 -1
  39. package/dist/cjs/components/sheet.js.map +3 -3
  40. package/dist/cjs/components/sidebar.js +1 -1
  41. package/dist/cjs/components/sidebar.js.map +3 -3
  42. package/dist/cjs/components/theme-panel.js +2 -2
  43. package/dist/cjs/components/theme-panel.js.map +3 -3
  44. package/dist/cjs/components/theme.d.ts.map +1 -1
  45. package/dist/cjs/components/theme.js +1 -1
  46. package/dist/cjs/components/theme.js.map +3 -3
  47. package/dist/cjs/components/toggle-button.js +2 -2
  48. package/dist/cjs/components/toggle-button.js.map +3 -3
  49. package/dist/cjs/components/toggle-icon-button.js +1 -1
  50. package/dist/cjs/components/toggle-icon-button.js.map +3 -3
  51. package/dist/cjs/components/toolbar.js +1 -1
  52. package/dist/cjs/components/toolbar.js.map +3 -3
  53. package/dist/cjs/components/tooltip.js +1 -1
  54. package/dist/cjs/components/tooltip.js.map +3 -3
  55. package/dist/cjs/components/user-card.js +1 -1
  56. package/dist/cjs/components/user-card.js.map +3 -3
  57. package/dist/cjs/components/virtual-menu.js +1 -1
  58. package/dist/cjs/components/virtual-menu.js.map +3 -3
  59. package/dist/cjs/index.js +4 -4
  60. package/dist/cjs/index.js.map +3 -3
  61. package/dist/esm/{chunk-YWENWZOU.js → chunk-2OSGPH7E.js} +2 -2
  62. package/dist/esm/{chunk-EGMUQQRW.js → chunk-3OELU3EO.js} +2 -2
  63. package/dist/esm/{chunk-L5PID6BU.js → chunk-64PFYID5.js} +2 -2
  64. package/dist/esm/{chunk-VHECAEUP.js → chunk-7E2BPXIP.js} +2 -2
  65. package/dist/esm/{chunk-ISOLUTZF.js → chunk-7FS2VDHO.js} +2 -2
  66. package/dist/esm/{chunk-KMPE7TJ6.js → chunk-7NVLCYCL.js} +2 -2
  67. package/dist/esm/{chunk-D6PHTHF2.js → chunk-7R73ISNJ.js} +2 -2
  68. package/dist/esm/{chunk-UYCPDGWA.js → chunk-7RUVID3O.js} +2 -2
  69. package/dist/esm/{chunk-IYCPYN4Z.js → chunk-C34HCTGS.js} +2 -2
  70. package/dist/esm/{chunk-53SZ4Y23.js → chunk-CET7V3FZ.js} +2 -2
  71. package/dist/esm/{chunk-ZK7A2MZZ.js → chunk-DD6SJPOU.js} +2 -2
  72. package/dist/esm/{chunk-3R4YLW4A.js → chunk-EPX34Y7S.js} +2 -2
  73. package/dist/esm/{chunk-OIUCV5HK.js → chunk-ESPWYN5C.js} +2 -2
  74. package/dist/esm/{chunk-7RQNB63F.js → chunk-GL5QTWYI.js} +2 -2
  75. package/dist/esm/{chunk-7JJT42J2.js → chunk-JUJYMZ2F.js} +2 -2
  76. package/dist/esm/{chunk-6G3MPL4A.js → chunk-NJ7S43EK.js} +2 -2
  77. package/dist/esm/{chunk-XLMTTSRO.js → chunk-NQ3D3UXZ.js} +2 -2
  78. package/dist/esm/{chunk-MZXHKM4V.js → chunk-P2NZLSAD.js} +2 -2
  79. package/dist/esm/{chunk-METRW4HG.js → chunk-PHZNRO3D.js} +2 -2
  80. package/dist/esm/{chunk-CYU6BLZ5.js → chunk-PLYOBXAF.js} +2 -2
  81. package/dist/esm/{chunk-OLAWVEAI.js → chunk-SAJY4H6J.js} +2 -2
  82. package/dist/esm/{chunk-WHFJ4JUN.js → chunk-TIT3QMV7.js} +2 -2
  83. package/dist/esm/{chunk-PQKJNRMR.js → chunk-TVV6IHBN.js} +2 -2
  84. package/dist/esm/{chunk-CRTH5LNU.js → chunk-VDTB4JG3.js} +2 -2
  85. package/dist/esm/chunk-VICP2RNA.js +2 -0
  86. package/dist/esm/chunk-VICP2RNA.js.map +7 -0
  87. package/dist/esm/{chunk-T4OR62DQ.js → chunk-WBMCZ4Z3.js} +2 -2
  88. package/dist/esm/{chunk-MEO7MJMQ.js → chunk-XVYTOZES.js} +2 -2
  89. package/dist/esm/components/_internal/menu-context.js +1 -1
  90. package/dist/esm/components/alert-dialog.js +1 -1
  91. package/dist/esm/components/badge.js +1 -1
  92. package/dist/esm/components/button.js +1 -1
  93. package/dist/esm/components/chatbar.js +1 -1
  94. package/dist/esm/components/checkbox-cards.js +1 -1
  95. package/dist/esm/components/combobox.js +1 -1
  96. package/dist/esm/components/context-menu.js +1 -1
  97. package/dist/esm/components/dialog.js +1 -1
  98. package/dist/esm/components/dropdown-menu.js +1 -1
  99. package/dist/esm/components/hover-card.js +1 -1
  100. package/dist/esm/components/icon-button.js +1 -1
  101. package/dist/esm/components/index.js +1 -1
  102. package/dist/esm/components/message-scroller.js +1 -1
  103. package/dist/esm/components/notice.js +1 -1
  104. package/dist/esm/components/popover.js +1 -1
  105. package/dist/esm/components/radio-cards.js +1 -1
  106. package/dist/esm/components/select.js +1 -1
  107. package/dist/esm/components/sheet.js +1 -1
  108. package/dist/esm/components/sidebar.js +1 -1
  109. package/dist/esm/components/theme-panel.js +1 -1
  110. package/dist/esm/components/theme.d.ts.map +1 -1
  111. package/dist/esm/components/theme.js +1 -1
  112. package/dist/esm/components/toggle-button.js +1 -1
  113. package/dist/esm/components/toggle-icon-button.js +1 -1
  114. package/dist/esm/components/toolbar.js +1 -1
  115. package/dist/esm/components/tooltip.js +1 -1
  116. package/dist/esm/components/user-card.js +1 -1
  117. package/dist/esm/components/virtual-menu.js +1 -1
  118. package/dist/esm/index.js +1 -1
  119. package/package.json +3 -3
  120. package/src/components/_internal/base-button.css +8 -6
  121. package/src/components/_internal/base-card.css +6 -0
  122. package/src/components/_internal/base-sidebar-menu.css +9 -1
  123. package/src/components/_internal/base-tab-list.css +10 -0
  124. package/src/components/accordion.css +113 -90
  125. package/src/components/avatar.css +9 -9
  126. package/src/components/badge.css +3 -3
  127. package/src/components/callout.css +0 -16
  128. package/src/components/kbd.css +10 -10
  129. package/src/components/progress.css +0 -38
  130. package/src/components/scroll-area.css +3 -3
  131. package/src/components/segmented-control.css +4 -4
  132. package/src/components/select.css +3 -3
  133. package/src/components/shell.css +6 -1
  134. package/src/components/sidebar.css +129 -28
  135. package/src/components/slider.css +10 -8
  136. package/src/components/table.css +0 -20
  137. package/src/components/text-field.css +7 -5
  138. package/src/components/theme.tsx +4 -1
  139. package/src/components/toolbar.css +4 -4
  140. package/src/styles/scrollbar.css +4 -2
  141. package/src/styles/tokens/constants.css +5 -5
  142. package/src/styles/tokens/index.css +0 -3
  143. package/src/styles/tokens/radius.css +17 -1
  144. package/styles.css +507 -740
  145. package/tokens/base.css +12 -0
  146. package/tokens.css +12 -0
  147. package/dist/esm/chunk-SEY4NA45.js +0 -2
  148. package/dist/esm/chunk-SEY4NA45.js.map +0 -7
  149. /package/dist/esm/{chunk-YWENWZOU.js.map → chunk-2OSGPH7E.js.map} +0 -0
  150. /package/dist/esm/{chunk-EGMUQQRW.js.map → chunk-3OELU3EO.js.map} +0 -0
  151. /package/dist/esm/{chunk-L5PID6BU.js.map → chunk-64PFYID5.js.map} +0 -0
  152. /package/dist/esm/{chunk-VHECAEUP.js.map → chunk-7E2BPXIP.js.map} +0 -0
  153. /package/dist/esm/{chunk-ISOLUTZF.js.map → chunk-7FS2VDHO.js.map} +0 -0
  154. /package/dist/esm/{chunk-KMPE7TJ6.js.map → chunk-7NVLCYCL.js.map} +0 -0
  155. /package/dist/esm/{chunk-D6PHTHF2.js.map → chunk-7R73ISNJ.js.map} +0 -0
  156. /package/dist/esm/{chunk-UYCPDGWA.js.map → chunk-7RUVID3O.js.map} +0 -0
  157. /package/dist/esm/{chunk-IYCPYN4Z.js.map → chunk-C34HCTGS.js.map} +0 -0
  158. /package/dist/esm/{chunk-53SZ4Y23.js.map → chunk-CET7V3FZ.js.map} +0 -0
  159. /package/dist/esm/{chunk-ZK7A2MZZ.js.map → chunk-DD6SJPOU.js.map} +0 -0
  160. /package/dist/esm/{chunk-3R4YLW4A.js.map → chunk-EPX34Y7S.js.map} +0 -0
  161. /package/dist/esm/{chunk-OIUCV5HK.js.map → chunk-ESPWYN5C.js.map} +0 -0
  162. /package/dist/esm/{chunk-7RQNB63F.js.map → chunk-GL5QTWYI.js.map} +0 -0
  163. /package/dist/esm/{chunk-7JJT42J2.js.map → chunk-JUJYMZ2F.js.map} +0 -0
  164. /package/dist/esm/{chunk-6G3MPL4A.js.map → chunk-NJ7S43EK.js.map} +0 -0
  165. /package/dist/esm/{chunk-XLMTTSRO.js.map → chunk-NQ3D3UXZ.js.map} +0 -0
  166. /package/dist/esm/{chunk-MZXHKM4V.js.map → chunk-P2NZLSAD.js.map} +0 -0
  167. /package/dist/esm/{chunk-METRW4HG.js.map → chunk-PHZNRO3D.js.map} +0 -0
  168. /package/dist/esm/{chunk-CYU6BLZ5.js.map → chunk-PLYOBXAF.js.map} +0 -0
  169. /package/dist/esm/{chunk-OLAWVEAI.js.map → chunk-SAJY4H6J.js.map} +0 -0
  170. /package/dist/esm/{chunk-WHFJ4JUN.js.map → chunk-TIT3QMV7.js.map} +0 -0
  171. /package/dist/esm/{chunk-PQKJNRMR.js.map → chunk-TVV6IHBN.js.map} +0 -0
  172. /package/dist/esm/{chunk-CRTH5LNU.js.map → chunk-VDTB4JG3.js.map} +0 -0
  173. /package/dist/esm/{chunk-T4OR62DQ.js.map → chunk-WBMCZ4Z3.js.map} +0 -0
  174. /package/dist/esm/{chunk-MEO7MJMQ.js.map → chunk-XVYTOZES.js.map} +0 -0
@@ -20,7 +20,7 @@
20
20
  min-width: 1.75em;
21
21
  box-sizing: border-box;
22
22
  word-spacing: var(--classic-word-spacing);
23
- border-radius: max(var(--radius-2), var(--radius-full));
23
+ border-radius: var(--radius-pill-2);
24
24
 
25
25
  /* Default sizing (size 2) */
26
26
  font-size: var(--font-size-1);
@@ -145,63 +145,63 @@
145
145
  line-height: var(--line-height-0);
146
146
  letter-spacing: var(--letter-spacing-0);
147
147
  padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
148
- border-radius: max(var(--radius-1), var(--radius-full));
148
+ border-radius: var(--radius-pill-1);
149
149
  }
150
150
  &:where(.rt-r-size-2) {
151
151
  font-size: var(--font-size-1);
152
152
  line-height: var(--line-height-1);
153
153
  letter-spacing: var(--letter-spacing-1);
154
154
  padding: var(--space-1) var(--space-2);
155
- border-radius: max(var(--radius-2), var(--radius-full));
155
+ border-radius: var(--radius-pill-2);
156
156
  }
157
157
  &:where(.rt-r-size-3) {
158
158
  font-size: var(--font-size-2);
159
159
  line-height: var(--line-height-2);
160
160
  letter-spacing: var(--letter-spacing-2);
161
161
  padding: var(--space-1) calc(var(--space-2) * 1.25);
162
- border-radius: max(var(--radius-2), var(--radius-full));
162
+ border-radius: var(--radius-pill-2);
163
163
  }
164
164
  &:where(.rt-r-size-4) {
165
165
  font-size: var(--font-size-3);
166
166
  line-height: var(--line-height-3);
167
167
  letter-spacing: var(--letter-spacing-3);
168
168
  padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
169
- border-radius: max(var(--radius-3), var(--radius-full));
169
+ border-radius: var(--radius-pill-3);
170
170
  }
171
171
  &:where(.rt-r-size-5) {
172
172
  font-size: var(--font-size-4);
173
173
  line-height: var(--line-height-4);
174
174
  letter-spacing: var(--letter-spacing-4);
175
175
  padding: calc(var(--space-1) * 1.5) var(--space-3);
176
- border-radius: max(var(--radius-3), var(--radius-full));
176
+ border-radius: var(--radius-pill-3);
177
177
  }
178
178
  &:where(.rt-r-size-6) {
179
179
  font-size: var(--font-size-5);
180
180
  line-height: var(--line-height-5);
181
181
  letter-spacing: var(--letter-spacing-5);
182
182
  padding: calc(var(--space-1) * 1.75) calc(var(--space-3) * 1.25);
183
- border-radius: max(var(--radius-4), var(--radius-full));
183
+ border-radius: var(--radius-pill-4);
184
184
  }
185
185
  &:where(.rt-r-size-7) {
186
186
  font-size: var(--font-size-6);
187
187
  line-height: var(--line-height-6);
188
188
  letter-spacing: var(--letter-spacing-6);
189
189
  padding: var(--space-2) calc(var(--space-3) * 1.5);
190
- border-radius: max(var(--radius-4), var(--radius-full));
190
+ border-radius: var(--radius-pill-4);
191
191
  }
192
192
  &:where(.rt-r-size-8) {
193
193
  font-size: var(--font-size-7);
194
194
  line-height: var(--line-height-7);
195
195
  letter-spacing: var(--letter-spacing-7);
196
196
  padding: calc(var(--space-2) * 1.25) var(--space-4);
197
- border-radius: max(var(--radius-5), var(--radius-full));
197
+ border-radius: var(--radius-pill-5);
198
198
  }
199
199
  &:where(.rt-r-size-9) {
200
200
  font-size: var(--font-size-8);
201
201
  line-height: var(--line-height-8);
202
202
  letter-spacing: var(--letter-spacing-8);
203
203
  padding: calc(var(--space-2) * 1.5) calc(var(--space-4) * 1.25);
204
- border-radius: max(var(--radius-5), var(--radius-full));
204
+ border-radius: var(--radius-pill-5);
205
205
  }
206
206
  }
207
207
  }
@@ -36,7 +36,6 @@
36
36
  }
37
37
  }
38
38
 
39
-
40
39
  .rt-ProgressIndicator {
41
40
  display: block;
42
41
  height: var(--position-full);
@@ -85,8 +84,6 @@
85
84
  }
86
85
  }
87
86
 
88
-
89
-
90
87
  /***************************************************************************************************
91
88
  * *
92
89
  * SIZES *
@@ -115,31 +112,6 @@
115
112
  --progress-radius: var(--progress-slider-radius-4);
116
113
  --progress-indicator-radius: var(--progress-slider-radius-4);
117
114
  }
118
- &:where(.rt-r-size-5) {
119
- --progress-height: var(--progress-slider-height-5);
120
- --progress-radius: var(--progress-slider-radius-5);
121
- --progress-indicator-radius: var(--progress-slider-radius-5);
122
- }
123
- &:where(.rt-r-size-6) {
124
- --progress-height: var(--progress-slider-height-6);
125
- --progress-radius: var(--progress-slider-radius-6);
126
- --progress-indicator-radius: var(--progress-slider-radius-6);
127
- }
128
- &:where(.rt-r-size-7) {
129
- --progress-height: var(--progress-slider-height-7);
130
- --progress-radius: var(--progress-slider-radius-7);
131
- --progress-indicator-radius: var(--progress-slider-radius-7);
132
- }
133
- &:where(.rt-r-size-8) {
134
- --progress-height: var(--progress-slider-height-8);
135
- --progress-radius: var(--progress-slider-radius-8);
136
- --progress-indicator-radius: var(--progress-slider-radius-8);
137
- }
138
- &:where(.rt-r-size-9) {
139
- --progress-height: var(--progress-slider-height-9);
140
- --progress-radius: var(--progress-slider-radius-9);
141
- --progress-indicator-radius: var(--progress-slider-radius-9);
142
- }
143
115
  }
144
116
  }
145
117
 
@@ -177,12 +149,6 @@
177
149
  }
178
150
  }
179
151
 
180
-
181
-
182
-
183
-
184
-
185
-
186
152
  /* soft */
187
153
 
188
154
  .rt-ProgressRoot:where(.rt-variant-soft) {
@@ -232,7 +198,3 @@
232
198
  }
233
199
  }
234
200
 
235
-
236
-
237
-
238
-
@@ -88,15 +88,15 @@
88
88
  .rt-ScrollAreaScrollbar {
89
89
  &:where(.rt-r-size-1) {
90
90
  --scrollarea-scrollbar-size: var(--space-1);
91
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
91
+ --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
92
92
  }
93
93
  &:where(.rt-r-size-2) {
94
94
  --scrollarea-scrollbar-size: var(--space-2);
95
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
95
+ --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
96
96
  }
97
97
  &:where(.rt-r-size-3) {
98
98
  --scrollarea-scrollbar-size: var(--space-3);
99
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
99
+ --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
100
100
  }
101
101
  }
102
102
  }
@@ -404,7 +404,7 @@
404
404
  }
405
405
 
406
406
  &:where(.rt-r-size-1) {
407
- --segmented-control-border-radius: max(var(--radius-1), var(--radius-full));
407
+ --segmented-control-border-radius: var(--radius-pill-1);
408
408
  --segmented-control-height: var(--control-height-1);
409
409
  height: var(--segmented-control-height);
410
410
 
@@ -435,7 +435,7 @@
435
435
  }
436
436
  }
437
437
  &:where(.rt-r-size-2) {
438
- --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
438
+ --segmented-control-border-radius: var(--radius-pill-2);
439
439
  --segmented-control-height: var(--control-height-2);
440
440
  height: var(--segmented-control-height);
441
441
 
@@ -466,7 +466,7 @@
466
466
  }
467
467
  }
468
468
  &:where(.rt-r-size-3) {
469
- --segmented-control-border-radius: max(var(--radius-3), var(--radius-full));
469
+ --segmented-control-border-radius: var(--radius-pill-3);
470
470
  --segmented-control-height: var(--control-height-3);
471
471
  height: var(--segmented-control-height);
472
472
 
@@ -497,7 +497,7 @@
497
497
  }
498
498
  }
499
499
  &:where(.rt-r-size-4) {
500
- --segmented-control-border-radius: max(var(--radius-4), var(--radius-full));
500
+ --segmented-control-border-radius: var(--radius-pill-4);
501
501
  --segmented-control-height: var(--control-height-4);
502
502
  height: var(--segmented-control-height);
503
503
 
@@ -191,7 +191,7 @@
191
191
  font-size: var(--font-size-1);
192
192
  line-height: var(--line-height-1);
193
193
  letter-spacing: var(--letter-spacing-1);
194
- border-radius: max(var(--radius-1), var(--radius-full));
194
+ border-radius: var(--radius-pill-1);
195
195
 
196
196
  &:where(:not(.rt-variant-ghost)) {
197
197
  padding-left: var(--space-2);
@@ -212,7 +212,7 @@
212
212
  font-size: var(--font-size-2);
213
213
  line-height: var(--line-height-2);
214
214
  letter-spacing: var(--letter-spacing-2);
215
- border-radius: max(var(--radius-2), var(--radius-full));
215
+ border-radius: var(--radius-pill-2);
216
216
 
217
217
  &:where(:not(.rt-variant-ghost)) {
218
218
  padding-left: var(--space-3);
@@ -233,7 +233,7 @@
233
233
  font-size: var(--font-size-3);
234
234
  line-height: var(--line-height-3);
235
235
  letter-spacing: var(--letter-spacing-3);
236
- border-radius: max(var(--radius-3), var(--radius-full));
236
+ border-radius: var(--radius-pill-3);
237
237
 
238
238
  &:where(:not(.rt-variant-ghost)) {
239
239
  padding-left: var(--space-4);
@@ -802,11 +802,16 @@
802
802
  block-size: 2px;
803
803
  }
804
804
 
805
- .rt-ShellResizer:hover::before,
806
805
  .rt-ShellResizer[data-dragging]::before {
807
806
  background-color: var(--gray-a6);
808
807
  }
809
808
 
809
+ @media (hover: hover) {
810
+ .rt-ShellResizer:hover::before {
811
+ background-color: var(--gray-a6);
812
+ }
813
+ }
814
+
810
815
  .rt-ShellResizer:focus-visible {
811
816
  outline: none;
812
817
  }
@@ -230,19 +230,19 @@
230
230
  /* stylelint-disable-next-line selector-max-specificity */
231
231
  .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper {
232
232
  padding: var(--space-2) var(--space-2);
233
- border-radius: var(--radius-1);
233
+ border-radius: var(--radius-pill-1);
234
234
  }
235
235
 
236
236
  /* stylelint-disable-next-line selector-max-specificity */
237
237
  .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper {
238
238
  padding: var(--space-2);
239
- border-radius: var(--radius-2);
239
+ border-radius: var(--radius-pill-2);
240
240
  }
241
241
 
242
242
  /* stylelint-disable-next-line selector-max-specificity */
243
243
  .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper {
244
244
  padding: var(--space-3);
245
- border-radius: var(--radius-2);
245
+ border-radius: var(--radius-pill-3);
246
246
  }
247
247
 
248
248
  /* Label styling in thin mode - outside the background area */
@@ -266,40 +266,70 @@
266
266
  }
267
267
 
268
268
  /* Highlighted label gets slightly darker color */
269
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuLabel) {
269
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuLabel) {
270
270
  color: var(--accent-ink);
271
271
  }
272
272
 
273
+ @media (hover: hover) {
274
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuLabel) {
275
+ color: var(--accent-ink);
276
+ }
277
+ }
278
+
273
279
  /* Remove background from button itself in thin mode - styles are on icon wrapper */
274
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])),
275
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
280
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])), :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
276
281
  background-color: transparent !important;
277
282
  }
278
283
 
284
+ @media (hover: hover) {
285
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
286
+ background-color: transparent !important;
287
+ }
288
+ }
289
+
279
290
  /* Soft variant icon wrapper states in thin mode */
280
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
291
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
281
292
  background-color: var(--accent-4);
282
293
  }
283
294
 
295
+ @media (hover: hover) {
296
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
297
+ background-color: var(--accent-4);
298
+ }
299
+ }
300
+
284
301
  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
285
302
  background-color: var(--accent-3);
286
303
  }
287
304
 
288
305
  /* Translucent panel support for soft variant */
289
- :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
306
+ :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
290
307
  background-color: var(--accent-a4);
291
308
  }
292
309
 
310
+ @media (hover: hover) {
311
+ :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
312
+ background-color: var(--accent-a4);
313
+ }
314
+ }
315
+
293
316
  :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
294
317
  background-color: var(--accent-a3);
295
318
  }
296
319
 
297
320
  /* Solid variant icon wrapper states in thin mode */
298
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
321
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
299
322
  background-color: var(--accent-solid);
300
323
  color: var(--accent-solid-contrast);
301
324
  }
302
325
 
326
+ @media (hover: hover) {
327
+ :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
328
+ background-color: var(--accent-solid);
329
+ color: var(--accent-solid-contrast);
330
+ }
331
+ }
332
+
303
333
  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
304
334
  background-color: var(--accent-solid);
305
335
  color: var(--accent-solid-contrast);
@@ -786,7 +816,7 @@
786
816
  }
787
817
 
788
818
  /* Hover/highlighted state for solid variant - EXACT match to base menu */
789
- & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
819
+ & :where(.rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
790
820
  background-color: var(--accent-solid);
791
821
  color: var(--accent-solid-contrast);
792
822
 
@@ -811,6 +841,33 @@
811
841
  }
812
842
  }
813
843
 
844
+ @media (hover: hover) {
845
+ & :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
846
+ background-color: var(--accent-solid);
847
+ color: var(--accent-solid-contrast);
848
+
849
+ & :where(.rt-BaseMenuSubTriggerIcon) {
850
+ color: var(--accent-solid-contrast);
851
+ }
852
+
853
+ /* Force all text elements to inherit hover color, including those with color="gray" */
854
+ & :where(.rt-Text) {
855
+ color: inherit !important;
856
+ }
857
+
858
+ /* Also target any element with data-accent-color="gray" */
859
+ & :where([data-accent-color='gray']:not(.rt-Badge)) {
860
+ color: inherit !important;
861
+ }
862
+
863
+ /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
864
+ & :where(.rt-Badge) {
865
+ color: var(--accent-solid-badge-contrast) !important;
866
+ background-color: var(--accent-solid-badge) !important;
867
+ }
868
+ }
869
+ }
870
+
814
871
  /* Active navigation state for solid variant - same as highlighted */
815
872
  & :where(.rt-SidebarMenuButton[data-active]) {
816
873
  background-color: var(--accent-solid);
@@ -888,7 +945,7 @@
888
945
  }
889
946
 
890
947
  /* Hover/highlighted state for soft variant - EXACT match to base menu */
891
- & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
948
+ & :where(.rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
892
949
  /* Base state: solid accent for solid panels */
893
950
  background-color: var(--accent-4);
894
951
 
@@ -914,6 +971,34 @@
914
971
  }
915
972
  }
916
973
 
974
+ @media (hover: hover) {
975
+ & :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
976
+ /* Base state: solid accent for solid panels */
977
+ background-color: var(--accent-4);
978
+
979
+ /* Theme-level translucent override */
980
+ :where([data-panel-background='translucent']) & {
981
+ background-color: var(--accent-a4);
982
+ }
983
+
984
+ /* Component-level overrides (higher specificity) */
985
+ &:where([data-panel-background='solid']) {
986
+ background-color: var(--accent-4);
987
+ backdrop-filter: none;
988
+ --backdrop-filter-components: none;
989
+ }
990
+
991
+ &:where([data-panel-background='translucent']) {
992
+ background-color: var(--accent-a4);
993
+ }
994
+
995
+ /* In soft variant, lift muted text a step while keeping the hierarchy */
996
+ & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
997
+ color: var(--gray-11) !important;
998
+ }
999
+ }
1000
+ }
1001
+
917
1002
  /* Active navigation state for soft variant - use accent-3 like sub-trigger */
918
1003
  & :where(.rt-SidebarMenuButton[data-active]) {
919
1004
  /* Base state: solid accent for solid panels */
@@ -1038,42 +1123,54 @@
1038
1123
  }
1039
1124
 
1040
1125
  /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
1041
- :where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where(:hover, [data-state='open'])) {
1126
+ :where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where([data-state='open'])) {
1042
1127
  background-color: transparent !important;
1043
1128
  }
1044
1129
 
1130
+ @media (hover: hover) {
1131
+ :where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where(:hover)) {
1132
+ background-color: transparent !important;
1133
+ }
1134
+ }
1135
+
1045
1136
  /* Search trigger icon wrapper - size-specific padding (mirrors Content-scoped rules) */
1046
1137
  /* stylelint-disable-next-line selector-max-specificity */
1047
1138
  .rt-SidebarContainer[data-presentation='thin'].rt-r-size-1 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
1048
1139
  padding: var(--space-2) var(--space-2);
1049
- border-radius: var(--radius-1);
1140
+ border-radius: var(--radius-pill-1);
1050
1141
  }
1051
1142
 
1052
1143
  /* stylelint-disable-next-line selector-max-specificity */
1053
1144
  .rt-SidebarContainer[data-presentation='thin'].rt-r-size-2 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
1054
1145
  padding: var(--space-2);
1055
- border-radius: var(--radius-2);
1146
+ border-radius: var(--radius-pill-2);
1056
1147
  }
1057
1148
 
1058
1149
  /* stylelint-disable-next-line selector-max-specificity */
1059
1150
  .rt-SidebarContainer[data-presentation='thin'].rt-r-size-3 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
1060
1151
  padding: var(--space-3);
1061
- border-radius: var(--radius-2);
1152
+ border-radius: var(--radius-pill-3);
1062
1153
  }
1063
1154
 
1064
1155
  /* Search trigger icon wrapper hover (soft variant) */
1065
- :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1066
- background-color: var(--accent-4);
1156
+ @media (hover: hover) {
1157
+ :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1158
+ background-color: var(--accent-4);
1159
+ }
1067
1160
  }
1068
1161
 
1069
- :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1070
- background-color: var(--accent-a4);
1162
+ @media (hover: hover) {
1163
+ :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1164
+ background-color: var(--accent-a4);
1165
+ }
1071
1166
  }
1072
1167
 
1073
1168
  /* Search trigger icon wrapper hover (solid variant) */
1074
- :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1075
- background-color: var(--accent-solid);
1076
- color: var(--accent-solid-contrast);
1169
+ @media (hover: hover) {
1170
+ :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
1171
+ background-color: var(--accent-solid);
1172
+ color: var(--accent-solid-contrast);
1173
+ }
1077
1174
  }
1078
1175
 
1079
1176
  /* Popover inner wrapper - provide base menu tokens for portal-rendered items */
@@ -1139,9 +1236,11 @@
1139
1236
  }
1140
1237
 
1141
1238
  /* Popover menu button hover (soft variant) */
1142
- /* stylelint-disable-next-line selector-max-specificity */
1143
- .rt-SidebarSearchPopover .rt-SidebarMenuButton:where(:hover):not([data-disabled]) {
1144
- background-color: var(--accent-a4);
1239
+ @media (hover: hover) {
1240
+ /* stylelint-disable-next-line selector-max-specificity */
1241
+ .rt-SidebarSearchPopover .rt-SidebarMenuButton:where(:hover):not([data-disabled]) {
1242
+ background-color: var(--accent-a4);
1243
+ }
1145
1244
  }
1146
1245
 
1147
1246
  /* Popover menu button focus (arrow-key navigation) */
@@ -1213,9 +1312,11 @@
1213
1312
  transition: color 100ms;
1214
1313
  }
1215
1314
 
1216
- /* stylelint-disable-next-line selector-max-specificity */
1217
- .rt-SidebarSearchClear:hover {
1218
- color: var(--gray-a11);
1315
+ @media (hover: hover) {
1316
+ /* stylelint-disable-next-line selector-max-specificity */
1317
+ .rt-SidebarSearchClear:hover {
1318
+ color: var(--gray-a11);
1319
+ }
1219
1320
  }
1220
1321
 
1221
1322
  /* Size-specific overrides (need real selectors to beat base .rt-SidebarSearchIcon / .rt-SidebarSearchInput) */
@@ -321,14 +321,16 @@
321
321
  pointer-events: auto;
322
322
  }
323
323
 
324
- .rt-SliderTick:where(:hover) {
325
- :where(.rt-SliderTickMark) {
326
- background-color: var(--gray-12) !important;
327
- }
328
-
329
- :where(.rt-SliderTickLabel) {
330
- color: var(--gray-12) !important;
331
- font-weight: var(--font-weight-medium);
324
+ @media (hover: hover) {
325
+ .rt-SliderTick:where(:hover) {
326
+ :where(.rt-SliderTickMark) {
327
+ background-color: var(--gray-12) !important;
328
+ }
329
+
330
+ :where(.rt-SliderTickLabel) {
331
+ color: var(--gray-12) !important;
332
+ font-weight: var(--font-weight-medium);
333
+ }
332
334
  }
333
335
  }
334
336
 
@@ -89,26 +89,6 @@
89
89
  line-height: var(--line-height-3);
90
90
  }
91
91
  }
92
- &:where(.rt-r-size-4) {
93
- --table-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
94
- --table-cell-padding: var(--space-5);
95
- --table-cell-min-height: var(--space-9);
96
-
97
- & :where(.rt-TableRootTable) {
98
- font-size: var(--font-size-3);
99
- line-height: var(--line-height-3);
100
- }
101
- }
102
- &:where(.rt-r-size-5) {
103
- --table-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
104
- --table-cell-padding: var(--space-6);
105
- --table-cell-min-height: var(--space-10);
106
-
107
- & :where(.rt-TableRootTable) {
108
- font-size: var(--font-size-4);
109
- line-height: var(--line-height-4);
110
- }
111
- }
112
92
  }
113
93
  }
114
94
 
@@ -106,8 +106,10 @@
106
106
  &:where(:not([type='time']))::-webkit-calendar-picker-indicator {
107
107
  margin-left: var(--space-1);
108
108
  }
109
- &::-webkit-calendar-picker-indicator:where(:hover) {
110
- background-color: var(--gray-a3);
109
+ @media (hover: hover) {
110
+ &::-webkit-calendar-picker-indicator:where(:hover) {
111
+ background-color: var(--gray-a3);
112
+ }
111
113
  }
112
114
  &::-webkit-calendar-picker-indicator:where(:focus-visible) {
113
115
  outline: 2px solid var(--text-field-focus-color);
@@ -216,7 +218,7 @@
216
218
  &:where(.rt-r-size-1) {
217
219
  --text-field-height: var(--control-height-1);
218
220
  --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
219
- --text-field-border-radius: max(var(--radius-1), var(--radius-full));
221
+ --text-field-border-radius: var(--radius-pill-1);
220
222
  --text-field-native-icon-size: var(--space-3);
221
223
  font-size: var(--font-size-1);
222
224
  letter-spacing: var(--letter-spacing-1);
@@ -249,7 +251,7 @@
249
251
  &:where(.rt-r-size-2) {
250
252
  --text-field-height: var(--control-height-2);
251
253
  --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
252
- --text-field-border-radius: max(var(--radius-2), var(--radius-full));
254
+ --text-field-border-radius: var(--radius-pill-2);
253
255
  --text-field-native-icon-size: var(--space-4);
254
256
  font-size: var(--font-size-2);
255
257
  letter-spacing: var(--letter-spacing-2);
@@ -283,7 +285,7 @@
283
285
  &:where(.rt-r-size-3) {
284
286
  --text-field-height: var(--control-height-3);
285
287
  --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
286
- --text-field-border-radius: max(var(--radius-3), var(--radius-full));
288
+ --text-field-border-radius: var(--radius-pill-3);
287
289
  --text-field-native-icon-size: var(--space-4);
288
290
  font-size: var(--font-size-3);
289
291
  letter-spacing: var(--letter-spacing-3);
@@ -85,11 +85,14 @@ function useThemeContext() {
85
85
  interface ThemeProps extends ThemeImplPublicProps {}
86
86
  const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {
87
87
  const context = React.useContext(ThemeContext);
88
+ // Direction is inherited: a Radix DirectionProvider above the Theme (for a right-to-left app)
89
+ // wins, and left-to-right stays the default when there is none.
90
+ const dir = Direction.useDirection();
88
91
  const isRoot = context === undefined;
89
92
  if (isRoot) {
90
93
  return (
91
94
  <TooltipPrimitive.Provider delayDuration={200}>
92
- <Direction.Provider dir="ltr">
95
+ <Direction.Provider dir={dir}>
93
96
  <ThemeRoot {...props} ref={forwardedRef} />
94
97
  </Direction.Provider>
95
98
  </TooltipPrimitive.Provider>