@nordcode/ui 1.1.0 → 1.1.2

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 (9) hide show
  1. package/CHANGELOG.md +13 -1
  2. package/out/bundle.css +4 -3
  3. package/out/bundle_configless.css +1 -0
  4. package/out/complete.css +5 -4
  5. package/out/complete_configless.css +2 -1
  6. package/package.json +1 -1
  7. package/src/styles/components/inputs/switch.css +1 -1
  8. package/src/styles/config/config.css +3 -3
  9. package/src/styles/utils/base.css +10 -6
package/CHANGELOG.md CHANGED
@@ -52,7 +52,7 @@ Be sure to checkout the updated markup for these components in the documentation
52
52
 
53
53
  - Fix radius for real
54
54
 
55
- ## 1.0.13 (2025-01-03)
55
+ ## 1.1.0 (2025-01-03)
56
56
 
57
57
  Lots of spring cleaning
58
58
 
@@ -61,3 +61,15 @@ Lots of spring cleaning
61
61
  - Line height tokens now use unitless values to allow proper inheritance
62
62
  - Changed default styling for details
63
63
  - Cleanup unused styles
64
+
65
+ ## 1.1.1 (2025-01-03)
66
+
67
+ ### Fixes
68
+
69
+ - Made details full width again
70
+
71
+ ## 1.1.2 (2025-01-03)
72
+
73
+ ### Fixes
74
+
75
+ - Fix switch component not working
package/out/bundle.css CHANGED
@@ -8,9 +8,9 @@
8
8
  --font-weight-heading: 600;
9
9
  --font-weight-active: 600;
10
10
  --font-weight-strong: 600;
11
- --line-height-large: 1.75;
12
- --line-height-base: 1.5;
13
- --line-height-small: 1.2;
11
+ --line-height-large: 1.85;
12
+ --line-height-base: 1.55;
13
+ --line-height-small: 1.1;
14
14
  --tracking-base: normal;
15
15
  --tracking-tight: -.04ch;
16
16
  --tracking-wide: .06ch;
@@ -510,6 +510,7 @@
510
510
  border-radius: var(--border-radius-medium);
511
511
  border: var(--border-width-thin) solid var(--color-border-base);
512
512
  padding: var(--p-y-details) var(--p-x-details);
513
+ inline-size: 100%;
513
514
  }
514
515
 
515
516
  :where(details) > summary {
package/out/bundle_configless.css CHANGED
@@ -291,6 +291,7 @@
291
291
  border-radius: var(--border-radius-medium);
292
292
  border: var(--border-width-thin) solid var(--color-border-base);
293
293
  padding: var(--p-y-details) var(--p-x-details);
294
+ inline-size: 100%;
294
295
  }
295
296
 
296
297
  :where(details) > summary {
package/out/complete.css CHANGED
@@ -8,9 +8,9 @@
8
8
  --font-weight-heading: 600;
9
9
  --font-weight-active: 600;
10
10
  --font-weight-strong: 600;
11
- --line-height-large: 1.75;
12
- --line-height-base: 1.5;
13
- --line-height-small: 1.2;
11
+ --line-height-large: 1.85;
12
+ --line-height-base: 1.55;
13
+ --line-height-small: 1.1;
14
14
  --tracking-base: normal;
15
15
  --tracking-tight: -.04ch;
16
16
  --tracking-wide: .06ch;
@@ -510,6 +510,7 @@
510
510
  border-radius: var(--border-radius-medium);
511
511
  border: var(--border-width-thin) solid var(--color-border-base);
512
512
  padding: var(--p-y-details) var(--p-x-details);
513
+ inline-size: 100%;
513
514
  }
514
515
 
515
516
  :where(details) > summary {
@@ -2423,7 +2424,7 @@
2423
2424
 
2424
2425
  @layer components.input-switch {
2425
2426
  :where(.nc-input-switch) {
2426
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
2427
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
2427
2428
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
2428
2429
  --_switch-color: var(--switch-color, var(--_input-background));
2429
2430
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
package/out/complete_configless.css CHANGED
@@ -291,6 +291,7 @@
291
291
  border-radius: var(--border-radius-medium);
292
292
  border: var(--border-width-thin) solid var(--color-border-base);
293
293
  padding: var(--p-y-details) var(--p-x-details);
294
+ inline-size: 100%;
294
295
  }
295
296
 
296
297
  :where(details) > summary {
@@ -2204,7 +2205,7 @@
2204
2205
 
2205
2206
  @layer components.input-switch {
2206
2207
  :where(.nc-input-switch) {
2207
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
2208
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
2208
2209
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
2209
2210
  --_switch-color: var(--switch-color, var(--_input-background));
2210
2211
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
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.1.0",
15
+ "version": "1.1.2",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/components/inputs/switch.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components.input-switch {
2
2
  :where(.nc-input-switch) {
3
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
3
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
4
4
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
5
5
  --_switch-color: var(--switch-color, var(--_input-background));
6
6
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
package/src/styles/config/config.css CHANGED
@@ -12,9 +12,9 @@
12
12
  --font-weight-active: 600;
13
13
  --font-weight-strong: 600;
14
14
 
15
- --line-height-large: 1.75;
16
- --line-height-base: 1.5;
17
- --line-height-small: 1.2;
15
+ --line-height-large: 1.85;
16
+ --line-height-base: 1.55;
17
+ --line-height-small: 1.1;
18
18
 
19
19
  --tracking-base: normal;
20
20
  --tracking-tight: -0.04ch;
package/src/styles/utils/base.css CHANGED
@@ -88,17 +88,19 @@
88
88
  border-radius: var(--border-radius-medium);
89
89
  border: var(--border-width-thin) solid var(--color-border-base);
90
90
  padding: var(--p-y-details) var(--p-x-details);
91
+ inline-size: 100%;
91
92
 
92
- &>summary {
93
+ & > summary {
93
94
  color: var(--color-text-base);
94
95
  background: var(--color-surface-subtle);
95
96
  border-radius: var(--border-radius-medium);
96
97
  font-weight: var(--font-weight-heading);
97
98
  padding: var(--p-y-details) var(--p-x-details);
98
- margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
99
+ margin: calc(-1 * var(--p-y-details))
100
+ calc(-1 * var(--p-x-details) + var(--border-width-thin));
99
101
  }
100
102
 
101
- &[open]>summary {
103
+ &[open] > summary {
102
104
  border-end-start-radius: 0;
103
105
  border-end-end-radius: 0;
104
106
  margin-block-end: var(--p-y-details);
@@ -135,9 +137,11 @@
135
137
  margin-block-start: var(--spacing-near);
136
138
  font-size: var(--font-size-base);
137
139
  max-inline-size: max-content;
138
- color: color-mix(in oklch,
139
- currentColor calc(var(--transparency-weaker) * 100%),
140
- transparent);
140
+ color: color-mix(
141
+ in oklch,
142
+ currentColor calc(var(--transparency-weaker) * 100%),
143
+ transparent
144
+ );
141
145
  }
142
146
 
143
147
  & cite:before {