@rescui/checkbox 0.11.1-RUI-293-Update-menu-component-7a032357e.20 → 0.11.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33

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 (5) hide show
  1. package/lib/index.css +69 -69
  2. package/lib/parts/checkbox-list.p.module.css.js +13 -13
  3. package/lib/parts/checkbox.p.module.css.js +22 -22
  4. package/llm/components/checkbox.md +48 -99
  5. package/package.json +6 -6
package/lib/index.css CHANGED
@@ -1,19 +1,19 @@
1
- ._themeLight_12r7b5e_8{
1
+ ._themeLight_8m8wcc_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_12r7b5e_11{
4
+ ._themeDark_8m8wcc_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._checkboxSizeS_12r7b5e_15{
7
+ ._checkboxSizeS_8m8wcc_15{
8
8
  --_rs-checkbox-parts-offset:4px;
9
9
  }
10
- ._checkboxSizeM_12r7b5e_18{
10
+ ._checkboxSizeM_8m8wcc_18{
11
11
  --_rs-checkbox-parts-offset:8px;
12
12
  }
13
- ._checkboxSizeL_12r7b5e_21{
13
+ ._checkboxSizeL_8m8wcc_21{
14
14
  --_rs-checkbox-parts-offset:8px;
15
15
  }
16
- ._sizeS_12r7b5e_25{
16
+ ._sizeS_8m8wcc_25{
17
17
  --_rs-checkbox-ci-mark-s-display:initial;
18
18
  --_rs-checkbox-ci-mark-m-display:none;
19
19
  --_rs-checkbox-ci-mark-l-display:none;
@@ -21,7 +21,7 @@
21
21
  --_rs-checkbox-ci-shadow-size:3px;
22
22
  --_rs-checkbox-ci-indeterminate-icon-border-width:6px 3px;
23
23
  }
24
- ._sizeM_12r7b5e_28{
24
+ ._sizeM_8m8wcc_28{
25
25
  --_rs-checkbox-ci-mark-s-display:none;
26
26
  --_rs-checkbox-ci-mark-m-display:initial;
27
27
  --_rs-checkbox-ci-mark-l-display:none;
@@ -29,7 +29,7 @@
29
29
  --_rs-checkbox-ci-shadow-size:3px;
30
30
  --_rs-checkbox-ci-indeterminate-icon-border-width:8px 3px;
31
31
  }
32
- ._sizeL_12r7b5e_31{
32
+ ._sizeL_8m8wcc_31{
33
33
  --_rs-checkbox-ci-mark-s-display:none;
34
34
  --_rs-checkbox-ci-mark-m-display:none;
35
35
  --_rs-checkbox-ci-mark-l-display:initial;
@@ -37,14 +37,14 @@
37
37
  --_rs-checkbox-ci-shadow-size:4px;
38
38
  --_rs-checkbox-ci-indeterminate-icon-border-width:9px 3px;
39
39
  }
40
- ._classic_12r7b5e_35{
40
+ ._classic_8m8wcc_35{
41
41
  --_rs-checkbox-ci-mark-color:#FFFFFF;
42
42
  --_rs-checkbox-ci-indeterminate-icon-border-color:var(--_rs-color-primary);
43
43
  --_rs-checkbox-ci-indeterminate-icon-background-color:#FFFFFF;
44
44
  --_rs-checkbox-ci-checked-icon-border-color:var(--_rs-color-primary);
45
45
  --_rs-checkbox-ci-hover-icon-box-shadow:var(--_rs-color-primary-t-fog);
46
46
  }
47
- ._rock_12r7b5e_38{
47
+ ._rock_8m8wcc_38{
48
48
  --_rs-checkbox-ci-mark-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
49
49
  --_rs-checkbox-ci-indeterminate-icon-border-color:rgb(
50
50
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
@@ -60,7 +60,7 @@
60
60
  0.1
61
61
  );
62
62
  }
63
- ._checkbox_12r7b5e_15{
63
+ ._checkbox_8m8wcc_15{
64
64
  --_rs-theme-dark:var(
65
65
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
66
66
  var(--rs-theme-dark, 0)
@@ -70,7 +70,7 @@
70
70
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
71
71
  }
72
72
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
73
- ._checkbox_12r7b5e_15{
73
+ ._checkbox_8m8wcc_15{
74
74
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
75
75
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
76
76
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -79,7 +79,7 @@
79
79
  }
80
80
  }
81
81
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
82
- ._checkbox_12r7b5e_15{
82
+ ._checkbox_8m8wcc_15{
83
83
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
84
84
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
85
85
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -88,18 +88,18 @@
88
88
  }
89
89
  }
90
90
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
91
- ._checkbox_12r7b5e_15{
91
+ ._checkbox_8m8wcc_15{
92
92
  --_rs-color-danger:color-mix(in srgb, #CC1400 calc(100%*var(--_rs-theme-light-coefficient, 1)), #FF6553 calc(100%*var(--_rs-theme-dark-coefficient, 0)));
93
93
  --_rs-color-danger-bg:color-mix(in srgb, rgba(204,20,0, 0.2) calc(100%*var(--_rs-theme-light-coefficient, 1)), rgba(255,101,83, 0.2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
94
94
  }
95
95
  }
96
96
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
97
- ._checkbox_12r7b5e_15{
97
+ ._checkbox_8m8wcc_15{
98
98
  --_rs-color-danger:rgb(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83));
99
99
  --_rs-color-danger-bg:rgba(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83), 0.2);
100
100
  }
101
101
  }
102
- ._checkbox_12r7b5e_15 {
102
+ ._checkbox_8m8wcc_15 {
103
103
 
104
104
  position:relative;
105
105
 
@@ -114,7 +114,7 @@
114
114
 
115
115
  text-align:left;
116
116
  }
117
- ._input_12r7b5e_65{
117
+ ._input_8m8wcc_65{
118
118
  position:absolute;
119
119
  z-index:-1;
120
120
 
@@ -124,7 +124,7 @@
124
124
 
125
125
  border:0;
126
126
  }
127
- ._icon_12r7b5e_76{
127
+ ._icon_8m8wcc_76{
128
128
  display:inline-block;
129
129
  float:left;
130
130
 
@@ -140,17 +140,17 @@
140
140
 
141
141
  transition:border-width var(--rs-transition-function, ease-out) 100ms, border-color var(--rs-transition-function, ease-out) 100ms;
142
142
  }
143
- ._enabled_12r7b5e_93 ._icon_12r7b5e_76{
143
+ ._enabled_8m8wcc_93 ._icon_8m8wcc_76{
144
144
  cursor:pointer;
145
145
  }
146
- ._indeterminate_12r7b5e_97 ._icon_12r7b5e_76{
146
+ ._indeterminate_8m8wcc_97 ._icon_8m8wcc_76{
147
147
  border-width:var(--_rs-checkbox-ci-indeterminate-icon-border-width);
148
148
  }
149
- ._input_12r7b5e_65:checked + ._icon_12r7b5e_76{
149
+ ._input_8m8wcc_65:checked + ._icon_8m8wcc_76{
150
150
  border-width:calc(var(--_rs-checkbox-ci-size)/2);
151
151
  }
152
- ._disabled_12r7b5e_105 ._icon_12r7b5e_76._icon_12r7b5e_76,
153
- ._input_12r7b5e_65:disabled + ._icon_12r7b5e_76{
152
+ ._disabled_8m8wcc_105 ._icon_8m8wcc_76._icon_8m8wcc_76,
153
+ ._input_8m8wcc_65:disabled + ._icon_8m8wcc_76{
154
154
  border-color:rgb(calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(187 - var(--_rs-theme-dark-coefficient, 0)*91));
155
155
 
156
156
  cursor:not-allowed;
@@ -158,27 +158,27 @@
158
158
 
159
159
  background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
160
160
  }
161
- ._input_12r7b5e_65:hover + ._icon_12r7b5e_76,
162
- ._enabled_12r7b5e_93:hover ._icon_12r7b5e_76{
161
+ ._input_8m8wcc_65:hover + ._icon_8m8wcc_76,
162
+ ._enabled_8m8wcc_93:hover ._icon_8m8wcc_76{
163
163
  background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*182));
164
164
  }
165
- ._enabled_12r7b5e_93._indeterminate_12r7b5e_97 ._icon_12r7b5e_76,
166
- ._enabled_12r7b5e_93._indeterminate_12r7b5e_97:hover ._icon_12r7b5e_76,
167
- ._enabled_12r7b5e_93._indeterminate_12r7b5e_97 ._input_12r7b5e_65:hover + ._icon_12r7b5e_76{
165
+ ._enabled_8m8wcc_93._indeterminate_8m8wcc_97 ._icon_8m8wcc_76,
166
+ ._enabled_8m8wcc_93._indeterminate_8m8wcc_97:hover ._icon_8m8wcc_76,
167
+ ._enabled_8m8wcc_93._indeterminate_8m8wcc_97 ._input_8m8wcc_65:hover + ._icon_8m8wcc_76{
168
168
  border-color:var(--_rs-checkbox-ci-indeterminate-icon-border-color);
169
169
 
170
170
  background-color:var(
171
171
  --_rs-checkbox-ci-indeterminate-icon-background-color
172
172
  );
173
173
  }
174
- ._enabled_12r7b5e_93 ._input_12r7b5e_65:checked + ._icon_12r7b5e_76._icon_12r7b5e_76{
174
+ ._enabled_8m8wcc_93 ._input_8m8wcc_65:checked + ._icon_8m8wcc_76._icon_8m8wcc_76{
175
175
  border-color:var(--_rs-checkbox-ci-checked-icon-border-color);
176
176
  }
177
- ._error_12r7b5e_134 ._icon_12r7b5e_76._icon_12r7b5e_76._icon_12r7b5e_76._icon_12r7b5e_76,
178
- ._input_12r7b5e_65:invalid + ._icon_12r7b5e_76._icon_12r7b5e_76._icon_12r7b5e_76{
177
+ ._error_8m8wcc_134 ._icon_8m8wcc_76._icon_8m8wcc_76._icon_8m8wcc_76._icon_8m8wcc_76,
178
+ ._input_8m8wcc_65:invalid + ._icon_8m8wcc_76._icon_8m8wcc_76._icon_8m8wcc_76{
179
179
  border-color:var(--_rs-color-danger);
180
180
  }
181
- ._icon_12r7b5e_76::after{
181
+ ._icon_8m8wcc_76::after{
182
182
  position:absolute;
183
183
  top:var(--_rs-checkbox-ci-shadow-size);
184
184
  right:var(--_rs-checkbox-ci-shadow-size);
@@ -187,15 +187,15 @@
187
187
 
188
188
  content:'';
189
189
  }
190
- ._enabled_12r7b5e_93:hover > ._icon_12r7b5e_76::after,
191
- label:hover ._enabled_12r7b5e_93 > ._icon_12r7b5e_76::after,
192
- ._enabled_12r7b5e_93 ._input_12r7b5e_65:active + ._icon_12r7b5e_76::after{
190
+ ._enabled_8m8wcc_93:hover > ._icon_8m8wcc_76::after,
191
+ label:hover ._enabled_8m8wcc_93 > ._icon_8m8wcc_76::after,
192
+ ._enabled_8m8wcc_93 ._input_8m8wcc_65:active + ._icon_8m8wcc_76::after{
193
193
  box-shadow:0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-checkbox-ci-hover-icon-box-shadow);
194
194
  }
195
- ._enabled_12r7b5e_93 ._input_12r7b5e_65:focus[data-focus-method='key'] + ._icon_12r7b5e_76::after{
195
+ ._enabled_8m8wcc_93 ._input_8m8wcc_65:focus[data-focus-method='key'] + ._icon_8m8wcc_76::after{
196
196
  box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-color-primary-t-dim);
197
197
  }
198
- ._checkmark_12r7b5e_161{
198
+ ._checkmark_8m8wcc_161{
199
199
  position:absolute;
200
200
  top:var(--_rs-checkbox-ci-shadow-size);
201
201
  left:var(--_rs-checkbox-ci-shadow-size);
@@ -206,36 +206,36 @@
206
206
  height:var(--_rs-checkbox-ci-size);
207
207
  fill:currentColor;
208
208
  }
209
- ._enabled_12r7b5e_93 ._checkmark_12r7b5e_161{
209
+ ._enabled_8m8wcc_93 ._checkmark_8m8wcc_161{
210
210
  color:var(--_rs-checkbox-ci-mark-color);
211
211
  }
212
- ._disabled_12r7b5e_105 ._checkmark_12r7b5e_161,
213
- ._input_12r7b5e_65:disabled + ._icon_12r7b5e_76 > ._checkmark_12r7b5e_161{
212
+ ._disabled_8m8wcc_105 ._checkmark_8m8wcc_161,
213
+ ._input_8m8wcc_65:disabled + ._icon_8m8wcc_76 > ._checkmark_8m8wcc_161{
214
214
  color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
215
215
  }
216
- ._input_12r7b5e_65:checked + ._icon_12r7b5e_76 > ._checkmark_12r7b5e_161{
216
+ ._input_8m8wcc_65:checked + ._icon_8m8wcc_76 > ._checkmark_8m8wcc_161{
217
217
  display:block;
218
218
  }
219
- ._markS_12r7b5e_186{
219
+ ._markS_8m8wcc_186{
220
220
  display:var(--_rs-checkbox-ci-mark-s-display);
221
221
  }
222
- ._markM_12r7b5e_189{
222
+ ._markM_8m8wcc_189{
223
223
  display:var(--_rs-checkbox-ci-mark-m-display);
224
224
  }
225
- ._markL_12r7b5e_192{
225
+ ._markL_8m8wcc_192{
226
226
  display:var(--_rs-checkbox-ci-mark-l-display);
227
227
  }
228
- ._errorMessage_12r7b5e_196{
228
+ ._errorMessage_8m8wcc_196{
229
229
  margin-top:var(--_rs-checkbox-parts-offset);
230
230
  }
231
231
 
232
- ._themeLight_1jig93v_6{
232
+ ._themeLight_1m3ze1h_6{
233
233
  --rs-theme-dark:0;
234
234
  }
235
- ._themeDark_1jig93v_9{
235
+ ._themeDark_1m3ze1h_9{
236
236
  --rs-theme-dark:1;
237
237
  }
238
- ._container_1jig93v_13{
238
+ ._container_1m3ze1h_13{
239
239
  --_rs-theme-dark:var(
240
240
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
241
  var(--rs-theme-dark, 0)
@@ -245,7 +245,7 @@
245
245
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
246
  }
247
247
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._container_1jig93v_13{
248
+ ._container_1m3ze1h_13{
249
249
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
250
250
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
251
251
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -254,7 +254,7 @@
254
254
  }
255
255
  }
256
256
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._container_1jig93v_13{
257
+ ._container_1m3ze1h_13{
258
258
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
259
259
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
260
260
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -262,11 +262,11 @@
262
262
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
263
263
  }
264
264
  }
265
- ._sizeS_1jig93v_18{
265
+ ._sizeS_1m3ze1h_18{
266
266
  --_rs-checkbox-list-label-offset:4px;
267
267
  --_rs-checkbox-list-left-offset:28px;
268
268
  }
269
- ._sizeS_1jig93v_18 [data-rs-internal='checkbox-list__label']{
269
+ ._sizeS_1m3ze1h_18 [data-rs-internal='checkbox-list__label']{
270
270
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
271
271
  --_rs-typography-text-transform:initial;
272
272
  --_rs-typography-font-variant-numeric:initial;
@@ -301,7 +301,7 @@
301
301
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
302
302
  --_rs-typography-link-border-bottom-width-from-text:1px;
303
303
  }
304
- ._sizeS_1jig93v_18 [data-rs-internal='checkbox-list__bold-label']{
304
+ ._sizeS_1m3ze1h_18 [data-rs-internal='checkbox-list__bold-label']{
305
305
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
306
306
  --_rs-typography-text-transform:initial;
307
307
  --_rs-typography-font-variant-numeric:initial;
@@ -333,11 +333,11 @@
333
333
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
334
334
  --_rs-typography-link-border-bottom-width-from-text:2px;
335
335
  }
336
- ._sizeM_1jig93v_21{
336
+ ._sizeM_1m3ze1h_21{
337
337
  --_rs-checkbox-list-label-offset:8px;
338
338
  --_rs-checkbox-list-left-offset:32px;
339
339
  }
340
- ._sizeM_1jig93v_21 [data-rs-internal='checkbox-list__label']{
340
+ ._sizeM_1m3ze1h_21 [data-rs-internal='checkbox-list__label']{
341
341
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
342
342
  --_rs-typography-text-transform:initial;
343
343
  --_rs-typography-font-variant-numeric:initial;
@@ -376,11 +376,11 @@
376
376
  --_rs-typography-link-border-bottom-width-from-text:1px;
377
377
  }
378
378
  @media screen and (max-width: 640px){
379
- ._sizeM_1jig93v_21 [data-rs-internal='checkbox-list__label']{
379
+ ._sizeM_1m3ze1h_21 [data-rs-internal='checkbox-list__label']{
380
380
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
381
381
  }
382
382
  }
383
- ._sizeM_1jig93v_21 [data-rs-internal='checkbox-list__bold-label']{
383
+ ._sizeM_1m3ze1h_21 [data-rs-internal='checkbox-list__bold-label']{
384
384
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
385
385
  --_rs-typography-text-transform:initial;
386
386
  --_rs-typography-font-variant-numeric:initial;
@@ -412,11 +412,11 @@
412
412
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
413
413
  --_rs-typography-link-border-bottom-width-from-text:2px;
414
414
  }
415
- ._sizeL_1jig93v_24{
415
+ ._sizeL_1m3ze1h_24{
416
416
  --_rs-checkbox-list-label-offset:12px;
417
417
  --_rs-checkbox-list-left-offset:44px;
418
418
  }
419
- ._sizeL_1jig93v_24 [data-rs-internal='checkbox-list__label']{
419
+ ._sizeL_1m3ze1h_24 [data-rs-internal='checkbox-list__label']{
420
420
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
421
421
  --_rs-typography-text-transform:initial;
422
422
  --_rs-typography-font-variant-numeric:initial;
@@ -455,11 +455,11 @@
455
455
  --_rs-typography-link-border-bottom-width-from-text:1px;
456
456
  }
457
457
  @media screen and (max-width: 640px){
458
- ._sizeL_1jig93v_24 [data-rs-internal='checkbox-list__label']{
458
+ ._sizeL_1m3ze1h_24 [data-rs-internal='checkbox-list__label']{
459
459
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
460
460
  }
461
461
  }
462
- ._sizeL_1jig93v_24 [data-rs-internal='checkbox-list__bold-label']{
462
+ ._sizeL_1m3ze1h_24 [data-rs-internal='checkbox-list__bold-label']{
463
463
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
464
464
  --_rs-typography-text-transform:initial;
465
465
  --_rs-typography-font-variant-numeric:initial;
@@ -491,10 +491,10 @@
491
491
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
492
492
  --_rs-typography-link-border-bottom-width-from-text:2px;
493
493
  }
494
- ._inner_1jig93v_28{
494
+ ._inner_1m3ze1h_28{
495
495
  --rs-out-checkbox-list-left-offset:var(--_rs-checkbox-list-left-offset);
496
496
  }
497
- ._label_1jig93v_32{
497
+ ._label_1m3ze1h_32{
498
498
  letter-spacing:var(
499
499
  --rs-text-base-letter-spacing,
500
500
  var(--_rs-typography-letter-spacing)
@@ -514,23 +514,23 @@
514
514
  margin:0 0 var(--_rs-checkbox-list-label-offset) 0;
515
515
  padding:0;
516
516
  }
517
- ._disabled_1jig93v_39 ._label_1jig93v_32{
517
+ ._disabled_1m3ze1h_39 ._label_1m3ze1h_32{
518
518
  color:var(
519
519
  --rs-color-pale,
520
520
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
521
521
  );
522
522
  }
523
- ._footer_1jig93v_44{
523
+ ._footer_1m3ze1h_44{
524
524
  display:flex;
525
525
  flex-direction:column;
526
526
  }
527
- ._errorMessage_1jig93v_49{
527
+ ._errorMessage_1m3ze1h_49{
528
528
  order:99;
529
529
  }
530
- ._error_1jig93v_49 ._errorMessage_1jig93v_49{
530
+ ._error_1m3ze1h_49 ._errorMessage_1m3ze1h_49{
531
531
  order:0;
532
532
  }
533
- ._note_1jig93v_58{
533
+ ._note_1m3ze1h_58{
534
534
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
535
535
  --_rs-typography-text-transform:initial;
536
536
  --_rs-typography-font-variant-numeric:initial;
@@ -590,7 +590,7 @@
590
590
 
591
591
  order:1;
592
592
  }
593
- ._disabled_1jig93v_39 ._note_1jig93v_58{
593
+ ._disabled_1m3ze1h_39 ._note_1m3ze1h_58{
594
594
  --_rs-typography-hardness-color:var(
595
595
  --rs-color-pale,
596
596
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
package/lib/parts/checkbox-list.p.module.css.js CHANGED
@@ -1,16 +1,16 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1jig93v_6",
3
- "themeDark": "_themeDark_1jig93v_9",
4
- "container": "_container_1jig93v_13",
5
- "sizeS": "_sizeS_1jig93v_18",
6
- "sizeM": "_sizeM_1jig93v_21",
7
- "sizeL": "_sizeL_1jig93v_24",
8
- "inner": "_inner_1jig93v_28",
9
- "label": "_label_1jig93v_32",
10
- "disabled": "_disabled_1jig93v_39",
11
- "footer": "_footer_1jig93v_44",
12
- "errorMessage": "_errorMessage_1jig93v_49",
13
- "error": "_error_1jig93v_49",
14
- "note": "_note_1jig93v_58"
2
+ "themeLight": "_themeLight_1m3ze1h_6",
3
+ "themeDark": "_themeDark_1m3ze1h_9",
4
+ "container": "_container_1m3ze1h_13",
5
+ "sizeS": "_sizeS_1m3ze1h_18",
6
+ "sizeM": "_sizeM_1m3ze1h_21",
7
+ "sizeL": "_sizeL_1m3ze1h_24",
8
+ "inner": "_inner_1m3ze1h_28",
9
+ "label": "_label_1m3ze1h_32",
10
+ "disabled": "_disabled_1m3ze1h_39",
11
+ "footer": "_footer_1m3ze1h_44",
12
+ "errorMessage": "_errorMessage_1m3ze1h_49",
13
+ "error": "_error_1m3ze1h_49",
14
+ "note": "_note_1m3ze1h_58"
15
15
  };
16
16
  export { styles as default };
package/lib/parts/checkbox.p.module.css.js CHANGED
@@ -1,25 +1,25 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_12r7b5e_8",
3
- "themeDark": "_themeDark_12r7b5e_11",
4
- "checkboxSizeS": "_checkboxSizeS_12r7b5e_15",
5
- "checkboxSizeM": "_checkboxSizeM_12r7b5e_18",
6
- "checkboxSizeL": "_checkboxSizeL_12r7b5e_21",
7
- "sizeS": "_sizeS_12r7b5e_25",
8
- "sizeM": "_sizeM_12r7b5e_28",
9
- "sizeL": "_sizeL_12r7b5e_31",
10
- "classic": "_classic_12r7b5e_35",
11
- "rock": "_rock_12r7b5e_38",
12
- "checkbox": "_checkbox_12r7b5e_15",
13
- "input": "_input_12r7b5e_65",
14
- "icon": "_icon_12r7b5e_76",
15
- "enabled": "_enabled_12r7b5e_93",
16
- "indeterminate": "_indeterminate_12r7b5e_97",
17
- "disabled": "_disabled_12r7b5e_105",
18
- "error": "_error_12r7b5e_134",
19
- "checkmark": "_checkmark_12r7b5e_161",
20
- "markS": "_markS_12r7b5e_186",
21
- "markM": "_markM_12r7b5e_189",
22
- "markL": "_markL_12r7b5e_192",
23
- "errorMessage": "_errorMessage_12r7b5e_196"
2
+ "themeLight": "_themeLight_8m8wcc_8",
3
+ "themeDark": "_themeDark_8m8wcc_11",
4
+ "checkboxSizeS": "_checkboxSizeS_8m8wcc_15",
5
+ "checkboxSizeM": "_checkboxSizeM_8m8wcc_18",
6
+ "checkboxSizeL": "_checkboxSizeL_8m8wcc_21",
7
+ "sizeS": "_sizeS_8m8wcc_25",
8
+ "sizeM": "_sizeM_8m8wcc_28",
9
+ "sizeL": "_sizeL_8m8wcc_31",
10
+ "classic": "_classic_8m8wcc_35",
11
+ "rock": "_rock_8m8wcc_38",
12
+ "checkbox": "_checkbox_8m8wcc_15",
13
+ "input": "_input_8m8wcc_65",
14
+ "icon": "_icon_8m8wcc_76",
15
+ "enabled": "_enabled_8m8wcc_93",
16
+ "indeterminate": "_indeterminate_8m8wcc_97",
17
+ "disabled": "_disabled_8m8wcc_105",
18
+ "error": "_error_8m8wcc_134",
19
+ "checkmark": "_checkmark_8m8wcc_161",
20
+ "markS": "_markS_8m8wcc_186",
21
+ "markM": "_markM_8m8wcc_189",
22
+ "markL": "_markL_8m8wcc_192",
23
+ "errorMessage": "_errorMessage_8m8wcc_196"
24
24
  };
25
25
  export { styles as default };
package/llm/components/checkbox.md CHANGED
@@ -265,58 +265,41 @@ import { CheckboxControl } from '@rescui/checkbox';
265
265
 
266
266
  ##### Demo
267
267
 
268
- Instead of separate classes, it may be a single class with `@media` queries inside:
268
+ Use the controls to see the effect at different viewport widths.
269
269
 
270
270
  ```tsx
271
271
  import { Checkbox, CheckboxList } from '@rescui/checkbox';
272
272
  import { useState } from 'react';
273
273
 
274
- const MyCheckboxList = ({ className }) => {
274
+ const MyCheckboxList = () => {
275
275
  const [groupValue, setGroupValue] = useState(['item2']);
276
276
  return (
277
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
278
- <CheckboxList
279
- value={groupValue}
280
- onChange={setGroupValue}
281
- className={className}
282
- >
283
- <Checkbox value="item1">Option 1</Checkbox>
284
- <Checkbox value="item2">Option 2</Checkbox>
285
- </CheckboxList>
286
- </div>
277
+ <CheckboxList
278
+ value={groupValue}
279
+ onChange={setGroupValue}
280
+ className="my-checkbox-list"
281
+ >
282
+ <Checkbox value="item1">Option 1</Checkbox>
283
+ <Checkbox value="item2">Option 2</Checkbox>
284
+ </CheckboxList>
287
285
  );
288
286
  };
289
287
 
290
- render(
291
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
292
- <div>
293
- <p>Default:</p>
294
- <MyCheckboxList />
295
- </div>
296
- <div>
297
- <p>Var1:</p>
298
- <MyCheckboxList className={`my-checkbox-list-var-1`} />
299
- </div>
300
- <div>
301
- <p>Var1 & Var2 combined:</p>
302
- <MyCheckboxList
303
- className={`my-checkbox-list-var-1 my-checkbox-list-var-2`}
304
- />
305
- </div>
306
- </div>
307
- );
288
+ render(<MyCheckboxList />);
308
289
  ```
309
290
 
310
291
  ```postcss
311
292
  @import '@rescui/checkbox/lib/public-api.p.css';
312
293
 
313
- .my-checkbox-list-var-1 {
314
- @mixin rs-checkbox-list-size-l;
315
- @mixin rs-checkbox-list-mode-rock;
316
- }
317
- .my-checkbox-list-var-2 {
318
- @mixin rs-checkbox-list-size-s;
319
- @mixin rs-checkbox-list-mode-classic;
294
+ .my-checkbox-list {
295
+ @media (max-width: 640px) {
296
+ @mixin rs-checkbox-list-size-l;
297
+ @mixin rs-checkbox-list-mode-rock;
298
+ }
299
+ @media (max-width: 500px) {
300
+ @mixin rs-checkbox-list-size-s;
301
+ @mixin rs-checkbox-list-mode-classic;
302
+ }
320
303
  }
321
304
  ```
322
305
 
@@ -332,49 +315,34 @@ render(
332
315
 
333
316
  ##### Demo
334
317
 
335
- Instead of separate classes, it may be a single class with `@media` queries inside:
318
+ Use the controls to see the effect at different viewport widths.
336
319
 
337
320
  ```tsx
338
321
  import { Checkbox } from '@rescui/checkbox';
339
322
 
340
- const MyCheckbox = ({ className }) => {
323
+ const MyCheckbox = () => {
341
324
  return (
342
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
343
- <Checkbox className={className} defaultChecked>
344
- Option
345
- </Checkbox>
346
- </div>
325
+ <Checkbox className="my-checkbox" defaultChecked>
326
+ Option
327
+ </Checkbox>
347
328
  );
348
329
  };
349
330
 
350
- render(
351
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
352
- <div>
353
- <p>Default:</p>
354
- <MyCheckbox />
355
- </div>
356
- <div>
357
- <p>Var1:</p>
358
- <MyCheckbox className={`my-checkbox-var-1`} />
359
- </div>
360
- <div>
361
- <p>Var1 & Var2 combined:</p>
362
- <MyCheckbox className={`my-checkbox-var-1 my-checkbox-var-2`} />
363
- </div>
364
- </div>
365
- );
331
+ render(<MyCheckbox />);
366
332
  ```
367
333
 
368
334
  ```postcss attached
369
335
  @import '@rescui/checkbox/lib/public-api.p.css';
370
336
 
371
- .my-checkbox-var-1 {
372
- @mixin rs-checkbox-size-l;
373
- @mixin rs-checkbox-mode-rock;
374
- }
375
- .my-checkbox-var-2 {
376
- @mixin rs-checkbox-size-s;
377
- @mixin rs-checkbox-mode-classic;
337
+ .my-checkbox {
338
+ @media (max-width: 640px) {
339
+ @mixin rs-checkbox-size-l;
340
+ @mixin rs-checkbox-mode-rock;
341
+ }
342
+ @media (max-width: 500px) {
343
+ @mixin rs-checkbox-size-s;
344
+ @mixin rs-checkbox-mode-classic;
345
+ }
378
346
  }
379
347
  ```
380
348
 
@@ -390,48 +358,29 @@ render(
390
358
 
391
359
  ##### Demo
392
360
 
393
- Instead of separate classes, it may be a single class with `@media` queries inside:
361
+ Use the controls to see the effect at different viewport widths.
394
362
 
395
363
  ```tsx
396
364
  import { CheckboxControl } from '@rescui/checkbox';
397
365
 
398
- const MyCheckboxControl = ({ className }) => {
399
- return (
400
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
401
- <CheckboxControl className={className} defaultChecked />
402
- </div>
403
- );
366
+ const MyCheckboxControl = () => {
367
+ return <CheckboxControl className="my-checkbox-control" defaultChecked />;
404
368
  };
405
369
 
406
- render(
407
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
408
- <div>
409
- <p>Default:</p>
410
- <MyCheckboxControl />
411
- </div>
412
- <div>
413
- <p>Var1:</p>
414
- <MyCheckboxControl className={`my-checkbox-control-var-1`} />
415
- </div>
416
- <div>
417
- <p>Var1 & Var2 combined:</p>
418
- <MyCheckboxControl
419
- className={`my-checkbox-control-var-1 my-checkbox-control-var-2`}
420
- />
421
- </div>
422
- </div>
423
- );
370
+ render(<MyCheckboxControl />);
424
371
  ```
425
372
 
426
373
  ```postcss
427
374
  @import '@rescui/checkbox/lib/public-api.p.css';
428
375
 
429
- .my-checkbox-control-var-1 {
430
- @mixin rs-checkbox-control-size-l;
431
- @mixin rs-checkbox-control-mode-rock;
432
- }
433
- .my-checkbox-control-var-2 {
434
- @mixin rs-checkbox-control-size-s;
435
- @mixin rs-checkbox-control-mode-classic;
376
+ .my-checkbox-control {
377
+ @media (max-width: 640px) {
378
+ @mixin rs-checkbox-control-size-l;
379
+ @mixin rs-checkbox-control-mode-rock;
380
+ }
381
+ @media (max-width: 500px) {
382
+ @mixin rs-checkbox-control-size-s;
383
+ @mixin rs-checkbox-control-mode-classic;
384
+ }
436
385
  }
437
386
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/checkbox",
3
- "version": "0.11.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
3
+ "version": "0.11.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,8 +17,8 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "@rescui/form-field": "0.1.4-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
21
- "@rescui/menu": "0.13.6-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
20
+ "@rescui/form-field": "0.1.4-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
21
+ "@rescui/menu": "0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
22
22
  "classnames": "^2.2.6"
23
23
  },
24
24
  "peerDependencies": {
@@ -27,10 +27,10 @@
27
27
  "react": ">=16.8.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
30
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.68+d8a5b0551",
31
31
  "@rescui/postcss-preset-library": "0.2.2",
32
32
  "@rescui/scripts": "0.5.2",
33
- "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
33
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
34
34
  "@rescui/visual-regression": "0.1.4"
35
35
  },
36
36
  "scripts": {
@@ -38,5 +38,5 @@
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
41
+ "gitHead": "d8a5b055167d8b1ea55c32621655b8e0acc98a1a"
42
42
  }