@ndla/primitives 1.0.43-alpha.0 → 1.0.44-alpha.0

package/dist/panda.buildinfo.json

@@ -53,39 +53,42 @@
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
-      "marginBlock]___[value:small]___[cond:& > li",
+      "marginInlineStart]___[value:small",
+      "paddingInlineStart]___[value:small",
       "position]___[value:absolute]___[cond:& > li<___>_before",
-      "transform]___[value:translateX(-100%)]___[cond:& > li<___>_before",
-      "paddingInlineEnd]___[value:0.25ch]___[cond:& > li<___>_before",
+      "transform]___[value:translateX(calc(-100% + (token(spacing.small) * -1)))]___[cond:& > li<___>_before",
       "fontVariantNumeric]___[value:tabular-nums]___[cond:& > li<___>_before",
-      "marginInlineStart]___[value:3ch",
-      "marginInlineStart]___[value:2.5ch]___[cond:& > li > ol",
+      "marginBlock]___[value:small]___[cond:& li",
+      "marginInlineStart]___[value:0]___[cond:& > ol:not([data-variant='letters'])",
+      "paddingInlineStart]___[value:0]___[cond:& > ol:not([data-variant='letters'])",
       "counterReset]___[value:level1",
       "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
       "counterIncrement]___[value:level1]___[cond:& > li",
       "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_before",
       "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']",
-      "marginInlineStart]___[value:1ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "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<___>_before",
       "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']",
-      "marginInlineStart]___[value:2.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:calc(1.5ch + token(spacing.small))]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "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<___>_before",
       "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
       "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']",
-      "marginInlineStart]___[value:4.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:calc(3ch + token(spacing.small))]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > 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'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
-      "marginInlineStart]___[value:0.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol[data-variant='letters'] > li",
+      "marginInlineStart]___[value:0]___[cond:& > ol[data-variant='letters']",
+      "paddingInlineStart]___[value:0]___[cond:& > ol[data-variant='letters']",
       "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_before",
       "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_before",
       "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_before",
       "listStyle]___[value:revert",
-      "paddingInlineStart]___[value:3ch",
-      "marginBlock]___[value:small]___[cond:& li",
+      "marginInlineStart]___[value:medium",
+      "marginInlineStart]___[value:0]___[cond:&  ul",
+      "paddingInlineStart]___[value:small]___[cond:& li",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
@@ -325,7 +328,7 @@
       "padding]___[value:medium",
       "clear]___[value:both",
       "padding]___[value:medium]___[cond:_open",
-      "marginBlockEnd]___[value:-xxsmall]___[cond:_open<___>& summary",
+      "marginBlockEnd]___[value:-xxsmall]___[cond:_open<___>& summary, [data-embed-type='expandable-box-summary']",
       "margin]___[value:-medium",
       "textStyle]___[value:label.large!",
       "display]___[value:inline!]___[cond:& > *",
@@ -348,7 +351,6 @@
       "marginBlock]___[value:xsmall",
       "marginInlineEnd]___[value:medium",
       "marginInlineEnd]___[value:0]___[cond:tabletDown",
-      "marginInlineStart]___[value:medium",
       "marginInlineStart]___[value:0]___[cond:tabletDown",
       "marginInlineStart]___[value:0",
       "marginInlineEnd]___[value:0",

package/dist/styles.css

@@ -170,8 +170,12 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .ms_3ch {
-    margin-inline-start: 3ch;
+  .ms_small {
+    margin-inline-start: var(--spacing-small);
+}
+
+  .ps_small {
+    padding-inline-start: var(--spacing-small);
 }
 
   .counter-reset_level1 {
@@ -182,8 +186,8 @@
     list-style: revert;
 }
 
-  .ps_3ch {
-    padding-inline-start: 3ch;
+  .ms_medium {
+    margin-inline-start: var(--spacing-medium);
 }
 
   .px_xsmall {
@@ -560,10 +564,6 @@
     margin-inline-end: var(--spacing-medium);
 }
 
-  .ms_medium {
-    margin-inline-start: var(--spacing-medium);
-}
-
   .ms_0 {
     margin-inline-start: 0;
 }
@@ -1477,12 +1477,16 @@
     animation: var(--animations-collapse-out);
 }
 
-  .\[\&_\>_li\]\:my_small > li {
+  .\[\&_li\]\:my_small li {
     margin-block: var(--spacing-small);
 }
 
-  .\[\&_\>_li_\>_ol\]\:ms_2\.5ch > li > ol {
-    margin-inline-start: 2.5ch;
+  .\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_0 > ol:not([data-variant='letters']) {
+    margin-inline-start: 0;
+}
+
+  .\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ps_0 > ol:not([data-variant='letters']) {
+    padding-inline-start: 0;
 }
 
   .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
@@ -1493,8 +1497,20 @@
     counter-increment: level1;
 }
 
-  .\[\&_li\]\:my_small li {
-    margin-block: var(--spacing-small);
+  .\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ms_0 > ol[data-variant='letters'] {
+    margin-inline-start: 0;
+}
+
+  .\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ps_0 > ol[data-variant='letters'] {
+    padding-inline-start: 0;
+}
+
+  .\[\&__ul\]\:ms_0  ul {
+    margin-inline-start: 0;
+}
+
+  .\[\&_li\]\:ps_small li {
+    padding-inline-start: var(--spacing-small);
 }
 
   .\[\&_dd\]\:ms_medium dd {
@@ -2394,12 +2410,8 @@
     position: absolute;
 }
 
-  .\[\&_\>_li\]\:before\:trf_translateX\(-100\%\) > li::before {
-    transform: translateX(-100%);
-}
-
-  .\[\&_\>_li\]\:before\:pe_0\.25ch > li::before {
-    padding-inline-end: 0.25ch;
+  .\[\&_\>_li\]\:before\:trf_translateX\(calc\(-100\%_\+_\(token\(spacing\.small\)_\*_-1\)\)\) > li::before {
+    transform: translateX(calc(-100% + (var(--spacing-small) * -1)));
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
@@ -2482,7 +2494,7 @@
     transform: rotate(180deg);
 }
 
-  .open\:\[\&_summary\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary {
+  .open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary,.open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) [data-embed-type='expandable-box-summary'] {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
 
@@ -2692,8 +2704,8 @@
     counter-reset: level2 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_1ch > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: 1ch;
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_small > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: var(--spacing-small);
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
@@ -2752,8 +2764,8 @@
     counter-reset: level3 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_2\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: 2.5ch;
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_calc\(1\.5ch_\+_token\(spacing\.small\)\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: calc(1.5ch + var(--spacing-small));
 }
 
   .\[\&_\>_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 {
@@ -2772,18 +2784,14 @@
     counter-reset: level4 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_4\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: 4.5ch;
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_calc\(3ch_\+_token\(spacing\.small\)\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: calc(3ch + var(--spacing-small));
 }
 
   .\[\&_\>_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 {
     counter-increment: level4;
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_0\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol[data-variant='letters'] > li {
-    margin-inline-start: 0.5ch;
-}
-
   .\[\&_\>_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 {
     content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
 }

package/es/ArticleLists.js

@@ -17,18 +17,17 @@ const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
 const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
 const orderedListRecipe = cva({
   base: {
+    marginInlineStart: "small",
+    paddingInlineStart: "small",
     [LIST_ITEM]: {
-      marginBlock: "small",
       _before: {
         position: "absolute",
-        transform: "translateX(-100%)",
-        paddingInlineEnd: "0.25ch",
+        transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
         fontVariantNumeric: "tabular-nums"
       }
     },
-    marginInlineStart: "3ch",
-    "& > li > ol": {
-      marginInlineStart: "2.5ch"
+    "& li": {
+      marginBlock: "small"
     }
   },
   defaultVariants: {
@@ -37,6 +36,10 @@ const orderedListRecipe = cva({
   variants: {
     variant: {
       numbers: {
+        [NUMBER_LIST]: {
+          marginInlineStart: "0",
+          paddingInlineStart: "0"
+        },
         counterReset: "level1",
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
@@ -52,7 +55,7 @@ const orderedListRecipe = cva({
               counterReset: "level2 var(--start, 0)"
             },
             [LIST_ITEM]: {
-              marginInlineStart: "1ch",
+              marginInlineStart: "small",
               counterIncrement: "level2",
               _before: {
                 content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
@@ -63,7 +66,7 @@ const orderedListRecipe = cva({
                   counterReset: "level3 var(--start, 0)"
                 },
                 [LIST_ITEM]: {
-                  marginInlineStart: "2.5ch",
+                  marginInlineStart: "calc(1.5ch + token(spacing.small))",
                   counterIncrement: "level3",
                   _before: {
                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
@@ -74,13 +77,10 @@ const orderedListRecipe = cva({
                       counterReset: "level4 var(--start, 0)"
                     },
                     [LIST_ITEM]: {
-                      marginInlineStart: "4.5ch",
+                      marginInlineStart: "calc(3ch + token(spacing.small))",
                       counterIncrement: "level4",
                       _before: {
                         content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
-                      },
-                      [LETTER_LIST_ITEM]: {
-                        marginInlineStart: "0.5ch"
                       }
                     }
                   }
@@ -95,6 +95,10 @@ const orderedListRecipe = cva({
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
         },
+        [LETTER_LIST]: {
+          marginInlineStart: "0",
+          paddingInlineStart: "0"
+        },
         [LIST_ITEM]: {
           counterIncrement: "level1",
           _before: {
@@ -129,6 +133,7 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
     "--start": start ? start - 1 : undefined
   }), [start]);
   return /*#__PURE__*/_jsx(StyledOrderedList, {
+    "data-embed-type": "ordered-list",
     "data-variant": variant,
     "data-count": start !== undefined,
     css: css.raw(orderedListRecipe.raw({
@@ -142,9 +147,14 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
-    paddingInlineStart: "3ch",
+    marginInlineStart: "medium",
+    paddingInlineStart: "small",
+    "&  ul": {
+      marginInlineStart: "0"
+    },
     "& li": {
       marginBlock: "small",
+      paddingInlineStart: "small",
       _marker: {
         color: "icon.strong"
       }

package/es/ExpandableBox.js

@@ -6,9 +6,11 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-export const ExpandableBox = styled("details", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledExpandableBox = styled(ark.details, {
   base: {
     transitionDuration: "fast",
     width: "100%",
@@ -20,13 +22,20 @@ export const ExpandableBox = styled("details", {
     clear: "both",
     _open: {
       padding: "medium",
-      "& summary": {
+      "& summary, [data-embed-type='expandable-box-summary']": {
         marginBlockEnd: "-xxsmall"
       }
     }
   }
+}, {
+  baseComponent: true
 });
-export const ExpandableBoxSummary = styled(ark.summary, {
+export const ExpandableBox = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledExpandableBox, {
+  ...props,
+  "data-embed-type": "expandable-box",
+  ref: ref
+}));
+const StyledExpandableBoxSummary = styled(ark.summary, {
   base: {
     cursor: "pointer",
     margin: "-medium",
@@ -42,4 +51,9 @@ export const ExpandableBoxSummary = styled(ark.summary, {
   }
 }, {
   baseComponent: true
-});
+});
+export const ExpandableBoxSummary = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledExpandableBoxSummary, {
+  ...props,
+  "data-embed-type": "expandable-box-summary",
+  ref: ref
+}));

package/lib/ArticleLists.d.ts

@@ -10,6 +10,10 @@ import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         numbers: {
+            "& > ol:not([data-variant='letters'])": {
+                marginInlineStart: "0";
+                paddingInlineStart: "0";
+            };
             counterReset: "level1";
             "&[data-count='true']": {
                 counterReset: "level1 var(--start, 0)";
@@ -25,7 +29,7 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                         counterReset: "level2 var(--start, 0)";
                     };
                     "& > li": {
-                        marginInlineStart: "1ch";
+                        marginInlineStart: "small";
                         counterIncrement: "level2";
                         _before: {
                             content: "counter(level1, decimal) '.' counter(level2, decimal) '. '";
@@ -36,7 +40,7 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                                 counterReset: "level3 var(--start, 0)";
                             };
                             "& > li": {
-                                marginInlineStart: "2.5ch";
+                                marginInlineStart: "calc(1.5ch + token(spacing.small))";
                                 counterIncrement: "level3";
                                 _before: {
                                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '";
@@ -47,14 +51,11 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                                         counterReset: "level4 var(--start, 0)";
                                     };
                                     "& > li": {
-                                        marginInlineStart: "4.5ch";
+                                        marginInlineStart: "calc(3ch + token(spacing.small))";
                                         counterIncrement: "level4";
                                         _before: {
                                             content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '";
                                         };
-                                        "& > ol[data-variant='letters'] > li": {
-                                            marginInlineStart: "0.5ch";
-                                        };
                                     };
                                 };
                             };
@@ -68,6 +69,10 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
             "&[data-count='true']": {
                 counterReset: "level1 var(--start, 0)";
             };
+            "& > ol[data-variant='letters']": {
+                marginInlineStart: "0";
+                paddingInlineStart: "0";
+            };
             "& > li": {
                 counterIncrement: "level1";
                 _before: {

package/lib/ArticleLists.js

@@ -23,18 +23,17 @@ const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
 const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
 const orderedListRecipe = (0, _css.cva)({
   base: {
+    marginInlineStart: "small",
+    paddingInlineStart: "small",
     [LIST_ITEM]: {
-      marginBlock: "small",
       _before: {
         position: "absolute",
-        transform: "translateX(-100%)",
-        paddingInlineEnd: "0.25ch",
+        transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
         fontVariantNumeric: "tabular-nums"
       }
     },
-    marginInlineStart: "3ch",
-    "& > li > ol": {
-      marginInlineStart: "2.5ch"
+    "& li": {
+      marginBlock: "small"
     }
   },
   defaultVariants: {
@@ -43,6 +42,10 @@ const orderedListRecipe = (0, _css.cva)({
   variants: {
     variant: {
       numbers: {
+        [NUMBER_LIST]: {
+          marginInlineStart: "0",
+          paddingInlineStart: "0"
+        },
         counterReset: "level1",
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
@@ -58,7 +61,7 @@ const orderedListRecipe = (0, _css.cva)({
               counterReset: "level2 var(--start, 0)"
             },
             [LIST_ITEM]: {
-              marginInlineStart: "1ch",
+              marginInlineStart: "small",
               counterIncrement: "level2",
               _before: {
                 content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
@@ -69,7 +72,7 @@ const orderedListRecipe = (0, _css.cva)({
                   counterReset: "level3 var(--start, 0)"
                 },
                 [LIST_ITEM]: {
-                  marginInlineStart: "2.5ch",
+                  marginInlineStart: "calc(1.5ch + token(spacing.small))",
                   counterIncrement: "level3",
                   _before: {
                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
@@ -80,13 +83,10 @@ const orderedListRecipe = (0, _css.cva)({
                       counterReset: "level4 var(--start, 0)"
                     },
                     [LIST_ITEM]: {
-                      marginInlineStart: "4.5ch",
+                      marginInlineStart: "calc(3ch + token(spacing.small))",
                       counterIncrement: "level4",
                       _before: {
                         content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
-                      },
-                      [LETTER_LIST_ITEM]: {
-                        marginInlineStart: "0.5ch"
                       }
                     }
                   }
@@ -101,6 +101,10 @@ const orderedListRecipe = (0, _css.cva)({
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
         },
+        [LETTER_LIST]: {
+          marginInlineStart: "0",
+          paddingInlineStart: "0"
+        },
         [LIST_ITEM]: {
           counterIncrement: "level1",
           _before: {
@@ -135,6 +139,7 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
     "--start": start ? start - 1 : undefined
   }), [start]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
+    "data-embed-type": "ordered-list",
     "data-variant": variant,
     "data-count": start !== undefined,
     css: _css.css.raw(orderedListRecipe.raw({
@@ -148,9 +153,14 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
 const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
-    paddingInlineStart: "3ch",
+    marginInlineStart: "medium",
+    paddingInlineStart: "small",
+    "&  ul": {
+      marginInlineStart: "0"
+    },
     "& li": {
       marginBlock: "small",
+      paddingInlineStart: "small",
       _marker: {
         color: "icon.strong"
       }

package/lib/ExpandableBox.d.ts

@@ -8,8 +8,10 @@
 import { HTMLArkProps } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 export type ExpandableBoxProps = HTMLArkProps<"details"> & JsxStyleProps;
-export declare const ExpandableBox: import("@ndla/styled-system/types").StyledComponent<"details", {}>;
+export declare const ExpandableBox: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDetailsElement>>;
 export type ExpandableBoxSummaryProps = HTMLArkProps<"summary"> & JsxStyleProps;
-export declare const ExpandableBoxSummary: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ExpandableBoxSummary: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;

package/lib/ExpandableBox.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandableBoxSummary = exports.ExpandableBox = void 0;
-var _react = require("@ark-ui/react");
-var _jsx = require("@ndla/styled-system/jsx");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -14,7 +16,7 @@ var _jsx = require("@ndla/styled-system/jsx");
  *
  */
 
-const ExpandableBox = exports.ExpandableBox = (0, _jsx.styled)("details", {
+const StyledExpandableBox = (0, _jsx2.styled)(_react2.ark.details, {
   base: {
     transitionDuration: "fast",
     width: "100%",
@@ -26,13 +28,20 @@ const ExpandableBox = exports.ExpandableBox = (0, _jsx.styled)("details", {
     clear: "both",
     _open: {
       padding: "medium",
-      "& summary": {
+      "& summary, [data-embed-type='expandable-box-summary']": {
         marginBlockEnd: "-xxsmall"
       }
     }
   }
+}, {
+  baseComponent: true
 });
-const ExpandableBoxSummary = exports.ExpandableBoxSummary = (0, _jsx.styled)(_react.ark.summary, {
+const ExpandableBox = exports.ExpandableBox = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBox, {
+  ...props,
+  "data-embed-type": "expandable-box",
+  ref: ref
+}));
+const StyledExpandableBoxSummary = (0, _jsx2.styled)(_react2.ark.summary, {
   base: {
     cursor: "pointer",
     margin: "-medium",
@@ -48,4 +57,9 @@ const ExpandableBoxSummary = exports.ExpandableBoxSummary = (0, _jsx.styled)(_re
   }
 }, {
   baseComponent: true
-});
+});
+const ExpandableBoxSummary = exports.ExpandableBoxSummary = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBoxSummary, {
+  ...props,
+  "data-embed-type": "expandable-box-summary",
+  ref: ref
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.43-alpha.0",
+  "version": "1.0.44-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^4.1.1",
-    "@ndla/styled-system": "^0.0.23",
+    "@ndla/styled-system": "^0.0.24",
     "@ndla/util": "^5.0.0-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.38",
+    "@ndla/preset-panda": "^0.0.39",
     "@pandacss/dev": "^0.46.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "58ee18eab14c58d6e75fb4074f7a1f39dd538957"
+  "gitHead": "98f727d2e22b4030ec61672a8f843b2d0d0ef278"
 }