@volverjs/style 0.1.2-beta.27 → 0.1.2-beta.28

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 (24) hide show
  1. package/dist/components/vv-checkbox-group.css +1 -0
  2. package/dist/components/vv-checkbox.css +1 -0
  3. package/dist/components/vv-radio-group.css +1 -0
  4. package/dist/components/vv-radio.css +1 -0
  5. package/dist/components.css +1 -1
  6. package/dist/volver.css +1 -1
  7. package/package.json +9 -9
  8. package/src/_config.scss +4 -4
  9. package/src/_preflight.scss +21 -24
  10. package/src/components/index.scss +4 -4
  11. package/src/components/{vv-input-radio-group.scss → vv-checkbox-group.scss} +2 -2
  12. package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} +2 -2
  13. package/src/components/{vv-input-checkbox-group.scss → vv-radio-group.scss} +2 -2
  14. package/src/components/{vv-input-radio.scss → vv-radio.scss} +2 -2
  15. package/src/settings/_index.scss +4 -4
  16. package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} +1 -1
  17. package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} +35 -9
  18. package/src/settings/components/_vv-radio-group.scss +3 -0
  19. package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} +31 -3
  20. package/dist/components/vv-input-checkbox-group.css +0 -1
  21. package/dist/components/vv-input-checkbox.css +0 -1
  22. package/dist/components/vv-input-radio-group.css +0 -1
  23. package/dist/components/vv-input-radio.css +0 -1
  24. package/src/settings/components/_vv-input-radio-group.scss +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volverjs/style",
3
- "version": "0.1.2-beta.27",
3
+ "version": "0.1.2-beta.28",
4
4
  "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
5
5
  "main": "dist/style.css",
6
6
  "style": "dist/style.css",
@@ -39,24 +39,24 @@
39
39
  "./scss/components/vv-button": "./src/components/vv-button.scss",
40
40
  "./components/vv-card": "./dist/components/vv-card.css",
41
41
  "./scss/components/vv-card": "./src/components/vv-card.scss",
42
+ "./components/vv-checkbox-group": "./dist/components/vv-checkbox-group.css",
43
+ "./scss/components/vv-checkbox-group": "./src/components/vv-checkbox-group.scss",
44
+ "./components/vv-checkbox": "./dist/components/vv-checkbox.css",
45
+ "./scss/components/vv-checkbox": "./src/components/vv-checkbox.scss",
42
46
  "./components/vv-dialog": "./dist/components/vv-dialog.css",
43
47
  "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
44
48
  "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
45
49
  "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
46
- "./components/vv-input-checkbox-group": "./dist/components/vv-input-checkbox-group.css",
47
- "./scss/components/vv-input-checkbox-group": "./src/components/vv-input-checkbox-group.scss",
48
- "./components/vv-input-checkbox": "./dist/components/vv-input-checkbox.css",
49
- "./scss/components/vv-input-checkbox": "./src/components/vv-input-checkbox.scss",
50
- "./components/vv-input-radio-group": "./dist/components/vv-input-radio-group.css",
51
- "./scss/components/vv-input-radio-group": "./src/components/vv-input-radio-group.scss",
52
- "./components/vv-input-radio": "./dist/components/vv-input-radio.css",
53
- "./scss/components/vv-input-radio": "./src/components/vv-input-radio.scss",
54
50
  "./components/vv-input-text": "./dist/components/vv-input-text.css",
55
51
  "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
56
52
  "./components/vv-nav": "./dist/components/vv-nav.css",
57
53
  "./scss/components/vv-nav": "./src/components/vv-nav.scss",
58
54
  "./components/vv-progress": "./dist/components/vv-progress.css",
59
55
  "./scss/components/vv-progress": "./src/components/vv-progress.scss",
56
+ "./components/vv-radio-group": "./dist/components/vv-radio-group.css",
57
+ "./scss/components/vv-radio-group": "./src/components/vv-radio-group.scss",
58
+ "./components/vv-radio": "./dist/components/vv-radio.css",
59
+ "./scss/components/vv-radio": "./src/components/vv-radio.scss",
60
60
  "./components/vv-select": "./dist/components/vv-select.css",
61
61
  "./scss/components/vv-select": "./src/components/vv-select.scss",
62
62
  "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
package/src/_config.scss CHANGED
@@ -21,10 +21,10 @@ $components-names: (
21
21
  vv-card: $components-prefix + -card,
22
22
  vv-dialog: $components-prefix + -dialog,
23
23
  vv-dropdown: $components-prefix + -dropdown,
24
- vv-input-checkbox-group: $components-prefix + -input-checkbox-group,
25
- vv-input-checkbox: $components-prefix + -input-checkbox,
26
- vv-input-radio-group: $components-prefix + -input-radio-group,
27
- vv-input-radio: $components-prefix + -input-radio,
24
+ vv-checkbox-group: $components-prefix + -checkbox-group,
25
+ vv-checkbox: $components-prefix + -checkbox,
26
+ vv-radio-group: $components-prefix + -radio-group,
27
+ vv-radio: $components-prefix + -radio,
28
28
  vv-avatar: $components-prefix + -avatar,
29
29
  vv-input-text: $components-prefix + -input-text,
30
30
  vv-nav: $components-prefix + -nav,
package/src/_preflight.scss CHANGED
@@ -244,98 +244,95 @@
244
244
 
245
245
  // checkbox
246
246
  &:where(fieldset:has(input[type='checkbox'])) {
247
- @extend %vv-input-checkbox-group !optional;
247
+ @extend %vv-checkbox-group !optional;
248
248
 
249
249
  :where(legend) {
250
- @extend %vv-input-checkbox-group__legend !optional;
250
+ @extend %vv-checkbox-group__legend !optional;
251
251
  }
252
252
  }
253
253
 
254
254
  &:where(label:has(input[type='checkbox'])) {
255
255
  @extend %w-full !optional;
256
- @extend %vv-input-checkbox !optional;
256
+ @extend %vv-checkbox !optional;
257
257
 
258
258
  :where(input[type='checkbox']) {
259
- @extend %vv-input-checkbox__input !optional;
259
+ @extend %vv-checkbox__input !optional;
260
260
 
261
261
  &:checked {
262
- @extend %vv-input-checkbox-element-input--checked !optional;
262
+ @extend %vv-checkbox-element-input--checked !optional;
263
263
  }
264
264
 
265
265
  &:indeterminate {
266
- @extend %vv-input-checkbox-element-input--indeterminate
267
- !optional;
266
+ @extend %vv-checkbox-element-input--indeterminate !optional;
268
267
  }
269
268
 
270
269
  &:focus-visible {
271
- @extend %vv-input-checkbox-element-input--focus-visible
272
- !optional;
270
+ @extend %vv-checkbox-element-input--focus-visible !optional;
273
271
  }
274
272
  }
275
273
  }
276
274
 
277
275
  // switch
278
276
  &:where(label:has(input[type='checkbox'][role='switch'])) {
279
- @extend %vv-input-checkbox--switch !optional;
277
+ @extend %vv-checkbox--switch !optional;
280
278
 
281
279
  :where(input[type='checkbox'][role='switch']) {
282
- @extend %vv-input-checkbox-modifier-switch__input !optional;
280
+ @extend %vv-checkbox-modifier-switch__input !optional;
283
281
 
284
282
  &:hover {
285
- @extend %vv-input-checkbox-modifier-switch-element-input--hover
283
+ @extend %vv-checkbox-modifier-switch-element-input--hover
286
284
  !optional;
287
285
  }
288
286
 
289
287
  &:active {
290
- @extend %vv-input-checkbox-modifier-switch-element-input--active
288
+ @extend %vv-checkbox-modifier-switch-element-input--active
291
289
  !optional;
292
290
  }
293
291
 
294
292
  &:checked {
295
- @extend %vv-input-checkbox-modifier-switch-element-input--checked
293
+ @extend %vv-checkbox-modifier-switch-element-input--checked
296
294
  !optional;
297
295
  }
298
296
 
299
297
  &:focus-visible {
300
- @extend %vv-input-checkbox-modifier-switch-element-input--focus-visible
298
+ @extend %vv-checkbox-modifier-switch-element-input--focus-visible
301
299
  !optional;
302
300
  }
303
301
  }
304
302
  }
305
303
 
306
304
  &:where(label:has(input[type='checkbox']:disabled)) {
307
- @extend %vv-input-checkbox--disabled !optional;
305
+ @extend %vv-checkbox--disabled !optional;
308
306
  }
309
307
 
310
308
  // radio
311
309
  &:where(fieldset:has(input[type='radio'])) {
312
- @extend %vv-input-radio-group !optional;
310
+ @extend %vv-radio-group !optional;
313
311
 
314
312
  :where(legend) {
315
- @extend %vv-input-radio-group__legend !optional;
313
+ @extend %vv-radio-group__legend !optional;
316
314
  }
317
315
  }
318
316
 
319
317
  &:where(label:has(input[type='radio'])) {
320
318
  @extend %w-full !optional;
321
- @extend %vv-input-radio !optional;
319
+ @extend %vv-radio !optional;
322
320
 
323
321
  :where(input[type='radio']) {
324
- @extend %vv-input-radio__input !optional;
322
+ @extend %vv-radio__input !optional;
325
323
 
326
324
  &:checked {
327
- @extend %vv-input-radio-element-input--checked !optional;
325
+ @extend %vv-radio-element-input--checked !optional;
328
326
  }
329
327
 
330
328
  &:focus-visible {
331
- @extend %vv-input-radio-element-input--focus-visible
332
- !optional;
329
+ @extend %vv-radio-element-input--focus-visible !optional;
333
330
  }
334
331
  }
335
332
  }
336
333
 
337
334
  &:where(label:has(input[type='radio']:disabled)) {
338
- @extend %vv-input-radio--disabled !optional;
335
+ @extend %vv-radio--disabled !optional;
339
336
  }
340
337
 
341
338
  // textarea
package/src/components/index.scss CHANGED
@@ -7,10 +7,10 @@
7
7
  @use 'vv-card';
8
8
  @use 'vv-dialog';
9
9
  @use 'vv-dropdown';
10
- @use 'vv-input-checkbox-group';
11
- @use 'vv-input-checkbox';
12
- @use 'vv-input-radio-group';
13
- @use 'vv-input-radio';
10
+ @use 'vv-checkbox-group';
11
+ @use 'vv-checkbox';
12
+ @use 'vv-radio-group';
13
+ @use 'vv-radio';
14
14
  @use 'vv-avatar';
15
15
  @use 'vv-input-text';
16
16
  @use 'vv-nav';
package/src/components/{vv-input-radio-group.scss → vv-checkbox-group.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
2
  @use '../context' as *;
3
3
 
4
- $component-name: map.get($components-names, vv-input-radio-group);
5
- $component-map: $vv-input-radio-group;
4
+ $component-name: map.get($components-names, vv-checkbox-group);
5
+ $component-map: $vv-checkbox-group;
6
6
 
7
7
  @include spread-map-into-bem(
8
8
  $map: $component-map,
package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
2
  @use '../context' as *;
3
3
 
4
- $component-name: map.get($components-names, vv-input-checkbox);
5
- $component-map: $vv-input-checkbox;
4
+ $component-name: map.get($components-names, vv-checkbox);
5
+ $component-map: $vv-checkbox;
6
6
  $component-selector: '.#{ $component-name}';
7
7
 
8
8
  @include spread-map-into-bem(
package/src/components/{vv-input-checkbox-group.scss → vv-radio-group.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
2
  @use '../context' as *;
3
3
 
4
- $component-name: map.get($components-names, vv-input-checkbox-group);
5
- $component-map: $vv-input-checkbox-group;
4
+ $component-name: map.get($components-names, vv-radio-group);
5
+ $component-map: $vv-radio-group;
6
6
 
7
7
  @include spread-map-into-bem(
8
8
  $map: $component-map,
package/src/components/{vv-input-radio.scss → vv-radio.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
2
  @use '../context' as *;
3
3
 
4
- $component-name: map.get($components-names, vv-input-radio);
5
- $component-map: $vv-input-radio;
4
+ $component-name: map.get($components-names, vv-radio);
5
+ $component-map: $vv-radio;
6
6
  $component-selector: '.#{ $component-name}';
7
7
 
8
8
  @include spread-map-into-bem(
package/src/settings/_index.scss CHANGED
@@ -25,10 +25,10 @@
25
25
  @forward 'components/vv-card';
26
26
  @forward 'components/vv-dialog';
27
27
  @forward 'components/vv-dropdown';
28
- @forward 'components/vv-input-checkbox-group';
29
- @forward 'components/vv-input-checkbox';
30
- @forward 'components/vv-input-radio-group';
31
- @forward 'components/vv-input-radio';
28
+ @forward 'components/vv-checkbox-group';
29
+ @forward 'components/vv-checkbox';
30
+ @forward 'components/vv-radio-group';
31
+ @forward 'components/vv-radio';
32
32
  @forward 'components/vv-avatar';
33
33
  @forward 'components/vv-input-text';
34
34
  @forward 'components/vv-nav';
package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} RENAMED
@@ -1,4 +1,4 @@
1
- $vv-input-checkbox-group: (
1
+ $vv-checkbox-group: (
2
2
  display: var(--input-display),
3
3
  flex: var(--input-flex),
4
4
  flex-direction: var(--input-flex-direction),
package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} RENAMED
@@ -1,6 +1,6 @@
1
- $vv-input-checkbox: (
1
+ $vv-checkbox: (
2
2
  display: inline-flex,
3
- flex-wrap: nowrap,
3
+ flex-wrap: wrap,
4
4
  align-items: center,
5
5
  cursor: pointer,
6
6
  user-select: none,
@@ -14,17 +14,12 @@ $vv-input-checkbox: (
14
14
  opacity: 0.3,
15
15
  cursor: not-allowed,
16
16
  ),
17
- readonly: (
18
- opacity: 1,
19
- cursor: default,
20
- pointer-events: none,
21
- ),
22
17
  ),
23
18
  element: (
24
19
  input: (
25
20
  _alias: "> input[type='checkbox']",
26
21
  border: var(--spacing-2) solid var(--input-color),
27
- width: var(--spacing-20),
22
+ min-width: var(--spacing-20),
28
23
  height: var(--spacing-20),
29
24
  margin: 0 var(--input-label-gap) 0 0,
30
25
  background-position: center,
@@ -45,13 +40,30 @@ $vv-input-checkbox: (
45
40
  ),
46
41
  ),
47
42
  ),
43
+ hint: (
44
+ _alias: '> small',
45
+ flex-basis: 100%,
46
+ display: var(--input-hint-display),
47
+ font-size: var(--input-hint-font-size),
48
+ color: var(--input-hint-color),
49
+ padding-top: var(--input-hint-gap),
50
+ white-space: var(--input-hint-white-space),
51
+ text-overflow: var(--input-hint-text-overflow),
52
+ overflow: var(--input-hint-overflow),
53
+ max-width: var(--input-hint-max-width),
54
+ ),
48
55
  ),
49
56
  modifier: (
57
+ readonly: (
58
+ opacity: 1,
59
+ cursor: default,
60
+ pointer-events: none,
61
+ ),
50
62
  switch: (
51
63
  element: (
52
64
  input: (
53
65
  border: 0,
54
- width: var(--spacing-44),
66
+ min-width: var(--spacing-44),
55
67
  height: var(--spacing-24),
56
68
  border-radius: var(--spacing-12),
57
69
  background-color: var(--color-word-5),
@@ -98,5 +110,19 @@ $vv-input-checkbox: (
98
110
  ),
99
111
  ),
100
112
  ),
113
+ valid: (
114
+ element: (
115
+ hint: (
116
+ color: var(--input-valid-color),
117
+ ),
118
+ ),
119
+ ),
120
+ invalid: (
121
+ element: (
122
+ hint: (
123
+ color: var(--input-invalid-color),
124
+ ),
125
+ ),
126
+ ),
101
127
  ),
102
128
  ) !default;
package/src/settings/components/_vv-radio-group.scss ADDED
@@ -0,0 +1,3 @@
1
+ @use 'vv-checkbox-group' as *;
2
+
3
+ $vv-radio-group: $vv-checkbox-group !default;
package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} RENAMED
@@ -1,6 +1,6 @@
1
- $vv-input-radio: (
1
+ $vv-radio: (
2
2
  display: inline-flex,
3
- flex-wrap: nowrap,
3
+ flex-wrap: wrap,
4
4
  align-items: center,
5
5
  cursor: pointer,
6
6
  user-select: none,
@@ -14,17 +14,33 @@ $vv-input-radio: (
14
14
  opacity: 0.3,
15
15
  cursor: not-allowed,
16
16
  ),
17
+ ),
18
+ modifier: (
17
19
  readonly: (
18
20
  opacity: 1,
19
21
  cursor: default,
20
22
  pointer-events: none,
21
23
  ),
24
+ valid: (
25
+ element: (
26
+ hint: (
27
+ color: var(--input-valid-color),
28
+ ),
29
+ ),
30
+ ),
31
+ invalid: (
32
+ element: (
33
+ hint: (
34
+ color: var(--input-invalid-color),
35
+ ),
36
+ ),
37
+ ),
22
38
  ),
23
39
  element: (
24
40
  input: (
25
41
  _alias: "> input[type='radio']",
26
42
  border: var(--spacing-2) solid var(--input-color),
27
- width: var(--spacing-20),
43
+ min-width: var(--spacing-20),
28
44
  height: var(--spacing-20),
29
45
  border-radius: 50%,
30
46
  margin: 0 var(--input-label-gap) 0 0,
@@ -58,5 +74,17 @@ $vv-input-radio: (
58
74
  ),
59
75
  ),
60
76
  ),
77
+ hint: (
78
+ _alias: '> small',
79
+ flex-basis: 100%,
80
+ display: var(--input-hint-display),
81
+ font-size: var(--input-hint-font-size),
82
+ color: var(--input-hint-color),
83
+ padding-top: var(--input-hint-gap),
84
+ white-space: var(--input-hint-white-space),
85
+ text-overflow: var(--input-hint-text-overflow),
86
+ overflow: var(--input-hint-overflow),
87
+ max-width: var(--input-hint-max-width),
88
+ ),
61
89
  ),
62
90
  ) !default;
package/dist/components/vv-input-checkbox-group.css DELETED
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-input-checkbox-group-display: var(--input-display);--vv-input-checkbox-group-flex: var(--input-flex);--vv-input-checkbox-group-flex-direction: var(--input-flex-direction);--vv-input-checkbox-group-min-width: var(--input-min-width);--vv-input-checkbox-group-element-legend-display: var(--input-label-display);--vv-input-checkbox-group-element-legend-font-size: var(--input-label-font-size);--vv-input-checkbox-group-element-legend-color: var(--input-label-color);--vv-input-checkbox-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-input-checkbox-group-element-legend-white-space: var(--input-label-white-space);--vv-input-checkbox-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-input-checkbox-group-element-legend-overflow: var(--input-label-overflow);--vv-input-checkbox-group-element-legend-max-width: var(--input-label-max-width);--vv-input-checkbox-group-element-wrapper-position: relative;--vv-input-checkbox-group-element-wrapper-display: flex;--vv-input-checkbox-group-element-wrapper-flex-direction: column;--vv-input-checkbox-group-element-wrapper-flex-wrap: wrap;--vv-input-checkbox-group-element-hint-display: var(--input-hint-display);--vv-input-checkbox-group-element-hint-font-size: var(--input-hint-font-size);--vv-input-checkbox-group-element-hint-color: var(--input-hint-color);--vv-input-checkbox-group-element-hint-padding-top: var(--input-hint-gap);--vv-input-checkbox-group-element-hint-white-space: var(--input-hint-white-space);--vv-input-checkbox-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-input-checkbox-group-element-hint-overflow: var(--input-hint-overflow);--vv-input-checkbox-group-element-hint-max-width: var(--input-hint-max-width);--vv-input-checkbox-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-input-checkbox-group-element-hint-margin-bottom: var(--input-gap);--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-input-checkbox-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-input-checkbox-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-input-checkbox-group){display:var(--vv-input-checkbox-group-display);flex:var(--vv-input-checkbox-group-flex);flex-direction:var(--vv-input-checkbox-group-flex-direction);min-width:var(--vv-input-checkbox-group-min-width)}:where(.vv-input-checkbox-group__legend,.vv-input-checkbox-group > legend){display:var(--vv-input-checkbox-group-element-legend-display);font-size:var(--vv-input-checkbox-group-element-legend-font-size);color:var(--vv-input-checkbox-group-element-legend-color);margin:var(--vv-input-checkbox-group-element-legend-margin);white-space:var(--vv-input-checkbox-group-element-legend-white-space);text-overflow:var(--vv-input-checkbox-group-element-legend-text-overflow);overflow:var(--vv-input-checkbox-group-element-legend-overflow);max-width:var(--vv-input-checkbox-group-element-legend-max-width)}:where(.vv-input-checkbox-group__wrapper){position:var(--vv-input-checkbox-group-element-wrapper-position);display:var(--vv-input-checkbox-group-element-wrapper-display);flex-direction:var(--vv-input-checkbox-group-element-wrapper-flex-direction);flex-wrap:var(--vv-input-checkbox-group-element-wrapper-flex-wrap)}:where(.vv-input-checkbox-group__hint,.vv-input-checkbox-group > small){display:var(--vv-input-checkbox-group-element-hint-display);font-size:var(--vv-input-checkbox-group-element-hint-font-size);color:var(--vv-input-checkbox-group-element-hint-color);padding-top:var(--vv-input-checkbox-group-element-hint-padding-top);white-space:var(--vv-input-checkbox-group-element-hint-white-space);text-overflow:var(--vv-input-checkbox-group-element-hint-text-overflow);overflow:var(--vv-input-checkbox-group-element-hint-overflow);max-width:var(--vv-input-checkbox-group-element-hint-max-width);margin-top:var(--vv-input-checkbox-group-element-hint-margin-top);margin-bottom:var(--vv-input-checkbox-group-element-hint-margin-bottom)}:where(.vv-input-checkbox-group--horizontal .vv-input-checkbox-group__wrapper){flex-direction:var(--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-input-checkbox-group--valid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--valid > small){color:var(--vv-input-checkbox-group-modifier-valid-element-hint-color)}:where(.vv-input-checkbox-group--invalid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--invalid > small){color:var(--vv-input-checkbox-group-modifier-invalid-element-hint-color)}
package/dist/components/vv-input-checkbox.css DELETED
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-input-checkbox-display: inline-flex;--vv-input-checkbox-flex-wrap: nowrap;--vv-input-checkbox-align-items: center;--vv-input-checkbox-cursor: pointer;--vv-input-checkbox-user-select: none;--vv-input-checkbox-margin: 0 var(--input-gap) var(--input-gap) 0;--vv-input-checkbox-color: var(--input-color);--vv-input-checkbox-font-size: var(--input-font-size);--vv-input-checkbox-line-height: var(--input-line-height);--vv-input-checkbox-min-width: var(--input-min-width);--vv-input-checkbox-state-disabled-opacity: .3;--vv-input-checkbox-state-disabled-cursor: not-allowed;--vv-input-checkbox-state-readonly-opacity: 1;--vv-input-checkbox-state-readonly-cursor: default;--vv-input-checkbox-state-readonly-pointer-events: none;--vv-input-checkbox-element-input-border: var(--spacing-2) solid var(--input-color);--vv-input-checkbox-element-input-width: var(--spacing-20);--vv-input-checkbox-element-input-height: var(--spacing-20);--vv-input-checkbox-element-input-margin: 0 var(--input-label-gap) 0 0;--vv-input-checkbox-element-input-background-position: center;--vv-input-checkbox-element-input-background-size: var(--text-12) auto;--vv-input-checkbox-element-input-background-repeat: no-repeat;--vv-input-checkbox-element-input-cursor: pointer;--vv-input-checkbox-element-input-position: relative;--vv-input-checkbox-element-input-state-checked-background-image: var(--bg-check);--vv-input-checkbox-element-input-state-indeterminate-background-image: var(--bg-minus);--vv-input-checkbox-element-input-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-input-checkbox-element-input-state-focus-visible-outline-offset: var(--spacing-2);--vv-input-checkbox-modifier-switch-element-input-border: 0;--vv-input-checkbox-modifier-switch-element-input-width: var(--spacing-44);--vv-input-checkbox-modifier-switch-element-input-height: var(--spacing-24);--vv-input-checkbox-modifier-switch-element-input-border-radius: var(--spacing-12);--vv-input-checkbox-modifier-switch-element-input-background-color: var(--color-word-5);--vv-input-checkbox-modifier-switch-element-input-position: relative;--vv-input-checkbox-modifier-switch-element-input-will-change: background-color;--vv-input-checkbox-modifier-switch-element-input-transition: var(--transition-colors);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-width: var(--spacing-20);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-height: var(--spacing-20);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-border-radius: 50%;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-position: absolute;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-inset: var(--spacing-2) 0 0 var(--spacing-2);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-background: var(--color-white);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-will-change: transform;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-transition: var(--transition-transform);--vv-input-checkbox-modifier-switch-element-input-state-hover-background-color: var(--color-word-4);--vv-input-checkbox-modifier-switch-element-input-state-active-background-color: var(--color-word-3);--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-background-image: none;--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform: translateX(50%);--vv-input-checkbox-modifier-switch-element-input-state-checked-background-image: none;--vv-input-checkbox-modifier-switch-element-input-state-checked-background-color: var(--color-brand);--vv-input-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform: translateX(100%)}:where(.vv-input-checkbox){display:var(--vv-input-checkbox-display);flex-wrap:var(--vv-input-checkbox-flex-wrap);align-items:var(--vv-input-checkbox-align-items);cursor:var(--vv-input-checkbox-cursor);-webkit-user-select:var(--vv-input-checkbox-user-select);-moz-user-select:var(--vv-input-checkbox-user-select);user-select:var(--vv-input-checkbox-user-select);margin:var(--vv-input-checkbox-margin);color:var(--vv-input-checkbox-color);font-size:var(--vv-input-checkbox-font-size);line-height:var(--vv-input-checkbox-line-height);min-width:var(--vv-input-checkbox-min-width)}:where(.vv-input-checkbox__input,.vv-input-checkbox > input[type=checkbox]){border:var(--vv-input-checkbox-element-input-border);width:var(--vv-input-checkbox-element-input-width);height:var(--vv-input-checkbox-element-input-height);margin:var(--vv-input-checkbox-element-input-margin);background-position:var(--vv-input-checkbox-element-input-background-position);background-size:var(--vv-input-checkbox-element-input-background-size);background-repeat:var(--vv-input-checkbox-element-input-background-repeat);cursor:var(--vv-input-checkbox-element-input-cursor);position:var(--vv-input-checkbox-element-input-position)}:where(.vv-input-checkbox__input--checked,.vv-input-checkbox__input.checked,.vv-input-checkbox > input[type=checkbox].checked,.vv-input-checkbox__input:checked,.vv-input-checkbox > input[type=checkbox]:checked){background-image:var(--vv-input-checkbox-element-input-state-checked-background-image)}:where(.vv-input-checkbox__input--indeterminate,.vv-input-checkbox__input.indeterminate,.vv-input-checkbox > input[type=checkbox].indeterminate,.vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-input-checkbox-element-input-state-indeterminate-background-image)}:where(.vv-input-checkbox__input--focus-visible,.vv-input-checkbox__input.focus-visible,.vv-input-checkbox > input[type=checkbox].focus-visible,.vv-input-checkbox__input:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible,.vv-input-checkbox > input[type=checkbox]:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-input-checkbox-element-input-state-focus-visible-outline);outline-offset:var(--vv-input-checkbox-element-input-state-focus-visible-outline-offset)}:where(.vv-input-checkbox[\:has\(\%3E\%20input\[type\%3Dcheckbox\]\:disabled\)]),:where(.vv-input-checkbox--disabled,.vv-input-checkbox.disabled,.vv-input-checkbox[disabled],.vv-input-checkbox[aria-disabled=true]){opacity:var(--vv-input-checkbox-state-disabled-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-disabled-cursor)}:where(.vv-input-checkbox:has(> input[type=checkbox]:disabled)),:where(.vv-input-checkbox--disabled,.vv-input-checkbox.disabled,.vv-input-checkbox[disabled],.vv-input-checkbox[aria-disabled=true]){opacity:var(--vv-input-checkbox-state-disabled-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-disabled-cursor)}:where(.vv-input-checkbox--readonly,.vv-input-checkbox.readonly,.vv-input-checkbox[readonly]){opacity:var(--vv-input-checkbox-state-readonly-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-readonly-cursor);pointer-events:var(--vv-input-checkbox-state-readonly-pointer-events)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input,.vv-input-checkbox--switch > input[type=checkbox]){border:var(--vv-input-checkbox-modifier-switch-element-input-border);width:var(--vv-input-checkbox-modifier-switch-element-input-width);height:var(--vv-input-checkbox-modifier-switch-element-input-height);border-radius:var(--vv-input-checkbox-modifier-switch-element-input-border-radius);background-color:var(--vv-input-checkbox-modifier-switch-element-input-background-color);position:var(--vv-input-checkbox-modifier-switch-element-input-position);will-change:var(--vv-input-checkbox-modifier-switch-element-input-will-change);transition:var(--vv-input-checkbox-modifier-switch-element-input-transition)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input,.vv-input-checkbox--switch > input[type=checkbox]):after{content:"";width:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-width);height:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-height);border-radius:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-border-radius);position:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-position);inset:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-inset);background:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-background);will-change:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-will-change);transition:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-transition)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--hover,.vv-input-checkbox--switch .vv-input-checkbox__input.hover,.vv-input-checkbox--switch > input[type=checkbox].hover,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):hover,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):hover){--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-hover-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--active,.vv-input-checkbox--switch .vv-input-checkbox__input.active,.vv-input-checkbox--switch > input[type=checkbox].active,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):active,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):active){--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-active-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input.indeterminate,.vv-input-checkbox--switch > input[type=checkbox].indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-background-image)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input.indeterminate,.vv-input-checkbox--switch > input[type=checkbox].indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate):after{transform:var(--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--checked,.vv-input-checkbox--switch .vv-input-checkbox__input.checked,.vv-input-checkbox--switch > input[type=checkbox].checked,.vv-input-checkbox--switch .vv-input-checkbox__input:checked,.vv-input-checkbox--switch > input[type=checkbox]:checked){background-image:var(--vv-input-checkbox-modifier-switch-element-input-state-checked-background-image);--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-checked-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--checked,.vv-input-checkbox--switch .vv-input-checkbox__input.checked,.vv-input-checkbox--switch > input[type=checkbox].checked,.vv-input-checkbox--switch .vv-input-checkbox__input:checked,.vv-input-checkbox--switch > input[type=checkbox]:checked):after{transform:var(--vv-input-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform)}
package/dist/components/vv-input-radio-group.css DELETED
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-input-radio-group-display: var(--input-display);--vv-input-radio-group-flex: var(--input-flex);--vv-input-radio-group-flex-direction: var(--input-flex-direction);--vv-input-radio-group-min-width: var(--input-min-width);--vv-input-radio-group-element-legend-display: var(--input-label-display);--vv-input-radio-group-element-legend-font-size: var(--input-label-font-size);--vv-input-radio-group-element-legend-color: var(--input-label-color);--vv-input-radio-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-input-radio-group-element-legend-white-space: var(--input-label-white-space);--vv-input-radio-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-input-radio-group-element-legend-overflow: var(--input-label-overflow);--vv-input-radio-group-element-legend-max-width: var(--input-label-max-width);--vv-input-radio-group-element-wrapper-position: relative;--vv-input-radio-group-element-wrapper-display: flex;--vv-input-radio-group-element-wrapper-flex-direction: column;--vv-input-radio-group-element-wrapper-flex-wrap: wrap;--vv-input-radio-group-element-hint-display: var(--input-hint-display);--vv-input-radio-group-element-hint-font-size: var(--input-hint-font-size);--vv-input-radio-group-element-hint-color: var(--input-hint-color);--vv-input-radio-group-element-hint-padding-top: var(--input-hint-gap);--vv-input-radio-group-element-hint-white-space: var(--input-hint-white-space);--vv-input-radio-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-input-radio-group-element-hint-overflow: var(--input-hint-overflow);--vv-input-radio-group-element-hint-max-width: var(--input-hint-max-width);--vv-input-radio-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-input-radio-group-element-hint-margin-bottom: var(--input-gap);--vv-input-radio-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-input-radio-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-input-radio-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-input-radio-group){display:var(--vv-input-radio-group-display);flex:var(--vv-input-radio-group-flex);flex-direction:var(--vv-input-radio-group-flex-direction);min-width:var(--vv-input-radio-group-min-width)}:where(.vv-input-radio-group__legend,.vv-input-radio-group > legend){display:var(--vv-input-radio-group-element-legend-display);font-size:var(--vv-input-radio-group-element-legend-font-size);color:var(--vv-input-radio-group-element-legend-color);margin:var(--vv-input-radio-group-element-legend-margin);white-space:var(--vv-input-radio-group-element-legend-white-space);text-overflow:var(--vv-input-radio-group-element-legend-text-overflow);overflow:var(--vv-input-radio-group-element-legend-overflow);max-width:var(--vv-input-radio-group-element-legend-max-width)}:where(.vv-input-radio-group__wrapper){position:var(--vv-input-radio-group-element-wrapper-position);display:var(--vv-input-radio-group-element-wrapper-display);flex-direction:var(--vv-input-radio-group-element-wrapper-flex-direction);flex-wrap:var(--vv-input-radio-group-element-wrapper-flex-wrap)}:where(.vv-input-radio-group__hint,.vv-input-radio-group > small){display:var(--vv-input-radio-group-element-hint-display);font-size:var(--vv-input-radio-group-element-hint-font-size);color:var(--vv-input-radio-group-element-hint-color);padding-top:var(--vv-input-radio-group-element-hint-padding-top);white-space:var(--vv-input-radio-group-element-hint-white-space);text-overflow:var(--vv-input-radio-group-element-hint-text-overflow);overflow:var(--vv-input-radio-group-element-hint-overflow);max-width:var(--vv-input-radio-group-element-hint-max-width);margin-top:var(--vv-input-radio-group-element-hint-margin-top);margin-bottom:var(--vv-input-radio-group-element-hint-margin-bottom)}:where(.vv-input-radio-group--horizontal .vv-input-radio-group__wrapper){flex-direction:var(--vv-input-radio-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-input-radio-group--valid .vv-input-radio-group__hint,.vv-input-radio-group--valid > small){color:var(--vv-input-radio-group-modifier-valid-element-hint-color)}:where(.vv-input-radio-group--invalid .vv-input-radio-group__hint,.vv-input-radio-group--invalid > small){color:var(--vv-input-radio-group-modifier-invalid-element-hint-color)}
package/dist/components/vv-input-radio.css DELETED
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-input-radio-display: inline-flex;--vv-input-radio-flex-wrap: nowrap;--vv-input-radio-align-items: center;--vv-input-radio-cursor: pointer;--vv-input-radio-user-select: none;--vv-input-radio-margin: 0 var(--input-gap) var(--input-gap) 0;--vv-input-radio-color: var(--input-color);--vv-input-radio-font-size: var(--input-font-size);--vv-input-radio-line-height: var(--input-line-height);--vv-input-radio-min-width: var(--input-min-width);--vv-input-radio-state-disabled-opacity: .3;--vv-input-radio-state-disabled-cursor: not-allowed;--vv-input-radio-state-readonly-opacity: 1;--vv-input-radio-state-readonly-cursor: default;--vv-input-radio-state-readonly-pointer-events: none;--vv-input-radio-element-input-border: var(--spacing-2) solid var(--input-color);--vv-input-radio-element-input-width: var(--spacing-20);--vv-input-radio-element-input-height: var(--spacing-20);--vv-input-radio-element-input-border-radius: 50%;--vv-input-radio-element-input-margin: 0 var(--input-label-gap) 0 0;--vv-input-radio-element-input-background: transparent;--vv-input-radio-element-input-cursor: pointer;--vv-input-radio-element-input-position: relative;--vv-input-radio-element-input-pseudo-after-position: absolute;--vv-input-radio-element-input-pseudo-after-width: 70%;--vv-input-radio-element-input-pseudo-after-height: 70%;--vv-input-radio-element-input-pseudo-after-background: var(--input-color);--vv-input-radio-element-input-pseudo-after-inset: 50% 50%;--vv-input-radio-element-input-pseudo-after-border-radius: 50%;--vv-input-radio-element-input-pseudo-after-transform: translate(-50%, -50%) scale(0);--vv-input-radio-element-input-pseudo-after-will-change: transform;--vv-input-radio-element-input-pseudo-after-transition: var(--transition-transform);--vv-input-radio-element-input-state-checked-pseudo-after-transform: translate(-50%, -50%) scale(1);--vv-input-radio-element-input-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-input-radio-element-input-state-focus-visible-outline-offset: var(--spacing-2)}:where(.vv-input-radio){display:var(--vv-input-radio-display);flex-wrap:var(--vv-input-radio-flex-wrap);align-items:var(--vv-input-radio-align-items);cursor:var(--vv-input-radio-cursor);-webkit-user-select:var(--vv-input-radio-user-select);-moz-user-select:var(--vv-input-radio-user-select);user-select:var(--vv-input-radio-user-select);margin:var(--vv-input-radio-margin);color:var(--vv-input-radio-color);font-size:var(--vv-input-radio-font-size);line-height:var(--vv-input-radio-line-height);min-width:var(--vv-input-radio-min-width)}:where(.vv-input-radio__input,.vv-input-radio > input[type=radio]){border:var(--vv-input-radio-element-input-border);width:var(--vv-input-radio-element-input-width);height:var(--vv-input-radio-element-input-height);border-radius:var(--vv-input-radio-element-input-border-radius);margin:var(--vv-input-radio-element-input-margin);background:var(--vv-input-radio-element-input-background);cursor:var(--vv-input-radio-element-input-cursor);position:var(--vv-input-radio-element-input-position)}:where(.vv-input-radio__input,.vv-input-radio > input[type=radio]):after{content:"";position:var(--vv-input-radio-element-input-pseudo-after-position);width:var(--vv-input-radio-element-input-pseudo-after-width);height:var(--vv-input-radio-element-input-pseudo-after-height);background:var(--vv-input-radio-element-input-pseudo-after-background);inset:var(--vv-input-radio-element-input-pseudo-after-inset);border-radius:var(--vv-input-radio-element-input-pseudo-after-border-radius);transform:var(--vv-input-radio-element-input-pseudo-after-transform);will-change:var(--vv-input-radio-element-input-pseudo-after-will-change);transition:var(--vv-input-radio-element-input-pseudo-after-transition)}:where(.vv-input-radio__input--checked,.vv-input-radio__input.checked,.vv-input-radio > input[type=radio].checked,.vv-input-radio__input:checked,.vv-input-radio > input[type=radio]:checked):after{--vv-input-radio-element-input-pseudo-after-transform: var(--vv-input-radio-element-input-state-checked-pseudo-after-transform)}:where(.vv-input-radio__input--focus-visible,.vv-input-radio__input.focus-visible,.vv-input-radio > input[type=radio].focus-visible,.vv-input-radio__input:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible,.vv-input-radio > input[type=radio]:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-input-radio-element-input-state-focus-visible-outline);outline-offset:var(--vv-input-radio-element-input-state-focus-visible-outline-offset)}:where(.vv-input-radio[\:has\(\%3E\%20input\[type\%3Dradio\]\:disabled\)]),:where(.vv-input-radio--disabled,.vv-input-radio.disabled,.vv-input-radio[disabled],.vv-input-radio[aria-disabled=true]){opacity:var(--vv-input-radio-state-disabled-opacity);--vv-input-radio-cursor: var(--vv-input-radio-state-disabled-cursor)}:where(.vv-input-radio:has(> input[type=radio]:disabled)),:where(.vv-input-radio--disabled,.vv-input-radio.disabled,.vv-input-radio[disabled],.vv-input-radio[aria-disabled=true]){opacity:var(--vv-input-radio-state-disabled-opacity);--vv-input-radio-cursor: var(--vv-input-radio-state-disabled-cursor)}:where(.vv-input-radio--readonly,.vv-input-radio.readonly,.vv-input-radio[readonly]){opacity:var(--vv-input-radio-state-readonly-opacity);--vv-input-radio-cursor: var(--vv-input-radio-state-readonly-cursor);pointer-events:var(--vv-input-radio-state-readonly-pointer-events)}
package/src/settings/components/_vv-input-radio-group.scss DELETED
@@ -1,3 +0,0 @@
1
- @use 'vv-input-checkbox-group' as *;
2
-
3
- $vv-input-radio-group: $vv-input-checkbox-group !default;