@nordcode/ui 1.1.7 → 1.3.0

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 (25) hide show
  1. package/CHANGELOG.md +55 -49
  2. package/out/bundle.css +94 -85
  3. package/out/bundle_configless.css +88 -80
  4. package/out/colors.css +66 -53
  5. package/out/complete.css +155 -118
  6. package/out/complete_configless.css +149 -113
  7. package/package.json +1 -1
  8. package/src/styles/components/alerts.css +2 -2
  9. package/src/styles/components/badges.css +1 -1
  10. package/src/styles/components/breadcrumbs.css +1 -1
  11. package/src/styles/components/buttons.css +59 -46
  12. package/src/styles/components/card.css +31 -1
  13. package/src/styles/components/dialogs.css +11 -8
  14. package/src/styles/components/forms.css +12 -6
  15. package/src/styles/components/inputs/base.css +75 -65
  16. package/src/styles/components/inputs/fields.css +11 -11
  17. package/src/styles/components/inputs/segmented.css +23 -13
  18. package/src/styles/components/inputs/tag-select.css +10 -6
  19. package/src/styles/components/lists.css +3 -3
  20. package/src/styles/components/notifications.css +8 -6
  21. package/src/styles/config/config.css +6 -5
  22. package/src/styles/utils/base.css +20 -21
  23. package/src/styles/utils/layouts.css +31 -20
  24. package/src/styles/utils/reset.css +1 -1
  25. package/transform.js +23 -11
package/src/styles/components/buttons.css CHANGED
@@ -5,28 +5,29 @@
5
5
  background: none;
6
6
  }
7
7
 
8
- :where(button:not([class]),
9
- button[type]:not([class]),
10
- input[type='button']:not([class]),
11
- input[type='submit']:not([class]),
12
- input[type='reset']:not([class]),
13
- input[type='file']:not([class]),
14
- input[type='file']:not([class])::-webkit-file-upload-button,
15
- input[type='file']:not([class])::file-selector-button,
16
- .nc-button) {
8
+ :where(
9
+ button:not([class]),
10
+ button[type]:not([class]),
11
+ input[type="button"]:not([class]),
12
+ input[type="submit"]:not([class]),
13
+ input[type="reset"]:not([class]),
14
+ input[type="file"]:not([class]),
15
+ input[type="file"]:not([class])::-webkit-file-upload-button,
16
+ input[type="file"]:not([class])::file-selector-button,
17
+ .nc-button
18
+ ) {
17
19
  --_button-background: var(--button-background, var(--surface-hover));
18
20
  --_button-color: var(--button-color, var(--text-hover));
19
21
  --_button-border-color: var(--button-border-color, var(--surface-hover));
20
22
  --_button-border-radius: var(--button-border-radius, var(--border-radius-medium));
21
23
 
22
24
  --_button-background-hover: var(--button-background-hover, var(--surface));
23
- --_button-background-hover-light: var(--button-background-hover-light,
24
- color-mix(in oklch,
25
- currentColor calc(var(--transparency-weaker) * 10%),
26
- transparent));
25
+ --_button-background-hover-light: var(
26
+ --button-background-hover-light,
27
+ color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 10%), transparent)
28
+ );
27
29
  --_button-color-hover: var(--button-color-hover, var(--text));
28
- --_button-border-color-hover: var(--button-border-color-hover,
29
- var(--border));
30
+ --_button-border-color-hover: var(--button-border-color-hover, var(--border));
30
31
 
31
32
  --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
32
33
  --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
@@ -62,12 +63,14 @@
62
63
  line-height: var(--line-height-base);
63
64
  }
64
65
 
65
- :where(button:not([class]),
66
- button[type]:not([class]),
67
- input[type='button']:not([class]),
68
- input[type='submit']:not([class]),
69
- input[type='reset']:not([class]),
70
- .nc-button) {
66
+ :where(
67
+ button:not([class]),
68
+ button[type]:not([class]),
69
+ input[type="button"]:not([class]),
70
+ input[type="submit"]:not([class]),
71
+ input[type="reset"]:not([class]),
72
+ .nc-button
73
+ ) {
71
74
  &:hover {
72
75
  background: var(--_button-background-hover);
73
76
  color: var(--_button-color-hover);
@@ -75,7 +78,7 @@
75
78
  box-shadow: var(--_button-hover-shadow);
76
79
  }
77
80
 
78
- &[aria-pressed='true'] {
81
+ &[aria-pressed="true"] {
79
82
  box-shadow: none;
80
83
  transform: none;
81
84
  font-weight: var(--font-weight-active);
@@ -137,7 +140,7 @@
137
140
  }
138
141
 
139
142
  &.-small {
140
- --_button-padding-inline: 1ch;
143
+ --_button-padding-inline: 0.5em;
141
144
  min-block-size: var(--button-height-small);
142
145
  }
143
146
 
@@ -146,20 +149,30 @@
146
149
  }
147
150
 
148
151
  &.-offset {
149
- --_button-offset-distance: var(--button-offset-distance, -0.1lh);
150
- --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.05lh);
151
-
152
- --_button-transform: translate(var(--_button-offset-distance),
153
- var(--_button-offset-distance));
154
- --_button-hover-transform: translate(var(--_button-offset-distance-hover),
155
- var(--_button-offset-distance-hover));
156
-
157
- --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color),
158
- calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color),
159
- calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
160
-
161
- --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color),
162
- calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
152
+ --_button-offset-distance: var(--button-offset-distance, -0.15em);
153
+ --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.075em);
154
+
155
+ --_button-transform: translate(
156
+ var(--_button-offset-distance),
157
+ var(--_button-offset-distance)
158
+ );
159
+ --_button-hover-transform: translate(
160
+ var(--_button-offset-distance-hover),
161
+ var(--_button-offset-distance-hover)
162
+ );
163
+
164
+ --button-box-shadow: calc(var(--_button-offset-distance) / -2)
165
+ calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color),
166
+ calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1)
167
+ 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1)
168
+ calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2)
169
+ 0 var(--shadow-color);
170
+
171
+ --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1)
172
+ calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color),
173
+ calc(var(--_button-offset-distance-hover) * -1)
174
+ calc(var(--_button-offset-distance-hover) * -1)
175
+ calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
163
176
 
164
177
  inset-block-start: calc(var(--_button-offset-distance) * -1);
165
178
  inset-inline-start: calc(var(--_button-offset-distance) * -1);
@@ -175,7 +188,7 @@
175
188
  */
176
189
 
177
190
  &:has(svg) {
178
- gap: 0.5ch;
191
+ gap: 0.25em;
179
192
  }
180
193
 
181
194
  /*
@@ -192,7 +205,7 @@
192
205
  fill: currentColor;
193
206
 
194
207
  &:after {
195
- content: '';
208
+ content: "";
196
209
  inline-size: max(var(--button-height-base), 100%);
197
210
  block-size: max(var(--button-height-base), 100%);
198
211
  aspect-ratio: 1;
@@ -204,7 +217,7 @@
204
217
  pointer-events: all;
205
218
  }
206
219
 
207
- &>svg {
220
+ & > svg {
208
221
  pointer-events: none;
209
222
  }
210
223
  }
@@ -218,22 +231,22 @@
218
231
  }
219
232
  }
220
233
 
221
- :where(input[type='file']:not([class])) {
234
+ :where(input[type="file"]:not([class])) {
222
235
  color: var(--_input-color);
223
236
  background-color: var(--_input-background);
224
237
  border: var(--_input-border);
225
238
  min-block-size: var(--button-height-base);
226
- padding-inline-end: 1ch;
239
+ padding-inline-end: 0.5em;
227
240
  padding-inline-start: 0;
228
241
  border-radius: var(--_input-border-radius);
229
242
  }
230
243
 
231
- :where(input[type='file']:not([class]))::-webkit-file-upload-button,
232
- :where(input[type='file']:not([class]))::file-selector-button {
244
+ :where(input[type="file"]:not([class]))::-webkit-file-upload-button,
245
+ :where(input[type="file"]:not([class]))::file-selector-button {
233
246
  background-color: var(--_button-background);
234
247
  color: var(--_button-color);
235
248
  padding-inline: var(--_button-padding-inline);
236
- margin-inline-end: 1ch;
249
+ margin-inline-end: 0.5em;
237
250
  cursor: pointer;
238
251
  box-shadow: none;
239
252
  min-block-size: calc(var(--button-height-base) - var(--border-width-thin));
@@ -246,7 +259,7 @@
246
259
  border-end-end-radius: 0;
247
260
  }
248
261
 
249
- :where(button[type='reset']:not([class]), .nc-button.-destructive) {
262
+ :where(button[type="reset"]:not([class]), .nc-button.-destructive) {
250
263
  --text: var(--color-status-danger-emphasis);
251
264
  --color: var(--color-status-danger-base);
252
265
  --surface: var(--color-status-danger-surface);
package/src/styles/components/card.css CHANGED
@@ -28,7 +28,7 @@
28
28
  overflow: hidden;
29
29
 
30
30
  appearance: none;
31
- border: 1px solid var(--_card-border-color);
31
+ border: var(--border-width-thin) solid var(--_card-border-color);
32
32
 
33
33
  background-color: var(--_card-background-color);
34
34
  border-radius: var(--_card-border-radius);
@@ -52,4 +52,34 @@
52
52
  }
53
53
  }
54
54
  }
55
+
56
+ :where(.nc-clickable-card) {
57
+ cursor: pointer;
58
+ position: relative;
59
+
60
+ &:focus-within,
61
+ &:hover {
62
+ outline: var(--border-width-medium) solid var(--color-brand-primary-base);
63
+ }
64
+
65
+ & a[data-link="main"] {
66
+ text-decoration: none;
67
+ font: inherit;
68
+
69
+ &:focus-within:focus-visible,
70
+ &:hover {
71
+ outline: none;
72
+ }
73
+
74
+ &:before {
75
+ content: "";
76
+ position: absolute;
77
+ inset: 0;
78
+ }
79
+ }
80
+
81
+ & a[data-link="extra"] {
82
+ position: relative;
83
+ }
84
+ }
55
85
  }
package/src/styles/components/dialogs.css CHANGED
@@ -3,15 +3,18 @@
3
3
  --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
4
4
  --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
5
5
  --_dialog-close-size: var(--dialog-close-size, var(--button-height-base));
6
- --_dialog-transition-duration: var(--dialog-transition-duration,
7
- var(--transition-duration-base));
6
+ --_dialog-transition-duration: var(
7
+ --dialog-transition-duration,
8
+ var(--transition-duration-base)
9
+ );
8
10
  --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
9
11
  --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
10
12
 
11
13
  --_dialog-radius: 0;
12
14
  display: block;
13
15
  z-index: var(--layer-important);
14
- animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
16
+ animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1)
17
+ forwards;
15
18
  transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
16
19
  position: fixed;
17
20
  inset: 0;
@@ -25,7 +28,7 @@
25
28
  padding: 0;
26
29
  border-radius: var(--_dialog-radius);
27
30
  overflow: clip;
28
- overflow-clip-margin: 1rem;
31
+ overflow-clip-margin: 1em;
29
32
  pointer-events: all;
30
33
 
31
34
  @media (min-width: 36rem) {
@@ -60,13 +63,13 @@
60
63
  block-size: max-content;
61
64
  max-block-size: var(--_dialog-max-block-size);
62
65
  overflow: clip;
63
- overflow-clip-margin: 1rem;
66
+ overflow-clip-margin: 1em;
64
67
 
65
- &>*:first-child {
68
+ & > *:first-child {
66
69
  border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
67
70
  }
68
71
 
69
- &>*:last-child {
72
+ & > *:last-child {
70
73
  border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
71
74
  }
72
75
  }
@@ -83,7 +86,7 @@
83
86
  min-inline-size: calc(2 * var(--spacing-near) + var(--_dialog-close-size));
84
87
  }
85
88
 
86
- :where(.dialog-header)>button[data-closes-dialog] {
89
+ :where(.dialog-header) > button[data-closes-dialog] {
87
90
  grid-area: close;
88
91
  inline-size: var(--_dialog-close-size);
89
92
  block-size: var(--_dialog-close-size);
package/src/styles/components/forms.css CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  :where(.nc-form-hint) {
14
- margin-block: 0.5lh;
14
+ margin-block: 0.75em;
15
15
  font-size: var(--font-size-large);
16
16
  color: var(--color-text-muted);
17
17
  }
@@ -29,13 +29,19 @@
29
29
  border-radius: 0;
30
30
  inline-size: 100%;
31
31
 
32
- &+* {
33
- margin-block-start: var(--nc-legend-spacing, 0.8lh);
32
+ & + * {
33
+ margin-block-start: var(--nc-legend-spacing, 1em);
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) + .nc-hint) {
38
- --nc-legend-spacing: .125lh;
39
- margin-block-end: 0.5lh;
37
+ :where(
38
+ :is(fieldset:not([class]), .nc-fieldset):has(
39
+ :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)
40
+ )
41
+ > :is(legend:not([class]), .nc-legend)
42
+ + .nc-hint
43
+ ) {
44
+ --nc-legend-spacing: .2em;
45
+ margin-block-end: 0.75em;
40
46
  }
41
47
  }
package/src/styles/components/inputs/base.css CHANGED
@@ -10,49 +10,55 @@
10
10
  align-items: center;
11
11
  }
12
12
 
13
- :where(input[type="text"],
14
- input[type="email"],
15
- input[type="password"],
16
- input[type="number"],
17
- input[type="url"],
18
- input[type="search"],
19
- input[type="date"],
20
- input[type="month"],
21
- input[type="week"],
22
- input[type="text"],
23
- input[type="datetime"],
24
- input[type="datetime-local"],
25
- input[type="time"],
26
- input[type="tel"],
27
- input[type="color"],
28
- input[type="file"],
29
- input[type="checkbox"],
30
- input[type="radio"],
31
- textarea,
32
- select,
33
- .nc-input,
34
- .nc-select,
35
- .nc-textarea,
36
- .nc-input-checkbox,
37
- .nc-input-radio,
38
- .nc-input-label,
39
- .nc-input-color,
40
- .nc-input-field,
41
- .nc-input-error,
42
- .nc-checkbox-wrapper,
43
- .nc-input-switch,
44
- .nc-radio-field,
45
- .nc-checkbox-field) {
13
+ :where(
14
+ 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
47
+ ) {
46
48
  --_input-background: var(--input-background, var(--color-surface-subtle));
47
49
  --_input-background-active: var(--input-background-active, var(--color-surface-base));
48
50
  --_input-color: var(--input-color, var(--color-text-base));
49
- --_input-border: var(--input-border,
50
- var(--border-width-thin) solid var(--color-border-base));
51
+ --_input-border: var(
52
+ --input-border,
53
+ var(--border-width-thin) solid var(--color-border-base)
54
+ );
51
55
  --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
52
56
 
53
57
  --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
54
- --_input-outline: var(--input-outline,
55
- var(--border-width-medium) solid var(--color-brand-primary-base));
58
+ --_input-outline: var(
59
+ --input-outline,
60
+ var(--border-width-medium) solid var(--color-brand-primary-base)
61
+ );
56
62
  --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
57
63
 
58
64
  --_input-padding-block: var(--input-padding-block, 0.125lh);
@@ -60,25 +66,27 @@
60
66
  --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
61
67
  }
62
68
 
63
- :where(input[type="text"],
64
- input[type="email"],
65
- input[type="password"],
66
- input[type="number"],
67
- input[type="url"],
68
- input[type="search"],
69
- input[type="date"],
70
- input[type="month"],
71
- input[type="week"],
72
- input[type="text"],
73
- input[type="datetime"],
74
- input[type="datetime-local"],
75
- input[type="time"],
76
- input[type="tel"],
77
- input[type="color"],
78
- input[type="file"],
79
- textarea,
80
- select,
81
- .nc-input) {
69
+ :where(
70
+ input[type="text"],
71
+ input[type="email"],
72
+ input[type="password"],
73
+ input[type="number"],
74
+ input[type="url"],
75
+ input[type="search"],
76
+ input[type="date"],
77
+ input[type="month"],
78
+ input[type="week"],
79
+ input[type="text"],
80
+ input[type="datetime"],
81
+ input[type="datetime-local"],
82
+ input[type="time"],
83
+ input[type="tel"],
84
+ input[type="color"],
85
+ input[type="file"],
86
+ textarea,
87
+ select,
88
+ .nc-input
89
+ ) {
82
90
  font: inherit;
83
91
  letter-spacing: inherit;
84
92
  word-spacing: inherit;
@@ -122,10 +130,10 @@
122
130
  }
123
131
 
124
132
  :where(select:not([class]), .nc-select) {
125
- padding-inline-end: 3.5ch;
133
+ padding-inline-end: 1.75em;
126
134
  background-image: var(--triangle-down-url);
127
- background-position: right 1ch top 50%;
128
- background-size: 1.5ch 1.25ch;
135
+ background-position: right 0.5em top 50%;
136
+ background-size: 1em 0.75em;
129
137
  }
130
138
 
131
139
  :where(textarea:not([class]), .nc-textarea) {
@@ -139,11 +147,13 @@
139
147
  field-sizing: content;
140
148
  }
141
149
 
142
- :where(input[type="checkbox"]:not([class]),
143
- input[type="radio"]:not([class]),
144
- .nc-input-checkbox,
145
- .nc-input-radio,
146
- .nc-input-switch) {
150
+ :where(
151
+ input[type="checkbox"]:not([class]),
152
+ input[type="radio"]:not([class]),
153
+ .nc-input-checkbox,
154
+ .nc-input-radio,
155
+ .nc-input-switch
156
+ ) {
147
157
  inline-size: 1lh;
148
158
  block-size: 1lh;
149
159
  padding: 0;
@@ -224,7 +234,7 @@
224
234
  }
225
235
 
226
236
  :where(input[type="range"], .nc-input-range) {
227
- &>.nc-hint {
237
+ & > .nc-hint {
228
238
  margin-inline-start: auto;
229
239
  }
230
240
 
package/src/styles/components/inputs/fields.css CHANGED
@@ -1,20 +1,20 @@
1
1
  @layer components.input-fields {
2
2
  :where(.nc-input-field) {
3
3
  display: grid;
4
- gap: 0.25lh;
4
+ gap: 0.35em;
5
5
  grid-template-columns: minmax(0, 1fr);
6
6
  inline-size: 100%;
7
7
  min-inline-size: var(--input-field-min-inline-size);
8
8
  max-inline-size: var(--input-field-max-inline-size);
9
9
  place-items: start;
10
10
 
11
- &>label,
12
- &>.nc-stack {
11
+ & > label,
12
+ & > .nc-stack {
13
13
  gap: 0;
14
14
  }
15
15
 
16
- &>.nc-cluster {
17
- gap: 1ch;
16
+ & > .nc-cluster {
17
+ gap: 0.5em;
18
18
  }
19
19
  }
20
20
 
@@ -33,7 +33,7 @@
33
33
  justify-content: center;
34
34
  background-color: var(--color-base);
35
35
  color: var(--color-surface-subtle);
36
- margin-inline-end: 1ch;
36
+ margin-inline-end: 0.5em;
37
37
  inline-size: 1em;
38
38
  block-size: 1em;
39
39
  flex-shrink: 0;
@@ -48,16 +48,16 @@
48
48
  place-items: start;
49
49
  gap: 0;
50
50
 
51
- &>[data-label] {
51
+ & > [data-label] {
52
52
  grid-area: label;
53
- padding-inline-start: 1ch;
53
+ padding-inline-start: 0.5em;
54
54
  }
55
55
 
56
56
  & .nc-input-label {
57
57
  min-block-size: var(--line-height-base);
58
58
  }
59
59
 
60
- &>[data-input] {
60
+ & > [data-input] {
61
61
  grid-area: checkbox;
62
62
  }
63
63
 
@@ -69,8 +69,8 @@
69
69
  :where(.nc-radio-field, .nc-checkbox-field) {
70
70
  gap: 0;
71
71
 
72
- >*:not(:first-child) {
73
- margin-block-start: 0.6lh;
72
+ > *:not(:first-child) {
73
+ margin-block-start: 0.75em;
74
74
  }
75
75
  }
76
76
  }
package/src/styles/components/inputs/segmented.css CHANGED
@@ -1,15 +1,21 @@
1
1
  @layer components.inputs-segmented {
2
2
  :where(.nc-segmented-control-group) {
3
- --_segmented-control-border-radius: var(--segmented-control-border-radius,
4
- var(--_input-border-radius));
5
- --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color,
6
- var(--color-brand-primary-contrast));
7
- --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color,
8
- var(--color-brand-primary-base));
3
+ --_segmented-control-border-radius: var(
4
+ --segmented-control-border-radius,
5
+ var(--_input-border-radius)
6
+ );
7
+ --_segmented-control-checked-text-color: var(
8
+ --segmented-control-checked-text-color,
9
+ var(--color-brand-primary-contrast)
10
+ );
11
+ --_segmented-control-checked-surface-color: var(
12
+ --segmented-control-checked-surface-color,
13
+ var(--color-brand-primary-base)
14
+ );
9
15
 
10
16
  container: segmented-control / inline-size;
11
17
 
12
- --nc-legend-spacing: 0.25lh;
18
+ --nc-legend-spacing: 0.35em;
13
19
  }
14
20
 
15
21
  :where(.nc-segmented-control) {
@@ -43,7 +49,7 @@
43
49
  align-items: center;
44
50
  justify-content: center;
45
51
 
46
- >.nc-input-label {
52
+ > .nc-input-label {
47
53
  color: inherit;
48
54
  }
49
55
 
@@ -53,11 +59,13 @@
53
59
  }
54
60
 
55
61
  &:first-child {
56
- border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
62
+ border-radius: var(--_segmented-control-border-radius)
63
+ var(--_segmented-control-border-radius) 0 0;
57
64
  }
58
65
 
59
66
  &:last-child {
60
- border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
67
+ border-radius: 0 0 var(--_segmented-control-border-radius)
68
+ var(--_segmented-control-border-radius);
61
69
  }
62
70
 
63
71
  &:not(:last-child) {
@@ -90,13 +98,15 @@
90
98
  grid-auto-columns: 1fr;
91
99
  grid-auto-flow: column;
92
100
 
93
- >label {
101
+ > label {
94
102
  &:first-child {
95
- border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
103
+ border-radius: var(--_segmented-control-border-radius) 0 0
104
+ var(--_segmented-control-border-radius);
96
105
  }
97
106
 
98
107
  &:last-child {
99
- border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
108
+ border-radius: 0 var(--_segmented-control-border-radius)
109
+ var(--_segmented-control-border-radius) 0;
100
110
  }
101
111
 
102
112
  &:not(:last-child) {
package/src/styles/components/inputs/tag-select.css CHANGED
@@ -1,14 +1,18 @@
1
1
  @layer components.inputs {
2
2
  :where(.nc-tag-select-field) {
3
- --_tag-select-checked-text-color: var(--tag-select-checked-text-color,
4
- var(--color-brand-primary-contrast));
5
- --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color,
6
- var(--color-brand-primary-base));
3
+ --_tag-select-checked-text-color: var(
4
+ --tag-select-checked-text-color,
5
+ var(--color-brand-primary-contrast)
6
+ );
7
+ --_tag-select-checked-surface-color: var(
8
+ --tag-select-checked-surface-color,
9
+ var(--color-brand-primary-base)
10
+ );
7
11
  --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
8
- --nc-legend-spacing: 0.25lh;
12
+ --nc-legend-spacing: 0.35em;
9
13
 
10
14
  &:focus-within:has(:focus-visible) {
11
- outline-offset: 1ch;
15
+ outline-offset: 0.5em;
12
16
  outline: var(--_input-outline);
13
17
  border-radius: var(--_tag-select-border-radius);
14
18
  }