@jsenv/navi 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/jsenv_navi.js +8349 -3784
  2. package/package.json +3 -4
  3. package/src/components/action_execution/form_context.js +1 -4
  4. package/src/components/action_execution/use_action.js +2 -2
  5. package/src/components/demos/0_button_demo.html +149 -68
  6. package/src/components/demos/1_checkbox_demo.html +122 -2
  7. package/src/components/demos/2_input_textual_demo.html +44 -55
  8. package/src/components/demos/3_radio_demo.html +811 -157
  9. package/src/components/demos/action/0_button_demo.html +6 -4
  10. package/src/components/demos/action/1_input_text_demo.html +19 -25
  11. package/src/components/field/button.jsx +193 -84
  12. package/src/components/field/checkbox_list.jsx +5 -3
  13. package/src/components/field/custom_field.js +106 -0
  14. package/src/components/field/form.jsx +9 -4
  15. package/src/components/field/input_checkbox.jsx +206 -125
  16. package/src/components/field/input_radio.jsx +224 -188
  17. package/src/components/field/input_textual.jsx +98 -6
  18. package/src/components/field/label.jsx +18 -4
  19. package/src/components/field/navi_css_vars.js +10 -0
  20. package/src/components/field/radio_list.jsx +5 -3
  21. package/src/components/loader/loader_background.jsx +41 -14
  22. package/src/validation/constraints/readonly_constraint.js +5 -0
  23. package/src/validation/validation_message.js +159 -147
  24. package/src/components/field/field_css.js +0 -121
package/src/components/field/field_css.js DELETED
@@ -1,121 +0,0 @@
1
- import.meta.css = /* css */ `
2
- [data-field],
3
- [data-field-wrapper] {
4
- --field-border-width: 1px;
5
- --field-outline-width: 1px;
6
-
7
- --field-strong-color: light-dark(#355fcc, #3b82f6);
8
- --field-outline-color: var(--field-strong-color);
9
- --field-background-color: light-dark(#f3f4f6, #2d3748);
10
- --field-border-color: light-dark(#767676, #8e8e93);
11
-
12
- --field-disabled-border-color: color-mix(
13
- in srgb,
14
- var(--field-border-color) 30%,
15
- white
16
- );
17
- --field-readonly-border-color: var(--field-disabled-border-color);
18
- --field-active-border-color: color-mix(
19
- in srgb,
20
- var(--field-border-color) 90%,
21
- black
22
- );
23
- --field-hover-border-color: color-mix(
24
- in srgb,
25
- var(--field-border-color) 70%,
26
- black
27
- );
28
-
29
- --field-disabled-background-color: var(--field-background-color);
30
- --field-readonly-background-color: var(--field-disabled-background-color);
31
- --field-hover-background-color: color-mix(
32
- in srgb,
33
- var(--field-background-color) 95%,
34
- black
35
- );
36
-
37
- --field-disabled-text-color: color-mix(
38
- in srgb,
39
- currentColor 30%,
40
- transparent
41
- );
42
- --field-readonly-text-color: var(--field-disabled-text-color);
43
- }
44
-
45
- [data-field] {
46
- border-radius: 2px;
47
- outline-width: var(--field-border-width);
48
- outline-style: solid;
49
- outline-color: transparent;
50
- outline-offset: calc(-1 * (var(--field-border-width)));
51
- }
52
-
53
- [data-field][data-field-with-border] {
54
- border-width: calc(var(--field-border-width) + var(--field-outline-width));
55
- border-style: solid;
56
- border-color: transparent;
57
- outline-color: var(--field-border-color);
58
- }
59
-
60
- [data-field-with-border-hover] {
61
- border: 0;
62
- }
63
-
64
- [data-field-with-background] {
65
- background-color: var(--field-background-color);
66
- }
67
- [data-field-with-background-hover] {
68
- background: none;
69
- }
70
-
71
- [data-field-with-background]:hover {
72
- background-color: var(--field-hover-background-color);
73
- }
74
-
75
- [data-field-with-hover]:hover {
76
- outline-color: var(--field-hover-border-color);
77
- }
78
-
79
- [data-field-with-border]:active,
80
- [data-field][data-field-with-border][data-active] {
81
- outline-color: var(--field-active-border-color);
82
- background-color: none;
83
- }
84
-
85
- [data-field-with-border][readonly],
86
- [data-field-with-border][data-readonly] {
87
- outline-color: var(--field-readonly-border-color);
88
- }
89
-
90
- [data-field][readonly],
91
- [data-field][data-readonly] {
92
- color: var(--field-readonly-text-color);
93
- }
94
-
95
- [data-field-with-background][readonly],
96
- [data-field-with-background][data-readonly] {
97
- background-color: var(--field-readonly-background-color);
98
- }
99
-
100
- [data-field]:focus-visible,
101
- [data-field][data-focus-visible]:focus {
102
- outline-style: solid;
103
- outline-width: calc(var(--field-border-width) + var(--field-outline-width));
104
- outline-offset: calc(
105
- -1 * (var(--field-border-width) + var(--field-outline-width))
106
- );
107
- outline-color: var(--field-outline-color);
108
- }
109
-
110
- [data-field]:disabled,
111
- [data-field][data-disabled],
112
- [data-field-with-hover]:disabled:hover,
113
- [data-field-with-hover][data-disabled]:hover {
114
- outline-color: var(--field-disabled-border-color);
115
- color: var(--field-disabled-text-color);
116
- }
117
- [data-field-with-background]:disabled,
118
- [data-field-with-background][disabled] {
119
- background-color: var(--field-disabled-background-color);
120
- }
121
- `;