@nordcode/ui 1.0.5 → 1.0.7

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 (7) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/out/complete.css +2 -2
  3. package/out/complete_configless.css +2 -2
  4. package/package.json +1 -1
  5. package/src/styles/components/forms.css +3 -5
  6. package/src/styles/components/inputs/base.css +62 -72
  7. package/src/styles/components/inputs/fields.css +1 -0
package/CHANGELOG.md CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  ## v1.0.5 (2024-11-28)
15
15
 
16
- ### Fixes
16
+ ### Features
17
17
 
18
18
  Make fieldset-based inputs more accessible by adding legends. This affects:
19
19
  - `nc-tag-select`
@@ -22,3 +22,9 @@ Make fieldset-based inputs more accessible by adding legends. This affects:
22
22
  - `nc-checkbox-field`
23
23
 
24
24
  Be sure to checkout the updated markup for these components in the documentation.
25
+
26
+ ## v1.0.5 (2024-11-28)
27
+
28
+ ### Fixes
29
+
30
+ - Fix fields not compiling
package/out/complete.css CHANGED
@@ -1885,7 +1885,7 @@
1885
1885
  margin-block-start: var(--nc-legend-spacing, .75lh);
1886
1886
  }
1887
1887
 
1888
- :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) + .nc-hint {
1888
+ :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
1889
1889
  --nc-legend-spacing: 0;
1890
1890
  margin-block-end: .6lh;
1891
1891
  }
@@ -2018,7 +2018,7 @@
2018
2018
  --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
2019
2019
  --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
2020
2020
  --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
2021
- --_input-outline: var(--input-outline, var(--border-width-thick) solid var(--color-brand-primary-base));
2021
+ --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
2022
2022
  --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
2023
2023
  --_input-padding-block: var(--input-padding-block, .125lh);
2024
2024
  --_input-padding-inline: var(--input-padding-inline, 1ch);
package/out/complete_configless.css CHANGED
@@ -1635,7 +1635,7 @@
1635
1635
  margin-block-start: var(--nc-legend-spacing, .75lh);
1636
1636
  }
1637
1637
 
1638
- :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) + .nc-hint {
1638
+ :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
1639
1639
  --nc-legend-spacing: 0;
1640
1640
  margin-block-end: .6lh;
1641
1641
  }
@@ -1768,7 +1768,7 @@
1768
1768
  --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
1769
1769
  --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
1770
1770
  --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
1771
- --_input-outline: var(--input-outline, var(--border-width-thick) solid var(--color-brand-primary-base));
1771
+ --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
1772
1772
  --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
1773
1773
  --_input-padding-block: var(--input-padding-block, .125lh);
1774
1774
  --_input-padding-inline: var(--input-padding-inline, 1ch);
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
14
  },
15
- "version": "1.0.5",
15
+ "version": "1.0.7",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/components/forms.css CHANGED
@@ -34,10 +34,8 @@
34
34
  }
35
35
  }
36
36
 
37
- :where( :is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
38
- &+.nc-hint {
39
- --nc-legend-spacing: 0;
40
- margin-block-end: 0.6lh;
41
- }
37
+ :where(:is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
38
+ --nc-legend-spacing: 0;
39
+ margin-block-end: 0.6lh;
42
40
  }
43
41
  }
package/src/styles/components/inputs/base.css CHANGED
@@ -11,55 +11,49 @@
11
11
  align-items: center;
12
12
  }
13
13
 
14
- :where(
15
- input[type="text"],
16
- input[type="email"],
17
- input[type="password"],
18
- input[type="number"],
19
- input[type="url"],
20
- input[type="search"],
21
- input[type="date"],
22
- input[type="month"],
23
- input[type="week"],
24
- input[type="text"],
25
- input[type="datetime"],
26
- input[type="datetime-local"],
27
- input[type="time"],
28
- input[type="tel"],
29
- input[type="color"],
30
- input[type="file"],
31
- input[type="checkbox"],
32
- input[type="radio"],
33
- textarea,
34
- select,
35
- .nc-input,
36
- .nc-select,
37
- .nc-textarea,
38
- .nc-input-checkbox,
39
- .nc-input-radio,
40
- .nc-input-label,
41
- .nc-input-color,
42
- .nc-input-field,
43
- .nc-input-error,
44
- .nc-checkbox-wrapper,
45
- .nc-input-switch,
46
- .nc-radio-field,
47
- .nc-checkbox-field
48
- ) {
14
+ :where(input[type="text"],
15
+ input[type="email"],
16
+ input[type="password"],
17
+ input[type="number"],
18
+ input[type="url"],
19
+ input[type="search"],
20
+ input[type="date"],
21
+ input[type="month"],
22
+ input[type="week"],
23
+ input[type="text"],
24
+ input[type="datetime"],
25
+ input[type="datetime-local"],
26
+ input[type="time"],
27
+ input[type="tel"],
28
+ input[type="color"],
29
+ input[type="file"],
30
+ input[type="checkbox"],
31
+ input[type="radio"],
32
+ textarea,
33
+ select,
34
+ .nc-input,
35
+ .nc-select,
36
+ .nc-textarea,
37
+ .nc-input-checkbox,
38
+ .nc-input-radio,
39
+ .nc-input-label,
40
+ .nc-input-color,
41
+ .nc-input-field,
42
+ .nc-input-error,
43
+ .nc-checkbox-wrapper,
44
+ .nc-input-switch,
45
+ .nc-radio-field,
46
+ .nc-checkbox-field) {
49
47
  --_input-background: var(--input-background, var(--color-surface-subtle));
50
48
  --_input-background-active: var(--input-background-active, var(--color-surface-base));
51
49
  --_input-color: var(--input-color, var(--color-text-base));
52
- --_input-border: var(
53
- --input-border,
54
- var(--border-width-thin) solid var(--color-border-base)
55
- );
50
+ --_input-border: var(--input-border,
51
+ var(--border-width-thin) solid var(--color-border-base));
56
52
  --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
57
53
 
58
54
  --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
59
- --_input-outline: var(
60
- --input-outline,
61
- var(--border-width-thick) solid var(--color-brand-primary-base)
62
- );
55
+ --_input-outline: var(--input-outline,
56
+ var(--border-width-medium) solid var(--color-brand-primary-base));
63
57
  --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
64
58
 
65
59
  --_input-padding-block: var(--input-padding-block, 0.125lh);
@@ -67,27 +61,25 @@
67
61
  --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
68
62
  }
69
63
 
70
- :where(
71
- input[type="text"],
72
- input[type="email"],
73
- input[type="password"],
74
- input[type="number"],
75
- input[type="url"],
76
- input[type="search"],
77
- input[type="date"],
78
- input[type="month"],
79
- input[type="week"],
80
- input[type="text"],
81
- input[type="datetime"],
82
- input[type="datetime-local"],
83
- input[type="time"],
84
- input[type="tel"],
85
- input[type="color"],
86
- input[type="file"],
87
- textarea,
88
- select,
89
- .nc-input
90
- ) {
64
+ :where(input[type="text"],
65
+ input[type="email"],
66
+ input[type="password"],
67
+ input[type="number"],
68
+ input[type="url"],
69
+ input[type="search"],
70
+ input[type="date"],
71
+ input[type="month"],
72
+ input[type="week"],
73
+ input[type="text"],
74
+ input[type="datetime"],
75
+ input[type="datetime-local"],
76
+ input[type="time"],
77
+ input[type="tel"],
78
+ input[type="color"],
79
+ input[type="file"],
80
+ textarea,
81
+ select,
82
+ .nc-input) {
91
83
  font: inherit;
92
84
  letter-spacing: inherit;
93
85
  word-spacing: inherit;
@@ -144,13 +136,11 @@
144
136
  padding-block: var(--_input-padding-block);
145
137
  }
146
138
 
147
- :where(
148
- input[type="checkbox"]:not([class]),
149
- input[type="radio"]:not([class]),
150
- .nc-input-checkbox,
151
- .nc-input-radio,
152
- .nc-input-switch
153
- ) {
139
+ :where(input[type="checkbox"]:not([class]),
140
+ input[type="radio"]:not([class]),
141
+ .nc-input-checkbox,
142
+ .nc-input-radio,
143
+ .nc-input-switch) {
154
144
  inline-size: 1lh;
155
145
  block-size: 1lh;
156
146
  margin: 0;
@@ -233,7 +223,7 @@
233
223
  }
234
224
 
235
225
  :where(input[type="range"], .nc-input-range) {
236
- & > .nc-hint {
226
+ &>.nc-hint {
237
227
  margin-inline-start: auto;
238
228
  }
239
229
 
package/src/styles/components/inputs/fields.css CHANGED
@@ -74,3 +74,4 @@
74
74
  margin-block-start: 0.6lh;
75
75
  }
76
76
  }
77
+ }