@nordcode/ui 1.1.6 → 1.1.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 (67) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/out/bundle.css +150 -79
  3. package/out/bundle_configless.css +150 -79
  4. package/out/colors.css +53 -66
  5. package/out/complete.css +156 -85
  6. package/out/complete_configless.css +156 -85
  7. package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
  8. package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
  9. package/out/src/assets/fonts/fonts.css +7 -0
  10. package/out/src/assets/icons/ArrowRightSolid.svelte +1 -0
  11. package/out/src/assets/icons/arrow-right-solid.svg +1 -0
  12. package/out/src/assets/icons/favicon.png +0 -0
  13. package/out/src/assets/icons/favicon.svg +8 -0
  14. package/out/src/assets/logos/nordcode-logo-icon.svg +3 -0
  15. package/out/src/assets/logos/nordcode-logo.svg +17 -0
  16. package/out/src/modules/copyButtons/ts/copyButtons.ts +9 -0
  17. package/out/src/modules/dialogs/svelte/dialog.svelte +27 -0
  18. package/out/src/modules/dialogs/ts/LICENCE +171 -0
  19. package/out/src/modules/dialogs/ts/dialogs.ts +111 -0
  20. package/out/src/modules/notifications/js/notifications.js +294 -0
  21. package/out/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
  22. package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
  23. package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
  24. package/out/src/styles/bundle.css +7 -0
  25. package/out/src/styles/bundle_configless.css +5 -0
  26. package/out/src/styles/complete.css +5 -0
  27. package/out/src/styles/complete_configless.css +5 -0
  28. package/out/src/styles/components/alerts.css +20 -0
  29. package/out/src/styles/components/badges.css +14 -0
  30. package/out/src/styles/components/breadcrumbs.css +37 -0
  31. package/out/src/styles/components/bundle.css +13 -0
  32. package/out/src/styles/components/buttons.css +260 -0
  33. package/out/src/styles/components/card.css +55 -0
  34. package/out/src/styles/components/dialogs.css +138 -0
  35. package/out/src/styles/components/forms.css +41 -0
  36. package/out/src/styles/components/gallery.css +66 -0
  37. package/out/src/styles/components/icons.css +60 -0
  38. package/out/src/styles/components/inputs/base.css +249 -0
  39. package/out/src/styles/components/inputs/bundle.css +5 -0
  40. package/out/src/styles/components/inputs/fields.css +76 -0
  41. package/out/src/styles/components/inputs/segmented.css +114 -0
  42. package/out/src/styles/components/inputs/switch.css +42 -0
  43. package/out/src/styles/components/inputs/tag-select.css +41 -0
  44. package/out/src/styles/components/lists.css +40 -0
  45. package/out/src/styles/components/notifications.css +135 -0
  46. package/out/src/styles/components/tables.css +7 -0
  47. package/out/src/styles/config/bundle.css +2 -0
  48. package/out/src/styles/config/config.css +700 -0
  49. package/out/src/styles/config/extras.css +12 -0
  50. package/out/src/styles/exceptions/bundle.css +3 -0
  51. package/out/src/styles/exceptions/misc.css +21 -0
  52. package/out/src/styles/exceptions/spacings.css +15 -0
  53. package/out/src/styles/exceptions/typography.css +57 -0
  54. package/out/src/styles/theme/colors.css +165 -0
  55. package/out/src/styles/theme/colors_processed.css +87 -0
  56. package/out/src/styles/utils/base.css +415 -0
  57. package/out/src/styles/utils/bundle.css +6 -0
  58. package/out/src/styles/utils/easings.css +364 -0
  59. package/out/src/styles/utils/layouts.css +281 -0
  60. package/out/src/styles/utils/media.css +55 -0
  61. package/out/src/styles/utils/reset.css +145 -0
  62. package/out/src/styles/utils/theme.css +125 -0
  63. package/package.json +1 -1
  64. package/src/styles/exceptions/typography.css +15 -0
  65. package/src/styles/utils/base.css +101 -6
  66. package/src/styles/utils/reset.css +4 -6
  67. package/transform.js +11 -23
package/out/complete.css CHANGED
@@ -221,84 +221,71 @@
221
221
 
222
222
  @layer theme {
223
223
  :where(html) {
224
- --lightningcss-light: initial;
225
- --lightningcss-dark: ;
226
224
  color-scheme: light dark;
227
225
  }
228
226
 
229
- @media (prefers-color-scheme: dark) {
230
- :where(html) {
231
- --lightningcss-light: ;
232
- --lightningcss-dark: initial;
233
- }
234
- }
235
-
236
227
  :where([data-theme="light"]) {
237
- --lightningcss-light: initial;
238
- --lightningcss-dark: ;
239
228
  color-scheme: light;
240
229
  }
241
230
 
242
231
  :where([data-theme="dark"]) {
243
- --lightningcss-light: ;
244
- --lightningcss-dark: initial;
245
232
  color-scheme: dark;
246
233
  }
247
234
 
248
235
  :where(:root) {
249
- --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
250
- --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
251
- --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
252
- --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
253
- --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
254
- --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
255
- --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
256
- --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
257
- --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
258
- --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
259
- --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
260
- --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
261
- --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
262
- --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
263
- --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
264
- --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
265
- --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
266
- --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
267
- --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
268
- --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
269
- --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
270
- --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
271
- --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
272
- --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
273
- --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
274
- --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
275
- --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
276
- --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
277
- --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
278
- --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
279
- --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
280
- --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
281
- --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
282
- --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
283
- --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
284
- --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
285
- --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
286
- --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
287
- --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
288
- --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
289
- --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
290
- --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
291
- --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
292
- --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
293
- --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
294
- --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
295
- --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
296
- --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
297
- --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
298
- --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
299
- --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
300
- --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
301
- --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
236
+ --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
237
+ --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
238
+ --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
239
+ --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
240
+ --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
241
+ --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
242
+ --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
243
+ --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
244
+ --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
245
+ --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
246
+ --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
247
+ --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
248
+ --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
249
+ --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
250
+ --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
251
+ --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
252
+ --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
253
+ --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
254
+ --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
255
+ --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
256
+ --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
257
+ --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
258
+ --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
259
+ --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
260
+ --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
261
+ --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
262
+ --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
263
+ --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
264
+ --color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
265
+ --color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
266
+ --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
267
+ --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
268
+ --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
269
+ --color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
270
+ --color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
271
+ --color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
272
+ --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
273
+ --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
274
+ --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
275
+ --color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
276
+ --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
277
+ --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
278
+ --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
279
+ --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
280
+ --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
281
+ --color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
282
+ --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
283
+ --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
284
+ --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
285
+ --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
286
+ --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
287
+ --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
288
+ --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
302
289
  }
303
290
  }
304
291
 
@@ -355,6 +342,10 @@
355
342
  }
356
343
 
357
344
  :where(body) {
345
+ -webkit-text-decoration-skip-ink: auto;
346
+ text-decoration-skip-ink: auto;
347
+ font-optical-sizing: auto;
348
+ font-kerning: normal;
358
349
  min-block-size: 100vh;
359
350
  }
360
351
 
@@ -367,8 +358,6 @@
367
358
  }
368
359
 
369
360
  :where(a:not([class])) {
370
- -webkit-text-decoration-skip-ink: auto;
371
- text-decoration-skip-ink: auto;
372
361
  color: currentColor;
373
362
  }
374
363
 
@@ -409,11 +398,6 @@
409
398
  letter-spacing: inherit;
410
399
  }
411
400
 
412
- :where(p) {
413
- text-wrap: pretty;
414
- max-inline-size: var(--measure-base);
415
- }
416
-
417
401
  :where(html):has(dialog:modal) {
418
402
  scrollbar-gutter: stable;
419
403
  overflow: hidden;
@@ -499,13 +483,13 @@
499
483
  :where(figcaption) {
500
484
  color: var(--color-surface-subtle);
501
485
  background-color: var(--color-text-base);
502
- padding: .3lh 1ch;
486
+ padding: .25lh 1ch;
503
487
  display: block;
504
488
  }
505
489
 
506
490
  :where(details) {
507
491
  --p-x-details: 2ch;
508
- --p-y-details: .8lh;
492
+ --p-y-details: .75lh;
509
493
  --b-r-details: var(--border-radius-medium);
510
494
  background-color: var(--color-surface-muted);
511
495
  border-radius: var(--b-r-details);
@@ -661,6 +645,9 @@
661
645
  :where(abbr) {
662
646
  -webkit-text-decoration-color: var(--color-brand-primary-base);
663
647
  text-decoration-color: var(--color-brand-primary-base);
648
+ font-variant-numeric: oldstyle-nums;
649
+ font-size: 110%;
650
+ font-variant-caps: all-small-caps;
664
651
  }
665
652
 
666
653
  :where([aria-disabled="true"], .disabled, :disabled) {
@@ -800,6 +787,10 @@
800
787
  background-color: var(--color-surface-muted);
801
788
  }
802
789
 
790
+ :where(td, math, time[datetime*=":"]) {
791
+ font-variant-numeric: tabular-nums lining-nums slashed-zero;
792
+ }
793
+
803
794
  :target {
804
795
  scroll-margin-block-start: 2ex;
805
796
  }
@@ -832,7 +823,72 @@
832
823
  }
833
824
 
834
825
  :where(li > :is(ul, ol)) {
835
- margin-block-start: .3lh;
826
+ margin-block-start: .25lh;
827
+ }
828
+
829
+ @supports (font-variant-position: sub) {
830
+ :where(sub) {
831
+ vertical-align: baseline;
832
+ font-size: 100%;
833
+ line-height: inherit;
834
+ font-variant-position: sub;
835
+ }
836
+ }
837
+
838
+ @supports (font-variant-position: super) {
839
+ :where(sup) {
840
+ vertical-align: baseline;
841
+ font-size: 100%;
842
+ line-height: inherit;
843
+ font-variant-position: super;
844
+ }
845
+ }
846
+
847
+ :lang(en) > * {
848
+ quotes: "“" "”" "‘" "’";
849
+ }
850
+
851
+ :lang(de) > * {
852
+ quotes: "„" "“" "‚" "‘";
853
+ }
854
+
855
+ :where() {
856
+ content: open-quote;
857
+ content: close-quote;
858
+ content: "“";
859
+ content: "”";
860
+ margin-inline-start: -.87ch;
861
+ }
862
+
863
+ :where(.quoted p) {
864
+ hanging-punctuation: first last;
865
+ }
866
+
867
+ @supports (hanging-punctuation: first last) {
868
+ :where() {
869
+ margin-inline-start: 0;
870
+ }
871
+ }
872
+
873
+ :where(.prose) {
874
+ -webkit-hyphens: auto;
875
+ hyphens: auto;
876
+ hyphenate-limit-chars: 7 4 3;
877
+ hyphenate-limit-lines: 2;
878
+ hyphenate-limit-zone: 8%;
879
+ hyphenate-limit-last: always;
880
+ text-wrap: pretty;
881
+ }
882
+
883
+ :where(.prose p) {
884
+ text-wrap: pretty;
885
+ font-variant-numeric: oldstyle-nums proportional-nums;
886
+ max-inline-size: var(--measure-base);
887
+ }
888
+
889
+ :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
890
+ -webkit-hyphens: manual;
891
+ hyphens: manual;
836
892
  }
837
893
  }
838
894
 
@@ -890,7 +946,7 @@
890
946
  }
891
947
 
892
948
  :where(.nc-flow) > * + * {
893
- margin-block-start: var(--flow-gap, .8lh);
949
+ margin-block-start: var(--flow-gap, 1lh);
894
950
  }
895
951
 
896
952
  :where(.nc-flow) > * {
@@ -899,11 +955,11 @@
899
955
 
900
956
  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
901
957
  max-inline-size: var(--flow-headline-meassure, 32ch);
902
- --flow-gap: 1.3lh;
958
+ --flow-gap: 1.5lh;
903
959
  }
904
960
 
905
961
  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
906
- --flow-gap: .3lh;
962
+ --flow-gap: .5lh;
907
963
  }
908
964
 
909
965
  :where(.nc-flow) > figure {
@@ -1301,6 +1357,21 @@
1301
1357
  text-transform: capitalize;
1302
1358
  }
1303
1359
 
1360
+ .centered {
1361
+ text-align: center;
1362
+ text-wrap: balance;
1363
+ }
1364
+
1365
+ .uppercase {
1366
+ text-transform: uppercase;
1367
+ --opentype-case: on;
1368
+ }
1369
+
1370
+ .smallcaps {
1371
+ font-variant-numeric: oldstyle-nums;
1372
+ font-variant-caps: all-small-caps;
1373
+ }
1374
+
1304
1375
  .strong {
1305
1376
  font-weight: var(--font-weight-strong);
1306
1377
  }
@@ -1980,7 +2051,7 @@
1980
2051
  }
1981
2052
 
1982
2053
  :where(.nc-icon)[data-size="inline"] {
1983
- --icon-size: .8lh;
2054
+ --icon-size: .75lh;
1984
2055
  }
1985
2056
 
1986
2057
  :where(.nc-icon)[data-size="button"] {
@@ -2014,7 +2085,7 @@
2014
2085
  color: var(--color-text-base);
2015
2086
  font-size: inherit;
2016
2087
  align-items: center;
2017
- gap: .15lh;
2088
+ gap: 0;
2018
2089
  display: inline-flex;
2019
2090
  }
2020
2091
 
@@ -2212,7 +2283,7 @@
2212
2283
  --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
2213
2284
  --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
2214
2285
  --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
2215
- --nc-legend-spacing: .3lh;
2286
+ --nc-legend-spacing: .25lh;
2216
2287
  }
2217
2288
 
2218
2289
  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2253,12 +2324,12 @@
2253
2324
  max-inline-size: var(--input-field-max-inline-size);
2254
2325
  grid-template-columns: minmax(0, 1fr);
2255
2326
  place-items: start;
2256
- gap: .3lh;
2327
+ gap: .25lh;
2257
2328
  display: grid;
2258
2329
  }
2259
2330
 
2260
2331
  :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
2261
- gap: .15lh;
2332
+ gap: 0;
2262
2333
  }
2263
2334
 
2264
2335
  :where(.nc-input-field) > .nc-cluster {
@@ -2326,7 +2397,7 @@
2326
2397
  --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
2327
2398
  --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
2328
2399
  --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
2329
- --nc-legend-spacing: .3lh;
2400
+ --nc-legend-spacing: .25lh;
2330
2401
  container: segmented-control / inline-size;
2331
2402
  }
2332
2403