@ndla/primitives 1.0.29-alpha.0 → 1.0.31-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/panda.buildinfo.json +23 -13
  2. package/dist/styles.css +74 -28
  3. package/es/ArticleLists.js +47 -28
  4. package/lib/ArticleLists.d.ts +25 -18
  5. package/lib/ArticleLists.js +47 -28
  6. package/package.json +4 -4
package/dist/panda.buildinfo.json CHANGED
@@ -53,32 +53,42 @@
53
53
  "borderWidth]___[value:0 1px 1px",
54
54
  "borderStyle]___[value:solid",
55
55
  "borderColor]___[value:stroke.default",
56
- "marginBlock]___[value:small]___[cond:& li",
56
+ "marginBlock]___[value:small]___[cond:& > li",
57
+ "position]___[value:absolute]___[cond:& > li<___>_before",
58
+ "transform]___[value:translateX(-100%)]___[cond:& > li<___>_before",
59
+ "paddingInlineEnd]___[value:3xsmall]___[cond:& > li<___>_before",
60
+ "fontVariantNumeric]___[value:tabular-nums]___[cond:& > li<___>_before",
61
+ "marginInlineStart]___[value:small]___[cond:& > li",
57
62
  "counterReset]___[value:level1",
58
63
  "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
59
- "marginInline]___[value:small",
60
64
  "counterIncrement]___[value:level1]___[cond:& > li",
61
- "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_marker",
62
- "marginInlineStart]___[value:xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
65
+ "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_before",
66
+ "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol[data-variant='letters'] > li",
63
67
  "counterReset]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
64
68
  "counterReset]___[value:level2 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
69
+ "marginInlineStart]___[value:xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
65
70
  "counterIncrement]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
66
- "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
67
- "marginInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
71
+ "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
68
72
  "counterReset]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
69
73
  "counterReset]___[value:level3 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
74
+ "marginInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
70
75
  "counterIncrement]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
71
- "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
76
+ "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
72
77
  "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
73
78
  "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
79
+ "marginInlineStart]___[value:3xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
74
80
  "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
75
- "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
76
- "paddingInlineStart]___[value:medium",
77
- "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_marker",
78
- "paddingInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters']",
79
- "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters']<___>& > li<___>_marker",
80
- "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters']<___>& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
81
+ "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
82
+ "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_before",
83
+ "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li",
84
+ "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters'] > li",
85
+ "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_before",
86
+ "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li",
87
+ "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_before",
88
+ "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>& > ol:not([data-variant='letters']) > li",
81
89
  "listStyle]___[value:revert",
90
+ "paddingInlineStart]___[value:medium",
91
+ "marginBlock]___[value:small]___[cond:& li",
82
92
  "color]___[value:icon.strong]___[cond:& li<___>_marker",
83
93
  "fontWeight]___[value:bold]___[cond:& dt",
84
94
  "marginInlineStart]___[value:medium]___[cond:& dd",
package/dist/styles.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer utilities {
2
2
  @layer compositions {
3
3
  .textStyle_label\.medium {
4
+ letter-spacing: normal;
4
5
  font-family: var(--fonts-sans);
5
6
  font-weight: var(--font-weights-normal);
6
7
  font-size: var(--font-sizes-small);
@@ -13,6 +14,7 @@
13
14
  }
14
15
 
15
16
  .textStyle_label\.small {
17
+ letter-spacing: normal;
16
18
  font-family: var(--fonts-sans);
17
19
  font-weight: var(--font-weights-normal);
18
20
  font-size: var(--font-sizes-xsmall);
@@ -25,6 +27,7 @@
25
27
  }
26
28
 
27
29
  .textStyle_label\.large\! {
30
+ letter-spacing: normal !important;
28
31
  font-family: var(--fonts-sans) !important;
29
32
  font-weight: var(--font-weights-normal) !important;
30
33
  font-size: var(--font-sizes-medium) !important;
@@ -37,6 +40,7 @@
37
40
  }
38
41
 
39
42
  .textStyle_label\.xsmall {
43
+ letter-spacing: normal;
40
44
  font-family: var(--fonts-sans);
41
45
  font-weight: var(--font-weights-normal);
42
46
  font-size: var(--font-sizes-xxsmall);
@@ -49,6 +53,7 @@
49
53
  }
50
54
 
51
55
  .textStyle_body\.medium {
56
+ letter-spacing: normal;
52
57
  font-family: var(--fonts-sans);
53
58
  font-weight: var(--font-weights-normal);
54
59
  font-size: var(--font-sizes-small);
@@ -61,7 +66,7 @@
61
66
  }
62
67
 
63
68
  .textStyle_heading\.medium {
64
- letter-spacing: -1px;
69
+ letter-spacing: -0.01em;
65
70
  font-family: var(--fonts-sans);
66
71
  font-weight: var(--font-weights-bold);
67
72
  font-size: var(--font-sizes-3xlarge);
@@ -74,6 +79,7 @@
74
79
  }
75
80
 
76
81
  .\[\&_\>_\*\]\:textStyle_label\.large\! > * {
82
+ letter-spacing: normal !important;
77
83
  font-family: var(--fonts-sans) !important;
78
84
  font-weight: var(--font-weights-normal) !important;
79
85
  font-size: var(--font-sizes-medium) !important;
@@ -87,7 +93,7 @@
87
93
 
88
94
  @media screen and (max-width: 29.7475rem) {
89
95
  .textStyle_heading\.medium {
90
- letter-spacing: -2px;
96
+ letter-spacing: -0.01em;
91
97
  font-size: var(--font-sizes-xxlarge);
92
98
  line-height: var(--line-heights-xxlarge);
93
99
  }
@@ -168,18 +174,14 @@
168
174
  counter-reset: level1;
169
175
  }
170
176
 
171
- .mx_small {
172
- margin-inline: var(--spacing-small);
177
+ .li-s_revert {
178
+ list-style: revert;
173
179
  }
174
180
 
175
181
  .ps_medium {
176
182
  padding-inline-start: var(--spacing-medium);
177
183
  }
178
184
 
179
- .li-s_revert {
180
- list-style: revert;
181
- }
182
-
183
185
  .px_xsmall {
184
186
  padding-inline: var(--spacing-xsmall);
185
187
  }
@@ -1483,10 +1485,14 @@
1483
1485
  animation: var(--animations-collapse-out);
1484
1486
  }
1485
1487
 
1486
- .\[\&_li\]\:my_small li {
1488
+ .\[\&_\>_li\]\:my_small > li {
1487
1489
  margin-block: var(--spacing-small);
1488
1490
  }
1489
1491
 
1492
+ .\[\&_\>_li\]\:ms_small > li {
1493
+ margin-inline-start: var(--spacing-small);
1494
+ }
1495
+
1490
1496
  .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
1491
1497
  counter-reset: level1 var(--start, 0);
1492
1498
  }
@@ -1495,6 +1501,10 @@
1495
1501
  counter-increment: level1;
1496
1502
  }
1497
1503
 
1504
+ .\[\&_li\]\:my_small li {
1505
+ margin-block: var(--spacing-small);
1506
+ }
1507
+
1498
1508
  .\[\&_dd\]\:ms_medium dd {
1499
1509
  margin-inline-start: var(--spacing-medium);
1500
1510
  }
@@ -2386,16 +2396,32 @@
2386
2396
  color: var(--colors-text-disabled);
2387
2397
  }
2388
2398
 
2389
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_xlarge > li > ol:not([data-variant='letters']) {
2390
- margin-inline-start: var(--spacing-xlarge);
2399
+ .\[\&_\>_li\]\:before\:pos_absolute > li::before {
2400
+ position: absolute;
2401
+ }
2402
+
2403
+ .\[\&_\>_li\]\:before\:trf_translateX\(-100\%\) > li::before {
2404
+ transform: translateX(-100%);
2405
+ }
2406
+
2407
+ .\[\&_\>_li\]\:before\:pe_3xsmall > li::before {
2408
+ padding-inline-end: var(--spacing-3xsmall);
2409
+ }
2410
+
2411
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_medium > li > ol[data-variant='letters'] > li {
2412
+ margin-inline-start: var(--spacing-medium);
2391
2413
  }
2392
2414
 
2393
2415
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
2394
2416
  counter-reset: level2;
2395
2417
  }
2396
2418
 
2397
- .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ps_small > li > ol[data-variant='letters'] {
2398
- padding-inline-start: var(--spacing-small);
2419
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ms_medium > li > ol:not([data-variant='letters']) > li {
2420
+ margin-inline-start: var(--spacing-medium);
2421
+ }
2422
+
2423
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_small > li > ol[data-variant='letters'] > li {
2424
+ margin-inline-start: var(--spacing-small);
2399
2425
  }
2400
2426
 
2401
2427
  .\[\&_li\]\:marker\:c_icon\.strong li::marker {
@@ -2572,11 +2598,15 @@
2572
2598
  color: var(--colors-text-default);
2573
2599
  }
2574
2600
 
2575
- .\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\._\' > li::marker {
2601
+ .\[\&_\>_li\]\:before\:fv-num_tabular-nums > li::before {
2602
+ font-variant-numeric: tabular-nums;
2603
+ }
2604
+
2605
+ .\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\._\' > li::before {
2576
2606
  content: counter(level1, decimal) '. ';
2577
2607
  }
2578
2608
 
2579
- .\[\&_\>_li\]\:marker\:content_counter\(level1\,_upper-alpha\)_\'\._\' > li::marker {
2609
+ .\[\&_\>_li\]\:before\:content_counter\(level1\,_upper-alpha\)_\'\._\' > li::before {
2580
2610
  content: counter(level1, upper-alpha) '. ';
2581
2611
  }
2582
2612
 
@@ -2696,10 +2726,18 @@
2696
2726
  counter-reset: level2 var(--start, 0);
2697
2727
  }
2698
2728
 
2729
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_xlarge > li > ol:not([data-variant='letters']) > li {
2730
+ margin-inline-start: var(--spacing-xlarge);
2731
+ }
2732
+
2699
2733
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
2700
2734
  counter-increment: level2;
2701
2735
  }
2702
2736
 
2737
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_small > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li {
2738
+ margin-inline-start: var(--spacing-small);
2739
+ }
2740
+
2703
2741
  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
2704
2742
  color: var(--colors-text-disabled);
2705
2743
  }
@@ -2720,6 +2758,10 @@
2720
2758
  --shadow-color: var(--color-current-hover);
2721
2759
  }
2722
2760
 
2761
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::before {
2762
+ content: counter(level1, lower-alpha) '. ';
2763
+ }
2764
+
2723
2765
  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
2724
2766
  border-color: var(--colors-stroke-disabled);
2725
2767
  }
@@ -2740,39 +2782,39 @@
2740
2782
  outline-color: var(--color-current-hover);
2741
2783
  }
2742
2784
 
2743
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_xxlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
2744
- margin-inline-start: var(--spacing-xxlarge);
2745
- }
2746
-
2747
2785
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
2748
2786
  counter-reset: level3;
2749
2787
  }
2750
2788
 
2751
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::marker {
2789
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ms_medium > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li > ol:not([data-variant='letters']) > li {
2790
+ margin-inline-start: var(--spacing-medium);
2791
+ }
2792
+
2793
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::before {
2752
2794
  content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
2753
2795
  }
2754
2796
 
2755
- .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::marker {
2756
- content: counter(level1, lower-alpha) '. ';
2797
+ .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::before {
2798
+ content: counter(level1, lower-roman) '. ';
2757
2799
  }
2758
2800
 
2759
2801
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level3_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters'])[data-count='true'] {
2760
2802
  counter-reset: level3 var(--start, 0);
2761
2803
  }
2762
2804
 
2763
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
2764
- counter-increment: level3;
2805
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_xxlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
2806
+ margin-inline-start: var(--spacing-xxlarge);
2765
2807
  }
2766
2808
 
2767
- .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::marker {
2768
- content: counter(level1, lower-roman) '. ';
2809
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
2810
+ counter-increment: level3;
2769
2811
  }
2770
2812
 
2771
2813
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
2772
2814
  counter-reset: level4;
2773
2815
  }
2774
2816
 
2775
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::marker {
2817
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::before {
2776
2818
  content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ';
2777
2819
  }
2778
2820
 
@@ -2780,11 +2822,15 @@
2780
2822
  counter-reset: level4 var(--start, 0);
2781
2823
  }
2782
2824
 
2825
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_3xlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
2826
+ margin-inline-start: var(--spacing-3xlarge);
2827
+ }
2828
+
2783
2829
  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
2784
2830
  counter-increment: level4;
2785
2831
  }
2786
2832
 
2787
- .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\.\'_counter\(level4\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::marker {
2833
+ .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\.\'_counter\(level4\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::before {
2788
2834
  content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
2789
2835
  }
2790
2836
 
package/es/ArticleLists.js CHANGED
@@ -11,10 +11,22 @@ import { ark } from "@ark-ui/react";
11
11
  import { css, cva } from "@ndla/styled-system/css";
12
12
  import { styled } from "@ndla/styled-system/jsx";
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
+ const LIST_ITEM = "& > li";
15
+ const LETTER_LIST = "& > ol[data-variant='letters']";
16
+ const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
17
+ const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
18
+ const NUMBER_LIST_ITEM = `${NUMBER_LIST} > li`;
14
19
  const orderedListRecipe = cva({
15
20
  base: {
16
- "& li": {
17
- marginBlock: "small"
21
+ [LIST_ITEM]: {
22
+ marginBlock: "small",
23
+ _before: {
24
+ position: "absolute",
25
+ transform: "translateX(-100%)",
26
+ paddingInlineEnd: "3xsmall",
27
+ fontVariantNumeric: "tabular-nums"
28
+ },
29
+ marginInlineStart: "small"
18
30
  }
19
31
  },
20
32
  defaultVariants: {
@@ -27,42 +39,45 @@ const orderedListRecipe = cva({
27
39
  "&[data-count='true']": {
28
40
  counterReset: "level1 var(--start, 0)"
29
41
  },
30
- marginInline: "small",
31
- "& > li": {
42
+ [LIST_ITEM]: {
32
43
  counterIncrement: "level1",
33
- _marker: {
44
+ _before: {
34
45
  content: "counter(level1, decimal) '. '"
35
46
  },
36
- "& > ol:not([data-variant='letters'])": {
37
- marginInlineStart: "xlarge",
47
+ [LETTER_LIST_ITEM]: {
48
+ marginInlineStart: "medium"
49
+ },
50
+ [NUMBER_LIST]: {
38
51
  counterReset: "level2",
39
52
  "&[data-count='true']": {
40
53
  counterReset: "level2 var(--start, 0)"
41
54
  },
42
- "& > li": {
55
+ [LIST_ITEM]: {
56
+ marginInlineStart: "xlarge",
43
57
  counterIncrement: "level2",
44
- _marker: {
58
+ _before: {
45
59
  content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
46
60
  },
47
- "& > ol:not([data-variant='letters'])": {
48
- marginInlineStart: "xxlarge",
61
+ [NUMBER_LIST]: {
49
62
  counterReset: "level3",
50
63
  "&[data-count='true']": {
51
64
  counterReset: "level3 var(--start, 0)"
52
65
  },
53
- "& > li": {
66
+ [LIST_ITEM]: {
67
+ marginInlineStart: "xxlarge",
54
68
  counterIncrement: "level3",
55
- _marker: {
69
+ _before: {
56
70
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
57
71
  },
58
- "& > ol:not([data-variant='letters'])": {
72
+ [NUMBER_LIST]: {
59
73
  counterReset: "level4",
60
74
  "&[data-count='true']": {
61
75
  counterReset: "level4 var(--start, 0)"
62
76
  },
63
- "& > li": {
77
+ [LIST_ITEM]: {
78
+ marginInlineStart: "3xlarge",
64
79
  counterIncrement: "level4",
65
- _marker: {
80
+ _before: {
66
81
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '"
67
82
  }
68
83
  }
@@ -78,22 +93,26 @@ const orderedListRecipe = cva({
78
93
  "&[data-count='true']": {
79
94
  counterReset: "level1 var(--start, 0)"
80
95
  },
81
- paddingInlineStart: "medium",
82
- "& > li": {
96
+ [LIST_ITEM]: {
83
97
  counterIncrement: "level1",
84
- _marker: {
98
+ _before: {
85
99
  content: "counter(level1, upper-alpha) '. '"
86
100
  },
87
- "& > ol[data-variant='letters']": {
88
- paddingInlineStart: "small",
89
- "& > li": {
90
- _marker: {
91
- content: "counter(level1, lower-alpha) '. '"
101
+ [NUMBER_LIST_ITEM]: {
102
+ marginInlineStart: "medium"
103
+ },
104
+ [LETTER_LIST_ITEM]: {
105
+ marginInlineStart: "small",
106
+ _before: {
107
+ content: "counter(level1, lower-alpha) '. '"
108
+ },
109
+ [LETTER_LIST_ITEM]: {
110
+ marginInlineStart: "small",
111
+ _before: {
112
+ content: "counter(level1, lower-roman) '. '"
92
113
  },
93
- "& > ol[data-variant='letters'] > li": {
94
- _marker: {
95
- content: "counter(level1, lower-roman) '. '"
96
- }
114
+ [NUMBER_LIST_ITEM]: {
115
+ marginInlineStart: "medium"
97
116
  }
98
117
  }
99
118
  }
package/lib/ArticleLists.d.ts CHANGED
@@ -14,32 +14,34 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
14
14
  "&[data-count='true']": {
15
15
  counterReset: "level1 var(--start, 0)";
16
16
  };
17
- marginInline: "small";
18
17
  "& > li": {
19
18
  counterIncrement: "level1";
20
- _marker: {
19
+ _before: {
21
20
  content: "counter(level1, decimal) '. '";
22
21
  };
22
+ "& > ol[data-variant='letters'] > li": {
23
+ marginInlineStart: "medium";
24
+ };
23
25
  "& > ol:not([data-variant='letters'])": {
24
- marginInlineStart: "xlarge";
25
26
  counterReset: "level2";
26
27
  "&[data-count='true']": {
27
28
  counterReset: "level2 var(--start, 0)";
28
29
  };
29
30
  "& > li": {
31
+ marginInlineStart: "xlarge";
30
32
  counterIncrement: "level2";
31
- _marker: {
33
+ _before: {
32
34
  content: "counter(level1, decimal) '.' counter(level2, decimal) '. '";
33
35
  };
34
36
  "& > ol:not([data-variant='letters'])": {
35
- marginInlineStart: "xxlarge";
36
37
  counterReset: "level3";
37
38
  "&[data-count='true']": {
38
39
  counterReset: "level3 var(--start, 0)";
39
40
  };
40
41
  "& > li": {
42
+ marginInlineStart: "xxlarge";
41
43
  counterIncrement: "level3";
42
- _marker: {
44
+ _before: {
43
45
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '";
44
46
  };
45
47
  "& > ol:not([data-variant='letters'])": {
@@ -48,8 +50,9 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
48
50
  counterReset: "level4 var(--start, 0)";
49
51
  };
50
52
  "& > li": {
53
+ marginInlineStart: "3xlarge";
51
54
  counterIncrement: "level4";
52
- _marker: {
55
+ _before: {
53
56
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '";
54
57
  };
55
58
  };
@@ -65,22 +68,26 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
65
68
  "&[data-count='true']": {
66
69
  counterReset: "level1 var(--start, 0)";
67
70
  };
68
- paddingInlineStart: "medium";
69
71
  "& > li": {
70
72
  counterIncrement: "level1";
71
- _marker: {
73
+ _before: {
72
74
  content: "counter(level1, upper-alpha) '. '";
73
75
  };
74
- "& > ol[data-variant='letters']": {
75
- paddingInlineStart: "small";
76
- "& > li": {
77
- _marker: {
78
- content: "counter(level1, lower-alpha) '. '";
76
+ "& > ol:not([data-variant='letters']) > li": {
77
+ marginInlineStart: "medium";
78
+ };
79
+ "& > ol[data-variant='letters'] > li": {
80
+ marginInlineStart: "small";
81
+ _before: {
82
+ content: "counter(level1, lower-alpha) '. '";
83
+ };
84
+ "& > ol[data-variant='letters'] > li": {
85
+ marginInlineStart: "small";
86
+ _before: {
87
+ content: "counter(level1, lower-roman) '. '";
79
88
  };
80
- "& > ol[data-variant='letters'] > li": {
81
- _marker: {
82
- content: "counter(level1, lower-roman) '. '";
83
- };
89
+ "& > ol:not([data-variant='letters']) > li": {
90
+ marginInlineStart: "medium";
84
91
  };
85
92
  };
86
93
  };
package/lib/ArticleLists.js CHANGED
@@ -17,10 +17,22 @@ var _jsxRuntime = require("react/jsx-runtime");
17
17
  *
18
18
  */
19
19
 
20
+ const LIST_ITEM = "& > li";
21
+ const LETTER_LIST = "& > ol[data-variant='letters']";
22
+ const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
23
+ const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
24
+ const NUMBER_LIST_ITEM = `${NUMBER_LIST} > li`;
20
25
  const orderedListRecipe = (0, _css.cva)({
21
26
  base: {
22
- "& li": {
23
- marginBlock: "small"
27
+ [LIST_ITEM]: {
28
+ marginBlock: "small",
29
+ _before: {
30
+ position: "absolute",
31
+ transform: "translateX(-100%)",
32
+ paddingInlineEnd: "3xsmall",
33
+ fontVariantNumeric: "tabular-nums"
34
+ },
35
+ marginInlineStart: "small"
24
36
  }
25
37
  },
26
38
  defaultVariants: {
@@ -33,42 +45,45 @@ const orderedListRecipe = (0, _css.cva)({
33
45
  "&[data-count='true']": {
34
46
  counterReset: "level1 var(--start, 0)"
35
47
  },
36
- marginInline: "small",
37
- "& > li": {
48
+ [LIST_ITEM]: {
38
49
  counterIncrement: "level1",
39
- _marker: {
50
+ _before: {
40
51
  content: "counter(level1, decimal) '. '"
41
52
  },
42
- "& > ol:not([data-variant='letters'])": {
43
- marginInlineStart: "xlarge",
53
+ [LETTER_LIST_ITEM]: {
54
+ marginInlineStart: "medium"
55
+ },
56
+ [NUMBER_LIST]: {
44
57
  counterReset: "level2",
45
58
  "&[data-count='true']": {
46
59
  counterReset: "level2 var(--start, 0)"
47
60
  },
48
- "& > li": {
61
+ [LIST_ITEM]: {
62
+ marginInlineStart: "xlarge",
49
63
  counterIncrement: "level2",
50
- _marker: {
64
+ _before: {
51
65
  content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
52
66
  },
53
- "& > ol:not([data-variant='letters'])": {
54
- marginInlineStart: "xxlarge",
67
+ [NUMBER_LIST]: {
55
68
  counterReset: "level3",
56
69
  "&[data-count='true']": {
57
70
  counterReset: "level3 var(--start, 0)"
58
71
  },
59
- "& > li": {
72
+ [LIST_ITEM]: {
73
+ marginInlineStart: "xxlarge",
60
74
  counterIncrement: "level3",
61
- _marker: {
75
+ _before: {
62
76
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
63
77
  },
64
- "& > ol:not([data-variant='letters'])": {
78
+ [NUMBER_LIST]: {
65
79
  counterReset: "level4",
66
80
  "&[data-count='true']": {
67
81
  counterReset: "level4 var(--start, 0)"
68
82
  },
69
- "& > li": {
83
+ [LIST_ITEM]: {
84
+ marginInlineStart: "3xlarge",
70
85
  counterIncrement: "level4",
71
- _marker: {
86
+ _before: {
72
87
  content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '"
73
88
  }
74
89
  }
@@ -84,22 +99,26 @@ const orderedListRecipe = (0, _css.cva)({
84
99
  "&[data-count='true']": {
85
100
  counterReset: "level1 var(--start, 0)"
86
101
  },
87
- paddingInlineStart: "medium",
88
- "& > li": {
102
+ [LIST_ITEM]: {
89
103
  counterIncrement: "level1",
90
- _marker: {
104
+ _before: {
91
105
  content: "counter(level1, upper-alpha) '. '"
92
106
  },
93
- "& > ol[data-variant='letters']": {
94
- paddingInlineStart: "small",
95
- "& > li": {
96
- _marker: {
97
- content: "counter(level1, lower-alpha) '. '"
107
+ [NUMBER_LIST_ITEM]: {
108
+ marginInlineStart: "medium"
109
+ },
110
+ [LETTER_LIST_ITEM]: {
111
+ marginInlineStart: "small",
112
+ _before: {
113
+ content: "counter(level1, lower-alpha) '. '"
114
+ },
115
+ [LETTER_LIST_ITEM]: {
116
+ marginInlineStart: "small",
117
+ _before: {
118
+ content: "counter(level1, lower-roman) '. '"
98
119
  },
99
- "& > ol[data-variant='letters'] > li": {
100
- _marker: {
101
- content: "counter(level1, lower-roman) '. '"
102
- }
120
+ [NUMBER_LIST_ITEM]: {
121
+ marginInlineStart: "medium"
103
122
  }
104
123
  }
105
124
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/primitives",
3
- "version": "1.0.29-alpha.0",
3
+ "version": "1.0.31-alpha.0",
4
4
  "description": "Primitive components for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -28,12 +28,12 @@
28
28
  "lib"
29
29
  ],
30
30
  "dependencies": {
31
- "@ark-ui/react": "^3.11.1",
31
+ "@ark-ui/react": "^3.12.0",
32
32
  "@ndla/styled-system": "^0.0.22",
33
33
  "@ndla/util": "^5.0.0-alpha.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@ndla/preset-panda": "^0.0.32",
36
+ "@ndla/preset-panda": "^0.0.33",
37
37
  "@pandacss/dev": "^0.46.0"
38
38
  },
39
39
  "peerDependencies": {
@@ -43,5 +43,5 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
- "gitHead": "8bfa22e2ca1f9ee0638df252f56389807797e704"
46
+ "gitHead": "bedff84c8034cb9016d300a3d270d14a49accfff"
47
47
  }