@nordcode/ui 2.0.5 → 2.0.6

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 (32) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/LICENSE.md +159 -159
  3. package/README.md +0 -2
  4. package/out/bundle.css +12 -12
  5. package/out/complete.css +19 -21
  6. package/out/complete_configless.css +7 -9
  7. package/package.json +3 -3
  8. package/src/assets/icons/ArrowRightSolid.svelte +3 -1
  9. package/src/assets/icons/arrow-right-solid.svg +5 -1
  10. package/src/assets/icons/favicon.svg +13 -4
  11. package/src/assets/logos/nordcode-logo-icon.svg +6 -1
  12. package/src/assets/logos/nordcode-logo.svg +46 -13
  13. package/src/modules/dialogs/svelte/dialog.svelte +14 -15
  14. package/src/modules/dialogs/ts/dialogs.ts +80 -79
  15. package/src/modules/notifications/js/notifications.js +3 -6
  16. package/src/modules/notifications/svelte/NotificationTemplate.svelte +0 -2
  17. package/src/styles/components/buttons.css +29 -42
  18. package/src/styles/components/dialogs.css +1 -2
  19. package/src/styles/components/forms.css +3 -7
  20. package/src/styles/components/gallery.css +12 -8
  21. package/src/styles/components/inputs/base.css +3 -63
  22. package/src/styles/components/inputs/segmented.css +4 -8
  23. package/src/styles/components/inputs/switch.css +1 -3
  24. package/src/styles/components/notifications.css +1 -2
  25. package/src/styles/config/config.css +352 -305
  26. package/src/styles/theme/colors.css +182 -124
  27. package/src/styles/theme/colors_processed.css +254 -80
  28. package/src/styles/utils/base.css +2 -13
  29. package/src/styles/utils/easings.css +312 -292
  30. package/src/styles/utils/layouts.css +12 -18
  31. package/src/styles/utils/reset.css +3 -30
  32. package/transform.js +1 -1
package/README.md CHANGED
@@ -61,7 +61,6 @@ All components heavily rely on `@nordcode/ui/colors` for their default styles, b
61
61
  - `@norcode/ui/badges.css` depends on `@nordcode/ui/utils/theme.css`.
62
62
  - `@norcode/ui/inputs/*.css` all depend on `@nordcode/ui/inputs/base.css`. Be sure to import that first.
63
63
 
64
-
65
64
  ## Using Components
66
65
 
67
66
  For the components, there is recommended markup, previews and usage information here: [https://design-ui.nordcode.agency/components/](https://design-ui.nordcode.agency/components/)
@@ -82,7 +81,6 @@ They are not strictly part of the design system, but can be useful for your proj
82
81
 
83
82
  **Note**: They may be removed in the future. Use them at your own risk.
84
83
 
85
-
86
84
  ---
87
85
 
88
86
  Thanks for checking this out, we hope you like it!
package/out/bundle.css CHANGED
@@ -59,14 +59,14 @@
59
59
  --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
60
60
  --color-brand-primary-emphasis-light: oklch(calc(var(--l-brand-primary-light) * .85) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
61
61
  --color-brand-primary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-primary-light) / 10) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
62
- --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
62
+ --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
63
63
  --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
64
64
  --color-brand-primary-hover-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
65
65
  --l-brand-primary-dark: .75;
66
66
  --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
67
67
  --color-brand-primary-emphasis-dark: oklch(calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
68
68
  --color-brand-primary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-primary-dark) / 3) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
69
- --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
69
+ --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
70
70
  --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
71
71
  --color-brand-primary-hover-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
72
72
  --c-brand-secondary: .4;
@@ -75,14 +75,14 @@
75
75
  --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
76
76
  --color-brand-secondary-emphasis-light: oklch(calc(var(--l-brand-secondary-light) * .85) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
77
77
  --color-brand-secondary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-secondary-light) / 10) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
78
- --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
78
+ --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
79
79
  --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
80
80
  --color-brand-secondary-hover-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
81
81
  --l-brand-secondary-dark: .76;
82
82
  --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
83
83
  --color-brand-secondary-emphasis-dark: oklch(calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
84
84
  --color-brand-secondary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-secondary-dark) / 3) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
85
- --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
85
+ --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
86
86
  --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
87
87
  --color-brand-secondary-hover-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
88
88
  --l-text-light: .28;
@@ -143,14 +143,14 @@
143
143
  --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
144
144
  --color-status-success-emphasis-light: oklch(calc(var(--l-status-success-light) * .85) calc(var(--c-status-success) * 1.1) var(--h-status-success));
145
145
  --color-status-success-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-success-light) / 10) calc(var(--c-status-success) * .25) var(--h-status-success));
146
- --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
146
+ --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
147
147
  --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) calc(var(--c-status-success) * .25) var(--h-status-success));
148
148
  --color-status-success-hover-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
149
149
  --l-status-success-dark: .75;
150
150
  --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
151
151
  --color-status-success-emphasis-dark: oklch(calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1) var(--h-status-success));
152
152
  --color-status-success-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-success-dark) / 3) calc(var(--c-status-success) * .25) var(--h-status-success));
153
- --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
153
+ --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
154
154
  --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * .25) var(--h-status-success));
155
155
  --color-status-success-hover-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
156
156
  --c-status-warning: .3;
@@ -159,14 +159,14 @@
159
159
  --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
160
160
  --color-status-warning-emphasis-light: oklch(calc(var(--l-status-warning-light) * .85) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
161
161
  --color-status-warning-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-warning-light) / 10) calc(var(--c-status-warning) * .25) var(--h-status-warning));
162
- --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
162
+ --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
163
163
  --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) calc(var(--c-status-warning) * .25) var(--h-status-warning));
164
164
  --color-status-warning-hover-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
165
165
  --l-status-warning-dark: .75;
166
166
  --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
167
167
  --color-status-warning-emphasis-dark: oklch(calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
168
168
  --color-status-warning-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-warning-dark) / 3) calc(var(--c-status-warning) * .25) var(--h-status-warning));
169
- --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
169
+ --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
170
170
  --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * .25) var(--h-status-warning));
171
171
  --color-status-warning-hover-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
172
172
  --c-status-danger: .3;
@@ -175,14 +175,14 @@
175
175
  --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
176
176
  --color-status-danger-emphasis-light: oklch(calc(var(--l-status-danger-light) * .85) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
177
177
  --color-status-danger-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-danger-light) / 10) calc(var(--c-status-danger) * .25) var(--h-status-danger));
178
- --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
178
+ --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
179
179
  --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * .25) var(--h-status-danger));
180
180
  --color-status-danger-hover-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
181
181
  --l-status-danger-dark: .75;
182
182
  --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
183
183
  --color-status-danger-emphasis-dark: oklch(calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
184
184
  --color-status-danger-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-danger-dark) / 3) calc(var(--c-status-danger) * .25) var(--h-status-danger));
185
- --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
185
+ --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
186
186
  --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * .25) var(--h-status-danger));
187
187
  --color-status-danger-hover-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
188
188
  --c-status-info: .3;
@@ -191,14 +191,14 @@
191
191
  --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
192
192
  --color-status-info-emphasis-light: oklch(calc(var(--l-status-info-light) * .85) calc(var(--c-status-info) * 1.1) var(--h-status-info));
193
193
  --color-status-info-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-info-light) / 10) calc(var(--c-status-info) * .25) var(--h-status-info));
194
- --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
194
+ --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
195
195
  --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * .25) var(--h-status-info));
196
196
  --color-status-info-hover-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
197
197
  --l-status-info-dark: .75;
198
198
  --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
199
199
  --color-status-info-emphasis-dark: oklch(calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1) var(--h-status-info));
200
200
  --color-status-info-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-info-dark) / 3) calc(var(--c-status-info) * .25) var(--h-status-info));
201
- --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
201
+ --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
202
202
  --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
203
203
  --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
204
204
  --control-height-base: var(--button-height-base);
package/out/complete.css CHANGED
@@ -59,14 +59,14 @@
59
59
  --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
60
60
  --color-brand-primary-emphasis-light: oklch(calc(var(--l-brand-primary-light) * .85) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
61
61
  --color-brand-primary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-primary-light) / 10) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
62
- --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
62
+ --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
63
63
  --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
64
64
  --color-brand-primary-hover-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
65
65
  --l-brand-primary-dark: .75;
66
66
  --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
67
67
  --color-brand-primary-emphasis-dark: oklch(calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
68
68
  --color-brand-primary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-primary-dark) / 3) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
69
- --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
69
+ --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
70
70
  --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
71
71
  --color-brand-primary-hover-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
72
72
  --c-brand-secondary: .4;
@@ -75,14 +75,14 @@
75
75
  --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
76
76
  --color-brand-secondary-emphasis-light: oklch(calc(var(--l-brand-secondary-light) * .85) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
77
77
  --color-brand-secondary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-secondary-light) / 10) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
78
- --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
78
+ --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
79
79
  --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
80
80
  --color-brand-secondary-hover-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
81
81
  --l-brand-secondary-dark: .76;
82
82
  --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
83
83
  --color-brand-secondary-emphasis-dark: oklch(calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
84
84
  --color-brand-secondary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-secondary-dark) / 3) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
85
- --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
85
+ --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
86
86
  --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
87
87
  --color-brand-secondary-hover-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
88
88
  --l-text-light: .28;
@@ -143,14 +143,14 @@
143
143
  --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
144
144
  --color-status-success-emphasis-light: oklch(calc(var(--l-status-success-light) * .85) calc(var(--c-status-success) * 1.1) var(--h-status-success));
145
145
  --color-status-success-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-success-light) / 10) calc(var(--c-status-success) * .25) var(--h-status-success));
146
- --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
146
+ --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
147
147
  --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) calc(var(--c-status-success) * .25) var(--h-status-success));
148
148
  --color-status-success-hover-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
149
149
  --l-status-success-dark: .75;
150
150
  --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
151
151
  --color-status-success-emphasis-dark: oklch(calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1) var(--h-status-success));
152
152
  --color-status-success-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-success-dark) / 3) calc(var(--c-status-success) * .25) var(--h-status-success));
153
- --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
153
+ --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
154
154
  --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * .25) var(--h-status-success));
155
155
  --color-status-success-hover-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
156
156
  --c-status-warning: .3;
@@ -159,14 +159,14 @@
159
159
  --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
160
160
  --color-status-warning-emphasis-light: oklch(calc(var(--l-status-warning-light) * .85) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
161
161
  --color-status-warning-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-warning-light) / 10) calc(var(--c-status-warning) * .25) var(--h-status-warning));
162
- --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
162
+ --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
163
163
  --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) calc(var(--c-status-warning) * .25) var(--h-status-warning));
164
164
  --color-status-warning-hover-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
165
165
  --l-status-warning-dark: .75;
166
166
  --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
167
167
  --color-status-warning-emphasis-dark: oklch(calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
168
168
  --color-status-warning-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-warning-dark) / 3) calc(var(--c-status-warning) * .25) var(--h-status-warning));
169
- --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
169
+ --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
170
170
  --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * .25) var(--h-status-warning));
171
171
  --color-status-warning-hover-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
172
172
  --c-status-danger: .3;
@@ -175,14 +175,14 @@
175
175
  --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
176
176
  --color-status-danger-emphasis-light: oklch(calc(var(--l-status-danger-light) * .85) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
177
177
  --color-status-danger-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-danger-light) / 10) calc(var(--c-status-danger) * .25) var(--h-status-danger));
178
- --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
178
+ --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
179
179
  --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * .25) var(--h-status-danger));
180
180
  --color-status-danger-hover-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
181
181
  --l-status-danger-dark: .75;
182
182
  --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
183
183
  --color-status-danger-emphasis-dark: oklch(calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
184
184
  --color-status-danger-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-danger-dark) / 3) calc(var(--c-status-danger) * .25) var(--h-status-danger));
185
- --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
185
+ --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
186
186
  --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * .25) var(--h-status-danger));
187
187
  --color-status-danger-hover-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
188
188
  --c-status-info: .3;
@@ -191,14 +191,14 @@
191
191
  --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
192
192
  --color-status-info-emphasis-light: oklch(calc(var(--l-status-info-light) * .85) calc(var(--c-status-info) * 1.1) var(--h-status-info));
193
193
  --color-status-info-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-info-light) / 10) calc(var(--c-status-info) * .25) var(--h-status-info));
194
- --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
194
+ --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
195
195
  --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * .25) var(--h-status-info));
196
196
  --color-status-info-hover-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
197
197
  --l-status-info-dark: .75;
198
198
  --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
199
199
  --color-status-info-emphasis-dark: oklch(calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1) var(--h-status-info));
200
200
  --color-status-info-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-info-dark) / 3) calc(var(--c-status-info) * .25) var(--h-status-info));
201
- --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
201
+ --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
202
202
  --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
203
203
  --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
204
204
  --control-height-base: var(--button-height-base);
@@ -1516,7 +1516,7 @@
1516
1516
  }
1517
1517
 
1518
1518
  @layer components.buttons {
1519
- :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
1519
+ :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"], .nc-button) {
1520
1520
  --_button-background: var(--button-background, var(--surface-hover));
1521
1521
  --_button-color: var(--button-color, var(--text-hover));
1522
1522
  --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -1685,44 +1685,42 @@
1685
1685
  margin-inline: calc(-1 * var(--_button-padding-inline));
1686
1686
  }
1687
1687
 
1688
- :where(input[type="file"]:not([class])) {
1688
+ :where(input[type="file"]) {
1689
1689
  color: var(--_input-color);
1690
1690
  background-color: var(--_input-background);
1691
1691
  border: var(--_input-border);
1692
1692
  min-block-size: var(--control-height-base);
1693
1693
  border-radius: var(--_input-border-radius);
1694
- padding-inline-start: 0;
1695
1694
  padding-inline-end: var(--contol-spacing-near, .5em);
1695
+ padding-inline-start: 0 !important;
1696
1696
  }
1697
1697
 
1698
- :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
1698
+ :where(input[type="file"])::-webkit-file-upload-button {
1699
1699
  background-color: var(--_button-background);
1700
1700
  color: var(--_button-color);
1701
1701
  padding-inline: var(--_button-padding-inline);
1702
1702
  cursor: pointer;
1703
1703
  box-shadow: none;
1704
- min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
1705
1704
  border: none;
1706
- border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1707
1705
  border-start-end-radius: 0;
1708
1706
  border-end-end-radius: 0;
1707
+ min-block-size: 100%;
1709
1708
  margin-inline-end: var(--contol-spacing-near, .5em);
1710
1709
  inset-block-start: 0;
1711
1710
  inset-inline-start: 0;
1712
1711
  transform: none;
1713
1712
  }
1714
1713
 
1715
- :where(input[type="file"]:not([class]))::file-selector-button {
1714
+ :where(input[type="file"])::file-selector-button {
1716
1715
  background-color: var(--_button-background);
1717
1716
  color: var(--_button-color);
1718
1717
  padding-inline: var(--_button-padding-inline);
1719
1718
  cursor: pointer;
1720
1719
  box-shadow: none;
1721
- min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
1722
1720
  border: none;
1723
- border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1724
1721
  border-start-end-radius: 0;
1725
1722
  border-end-end-radius: 0;
1723
+ min-block-size: 100%;
1726
1724
  margin-inline-end: var(--contol-spacing-near, .5em);
1727
1725
  inset-block-start: 0;
1728
1726
  inset-inline-start: 0;
package/out/complete_configless.css CHANGED
@@ -1308,7 +1308,7 @@
1308
1308
  }
1309
1309
 
1310
1310
  @layer components.buttons {
1311
- :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
1311
+ :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"], .nc-button) {
1312
1312
  --_button-background: var(--button-background, var(--surface-hover));
1313
1313
  --_button-color: var(--button-color, var(--text-hover));
1314
1314
  --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -1477,44 +1477,42 @@
1477
1477
  margin-inline: calc(-1 * var(--_button-padding-inline));
1478
1478
  }
1479
1479
 
1480
- :where(input[type="file"]:not([class])) {
1480
+ :where(input[type="file"]) {
1481
1481
  color: var(--_input-color);
1482
1482
  background-color: var(--_input-background);
1483
1483
  border: var(--_input-border);
1484
1484
  min-block-size: var(--control-height-base);
1485
1485
  border-radius: var(--_input-border-radius);
1486
- padding-inline-start: 0;
1487
1486
  padding-inline-end: var(--contol-spacing-near, .5em);
1487
+ padding-inline-start: 0 !important;
1488
1488
  }
1489
1489
 
1490
- :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
1490
+ :where(input[type="file"])::-webkit-file-upload-button {
1491
1491
  background-color: var(--_button-background);
1492
1492
  color: var(--_button-color);
1493
1493
  padding-inline: var(--_button-padding-inline);
1494
1494
  cursor: pointer;
1495
1495
  box-shadow: none;
1496
- min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
1497
1496
  border: none;
1498
- border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1499
1497
  border-start-end-radius: 0;
1500
1498
  border-end-end-radius: 0;
1499
+ min-block-size: 100%;
1501
1500
  margin-inline-end: var(--contol-spacing-near, .5em);
1502
1501
  inset-block-start: 0;
1503
1502
  inset-inline-start: 0;
1504
1503
  transform: none;
1505
1504
  }
1506
1505
 
1507
- :where(input[type="file"]:not([class]))::file-selector-button {
1506
+ :where(input[type="file"])::file-selector-button {
1508
1507
  background-color: var(--_button-background);
1509
1508
  color: var(--_button-color);
1510
1509
  padding-inline: var(--_button-padding-inline);
1511
1510
  cursor: pointer;
1512
1511
  box-shadow: none;
1513
- min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
1514
1512
  border: none;
1515
- border-inline-end: var(--border-width-thin) solid var(--color-border-base);
1516
1513
  border-start-end-radius: 0;
1517
1514
  border-end-end-radius: 0;
1515
+ min-block-size: 100%;
1518
1516
  margin-inline-end: var(--contol-spacing-near, .5em);
1519
1517
  inset-block-start: 0;
1520
1518
  inset-inline-start: 0;
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": "2.0.5",
15
+ "version": "2.0.6",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
@@ -68,8 +68,8 @@
68
68
  "./fonts": "./src/assets/fonts/fonts.css"
69
69
  },
70
70
  "devDependencies": {
71
- "browserslist": "^4.24.2",
72
- "lightningcss": "^1.28.1"
71
+ "browserslist": "^4.26.3",
72
+ "lightningcss": "^1.30.2"
73
73
  },
74
74
  "scripts": {
75
75
  "lib:transform": "node transform.js",
package/src/assets/icons/ArrowRightSolid.svelte CHANGED
@@ -1 +1,3 @@
1
- <svg class="nc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"/></svg>
1
+ <svg class="nc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
2
+ <path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z" />
3
+ </svg>
package/src/assets/icons/arrow-right-solid.svg CHANGED
@@ -1 +1,5 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
2
+ <path
3
+ d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"
4
+ />
5
+ </svg>
package/src/assets/icons/favicon.svg CHANGED
@@ -1,8 +1,17 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1234 1234"><path fill-rule="evenodd" d="M717 217c0 112.561-37.194 216.434-99.963 300H1017v200.164C855.944 722.438 727 854.661 727 1017H517c0-112.561 37.194-216.434 99.963-300H217V516.836c3.32.109 6.654.164 10 .164 165.685 0 300-134.315 300-300h190Z" clip-rule="evenodd"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1234 1234">
2
+ <path
3
+ fill-rule="evenodd"
4
+ d="M717 217c0 112.561-37.194 216.434-99.963 300H1017v200.164C855.944 722.438 727 854.661 727 1017H517c0-112.561 37.194-216.434 99.963-300H217V516.836c3.32.109 6.654.164 10 .164 165.685 0 300-134.315 300-300h190Z"
5
+ clip-rule="evenodd"
6
+ />
2
7
  <style>
3
- path { fill: #000; }
4
- @media (prefers-color-scheme: dark) {
5
- path { fill: #FFF; }
8
+ path {
9
+ fill: #000;
10
+ }
11
+ @media (prefers-color-scheme: dark) {
12
+ path {
13
+ fill: #fff;
6
14
  }
15
+ }
7
16
  </style>
8
17
  </svg>
package/src/assets/logos/nordcode-logo-icon.svg CHANGED
@@ -1,3 +1,8 @@
1
1
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 0C22.5 5.06523 20.8262 9.73953 18.0016 13.5H36V22.5V22.5074C28.7525 22.7447 22.95 28.6947 22.95 36H13.5C13.5 30.9348 15.1738 26.2605 17.9984 22.5H0V13.5V13.4926C0.149399 13.4975 0.299411 13.5 0.45 13.5C7.90584 13.5 13.95 7.45584 13.95 0H22.5Z" fill="black"/>
2
+ <path
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M22.5 0C22.5 5.06523 20.8262 9.73953 18.0016 13.5H36V22.5V22.5074C28.7525 22.7447 22.95 28.6947 22.95 36H13.5C13.5 30.9348 15.1738 26.2605 17.9984 22.5H0V13.5V13.4926C0.149399 13.4975 0.299411 13.5 0.45 13.5C7.90584 13.5 13.95 7.45584 13.95 0H22.5Z"
6
+ fill="black"
7
+ />
3
8
  </svg>
package/src/assets/logos/nordcode-logo.svg CHANGED
@@ -1,17 +1,50 @@
1
1
  <svg width="240" height="37" viewBox="0 0 240 37" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M56.9893 30.0889V9.36099H60.834L61.2101 12.4535H61.419C61.9762 11.4505 62.8399 10.6008 64.01 9.90427C65.1801 9.20776 66.5313 8.85951 68.0637 8.85951C70.5989 8.85951 72.5073 9.62567 73.7889 11.158C75.0705 12.6903 75.7112 14.9469 75.7112 17.928V30.0889H71.2815V18.4712C71.2815 16.7439 70.9193 15.4066 70.1949 14.4594C69.4706 13.5122 68.3283 13.0385 66.7682 13.0385C65.2358 13.0385 63.9543 13.5539 62.9235 14.5848C61.9205 15.6156 61.419 17.1061 61.419 19.0563V30.0889H56.9893Z" fill="black"/>
3
- <path d="M89.6528 30.5904C87.6748 30.5904 85.9057 30.1446 84.3455 29.2531C82.7853 28.3616 81.5595 27.1079 80.668 25.492C79.7764 23.8482 79.3307 21.9259 79.3307 19.725C79.3307 17.524 79.7764 15.6156 80.668 13.9997C81.5595 12.356 82.7853 11.0883 84.3455 10.1968C85.9057 9.30528 87.6887 8.85951 89.6946 8.85951C91.7006 8.85951 93.4697 9.30528 95.002 10.1968C96.5621 11.0883 97.7741 12.356 98.6377 13.9997C99.5293 15.6156 99.975 17.524 99.975 19.725C99.975 21.9259 99.5293 23.8482 98.6377 25.492C97.7462 27.1079 96.5204 28.3616 94.9602 29.2531C93.4279 30.1446 91.6588 30.5904 89.6528 30.5904ZM89.6528 26.3696C90.7115 26.3696 91.6866 26.1328 92.5781 25.6592C93.4697 25.1855 94.1801 24.4612 94.7095 23.4861C95.2667 22.4831 95.5453 21.2294 95.5453 19.725C95.5453 18.1926 95.2667 16.9389 94.7095 15.9638C94.1801 14.9887 93.4697 14.2644 92.5781 13.7908C91.7145 13.3171 90.7533 13.0803 89.6946 13.0803C88.6359 13.0803 87.6608 13.3171 86.7693 13.7908C85.8778 14.2644 85.1534 14.9887 84.5962 15.9638C84.0669 16.9389 83.8022 18.1926 83.8022 19.725C83.8022 22.0095 84.3733 23.695 85.5156 24.7816C86.6857 25.8402 88.0648 26.3696 89.6528 26.3696Z" fill="black"/>
4
- <path d="M103.72 30.0889V26.2442H108.776V14.5848C108.776 13.6654 108.331 13.2057 107.439 13.2057H104.138V9.36099H109.111C110.253 9.36099 111.186 9.69532 111.911 10.364C112.635 11.0047 112.997 11.9102 112.997 13.0803V13.5818H113.206C113.513 12.0216 114.167 10.8515 115.17 10.0714C116.201 9.26348 117.692 8.85951 119.642 8.85951H122.86V13.54H118.346C116.703 13.54 115.435 14.1111 114.543 15.2534C113.652 16.3957 113.206 17.7608 113.206 19.3488V26.2442H119.642V30.0889H103.72Z" fill="black"/>
5
- <path d="M135.297 30.5904C133.569 30.5904 132.023 30.1864 130.658 29.3785C129.293 28.5427 128.206 27.3168 127.398 25.7009C126.618 24.0851 126.228 22.0931 126.228 19.725C126.228 17.3568 126.632 15.3648 127.44 13.749C128.248 12.1331 129.335 10.9212 130.7 10.1132C132.093 9.27741 133.639 8.85951 135.339 8.85951C136.927 8.85951 138.236 9.16597 139.267 9.7789C140.298 10.364 141.064 11.1162 141.565 12.0356V0H145.995V30.0889H142.192L141.816 27.0382H141.565C141.008 28.1248 140.214 28.9884 139.183 29.6292C138.18 30.27 136.885 30.5904 135.297 30.5904ZM136.216 26.3696C137.804 26.3696 139.114 25.8124 140.144 24.698C141.203 23.5836 141.733 21.9259 141.733 19.725C141.733 17.4961 141.203 15.8385 140.144 14.7519C139.114 13.6375 137.804 13.0803 136.216 13.0803C134.628 13.0803 133.305 13.6375 132.246 14.7519C131.215 15.8663 130.7 17.5379 130.7 19.7667C130.7 21.9677 131.215 23.6254 132.246 24.7398C133.305 25.8263 134.628 26.3696 136.216 26.3696Z" fill="black"/>
6
- <path d="M160.104 30.5904C158.182 30.5904 156.454 30.1446 154.922 29.2531C153.417 28.3616 152.233 27.1079 151.37 25.492C150.506 23.8482 150.074 21.9259 150.074 19.725C150.074 17.524 150.506 15.6156 151.37 13.9997C152.261 12.3838 153.459 11.1301 154.964 10.2386C156.468 9.31921 158.182 8.85951 160.104 8.85951C162.751 8.85951 164.882 9.52816 166.498 10.8654C168.142 12.1749 169.186 13.9858 169.632 16.2982H164.993C164.715 15.2952 164.144 14.5012 163.28 13.9161C162.444 13.3311 161.371 13.0385 160.062 13.0385C159.115 13.0385 158.209 13.2893 157.346 13.7908C156.51 14.2922 155.827 15.0445 155.298 16.0474C154.797 17.0225 154.546 18.2484 154.546 19.725C154.546 21.1737 154.797 22.3995 155.298 23.4025C155.827 24.4055 156.51 25.1716 157.346 25.7009C158.209 26.2024 159.115 26.4532 160.062 26.4532C161.399 26.4532 162.472 26.1606 163.28 25.5756C164.088 24.9905 164.659 24.1826 164.993 23.1517H169.632C169.075 25.4363 167.988 27.2472 166.372 28.5845C164.757 29.9218 162.667 30.5904 160.104 30.5904Z" fill="black"/>
7
- <path d="M183.197 30.5904C181.219 30.5904 179.45 30.1446 177.89 29.2531C176.33 28.3616 175.104 27.1079 174.213 25.492C173.321 23.8482 172.875 21.9259 172.875 19.725C172.875 17.524 173.321 15.6156 174.213 13.9997C175.104 12.356 176.33 11.0883 177.89 10.1968C179.45 9.30528 181.233 8.85951 183.239 8.85951C185.245 8.85951 187.014 9.30528 188.547 10.1968C190.107 11.0883 191.319 12.356 192.182 13.9997C193.074 15.6156 193.52 17.524 193.52 19.725C193.52 21.9259 193.074 23.8482 192.182 25.492C191.291 27.1079 190.065 28.3616 188.505 29.2531C186.973 30.1446 185.203 30.5904 183.197 30.5904ZM183.197 26.3696C184.256 26.3696 185.231 26.1328 186.123 25.6592C187.014 25.1855 187.725 24.4612 188.254 23.4861C188.811 22.4831 189.09 21.2294 189.09 19.725C189.09 18.1926 188.811 16.9389 188.254 15.9638C187.725 14.9887 187.014 14.2644 186.123 13.7908C185.259 13.3171 184.298 13.0803 183.239 13.0803C182.181 13.0803 181.205 13.3171 180.314 13.7908C179.422 14.2644 178.698 14.9887 178.141 15.9638C177.612 16.9389 177.347 18.1926 177.347 19.725C177.347 22.0095 177.918 23.695 179.06 24.7816C180.23 25.8402 181.609 26.3696 183.197 26.3696Z" fill="black"/>
8
- <path d="M205.455 30.5904C203.728 30.5904 202.182 30.1864 200.817 29.3785C199.451 28.5427 198.365 27.3168 197.557 25.7009C196.777 24.0851 196.387 22.0931 196.387 19.725C196.387 17.3568 196.791 15.3648 197.599 13.749C198.407 12.1331 199.493 10.9212 200.858 10.1132C202.251 9.27741 203.798 8.85951 205.497 8.85951C207.085 8.85951 208.395 9.16597 209.425 9.7789C210.456 10.364 211.222 11.1162 211.724 12.0356V0H216.154V30.0889H212.351L211.975 27.0382H211.724C211.167 28.1248 210.373 28.9884 209.342 29.6292C208.339 30.27 207.043 30.5904 205.455 30.5904ZM206.375 26.3696C207.963 26.3696 209.272 25.8124 210.303 24.698C211.362 23.5836 211.891 21.9259 211.891 19.725C211.891 17.4961 211.362 15.8385 210.303 14.7519C209.272 13.6375 207.963 13.0803 206.375 13.0803C204.787 13.0803 203.463 13.6375 202.405 14.7519C201.374 15.8663 200.858 17.5379 200.858 19.7667C200.858 21.9677 201.374 23.6254 202.405 24.7398C203.463 25.8263 204.787 26.3696 206.375 26.3696Z" fill="black"/>
9
- <path d="M230.221 30.5904C228.215 30.5904 226.446 30.1446 224.913 29.2531C223.381 28.3337 222.183 27.0661 221.319 25.4502C220.456 23.8343 220.024 21.9538 220.024 19.8085C220.024 17.6354 220.442 15.727 221.277 14.0833C222.141 12.4395 223.339 11.158 224.871 10.2386C226.432 9.31921 228.229 8.85951 230.262 8.85951C232.268 8.85951 233.996 9.31921 235.444 10.2386C236.893 11.1301 238.007 12.3281 238.788 13.8325C239.595 15.337 239.999 16.9947 239.999 18.8056C239.999 19.0842 239.999 19.3906 239.999 19.725C239.999 20.0314 239.986 20.3797 239.958 20.7697H224.37C224.509 22.6921 225.136 24.1547 226.25 25.1577C227.365 26.1328 228.674 26.6203 230.179 26.6203C231.488 26.6203 232.519 26.3557 233.271 25.8263C234.051 25.2691 234.622 24.5169 234.985 23.5696H239.456C238.955 25.5477 237.91 27.2193 236.322 28.5845C234.734 29.9218 232.7 30.5904 230.221 30.5904ZM230.221 12.7042C228.855 12.7042 227.643 13.1221 226.585 13.9579C225.526 14.7659 224.844 15.9081 224.537 17.3847H235.57C235.458 15.9917 234.915 14.8634 233.94 13.9997C232.965 13.136 231.725 12.7042 230.221 12.7042Z" fill="black"/>
10
- <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3876 0.835938C22.3876 5.87586 20.7222 10.5268 17.9117 14.2685H35.8201V23.2235V23.2308C28.6088 23.467 22.8353 29.3873 22.8353 36.6561H13.4325C13.4325 31.6162 15.0979 26.9652 17.9084 23.2235H0V14.2685V14.2612C0.148652 14.266 0.297915 14.2685 0.447752 14.2685C7.86634 14.2685 13.8803 8.25453 13.8803 0.835938H22.3876Z" fill="black"/>
11
- <style>
12
- path { fill: #000; }
2
+ <path
3
+ d="M56.9893 30.0889V9.36099H60.834L61.2101 12.4535H61.419C61.9762 11.4505 62.8399 10.6008 64.01 9.90427C65.1801 9.20776 66.5313 8.85951 68.0637 8.85951C70.5989 8.85951 72.5073 9.62567 73.7889 11.158C75.0705 12.6903 75.7112 14.9469 75.7112 17.928V30.0889H71.2815V18.4712C71.2815 16.7439 70.9193 15.4066 70.1949 14.4594C69.4706 13.5122 68.3283 13.0385 66.7682 13.0385C65.2358 13.0385 63.9543 13.5539 62.9235 14.5848C61.9205 15.6156 61.419 17.1061 61.419 19.0563V30.0889H56.9893Z"
4
+ fill="black"
5
+ />
6
+ <path
7
+ d="M89.6528 30.5904C87.6748 30.5904 85.9057 30.1446 84.3455 29.2531C82.7853 28.3616 81.5595 27.1079 80.668 25.492C79.7764 23.8482 79.3307 21.9259 79.3307 19.725C79.3307 17.524 79.7764 15.6156 80.668 13.9997C81.5595 12.356 82.7853 11.0883 84.3455 10.1968C85.9057 9.30528 87.6887 8.85951 89.6946 8.85951C91.7006 8.85951 93.4697 9.30528 95.002 10.1968C96.5621 11.0883 97.7741 12.356 98.6377 13.9997C99.5293 15.6156 99.975 17.524 99.975 19.725C99.975 21.9259 99.5293 23.8482 98.6377 25.492C97.7462 27.1079 96.5204 28.3616 94.9602 29.2531C93.4279 30.1446 91.6588 30.5904 89.6528 30.5904ZM89.6528 26.3696C90.7115 26.3696 91.6866 26.1328 92.5781 25.6592C93.4697 25.1855 94.1801 24.4612 94.7095 23.4861C95.2667 22.4831 95.5453 21.2294 95.5453 19.725C95.5453 18.1926 95.2667 16.9389 94.7095 15.9638C94.1801 14.9887 93.4697 14.2644 92.5781 13.7908C91.7145 13.3171 90.7533 13.0803 89.6946 13.0803C88.6359 13.0803 87.6608 13.3171 86.7693 13.7908C85.8778 14.2644 85.1534 14.9887 84.5962 15.9638C84.0669 16.9389 83.8022 18.1926 83.8022 19.725C83.8022 22.0095 84.3733 23.695 85.5156 24.7816C86.6857 25.8402 88.0648 26.3696 89.6528 26.3696Z"
8
+ fill="black"
9
+ />
10
+ <path
11
+ d="M103.72 30.0889V26.2442H108.776V14.5848C108.776 13.6654 108.331 13.2057 107.439 13.2057H104.138V9.36099H109.111C110.253 9.36099 111.186 9.69532 111.911 10.364C112.635 11.0047 112.997 11.9102 112.997 13.0803V13.5818H113.206C113.513 12.0216 114.167 10.8515 115.17 10.0714C116.201 9.26348 117.692 8.85951 119.642 8.85951H122.86V13.54H118.346C116.703 13.54 115.435 14.1111 114.543 15.2534C113.652 16.3957 113.206 17.7608 113.206 19.3488V26.2442H119.642V30.0889H103.72Z"
12
+ fill="black"
13
+ />
14
+ <path
15
+ d="M135.297 30.5904C133.569 30.5904 132.023 30.1864 130.658 29.3785C129.293 28.5427 128.206 27.3168 127.398 25.7009C126.618 24.0851 126.228 22.0931 126.228 19.725C126.228 17.3568 126.632 15.3648 127.44 13.749C128.248 12.1331 129.335 10.9212 130.7 10.1132C132.093 9.27741 133.639 8.85951 135.339 8.85951C136.927 8.85951 138.236 9.16597 139.267 9.7789C140.298 10.364 141.064 11.1162 141.565 12.0356V0H145.995V30.0889H142.192L141.816 27.0382H141.565C141.008 28.1248 140.214 28.9884 139.183 29.6292C138.18 30.27 136.885 30.5904 135.297 30.5904ZM136.216 26.3696C137.804 26.3696 139.114 25.8124 140.144 24.698C141.203 23.5836 141.733 21.9259 141.733 19.725C141.733 17.4961 141.203 15.8385 140.144 14.7519C139.114 13.6375 137.804 13.0803 136.216 13.0803C134.628 13.0803 133.305 13.6375 132.246 14.7519C131.215 15.8663 130.7 17.5379 130.7 19.7667C130.7 21.9677 131.215 23.6254 132.246 24.7398C133.305 25.8263 134.628 26.3696 136.216 26.3696Z"
16
+ fill="black"
17
+ />
18
+ <path
19
+ d="M160.104 30.5904C158.182 30.5904 156.454 30.1446 154.922 29.2531C153.417 28.3616 152.233 27.1079 151.37 25.492C150.506 23.8482 150.074 21.9259 150.074 19.725C150.074 17.524 150.506 15.6156 151.37 13.9997C152.261 12.3838 153.459 11.1301 154.964 10.2386C156.468 9.31921 158.182 8.85951 160.104 8.85951C162.751 8.85951 164.882 9.52816 166.498 10.8654C168.142 12.1749 169.186 13.9858 169.632 16.2982H164.993C164.715 15.2952 164.144 14.5012 163.28 13.9161C162.444 13.3311 161.371 13.0385 160.062 13.0385C159.115 13.0385 158.209 13.2893 157.346 13.7908C156.51 14.2922 155.827 15.0445 155.298 16.0474C154.797 17.0225 154.546 18.2484 154.546 19.725C154.546 21.1737 154.797 22.3995 155.298 23.4025C155.827 24.4055 156.51 25.1716 157.346 25.7009C158.209 26.2024 159.115 26.4532 160.062 26.4532C161.399 26.4532 162.472 26.1606 163.28 25.5756C164.088 24.9905 164.659 24.1826 164.993 23.1517H169.632C169.075 25.4363 167.988 27.2472 166.372 28.5845C164.757 29.9218 162.667 30.5904 160.104 30.5904Z"
20
+ fill="black"
21
+ />
22
+ <path
23
+ d="M183.197 30.5904C181.219 30.5904 179.45 30.1446 177.89 29.2531C176.33 28.3616 175.104 27.1079 174.213 25.492C173.321 23.8482 172.875 21.9259 172.875 19.725C172.875 17.524 173.321 15.6156 174.213 13.9997C175.104 12.356 176.33 11.0883 177.89 10.1968C179.45 9.30528 181.233 8.85951 183.239 8.85951C185.245 8.85951 187.014 9.30528 188.547 10.1968C190.107 11.0883 191.319 12.356 192.182 13.9997C193.074 15.6156 193.52 17.524 193.52 19.725C193.52 21.9259 193.074 23.8482 192.182 25.492C191.291 27.1079 190.065 28.3616 188.505 29.2531C186.973 30.1446 185.203 30.5904 183.197 30.5904ZM183.197 26.3696C184.256 26.3696 185.231 26.1328 186.123 25.6592C187.014 25.1855 187.725 24.4612 188.254 23.4861C188.811 22.4831 189.09 21.2294 189.09 19.725C189.09 18.1926 188.811 16.9389 188.254 15.9638C187.725 14.9887 187.014 14.2644 186.123 13.7908C185.259 13.3171 184.298 13.0803 183.239 13.0803C182.181 13.0803 181.205 13.3171 180.314 13.7908C179.422 14.2644 178.698 14.9887 178.141 15.9638C177.612 16.9389 177.347 18.1926 177.347 19.725C177.347 22.0095 177.918 23.695 179.06 24.7816C180.23 25.8402 181.609 26.3696 183.197 26.3696Z"
24
+ fill="black"
25
+ />
26
+ <path
27
+ d="M205.455 30.5904C203.728 30.5904 202.182 30.1864 200.817 29.3785C199.451 28.5427 198.365 27.3168 197.557 25.7009C196.777 24.0851 196.387 22.0931 196.387 19.725C196.387 17.3568 196.791 15.3648 197.599 13.749C198.407 12.1331 199.493 10.9212 200.858 10.1132C202.251 9.27741 203.798 8.85951 205.497 8.85951C207.085 8.85951 208.395 9.16597 209.425 9.7789C210.456 10.364 211.222 11.1162 211.724 12.0356V0H216.154V30.0889H212.351L211.975 27.0382H211.724C211.167 28.1248 210.373 28.9884 209.342 29.6292C208.339 30.27 207.043 30.5904 205.455 30.5904ZM206.375 26.3696C207.963 26.3696 209.272 25.8124 210.303 24.698C211.362 23.5836 211.891 21.9259 211.891 19.725C211.891 17.4961 211.362 15.8385 210.303 14.7519C209.272 13.6375 207.963 13.0803 206.375 13.0803C204.787 13.0803 203.463 13.6375 202.405 14.7519C201.374 15.8663 200.858 17.5379 200.858 19.7667C200.858 21.9677 201.374 23.6254 202.405 24.7398C203.463 25.8263 204.787 26.3696 206.375 26.3696Z"
28
+ fill="black"
29
+ />
30
+ <path
31
+ d="M230.221 30.5904C228.215 30.5904 226.446 30.1446 224.913 29.2531C223.381 28.3337 222.183 27.0661 221.319 25.4502C220.456 23.8343 220.024 21.9538 220.024 19.8085C220.024 17.6354 220.442 15.727 221.277 14.0833C222.141 12.4395 223.339 11.158 224.871 10.2386C226.432 9.31921 228.229 8.85951 230.262 8.85951C232.268 8.85951 233.996 9.31921 235.444 10.2386C236.893 11.1301 238.007 12.3281 238.788 13.8325C239.595 15.337 239.999 16.9947 239.999 18.8056C239.999 19.0842 239.999 19.3906 239.999 19.725C239.999 20.0314 239.986 20.3797 239.958 20.7697H224.37C224.509 22.6921 225.136 24.1547 226.25 25.1577C227.365 26.1328 228.674 26.6203 230.179 26.6203C231.488 26.6203 232.519 26.3557 233.271 25.8263C234.051 25.2691 234.622 24.5169 234.985 23.5696H239.456C238.955 25.5477 237.91 27.2193 236.322 28.5845C234.734 29.9218 232.7 30.5904 230.221 30.5904ZM230.221 12.7042C228.855 12.7042 227.643 13.1221 226.585 13.9579C225.526 14.7659 224.844 15.9081 224.537 17.3847H235.57C235.458 15.9917 234.915 14.8634 233.94 13.9997C232.965 13.136 231.725 12.7042 230.221 12.7042Z"
32
+ fill="black"
33
+ />
34
+ <path
35
+ fill-rule="evenodd"
36
+ clip-rule="evenodd"
37
+ d="M22.3876 0.835938C22.3876 5.87586 20.7222 10.5268 17.9117 14.2685H35.8201V23.2235V23.2308C28.6088 23.467 22.8353 29.3873 22.8353 36.6561H13.4325C13.4325 31.6162 15.0979 26.9652 17.9084 23.2235H0V14.2685V14.2612C0.148652 14.266 0.297915 14.2685 0.447752 14.2685C7.86634 14.2685 13.8803 8.25453 13.8803 0.835938H22.3876Z"
38
+ fill="black"
39
+ />
40
+ <style>
41
+ path {
42
+ fill: #000;
43
+ }
13
44
  @media (prefers-color-scheme: dark) {
14
- path { fill: #FFF; }
45
+ path {
46
+ fill: #fff;
47
+ }
15
48
  }
16
- </style>
49
+ </style>
17
50
  </svg>
package/src/modules/dialogs/svelte/dialog.svelte CHANGED
@@ -7,21 +7,20 @@ interface DialogProps {
7
7
  let { heading, id }: DialogProps = $props();
8
8
  </script>
9
9
 
10
-
11
10
  <dialog
12
- class="nc-dialog"
13
- {id}
14
- data-level="1"
15
- inert
11
+ class="nc-dialog"
12
+ {id}
13
+ data-level="1"
14
+ inert
16
15
  >
17
- <form method="dialog" class="dialog-container">
18
- <div class="dialog-header">
19
- <h2 class="dialog-title">{heading}</h2>
20
- <button data-closes-dialog>×</button>
21
- </div>
22
- <div class="dialog-content">
23
- <slot />
24
- <button data-opens-dialog="dialog-2">Show me the next dialog</button>
25
- </div>
26
- </form>
16
+ <form method="dialog" class="dialog-container">
17
+ <div class="dialog-header">
18
+ <h2 class="dialog-title">{heading}</h2>
19
+ <button data-closes-dialog>×</button>
20
+ </div>
21
+ <div class="dialog-content">
22
+ <slot />
23
+ <button data-opens-dialog="dialog-2">Show me the next dialog</button>
24
+ </div>
25
+ </form>
27
26
  </dialog>