@jsenv/navi 0.2.0 → 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 (12) hide show
  1. package/dist/jsenv_navi.js +634 -684
  2. package/package.json +3 -4
  3. package/src/components/field/button.jsx +134 -128
  4. package/src/components/field/checkbox_list.jsx +5 -3
  5. package/src/components/field/input_checkbox.jsx +117 -107
  6. package/src/components/field/input_radio.jsx +147 -137
  7. package/src/components/field/input_textual.jsx +76 -75
  8. package/src/components/field/label.jsx +9 -7
  9. package/src/components/field/navi_css_vars.js +7 -5
  10. package/src/components/field/radio_list.jsx +5 -3
  11. package/src/validation/validation_message.js +122 -118
  12. package/src/components/field/field_css.js +0 -87
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/navi",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Library of components including navigation to create frontend applications",
5
5
  "repository": {
6
6
  "type": "git",
@@ -13,8 +13,7 @@
13
13
  "email": "dmaillard06@gmail.com"
14
14
  },
15
15
  "sideEffects": [
16
- "./dist/jsenv_navi.js",
17
- "./src/components/field/field_css.js"
16
+ "./dist/jsenv_navi.js"
18
17
  ],
19
18
  "type": "module",
20
19
  "exports": {
@@ -34,7 +33,7 @@
34
33
  "prepublishOnly": "npm run build"
35
34
  },
36
35
  "dependencies": {
37
- "@jsenv/dom": "0.3.0",
36
+ "@jsenv/dom": "0.4.0",
38
37
  "@jsenv/humanize": "1.6.0"
39
38
  },
40
39
  "devDependencies": {
package/src/components/field/button.jsx CHANGED
@@ -38,140 +38,146 @@ import {
38
38
  * So we redefine chrome styles so that loader can keep up with the actual color visible to the user
39
39
  */
40
40
  import.meta.css = /* css */ `
41
- .navi_button {
42
- position: relative;
43
- display: inline-block;
44
- padding: 0;
45
- background: none;
46
- border: none;
47
- outline: none;
41
+ @layer navi {
42
+ .navi_button {
43
+ position: relative;
44
+ display: inline-block;
45
+ padding: 0;
46
+ background: none;
47
+ border: none;
48
+ outline: none;
48
49
 
49
- --border-width: 1px;
50
- --outline-width: 1px;
51
- --outer-width: calc(var(--border-width) + var(--outline-width));
52
- --padding-x: 6px;
53
- --padding-y: 1px;
50
+ --border-width: 1px;
51
+ --outline-width: 1px;
52
+ --outer-width: calc(var(--border-width) + var(--outline-width));
53
+ --padding-x: 6px;
54
+ --padding-y: 1px;
54
55
 
55
- --outline-color: light-dark(#4476ff, #3b82f6);
56
+ --outline-color: light-dark(#4476ff, #3b82f6);
56
57
 
57
- --border-radius: 2px;
58
- --border-color: light-dark(#767676, #8e8e93);
59
- --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
60
- --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
61
- --border-color-readonly: color-mix(in srgb, var(--border-color) 30%, white);
62
- --border-color-disabled: var(--border-color-readonly);
58
+ --border-radius: 2px;
59
+ --border-color: light-dark(#767676, #8e8e93);
60
+ --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
61
+ --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
62
+ --border-color-readonly: color-mix(
63
+ in srgb,
64
+ var(--border-color) 30%,
65
+ white
66
+ );
67
+ --border-color-disabled: var(--border-color-readonly);
63
68
 
64
- --background-color: light-dark(#f3f4f6, #2d3748);
65
- --background-color-hover: color-mix(
66
- in srgb,
67
- var(--background-color) 95%,
68
- black
69
- );
70
- --background-color-readonly: var(--background-color);
71
- --background-color-disabled: var(--background-color);
69
+ --background-color: light-dark(#f3f4f6, #2d3748);
70
+ --background-color-hover: color-mix(
71
+ in srgb,
72
+ var(--background-color) 95%,
73
+ black
74
+ );
75
+ --background-color-readonly: var(--background-color);
76
+ --background-color-disabled: var(--background-color);
72
77
 
73
- --color: currentColor;
74
- --color-readonly: color-mix(in srgb, currentColor 30%, transparent);
75
- --color-disabled: var(--color-readonly);
76
- }
77
- .navi_button_content {
78
- position: relative;
79
- display: inline-flex;
80
- padding-top: var(--padding-y);
81
- padding-right: var(--padding-x);
82
- padding-bottom: var(--padding-y);
83
- padding-left: var(--padding-x);
84
- color: var(--color);
85
- background-color: var(--background-color);
86
- border-width: var(--outer-width);
87
- border-style: solid;
88
- border-color: transparent;
89
- border-radius: var(--border-radius);
90
- outline-width: var(--border-width);
91
- outline-style: solid;
92
- outline-color: var(--border-color);
93
- outline-offset: calc(-1 * (var(--border-width)));
94
- transition-property: transform;
95
- transition-duration: 0.15s;
96
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
97
- }
98
- .navi_button_shadow {
99
- position: absolute;
100
- inset: calc(-1 * var(--outer-width));
101
- border-radius: inherit;
102
- pointer-events: none;
103
- }
104
- /* Focus */
105
- .navi_button[data-focus-visible] .navi_button_content {
106
- --border-color: var(--outline-color);
107
- outline-width: var(--outer-width);
108
- outline-offset: calc(-1 * var(--outer-width));
109
- }
110
- /* Hover */
111
- .navi_button[data-hover] .navi_button_content {
112
- --border-color: var(--border-color-hover);
113
- --background-color: var(--background-color-hover);
114
- }
115
- /* Active */
116
- .navi_button[data-active] .navi_button_content {
117
- --outline-color: var(--border-color-active);
118
- --background-color: none;
119
- transform: scale(0.9);
120
- }
121
- .navi_button[data-active] .navi_button_shadow {
122
- box-shadow:
123
- inset 0 3px 6px rgba(0, 0, 0, 0.2),
124
- inset 0 1px 2px rgba(0, 0, 0, 0.3),
125
- inset 0 0 0 1px rgba(0, 0, 0, 0.1),
126
- inset 2px 0 4px rgba(0, 0, 0, 0.1),
127
- inset -2px 0 4px rgba(0, 0, 0, 0.1);
128
- }
129
- /* Readonly */
130
- .navi_button[data-readonly] .navi_button_content {
131
- --border-color: var(--border-color-disabled);
132
- --outline-color: var(--border-color-readonly);
133
- --background-color: var(--background-color-readonly);
134
- --color: var(--color-readonly);
135
- }
136
- /* Disabled */
137
- .navi_button[data-disabled] .navi_button_content {
138
- --border-color: var(--border-color-disabled);
139
- --background-color: var(--background-color-disabled);
140
- --color: var(--color-disabled);
141
- transform: none; /* no active effect */
142
- }
143
- .navi_button[data-disabled] .navi_button_shadow {
144
- box-shadow: none;
145
- }
146
- /* Invalid */
147
- .navi_button[aria-invalid="true"] .navi_button_content {
148
- --border-color: var(--invalid-color);
149
- }
78
+ --color: currentColor;
79
+ --color-readonly: color-mix(in srgb, currentColor 30%, transparent);
80
+ --color-disabled: var(--color-readonly);
81
+ }
82
+ .navi_button_content {
83
+ position: relative;
84
+ display: inline-flex;
85
+ padding-top: var(--padding-y);
86
+ padding-right: var(--padding-x);
87
+ padding-bottom: var(--padding-y);
88
+ padding-left: var(--padding-x);
89
+ color: var(--color);
90
+ background-color: var(--background-color);
91
+ border-width: var(--outer-width);
92
+ border-style: solid;
93
+ border-color: transparent;
94
+ border-radius: var(--border-radius);
95
+ outline-width: var(--border-width);
96
+ outline-style: solid;
97
+ outline-color: var(--border-color);
98
+ outline-offset: calc(-1 * (var(--border-width)));
99
+ transition-property: transform;
100
+ transition-duration: 0.15s;
101
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
102
+ }
103
+ .navi_button_shadow {
104
+ position: absolute;
105
+ inset: calc(-1 * var(--outer-width));
106
+ border-radius: inherit;
107
+ pointer-events: none;
108
+ }
109
+ /* Focus */
110
+ .navi_button[data-focus-visible] .navi_button_content {
111
+ --border-color: var(--outline-color);
112
+ outline-width: var(--outer-width);
113
+ outline-offset: calc(-1 * var(--outer-width));
114
+ }
115
+ /* Hover */
116
+ .navi_button[data-hover] .navi_button_content {
117
+ --border-color: var(--border-color-hover);
118
+ --background-color: var(--background-color-hover);
119
+ }
120
+ /* Active */
121
+ .navi_button[data-active] .navi_button_content {
122
+ --outline-color: var(--border-color-active);
123
+ --background-color: none;
124
+ transform: scale(0.9);
125
+ }
126
+ .navi_button[data-active] .navi_button_shadow {
127
+ box-shadow:
128
+ inset 0 3px 6px rgba(0, 0, 0, 0.2),
129
+ inset 0 1px 2px rgba(0, 0, 0, 0.3),
130
+ inset 0 0 0 1px rgba(0, 0, 0, 0.1),
131
+ inset 2px 0 4px rgba(0, 0, 0, 0.1),
132
+ inset -2px 0 4px rgba(0, 0, 0, 0.1);
133
+ }
134
+ /* Readonly */
135
+ .navi_button[data-readonly] .navi_button_content {
136
+ --border-color: var(--border-color-disabled);
137
+ --outline-color: var(--border-color-readonly);
138
+ --background-color: var(--background-color-readonly);
139
+ --color: var(--color-readonly);
140
+ }
141
+ /* Disabled */
142
+ .navi_button[data-disabled] .navi_button_content {
143
+ --border-color: var(--border-color-disabled);
144
+ --background-color: var(--background-color-disabled);
145
+ --color: var(--color-disabled);
146
+ transform: none; /* no active effect */
147
+ }
148
+ .navi_button[data-disabled] .navi_button_shadow {
149
+ box-shadow: none;
150
+ }
151
+ /* Invalid */
152
+ .navi_button[aria-invalid="true"] .navi_button_content {
153
+ --border-color: var(--invalid-color);
154
+ }
150
155
 
151
- /* Discrete variant */
152
- .navi_button[data-discrete] .navi_button_content {
153
- --background-color: transparent;
154
- --border-color: transparent;
155
- }
156
- .navi_button[data-discrete][data-hover] .navi_button_content {
157
- --border-color: var(--border-color-hover);
158
- }
159
- .navi_button[data-discrete][data-readonly] .navi_button_content {
160
- --border-color: transparent;
161
- }
162
- .navi_button[data-discrete][data-disabled] .navi_button_content {
163
- --border-color: transparent;
164
- }
165
- button[data-discrete] {
166
- background-color: transparent;
167
- border-color: transparent;
168
- }
169
- button[data-discrete]:hover {
170
- border-color: revert;
171
- }
172
- button[data-discrete][data-readonly],
173
- button[data-discrete][data-disabled] {
174
- border-color: transparent;
156
+ /* Discrete variant */
157
+ .navi_button[data-discrete] .navi_button_content {
158
+ --background-color: transparent;
159
+ --border-color: transparent;
160
+ }
161
+ .navi_button[data-discrete][data-hover] .navi_button_content {
162
+ --border-color: var(--border-color-hover);
163
+ }
164
+ .navi_button[data-discrete][data-readonly] .navi_button_content {
165
+ --border-color: transparent;
166
+ }
167
+ .navi_button[data-discrete][data-disabled] .navi_button_content {
168
+ --border-color: transparent;
169
+ }
170
+ button[data-discrete] {
171
+ background-color: transparent;
172
+ border-color: transparent;
173
+ }
174
+ button[data-discrete]:hover {
175
+ border-color: revert;
176
+ }
177
+ button[data-discrete][data-readonly],
178
+ button[data-discrete][data-disabled] {
179
+ border-color: transparent;
180
+ }
175
181
  }
176
182
  `;
177
183
  export const Button = forwardRef((props, ref) => {
package/src/components/field/checkbox_list.jsx CHANGED
@@ -30,9 +30,11 @@ import {
30
30
  } from "./use_ui_state_controller.js";
31
31
 
32
32
  import.meta.css = /* css */ `
33
- .navi_checkbox_list {
34
- display: flex;
35
- flex-direction: column;
33
+ @layer navi {
34
+ .navi_checkbox_list {
35
+ display: flex;
36
+ flex-direction: column;
37
+ }
36
38
  }
37
39
  `;
38
40
 
package/src/components/field/input_checkbox.jsx CHANGED
@@ -39,121 +39,131 @@ import {
39
39
  } from "./use_ui_state_controller.js";
40
40
 
41
41
  import.meta.css = /* css */ `
42
- :root {
43
- --navi-checkmark-color-light: white;
44
- --navi-checkmark-color-dark: rgb(55, 55, 55);
45
- --navi-checkmark-color: var(--navi-checkmark-light-color);
46
- }
42
+ @layer navi {
43
+ :root {
44
+ --navi-checkmark-color-light: white;
45
+ --navi-checkmark-color-dark: rgb(55, 55, 55);
46
+ --navi-checkmark-color: var(--navi-checkmark-light-color);
47
+ }
47
48
 
48
- .navi_checkbox {
49
- position: relative;
50
- display: inline-flex;
51
- box-sizing: content-box;
49
+ .navi_checkbox {
50
+ position: relative;
51
+ display: inline-flex;
52
+ box-sizing: content-box;
52
53
 
53
- --outline-offset: 1px;
54
- --outline-width: 2px;
55
- --border-width: 1px;
56
- --border-radius: 2px;
57
- --width: 13px;
58
- --height: 13px;
54
+ --outline-offset: 1px;
55
+ --outline-width: 2px;
56
+ --border-width: 1px;
57
+ --border-radius: 2px;
58
+ --width: 13px;
59
+ --height: 13px;
59
60
 
60
- --outline-color: light-dark(#4476ff, #3b82f6);
61
- --border-color: light-dark(#767676, #8e8e93);
62
- --background-color: white;
63
- --accent-color: light-dark(#4476ff, #3b82f6);
64
- /* --color: currentColor; */
65
- --checkmark-color: var(--navi-checkmark-color);
61
+ --outline-color: light-dark(#4476ff, #3b82f6);
62
+ --border-color: light-dark(#767676, #8e8e93);
63
+ --background-color: white;
64
+ --accent-color: light-dark(#4476ff, #3b82f6);
65
+ /* --color: currentColor; */
66
+ --checkmark-color: var(--navi-checkmark-color);
66
67
 
67
- --border-color-readonly: color-mix(in srgb, var(--border-color) 30%, white);
68
- --border-color-disabled: var(--border-color-readonly);
69
- --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
70
- --border-color-checked-readonly: #d3d3d3;
71
- --border-color-checked-disabled: #d3d3d3;
72
- --background-color-checked-readonly: var(--navi-background-color-readonly);
73
- --background-color-checked-disabled: var(--navi-background-color-disabled);
74
- --checkmark-color-readonly: var(--navi-color-readonly);
75
- --checkmark-color-disabled: var(--navi-color-disabled);
76
- }
77
- .navi_checkbox input {
78
- position: absolute;
79
- inset: 0;
80
- margin: 0;
81
- padding: 0;
82
- border: none;
83
- opacity: 0;
84
- cursor: inherit;
85
- }
86
- .navi_checkbox_field {
87
- display: inline-flex;
88
- box-sizing: border-box;
89
- width: var(--width);
90
- height: var(--height);
91
- margin: 3px 3px 3px 4px;
92
- background-color: var(--background-color);
93
- border-width: var(--border-width);
94
- border-style: solid;
95
- border-color: var(--border-color);
96
- border-radius: var(--border-radius);
97
- outline-width: var(--outline-width);
68
+ --border-color-readonly: color-mix(
69
+ in srgb,
70
+ var(--border-color) 30%,
71
+ white
72
+ );
73
+ --border-color-disabled: var(--border-color-readonly);
74
+ --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
75
+ --border-color-checked-readonly: #d3d3d3;
76
+ --border-color-checked-disabled: #d3d3d3;
77
+ --background-color-checked-readonly: var(
78
+ --navi-background-color-readonly
79
+ );
80
+ --background-color-checked-disabled: var(
81
+ --navi-background-color-disabled
82
+ );
83
+ --checkmark-color-readonly: var(--navi-color-readonly);
84
+ --checkmark-color-disabled: var(--navi-color-disabled);
85
+ }
86
+ .navi_checkbox input {
87
+ position: absolute;
88
+ inset: 0;
89
+ margin: 0;
90
+ padding: 0;
91
+ border: none;
92
+ opacity: 0;
93
+ cursor: inherit;
94
+ }
95
+ .navi_checkbox_field {
96
+ display: inline-flex;
97
+ box-sizing: border-box;
98
+ width: var(--width);
99
+ height: var(--height);
100
+ margin: 3px 3px 3px 4px;
101
+ background-color: var(--background-color);
102
+ border-width: var(--border-width);
103
+ border-style: solid;
104
+ border-color: var(--border-color);
105
+ border-radius: var(--border-radius);
106
+ outline-width: var(--outline-width);
98
107
 
99
- outline-style: none;
108
+ outline-style: none;
100
109
 
101
- outline-color: var(--outline-color);
102
- outline-offset: var(--outline-offset);
103
- /* color: var(--color); */
104
- }
105
- .navi_checkbox_marker {
106
- width: 100%;
107
- height: 100%;
108
- opacity: 0;
109
- transform: scale(0.5);
110
- transition: all 0.15s ease;
111
- pointer-events: none;
112
- }
110
+ outline-color: var(--outline-color);
111
+ outline-offset: var(--outline-offset);
112
+ /* color: var(--color); */
113
+ }
114
+ .navi_checkbox_marker {
115
+ width: 100%;
116
+ height: 100%;
117
+ opacity: 0;
118
+ transform: scale(0.5);
119
+ transition: all 0.15s ease;
120
+ pointer-events: none;
121
+ }
113
122
 
114
- /* Focus */
115
- .navi_checkbox[data-focus-visible] .navi_checkbox_field {
116
- outline-style: solid;
117
- }
118
- /* Hover */
119
- .navi_checkbox[data-hover] .navi_checkbox_field {
120
- --border-color: var(--border-color-hover);
121
- }
122
- /* Checked */
123
- .navi_checkbox[data-checked] .navi_checkbox_field {
124
- --background-color: var(--accent-color);
125
- --border-color: var(--accent-color);
126
- }
127
- .navi_checkbox[data-checked] .navi_checkbox_marker {
128
- opacity: 1;
129
- stroke: var(--checkmark-color);
130
- transform: scale(1);
131
- }
132
- /* Readonly */
133
- .navi_checkbox[data-readonly] .navi_checkbox_field,
134
- .navi_checkbox[data-readonly][data-hover] .navi_checkbox_field {
135
- --border-color: var(--border-color-readonly);
136
- --background-color: var(--background-color-readonly);
137
- }
138
- .navi_checkbox[data-checked][data-readonly] .navi_checkbox_field {
139
- --background-color: var(--background-color-checked-readonly);
140
- --border-color: var(--border-color-checked-readonly);
141
- }
142
- .navi_checkbox[data-checked][data-readonly] .navi_checkbox_marker {
143
- stroke: var(--checkmark-color-readonly);
144
- }
145
- /* Disabled */
146
- .navi_checkbox[data-disabled] .navi_checkbox_field {
147
- --background-color: var(--background-color-disabled);
148
- --border-color: var(--border-color-disabled);
149
- }
150
- .navi_checkbox[data-checked][data-disabled] .navi_checkbox_field {
151
- --border-color: var(--border-color-checked-disabled);
152
- --background-color: var(--background-color-checked-disabled);
153
- }
123
+ /* Focus */
124
+ .navi_checkbox[data-focus-visible] .navi_checkbox_field {
125
+ outline-style: solid;
126
+ }
127
+ /* Hover */
128
+ .navi_checkbox[data-hover] .navi_checkbox_field {
129
+ --border-color: var(--border-color-hover);
130
+ }
131
+ /* Checked */
132
+ .navi_checkbox[data-checked] .navi_checkbox_field {
133
+ --background-color: var(--accent-color);
134
+ --border-color: var(--accent-color);
135
+ }
136
+ .navi_checkbox[data-checked] .navi_checkbox_marker {
137
+ opacity: 1;
138
+ stroke: var(--checkmark-color);
139
+ transform: scale(1);
140
+ }
141
+ /* Readonly */
142
+ .navi_checkbox[data-readonly] .navi_checkbox_field,
143
+ .navi_checkbox[data-readonly][data-hover] .navi_checkbox_field {
144
+ --border-color: var(--border-color-readonly);
145
+ --background-color: var(--background-color-readonly);
146
+ }
147
+ .navi_checkbox[data-checked][data-readonly] .navi_checkbox_field {
148
+ --background-color: var(--background-color-checked-readonly);
149
+ --border-color: var(--border-color-checked-readonly);
150
+ }
151
+ .navi_checkbox[data-checked][data-readonly] .navi_checkbox_marker {
152
+ stroke: var(--checkmark-color-readonly);
153
+ }
154
+ /* Disabled */
155
+ .navi_checkbox[data-disabled] .navi_checkbox_field {
156
+ --background-color: var(--background-color-disabled);
157
+ --border-color: var(--border-color-disabled);
158
+ }
159
+ .navi_checkbox[data-checked][data-disabled] .navi_checkbox_field {
160
+ --border-color: var(--border-color-checked-disabled);
161
+ --background-color: var(--background-color-checked-disabled);
162
+ }
154
163
 
155
- .navi_checkbox[data-checked][data-disabled] .navi_checkbox_marker {
156
- stroke: var(--checkmark-color-disabled);
164
+ .navi_checkbox[data-checked][data-disabled] .navi_checkbox_marker {
165
+ stroke: var(--checkmark-color-disabled);
166
+ }
157
167
  }
158
168
  `;
159
169