@ndla/primitives 0.0.18 → 0.0.19

package/dist/panda.buildinfo.json

@@ -49,16 +49,35 @@
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
+      "marginBlock]___[value:small]___[cond:& li",
+      "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",
       "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",
+      "paddingInlineStart]___[value:medium",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
+      "display]___[value:inline]___[cond:& li > *:not(ol, ul, li)",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
       "paddingInline]___[value:xsmall",
@@ -303,7 +322,6 @@
       "left]___[value:auto",
       "marginBlock]___[value:xsmall",
       "paddingInlineEnd]___[value:medium",
-      "paddingInlineStart]___[value:medium",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
       "borderRadius]___[value:small",
@@ -479,7 +497,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 +524,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",

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;
 }
@@ -748,14 +756,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;
 }
@@ -1100,6 +1112,10 @@
     border-width: 1px;
 }
 
+  .ring-c_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .ring-c_transparent {
     outline-color: transparent;
 }
@@ -1176,6 +1192,18 @@
     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;
+}
+
+  .\[\&_li_\>_\*\:not\(ol\,_ul\,_li\)\]\:d_inline li > *:not(ol, ul, li) {
+    display: inline;
+}
+
   .\[\&_dd\]\:ms_medium dd {
     margin-inline-start: var(--spacing-medium);
 }
@@ -1497,6 +1525,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 +1681,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 +1803,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 +1971,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 +2123,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 +2201,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 +2233,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 +2257,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 +2277,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) {

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,26 +106,36 @@ 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: {
         color: "icon.strong"
       }
+    },
+    "& li > *:not(ol, ul, li)": {
+      display: "inline"
     }
   }
 });

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
 });

package/es/Select.js

@@ -217,4 +217,7 @@ export const SelectTrigger = withContext(Select.Trigger, "trigger", {
 });
 export const SelectValueText = withContext(Select.ValueText, "valueText", {
   baseComponent: true
+});
+export const SelectList = withContext(Select.List, "list", {
+  baseComponent: true
 });

package/es/Tabs.js

@@ -6,12 +6,14 @@
  *
  */
 
-import { Tabs, tabsAnatomy } from "@ark-ui/react";
+import { Tabs } from "@ark-ui/react";
 import { cx, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 const tabsRecipe = sva({
-  slots: tabsAnatomy.keys(),
+  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.
+  // slots: tabsAnatomy.keys(),
+  slots: ["root", "list", "trigger", "content", "indicator"],
   base: {
     root: {
       position: "relative",
@@ -28,7 +30,7 @@ const tabsRecipe = sva({
       position: "relative",
       display: "flex",
       flexShrink: "0",
-      overflow: "auto",
+      flexWrap: "wrap",
       _horizontal: {
         flexDirection: "row"
       },
@@ -106,10 +108,9 @@ const tabsRecipe = sva({
         },
         indicator: {
           background: "transparent",
-          outline: "4px solid",
+          outline: "3px solid",
           outlineColor: "stroke.default",
-          pointerEvents: "none",
-          outlineOffset: "-4px",
+          outlineOffset: "-3px",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
@@ -121,14 +122,17 @@ const tabsRecipe = sva({
             }
           },
           _horizontal: {
-            bottom: "0",
-            height: "2",
+            top: "calc(var(--top) + var(--height) - 6px)",
+            _peerFocusVisible: {
+              top: "var(--top)"
+            },
+            height: "3",
             width: "var(--width)"
           },
           _vertical: {
             height: "var(--height)",
             left: "0",
-            width: "2"
+            width: "3"
           }
         },
         content: {

package/es/index.js

@@ -13,7 +13,7 @@ export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { FieldRoot } from "./Field";
@@ -30,7 +30,7 @@ export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./Popover";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput } from "./RadioGroup";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList } from "./Select";
 export { Skeleton } from "./Skeleton";
 export { SliderRoot, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderLabel, SliderHiddenInput } from "./Slider";
 export { Spinner } from "./Spinner";

package/lib/ArticleLists.d.ts

@@ -10,29 +10,74 @@ import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     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) '. '";
                         };
                     };
                 };

package/lib/ArticleLists.js

@@ -19,9 +19,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const orderedListRecipe = (0, _css.cva)({
   base: {
-    listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
     "& li": {
       marginBlock: "small"
     }
@@ -32,29 +29,74 @@ const orderedListRecipe = (0, _css.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) '. '"
               }
             }
           }
@@ -70,26 +112,36 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
   let {
     variant,
     css: cssProp,
+    start,
     ...props
   } = _ref;
+  const style = (0, _react.useMemo)(() => ({
+    "--start": start ? start - 1 : undefined
+  }), [start]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
+    "data-variant": variant,
+    "data-count": start !== undefined,
     css: _css.css.raw(orderedListRecipe.raw({
       variant
     }), cssProp),
-    ...props,
-    ref: ref
+    style: style,
+    ref: ref,
+    ...props
   });
 });
 const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
-    paddingInlineStart: "small",
+    paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {
         color: "icon.strong"
       }
+    },
+    "& li > *:not(ol, ul, li)": {
+      display: "inline"
     }
   }
 });

package/lib/Combobox.d.ts

@@ -88,4 +88,8 @@ export type ComboboxTriggerProps = Combobox.TriggerProps & JsxStyleProps;
 export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Combobox.TriggerProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type ComboboxListProps = Combobox.ListProps & JsxStyleProps;
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<Combobox.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Combobox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
+exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxList = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -256,4 +256,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combo
 });
 const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger", {
   baseComponent: true
+});
+const ComboboxList = exports.ComboboxList = withContext(_react.Combobox.List, "list", {
+  baseComponent: true
 });

package/lib/Select.d.ts

@@ -49,3 +49,6 @@ export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Se
 export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectList: import("react").ForwardRefExoticComponent<Select.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Select.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
+exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectList = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -224,4 +224,7 @@ const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger
 });
 const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText", {
   baseComponent: true
+});
+const SelectList = exports.SelectList = withContext(_react2.Select.List, "list", {
+  baseComponent: true
 });

package/lib/Tabs.d.ts

@@ -39,10 +39,9 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
             };
             indicator: {
                 background: "transparent";
-                outline: "4px solid";
+                outline: "3px solid";
                 outlineColor: "stroke.default";
-                pointerEvents: "none";
-                outlineOffset: "-4px";
+                outlineOffset: "-3px";
                 _peerFocusVisible: {
                     height: "var(--height)";
                     width: "var(--width)";
@@ -54,14 +53,17 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                     };
                 };
                 _horizontal: {
-                    bottom: "0";
-                    height: "2";
+                    top: "calc(var(--top) + var(--height) - 6px)";
+                    _peerFocusVisible: {
+                        top: "var(--top)";
+                    };
+                    height: "3";
                     width: "var(--width)";
                 };
                 _vertical: {
                     height: "var(--height)";
                     left: "0";
-                    width: "2";
+                    width: "3";
                 };
             };
             content: {

package/lib/Tabs.js

@@ -17,7 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const tabsRecipe = (0, _css.sva)({
-  slots: _react.tabsAnatomy.keys(),
+  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.
+  // slots: tabsAnatomy.keys(),
+  slots: ["root", "list", "trigger", "content", "indicator"],
   base: {
     root: {
       position: "relative",
@@ -34,7 +36,7 @@ const tabsRecipe = (0, _css.sva)({
       position: "relative",
       display: "flex",
       flexShrink: "0",
-      overflow: "auto",
+      flexWrap: "wrap",
       _horizontal: {
         flexDirection: "row"
       },
@@ -112,10 +114,9 @@ const tabsRecipe = (0, _css.sva)({
         },
         indicator: {
           background: "transparent",
-          outline: "4px solid",
+          outline: "3px solid",
           outlineColor: "stroke.default",
-          pointerEvents: "none",
-          outlineOffset: "-4px",
+          outlineOffset: "-3px",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
@@ -127,14 +128,17 @@ const tabsRecipe = (0, _css.sva)({
             }
           },
           _horizontal: {
-            bottom: "0",
-            height: "2",
+            top: "calc(var(--top) + var(--height) - 6px)",
+            _peerFocusVisible: {
+              top: "var(--top)"
+            },
+            height: "3",
             width: "var(--width)"
           },
           _vertical: {
             height: "var(--height)",
             left: "0",
-            width: "2"
+            width: "3"
           }
         },
         content: {

package/lib/index.d.ts

@@ -18,8 +18,8 @@ export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe }
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
-export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, } from "./Combobox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, } from "./Combobox";
+export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
 export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
@@ -49,7 +49,7 @@ export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, Popov
 export type { RadioGroupRootProps } from "./RadioGroup";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput, } from "./RadioGroup";
 export type { SelectRootProps } from "./Select";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList, } from "./Select";
 export type { SkeletonProps } from "./Skeleton";
 export { Skeleton } from "./Skeleton";
 export type { SliderRootProps } from "./Slider";

package/lib/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "ComboboxLabel", {
     return _Combobox.ComboboxLabel;
   }
 });
+Object.defineProperty(exports, "ComboboxList", {
+  enumerable: true,
+  get: function () {
+    return _Combobox.ComboboxList;
+  }
+});
 Object.defineProperty(exports, "ComboboxPositioner", {
   enumerable: true,
   get: function () {
@@ -663,6 +669,12 @@ Object.defineProperty(exports, "SelectLabel", {
     return _Select.SelectLabel;
   }
 });
+Object.defineProperty(exports, "SelectList", {
+  enumerable: true,
+  get: function () {
+    return _Select.SelectList;
+  }
+});
 Object.defineProperty(exports, "SelectPositioner", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
+  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
 }