@ndla/primitives 0.0.18 → 0.0.20

package/dist/panda.buildinfo.json

@@ -49,15 +49,32 @@
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
-      "listStyle]___[value:revert",
-      "listStylePosition]___[value:inside",
-      "paddingInlineStart]___[value:small",
       "marginBlock]___[value:small]___[cond:& li",
-      "content]___[value:counters(list-item, '.') '. ']___[cond:& > li<___>_marker",
-      "content]___[value:counter(list-item, numeric) '. ']___[cond:& ol[data-variant='numbers'] > li<___>_marker",
-      "content]___[value:counter(list-item, upper-alpha) '. ']___[cond:& li<___>_marker",
-      "content]___[value:counter(list-item, lower-alpha) '. ']___[cond:& li<___>& > ol > li<___>_marker",
-      "content]___[value:counter(list-item, lower-roman) '. ']___[cond:& li<___>& > ol > li<___>& li<___>_marker",
+      "counterReset]___[value:level1",
+      "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
+      "marginInline]___[value:small",
+      "counterIncrement]___[value:level1]___[cond:& > li",
+      "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_marker",
+      "marginInlineStart]___[value:xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level2 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
+      "marginInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level3 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "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",
+      "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "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'])<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
+      "paddingInlineStart]___[value:small",
+      "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_marker",
+      "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
+      "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_marker",
+      "listStyle]___[value:revert",
+      "paddingInlineStart]___[value:medium",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
@@ -303,12 +320,24 @@
       "left]___[value:auto",
       "marginBlock]___[value:xsmall",
       "paddingInlineEnd]___[value:medium",
-      "paddingInlineStart]___[value:medium",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
       "borderRadius]___[value:small",
       "backgroundColor]___[value:surface.default",
       "backgroundColor]___[value:surface.brand.2.subtle",
+      "height]___[value:350px",
+      "zIndex]___[value:hide",
+      "clipPath]___[value:polygon(0 0, 100% 0, 100% 65%, 0 100%)",
+      "position]___[value:absolute",
+      "background]___[value:primary",
+      "background]___[value:blue.800",
+      "background]___[value:surface.brand.2",
+      "background]___[value:surface.brand.1",
+      "background]___[value:surface.infoSubtle",
+      "background]___[value:surface.brand.4",
+      "flexWrap]___[value:wrap",
+      "alignItems]___[value:flex-end",
+      "paddingBlockStart]___[value:xxlarge]___[cond:tablet",
       "outline]___[value:1px solid",
       "background]___[value:background.default",
       "minHeight]___[value:xxlarge",
@@ -357,7 +386,6 @@
       "boxShadow]___[value:small",
       "alignItems]___[value:flex-start",
       "gap]___[value:small",
-      "background]___[value:surface.infoSubtle",
       "background]___[value:surface.warningSubtle",
       "borderColor]___[value:stroke.warning",
       "background]___[value:surface.successSubtle",
@@ -372,7 +400,6 @@
       "animation]___[value:fade-shift-out 0.2s ease-out]___[cond:_closed",
       "--arrow-size]___[value:sizes.xxsmall",
       "--arrow-background]___[value:colors.surface.default",
-      "flexWrap]___[value:wrap",
       "flexDirection]___[value:column]___[cond:_vertical",
       "flexDirection]___[value:row]___[cond:_horizontal",
       "borderRadius]___[value:full",
@@ -479,7 +506,6 @@
       "textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
       "flexDirection]___[value:column]___[cond:_horizontal",
       "flexDirection]___[value:row]___[cond:_vertical",
-      "overflow]___[value:auto",
       "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
       "marginInlineEnd]___[value:-1px]___[cond:_vertical",
       "transitionProperty]___[value:color, background, border-color",
@@ -507,6 +533,20 @@
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "outline]___[value:3px solid",
+      "outlineColor]___[value:stroke.default",
+      "outlineOffset]___[value:-3px",
+      "height]___[value:var(--height)]___[cond:_peerFocusVisible",
+      "width]___[value:var(--width)]___[cond:_peerFocusVisible",
+      "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
+      "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
+      "top]___[value:calc(var(--top) + var(--height) - 6px)]___[cond:_horizontal",
+      "top]___[value:var(--top)]___[cond:_horizontal<___>_peerFocusVisible",
+      "height]___[value:3]___[cond:_horizontal",
+      "width]___[value:var(--width)]___[cond:_horizontal",
+      "height]___[value:var(--height)]___[cond:_vertical",
+      "left]___[value:0]___[cond:_vertical",
+      "width]___[value:3]___[cond:_vertical",
       "width]___[value:full",
       "gap]___[value:1",
       "paddingInlineEnd]___[value:3xsmall",
@@ -538,7 +578,6 @@
       "zIndex]___[value:var(--z-index)",
       "transitionDuration]___[value:slow",
       "transitionProperty]___[value:translate, scale, opacity, height",
-      "position]___[value:absolute",
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
       "paddingInline]___[value:xxsmall",

package/dist/styles.css

@@ -150,14 +150,26 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .li-s_revert {
-    list-style: revert;
+  .counter-reset_level1 {
+    counter-reset: level1;
+}
+
+  .mx_small {
+    margin-inline: var(--spacing-small);
 }
 
   .ps_small {
     padding-inline-start: var(--spacing-small);
 }
 
+  .li-s_revert {
+    list-style: revert;
+}
+
+  .ps_medium {
+    padding-inline-start: var(--spacing-medium);
+}
+
   .px_xsmall {
     padding-inline: var(--spacing-xsmall);
 }
@@ -520,10 +532,6 @@
     padding-inline-end: var(--spacing-medium);
 }
 
-  .ps_medium {
-    padding-inline-start: var(--spacing-medium);
-}
-
   .ps_0 {
     padding-inline-start: 0;
 }
@@ -536,6 +544,47 @@
     border-radius: var(--radii-small);
 }
 
+  .h_350px {
+    height: 350px;
+}
+
+  .z_hide {
+    z-index: var(--z-index-hide);
+}
+
+  .cp-path_polygon\(0_0\,_100\%_0\,_100\%_65\%\,_0_100\%\) {
+    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .bg_primary {
+    background: var(--colors-primary);
+}
+
+  .bg_blue\.800 {
+    background: var(--colors-blue-800);
+}
+
+  .bg_surface\.brand\.2 {
+    background: var(--colors-surface-brand-2);
+}
+
+  .bg_surface\.brand\.1 {
+    background: var(--colors-surface-brand-1);
+}
+
+  .bg_surface\.infoSubtle {
+    background: var(--colors-surface-info-subtle);
+}
+
+  .bg_surface\.brand\.4 {
+    background: var(--colors-surface-brand-4);
+}
+
   .ring_1px_solid {
     outline: 1px solid;
 }
@@ -608,10 +657,6 @@
     gap: var(--spacing-small);
 }
 
-  .bg_surface\.infoSubtle {
-    background: var(--colors-surface-info-subtle);
-}
-
   .bg_surface\.warningSubtle {
     background: var(--colors-surface-warning-subtle);
 }
@@ -748,14 +793,18 @@
     table-layout: fixed;
 }
 
-  .ov_auto {
-    overflow: auto;
-}
-
   .white-space_nowrap {
     white-space: nowrap;
 }
 
+  .ring_3px_solid {
+    outline: 3px solid;
+}
+
+  .ring-o_-3px {
+    outline-offset: -3px;
+}
+
   .w_full {
     width: full;
 }
@@ -816,10 +865,6 @@
     z-index: var(--z-index);
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
   .px_xxsmall {
     padding-inline: var(--spacing-xxsmall);
 }
@@ -894,10 +939,6 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .li-pos_inside {
-    list-style-position: inside;
-}
-
   .bg-c_surface\.brand\.1\.subtle {
     background-color: var(--colors-surface-brand-1-subtle);
 }
@@ -990,6 +1031,14 @@
     background-color: var(--colors-surface-brand-2-subtle);
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
   .ov-y_hidden {
     overflow-y: hidden;
 }
@@ -1019,10 +1068,6 @@
     font-variant-numeric: tabular-nums;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
   .bd-w_2px {
     border-width: 2px;
 }
@@ -1100,6 +1145,10 @@
     border-width: 1px;
 }
 
+  .ring-c_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .ring-c_transparent {
     outline-color: transparent;
 }
@@ -1176,6 +1225,14 @@
     margin-block: var(--spacing-small);
 }
 
+  .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
+    counter-reset: level1 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:counter-increment_level1 > li {
+    counter-increment: level1;
+}
+
   .\[\&_dd\]\:ms_medium dd {
     margin-inline-start: var(--spacing-medium);
 }
@@ -1497,6 +1554,22 @@
     padding-inline-start: var(--spacing-xsmall);
 }
 
+  .horizontal\:h_3[data-orientation=horizontal] {
+    height: var(--sizes-3);
+}
+
+  .horizontal\:w_var\(--width\)[data-orientation=horizontal] {
+    width: var(--width);
+}
+
+  .vertical\:h_var\(--height\)[data-orientation=vertical] {
+    height: var(--height);
+}
+
+  .vertical\:w_3[data-orientation=vertical] {
+    width: var(--sizes-3);
+}
+
   .highlighted\:ring-o_-1px[data-highlighted] {
     outline-offset: -1px;
 }
@@ -1637,6 +1710,14 @@
     border-color: var(--colors-stroke-subtle);
 }
 
+  .horizontal\:top_calc\(var\(--top\)_\+_var\(--height\)_-_6px\)[data-orientation=horizontal] {
+    top: calc(var(--top) + var(--height) - 6px);
+}
+
+  .vertical\:left_0[data-orientation=vertical] {
+    left: 0;
+}
+
   .highlighted\:bg-c_surface\.actionSubtle\.hover[data-highlighted] {
     background-color: var(--colors-surface-action-subtle-hover);
 }
@@ -1751,6 +1832,14 @@
     box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:h_var\(--height\) {
+    height: var(--height);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:w_var\(--width\) {
+    width: var(--width);
+}
+
   .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -1911,6 +2000,14 @@
     color: var(--colors-text-disabled);
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_xlarge > li > ol:not([data-variant='letters']) {
+    margin-inline-start: var(--spacing-xlarge);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
+    counter-reset: level2;
+}
+
   .\[\&_li\]\:marker\:c_icon\.strong li::marker {
     color: var(--colors-icon-strong);
 }
@@ -2055,20 +2152,26 @@
     color: var(--colors-text-subtle);
 }
 
-  .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
-    color: var(--colors-stroke-hover);
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:bdr-t_xsmall[data-orientation=horizontal] {
+    border-top-left-radius: var(--radii-xsmall);
+    border-top-right-radius: var(--radii-xsmall);
 }
 
-  .\[\&_\>_li\]\:marker\:content_counters\(list-item\,_\'\.\'\)_\'\._\' > li::marker {
-    content: counters(list-item, '.') '. ';
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:vertical\:bdr-r_xsmall[data-orientation=vertical] {
+    border-top-right-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .\[\&_ol\[data-variant\=\'numbers\'\]_\>_li\]\:marker\:content_counter\(list-item\,_numeric\)_\'\._\' ol[data-variant='numbers'] > li::marker {
-    content: counter(list-item, numeric) '. ';
+  .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
+    color: var(--colors-stroke-hover);
 }
 
-  .\[\&_li\]\:marker\:content_counter\(list-item\,_upper-alpha\)_\'\._\' li::marker {
-    content: counter(list-item, upper-alpha) '. ';
+  .\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\._\' > li::marker {
+    content: counter(level1, decimal) '. ';
+}
+
+  .\[\&_\>_li\]\:marker\:content_counter\(level1\,_upper-alpha\)_\'\._\' > li::marker {
+    content: counter(level1, upper-alpha) '. ';
 }
 
   .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
@@ -2127,6 +2230,10 @@
     border-right-color: transparent;
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .horizontal\:peerFocusVisible\:top_var\(--top\)[data-orientation=horizontal] {
+    top: var(--top);
+}
+
   .focusWithin\:hover\:ring-c_stroke\.default:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -2155,6 +2262,14 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level2_var\(--start\,_0\) > li > ol:not([data-variant='letters'])[data-count='true'] {
+    counter-reset: level2 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
+    counter-increment: level2;
+}
+
   .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
@@ -2171,8 +2286,8 @@
     transform: translateX(120%);
 }
 
-  .\[\&_li\]\:\[\&_\>_ol_\>_li\]\:marker\:content_counter\(list-item\,_lower-alpha\)_\'\._\' li > ol > li::marker {
-    content: counter(list-item, lower-alpha) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::marker {
+    content: counter(level1, lower-alpha) '. ';
 }
 
   .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
@@ -2191,8 +2306,48 @@
     outline-color: var(--colors-stroke-error);
 }
 
-  .\[\&_li\]\:\[\&_\>_ol_\>_li\]\:\[\&_li\]\:marker\:content_counter\(list-item\,_lower-roman\)_\'\._\' li > ol > li li::marker {
-    content: counter(list-item, lower-roman) '. ';
+  .\[\&_\>_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']) {
+    margin-inline-start: var(--spacing-xxlarge);
+}
+
+  .\[\&_\>_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']) {
+    counter-reset: level3;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::marker {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
+}
+
+  .\[\&_\>_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 {
+    content: counter(level1, lower-roman) '. ';
+}
+
+  .\[\&_\>_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'] {
+    counter-reset: level3 var(--start, 0);
+}
+
+  .\[\&_\>_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 {
+    counter-increment: level3;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters']) {
+    counter-reset: level4;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level4_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters'])[data-count='true'] {
+    counter-reset: level4 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters']) > li {
+    counter-increment: level4;
+}
+
+  .\[\&_\>_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 {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ';
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_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']) > ol:not([data-variant='letters']) > li::marker {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
 }
 
   @media screen and (min-width: 37.5625rem) {
@@ -2222,6 +2377,9 @@
 }
     .tablet\:clear_right {
       clear: right;
+}
+    .tablet\:pbs_xxlarge {
+      padding-block-start: var(--spacing-xxlarge);
 }
 }
 

package/es/ArticleLists.js

@@ -6,16 +6,13 @@
  *
  */
 
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
 const orderedListRecipe = cva({
   base: {
-    listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
     "& li": {
       marginBlock: "small"
     }
@@ -26,29 +23,74 @@ const orderedListRecipe = cva({
   variants: {
     variant: {
       numbers: {
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
+        },
+        marginInline: "small",
         "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counters(list-item, '.') '. '"
+            content: "counter(level1, decimal) '. '"
+          },
+          "& > ol:not([data-variant='letters'])": {
+            marginInlineStart: "xlarge",
+            counterReset: "level2",
+            "&[data-count='true']": {
+              counterReset: "level2 var(--start, 0)"
+            },
+            "& > li": {
+              counterIncrement: "level2",
+              _marker: {
+                content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
+              },
+              "& > ol:not([data-variant='letters'])": {
+                marginInlineStart: "xxlarge",
+                counterReset: "level3",
+                "&[data-count='true']": {
+                  counterReset: "level3 var(--start, 0)"
+                },
+                "& > li": {
+                  counterIncrement: "level3",
+                  _marker: {
+                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
+                  }
+                },
+                "& > ol:not([data-variant='letters'])": {
+                  counterReset: "level4",
+                  "&[data-count='true']": {
+                    counterReset: "level4 var(--start, 0)"
+                  },
+                  "& > li": {
+                    counterIncrement: "level4",
+                    _marker: {
+                      content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
+                    }
+                  }
+                }
+              }
+            }
           }
         }
       },
       letters: {
-        "& ol[data-variant='numbers'] > li": {
-          _marker: {
-            content: "counter(list-item, numeric) '. '"
-          }
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
         },
-        "& li": {
+        paddingInlineStart: "small",
+        "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counter(list-item, upper-alpha) '. '"
+            content: "counter(level1, upper-alpha) '. '"
           },
-          "& > ol > li": {
+          "& > ol[data-variant='letters'] > li": {
             _marker: {
-              content: "counter(list-item, lower-alpha) '. '"
+              content: "counter(level1, lower-alpha) '. '"
             },
-            "& li": {
+            "& > ol[data-variant='letters'] > li": {
               _marker: {
-                content: "counter(list-item, lower-roman) '. '"
+                content: "counter(level1, lower-roman) '. '"
               }
             }
           }
@@ -64,21 +106,27 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant,
     css: cssProp,
+    start,
     ...props
   } = _ref;
+  const style = useMemo(() => ({
+    "--start": start ? start - 1 : undefined
+  }), [start]);
   return /*#__PURE__*/_jsx(StyledOrderedList, {
+    "data-variant": variant,
+    "data-count": start !== undefined,
     css: css.raw(orderedListRecipe.raw({
       variant
     }), cssProp),
-    ...props,
-    ref: ref
+    style: style,
+    ref: ref,
+    ...props
   });
 });
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
+    paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {

package/es/Combobox.js

@@ -246,4 +246,7 @@ export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner",
 });
 export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger", {
   baseComponent: true
+});
+export const ComboboxList = withContext(Combobox.List, "list", {
+  baseComponent: true
 });