@nordcode/ui 1.1.5 → 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.
- package/CHANGELOG.md +12 -0
- package/out/bundle.css +150 -79
- package/out/bundle_configless.css +150 -79
- package/out/colors.css +53 -66
- package/out/complete.css +156 -85
- package/out/complete_configless.css +156 -85
- package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
- package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
- package/out/src/assets/fonts/fonts.css +7 -0
- package/out/src/assets/icons/ArrowRightSolid.svelte +1 -0
- package/out/src/assets/icons/arrow-right-solid.svg +1 -0
- package/out/src/assets/icons/favicon.png +0 -0
- package/out/src/assets/icons/favicon.svg +8 -0
- package/out/src/assets/logos/nordcode-logo-icon.svg +3 -0
- package/out/src/assets/logos/nordcode-logo.svg +17 -0
- package/out/src/modules/copyButtons/ts/copyButtons.ts +9 -0
- package/out/src/modules/dialogs/svelte/dialog.svelte +27 -0
- package/out/src/modules/dialogs/ts/LICENCE +171 -0
- package/out/src/modules/dialogs/ts/dialogs.ts +111 -0
- package/out/src/modules/notifications/js/notifications.js +294 -0
- package/out/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
- package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
- package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
- package/out/src/styles/bundle.css +7 -0
- package/out/src/styles/bundle_configless.css +5 -0
- package/out/src/styles/complete.css +5 -0
- package/out/src/styles/complete_configless.css +5 -0
- package/out/src/styles/components/alerts.css +20 -0
- package/out/src/styles/components/badges.css +14 -0
- package/out/src/styles/components/breadcrumbs.css +37 -0
- package/out/src/styles/components/bundle.css +13 -0
- package/out/src/styles/components/buttons.css +260 -0
- package/out/src/styles/components/card.css +55 -0
- package/out/src/styles/components/dialogs.css +138 -0
- package/out/src/styles/components/forms.css +41 -0
- package/out/src/styles/components/gallery.css +66 -0
- package/out/src/styles/components/icons.css +60 -0
- package/out/src/styles/components/inputs/base.css +249 -0
- package/out/src/styles/components/inputs/bundle.css +5 -0
- package/out/src/styles/components/inputs/fields.css +76 -0
- package/out/src/styles/components/inputs/segmented.css +114 -0
- package/out/src/styles/components/inputs/switch.css +42 -0
- package/out/src/styles/components/inputs/tag-select.css +41 -0
- package/out/src/styles/components/lists.css +40 -0
- package/out/src/styles/components/notifications.css +135 -0
- package/out/src/styles/components/tables.css +7 -0
- package/out/src/styles/config/bundle.css +2 -0
- package/out/src/styles/config/config.css +700 -0
- package/out/src/styles/config/extras.css +12 -0
- package/out/src/styles/exceptions/bundle.css +3 -0
- package/out/src/styles/exceptions/misc.css +21 -0
- package/out/src/styles/exceptions/spacings.css +15 -0
- package/out/src/styles/exceptions/typography.css +57 -0
- package/out/src/styles/theme/colors.css +165 -0
- package/out/src/styles/theme/colors_processed.css +87 -0
- package/out/src/styles/utils/base.css +415 -0
- package/out/src/styles/utils/bundle.css +6 -0
- package/out/src/styles/utils/easings.css +364 -0
- package/out/src/styles/utils/layouts.css +281 -0
- package/out/src/styles/utils/media.css +55 -0
- package/out/src/styles/utils/reset.css +145 -0
- package/out/src/styles/utils/theme.css +125 -0
- package/package.json +1 -1
- package/src/styles/components/icons.css +2 -2
- package/src/styles/components/inputs/base.css +1 -1
- package/src/styles/components/inputs/fields.css +2 -2
- package/src/styles/components/inputs/segmented.css +1 -1
- package/src/styles/components/inputs/tag-select.css +1 -1
- package/src/styles/exceptions/typography.css +15 -0
- package/src/styles/utils/base.css +104 -9
- package/src/styles/utils/layouts.css +3 -3
- package/src/styles/utils/reset.css +4 -6
- package/transform.js +11 -23
|
@@ -2,84 +2,71 @@
|
|
|
2
2
|
|
|
3
3
|
@layer theme {
|
|
4
4
|
:where(html) {
|
|
5
|
-
--lightningcss-light: initial;
|
|
6
|
-
--lightningcss-dark: ;
|
|
7
5
|
color-scheme: light dark;
|
|
8
6
|
}
|
|
9
7
|
|
|
10
|
-
@media (prefers-color-scheme: dark) {
|
|
11
|
-
:where(html) {
|
|
12
|
-
--lightningcss-light: ;
|
|
13
|
-
--lightningcss-dark: initial;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
8
|
:where([data-theme="light"]) {
|
|
18
|
-
--lightningcss-light: initial;
|
|
19
|
-
--lightningcss-dark: ;
|
|
20
9
|
color-scheme: light;
|
|
21
10
|
}
|
|
22
11
|
|
|
23
12
|
:where([data-theme="dark"]) {
|
|
24
|
-
--lightningcss-light: ;
|
|
25
|
-
--lightningcss-dark: initial;
|
|
26
13
|
color-scheme: dark;
|
|
27
14
|
}
|
|
28
15
|
|
|
29
16
|
:where(:root) {
|
|
30
|
-
--l-brand-primary:
|
|
31
|
-
--color-brand-primary-emphasis:
|
|
32
|
-
--color-brand-primary-base:
|
|
33
|
-
--color-brand-primary-surface:
|
|
34
|
-
--color-brand-primary-hover:
|
|
35
|
-
--color-brand-primary-contrast-lightness:
|
|
36
|
-
--color-brand-primary-contrast:
|
|
37
|
-
--color-brand-secondary-emphasis:
|
|
38
|
-
--color-brand-secondary-base:
|
|
39
|
-
--color-brand-secondary-surface:
|
|
40
|
-
--color-brand-secondary-hover:
|
|
41
|
-
--color-brand-secondary-contrast:
|
|
42
|
-
--color-text-base:
|
|
43
|
-
--color-text-muted:
|
|
44
|
-
--color-text-subtle:
|
|
45
|
-
--color-text-on-emphasis:
|
|
46
|
-
--color-text-hover:
|
|
47
|
-
--color-surface-base:
|
|
48
|
-
--color-surface-muted:
|
|
49
|
-
--color-surface-subtle:
|
|
50
|
-
--color-surface-emphasis:
|
|
51
|
-
--color-border-base:
|
|
52
|
-
--color-border-muted:
|
|
53
|
-
--color-border-subtle:
|
|
54
|
-
--color-border-on-emphasis:
|
|
55
|
-
--color-border-hover:
|
|
56
|
-
--color-status-info-emphasis:
|
|
57
|
-
--color-status-info-base:
|
|
58
|
-
--color-status-info-surface:
|
|
59
|
-
--color-status-info-hover:
|
|
60
|
-
--color-status-info-contrast-lightness:
|
|
61
|
-
--color-status-info-contrast:
|
|
62
|
-
--color-status-success-emphasis:
|
|
63
|
-
--color-status-success-base:
|
|
64
|
-
--color-status-success-surface:
|
|
65
|
-
--color-status-success-hover:
|
|
66
|
-
--color-status-success-contrast-lightness:
|
|
67
|
-
--color-status-success-contrast:
|
|
68
|
-
--color-status-warning-emphasis:
|
|
69
|
-
--color-status-warning-base:
|
|
70
|
-
--color-status-warning-surface:
|
|
71
|
-
--color-status-warning-hover:
|
|
72
|
-
--color-status-warning-contrast-lightness:
|
|
73
|
-
--color-status-warning-contrast:
|
|
74
|
-
--color-status-danger-emphasis:
|
|
75
|
-
--color-status-danger-base:
|
|
76
|
-
--color-status-danger-surface:
|
|
77
|
-
--color-status-danger-hover:
|
|
78
|
-
--color-status-danger-contrast-lightness:
|
|
79
|
-
--color-status-danger-contrast:
|
|
80
|
-
--shadow-color:
|
|
81
|
-
--triangle-down-url:
|
|
82
|
-
--triangle-up-url:
|
|
17
|
+
--l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
|
|
18
|
+
--color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
|
|
19
|
+
--color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
|
|
20
|
+
--color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
|
|
21
|
+
--color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
|
|
22
|
+
--color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
|
|
23
|
+
--color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
|
|
24
|
+
--color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
|
|
25
|
+
--color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
|
|
26
|
+
--color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
|
|
27
|
+
--color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
|
|
28
|
+
--color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
|
|
29
|
+
--color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
|
|
30
|
+
--color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
|
|
31
|
+
--color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
|
|
32
|
+
--color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
|
|
33
|
+
--color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
|
|
34
|
+
--color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
|
|
35
|
+
--color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
|
|
36
|
+
--color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
|
|
37
|
+
--color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
|
|
38
|
+
--color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
|
|
39
|
+
--color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
|
|
40
|
+
--color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
|
|
41
|
+
--color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
|
|
42
|
+
--color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
|
|
43
|
+
--color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
|
|
44
|
+
--color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
|
|
45
|
+
--color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
|
|
46
|
+
--color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
|
|
47
|
+
--color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
|
|
48
|
+
--color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
|
|
49
|
+
--color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
|
|
50
|
+
--color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
|
|
51
|
+
--color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
|
|
52
|
+
--color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
|
|
53
|
+
--color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
|
|
54
|
+
--color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
|
|
55
|
+
--color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
|
|
56
|
+
--color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
|
|
57
|
+
--color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
|
|
58
|
+
--color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
|
|
59
|
+
--color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
|
|
60
|
+
--color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
|
|
61
|
+
--color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
|
|
62
|
+
--color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
|
|
63
|
+
--color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
|
|
64
|
+
--color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
|
|
65
|
+
--color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
|
|
66
|
+
--color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
|
|
67
|
+
--shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
|
|
68
|
+
--triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
|
|
69
|
+
--triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
|
|
83
70
|
}
|
|
84
71
|
}
|
|
85
72
|
|
|
@@ -136,6 +123,10 @@
|
|
|
136
123
|
}
|
|
137
124
|
|
|
138
125
|
:where(body) {
|
|
126
|
+
-webkit-text-decoration-skip-ink: auto;
|
|
127
|
+
text-decoration-skip-ink: auto;
|
|
128
|
+
font-optical-sizing: auto;
|
|
129
|
+
font-kerning: normal;
|
|
139
130
|
min-block-size: 100vh;
|
|
140
131
|
}
|
|
141
132
|
|
|
@@ -148,8 +139,6 @@
|
|
|
148
139
|
}
|
|
149
140
|
|
|
150
141
|
:where(a:not([class])) {
|
|
151
|
-
-webkit-text-decoration-skip-ink: auto;
|
|
152
|
-
text-decoration-skip-ink: auto;
|
|
153
142
|
color: currentColor;
|
|
154
143
|
}
|
|
155
144
|
|
|
@@ -190,11 +179,6 @@
|
|
|
190
179
|
letter-spacing: inherit;
|
|
191
180
|
}
|
|
192
181
|
|
|
193
|
-
:where(p) {
|
|
194
|
-
text-wrap: pretty;
|
|
195
|
-
max-inline-size: var(--measure-base);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
182
|
:where(html):has(dialog:modal) {
|
|
199
183
|
scrollbar-gutter: stable;
|
|
200
184
|
overflow: hidden;
|
|
@@ -280,13 +264,13 @@
|
|
|
280
264
|
:where(figcaption) {
|
|
281
265
|
color: var(--color-surface-subtle);
|
|
282
266
|
background-color: var(--color-text-base);
|
|
283
|
-
padding: .
|
|
267
|
+
padding: .25lh 1ch;
|
|
284
268
|
display: block;
|
|
285
269
|
}
|
|
286
270
|
|
|
287
271
|
:where(details) {
|
|
288
272
|
--p-x-details: 2ch;
|
|
289
|
-
--p-y-details: .
|
|
273
|
+
--p-y-details: .75lh;
|
|
290
274
|
--b-r-details: var(--border-radius-medium);
|
|
291
275
|
background-color: var(--color-surface-muted);
|
|
292
276
|
border-radius: var(--b-r-details);
|
|
@@ -442,6 +426,9 @@
|
|
|
442
426
|
:where(abbr) {
|
|
443
427
|
-webkit-text-decoration-color: var(--color-brand-primary-base);
|
|
444
428
|
text-decoration-color: var(--color-brand-primary-base);
|
|
429
|
+
font-variant-numeric: oldstyle-nums;
|
|
430
|
+
font-size: 110%;
|
|
431
|
+
font-variant-caps: all-small-caps;
|
|
445
432
|
}
|
|
446
433
|
|
|
447
434
|
:where([aria-disabled="true"], .disabled, :disabled) {
|
|
@@ -581,6 +568,10 @@
|
|
|
581
568
|
background-color: var(--color-surface-muted);
|
|
582
569
|
}
|
|
583
570
|
|
|
571
|
+
:where(td, math, time[datetime*=":"]) {
|
|
572
|
+
font-variant-numeric: tabular-nums lining-nums slashed-zero;
|
|
573
|
+
}
|
|
574
|
+
|
|
584
575
|
:target {
|
|
585
576
|
scroll-margin-block-start: 2ex;
|
|
586
577
|
}
|
|
@@ -613,7 +604,72 @@
|
|
|
613
604
|
}
|
|
614
605
|
|
|
615
606
|
:where(li > :is(ul, ol)) {
|
|
616
|
-
margin-block-start: .
|
|
607
|
+
margin-block-start: .25lh;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
@supports (font-variant-position: sub) {
|
|
611
|
+
:where(sub) {
|
|
612
|
+
vertical-align: baseline;
|
|
613
|
+
font-size: 100%;
|
|
614
|
+
line-height: inherit;
|
|
615
|
+
font-variant-position: sub;
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
@supports (font-variant-position: super) {
|
|
620
|
+
:where(sup) {
|
|
621
|
+
vertical-align: baseline;
|
|
622
|
+
font-size: 100%;
|
|
623
|
+
line-height: inherit;
|
|
624
|
+
font-variant-position: super;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
:lang(en) > * {
|
|
629
|
+
quotes: "“" "”" "‘" "’";
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
:lang(de) > * {
|
|
633
|
+
quotes: "„" "“" "‚" "‘";
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
:where() {
|
|
637
|
+
content: open-quote;
|
|
638
|
+
content: close-quote;
|
|
639
|
+
content: "“";
|
|
640
|
+
content: "”";
|
|
641
|
+
margin-inline-start: -.87ch;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
:where(.quoted p) {
|
|
645
|
+
hanging-punctuation: first last;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
@supports (hanging-punctuation: first last) {
|
|
649
|
+
:where() {
|
|
650
|
+
margin-inline-start: 0;
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
:where(.prose) {
|
|
655
|
+
-webkit-hyphens: auto;
|
|
656
|
+
hyphens: auto;
|
|
657
|
+
hyphenate-limit-chars: 7 4 3;
|
|
658
|
+
hyphenate-limit-lines: 2;
|
|
659
|
+
hyphenate-limit-zone: 8%;
|
|
660
|
+
hyphenate-limit-last: always;
|
|
661
|
+
text-wrap: pretty;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
:where(.prose p) {
|
|
665
|
+
text-wrap: pretty;
|
|
666
|
+
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
667
|
+
max-inline-size: var(--measure-base);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
:where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
|
|
671
|
+
-webkit-hyphens: manual;
|
|
672
|
+
hyphens: manual;
|
|
617
673
|
}
|
|
618
674
|
}
|
|
619
675
|
|
|
@@ -671,7 +727,7 @@
|
|
|
671
727
|
}
|
|
672
728
|
|
|
673
729
|
:where(.nc-flow) > * + * {
|
|
674
|
-
margin-block-start: var(--flow-gap,
|
|
730
|
+
margin-block-start: var(--flow-gap, 1lh);
|
|
675
731
|
}
|
|
676
732
|
|
|
677
733
|
:where(.nc-flow) > * {
|
|
@@ -680,11 +736,11 @@
|
|
|
680
736
|
|
|
681
737
|
:where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
|
|
682
738
|
max-inline-size: var(--flow-headline-meassure, 32ch);
|
|
683
|
-
--flow-gap: 1.
|
|
739
|
+
--flow-gap: 1.5lh;
|
|
684
740
|
}
|
|
685
741
|
|
|
686
742
|
:where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
|
|
687
|
-
--flow-gap: .
|
|
743
|
+
--flow-gap: .5lh;
|
|
688
744
|
}
|
|
689
745
|
|
|
690
746
|
:where(.nc-flow) > figure {
|
|
@@ -1082,6 +1138,21 @@
|
|
|
1082
1138
|
text-transform: capitalize;
|
|
1083
1139
|
}
|
|
1084
1140
|
|
|
1141
|
+
.centered {
|
|
1142
|
+
text-align: center;
|
|
1143
|
+
text-wrap: balance;
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
.uppercase {
|
|
1147
|
+
text-transform: uppercase;
|
|
1148
|
+
--opentype-case: on;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.smallcaps {
|
|
1152
|
+
font-variant-numeric: oldstyle-nums;
|
|
1153
|
+
font-variant-caps: all-small-caps;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1085
1156
|
.strong {
|
|
1086
1157
|
font-weight: var(--font-weight-strong);
|
|
1087
1158
|
}
|
|
@@ -1761,7 +1832,7 @@
|
|
|
1761
1832
|
}
|
|
1762
1833
|
|
|
1763
1834
|
:where(.nc-icon)[data-size="inline"] {
|
|
1764
|
-
--icon-size: .
|
|
1835
|
+
--icon-size: .75lh;
|
|
1765
1836
|
}
|
|
1766
1837
|
|
|
1767
1838
|
:where(.nc-icon)[data-size="button"] {
|
|
@@ -1795,7 +1866,7 @@
|
|
|
1795
1866
|
color: var(--color-text-base);
|
|
1796
1867
|
font-size: inherit;
|
|
1797
1868
|
align-items: center;
|
|
1798
|
-
gap:
|
|
1869
|
+
gap: 0;
|
|
1799
1870
|
display: inline-flex;
|
|
1800
1871
|
}
|
|
1801
1872
|
|
|
@@ -1993,7 +2064,7 @@
|
|
|
1993
2064
|
--_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
|
|
1994
2065
|
--_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
|
|
1995
2066
|
--_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
|
|
1996
|
-
--nc-legend-spacing: .
|
|
2067
|
+
--nc-legend-spacing: .25lh;
|
|
1997
2068
|
}
|
|
1998
2069
|
|
|
1999
2070
|
:where(.nc-tag-select-field):focus-within:has(:focus-visible) {
|
|
@@ -2034,12 +2105,12 @@
|
|
|
2034
2105
|
max-inline-size: var(--input-field-max-inline-size);
|
|
2035
2106
|
grid-template-columns: minmax(0, 1fr);
|
|
2036
2107
|
place-items: start;
|
|
2037
|
-
gap: .
|
|
2108
|
+
gap: .25lh;
|
|
2038
2109
|
display: grid;
|
|
2039
2110
|
}
|
|
2040
2111
|
|
|
2041
2112
|
:where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
|
|
2042
|
-
gap:
|
|
2113
|
+
gap: 0;
|
|
2043
2114
|
}
|
|
2044
2115
|
|
|
2045
2116
|
:where(.nc-input-field) > .nc-cluster {
|
|
@@ -2107,7 +2178,7 @@
|
|
|
2107
2178
|
--_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
|
|
2108
2179
|
--_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
|
|
2109
2180
|
--_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
|
|
2110
|
-
--nc-legend-spacing: .
|
|
2181
|
+
--nc-legend-spacing: .25lh;
|
|
2111
2182
|
container: segmented-control / inline-size;
|
|
2112
2183
|
}
|
|
2113
2184
|
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
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>
|
|
@@ -0,0 +1 @@
|
|
|
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>
|
|
Binary file
|
|
@@ -0,0 +1,8 @@
|
|
|
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"/>
|
|
2
|
+
<style>
|
|
3
|
+
path { fill: #000; }
|
|
4
|
+
@media (prefers-color-scheme: dark) {
|
|
5
|
+
path { fill: #FFF; }
|
|
6
|
+
}
|
|
7
|
+
</style>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
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"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
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; }
|
|
13
|
+
@media (prefers-color-scheme: dark) {
|
|
14
|
+
path { fill: #FFF; }
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const htmlEl = document.documentElement;
|
|
2
|
+
htmlEl?.addEventListener('click', (e: MouseEvent) => {
|
|
3
|
+
const el = e.target as HTMLElement;
|
|
4
|
+
|
|
5
|
+
if (el.hasAttribute('data-copy-target')) {
|
|
6
|
+
const copyTarget = el.dataset.copyTarget;
|
|
7
|
+
navigator.clipboard.writeText(copyTarget);
|
|
8
|
+
}
|
|
9
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
interface DialogProps {
|
|
3
|
+
heading: string;
|
|
4
|
+
id: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
let { heading, id }: DialogProps = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<dialog
|
|
12
|
+
class="nc-dialog"
|
|
13
|
+
{id}
|
|
14
|
+
data-level="1"
|
|
15
|
+
inert
|
|
16
|
+
>
|
|
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>
|
|
27
|
+
</dialog>
|