@ndla/primitives 0.0.17 → 0.0.19

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: {
@@ -201,7 +205,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tabsRecipe);
-const InternalTabsRoot = withProvider(Tabs.Root, "root");
+const InternalTabsRoot = withProvider(Tabs.Root, "root", {
+  baseComponent: true
+});
 export const TabsRoot = _ref => {
   let {
     lazyMount = true,
@@ -214,10 +220,18 @@ export const TabsRoot = _ref => {
     ...props
   });
 };
-export const TabsContent = withContext(Tabs.Content, "content");
-export const TabsIndicator = withContext(Tabs.Indicator, "indicator");
-export const TabsList = withContext(Tabs.List, "list");
-const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger");
+export const TabsContent = withContext(Tabs.Content, "content", {
+  baseComponent: true
+});
+export const TabsIndicator = withContext(Tabs.Indicator, "indicator", {
+  baseComponent: true
+});
+export const TabsList = withContext(Tabs.List, "list", {
+  baseComponent: true
+});
+const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger", {
+  baseComponent: true
+});
 export const TabsTrigger = _ref2 => {
   let {
     className,

package/es/TagsInput.js

@@ -94,15 +94,33 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tagsInputRecipe);
-export const TagsInputRoot = withProvider(TagsInput.Root, "root");
-export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger");
-export const TagsInputControl = withContext(TagsInput.Control, "control");
-export const TagsInputInput = withContext(TagsInput.Input, "input");
-export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger");
-export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput");
-export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview");
-export const TagsInputItem = withContext(TagsInput.Item, "item");
-export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText");
+export const TagsInputRoot = withProvider(TagsInput.Root, "root", {
+  baseComponent: true
+});
+export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const TagsInputControl = withContext(TagsInput.Control, "control", {
+  baseComponent: true
+});
+export const TagsInputInput = withContext(TagsInput.Input, "input", {
+  baseComponent: true
+});
+export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", {
+  baseComponent: true
+});
+export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput", {
+  baseComponent: true
+});
+export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview", {
+  baseComponent: true
+});
+export const TagsInputItem = withContext(TagsInput.Item, "item", {
+  baseComponent: true
+});
+export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalTagsInputLabel = withContext(TagsInput.Label, "label");
 export const TagsInputLabel = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/Toast.js

@@ -44,9 +44,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(toastRecipe);
-export const ToastRoot = withProvider(Toast.Root, "root");
-export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger");
-export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger");
+export const ToastRoot = withProvider(Toast.Root, "root", {
+  baseComponent: true
+});
+export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger", {
+  baseComponent: true
+});
+export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
 const InternalToastDescription = withContext(Toast.Description, "description");
 export const ToastDescription = _ref => {
   let {

package/es/Tooltip.js

@@ -36,9 +36,15 @@ const {
   withContext
 } = createStyleContext(tooltipRecipe);
 export const TooltipRoot = withRootProvider(Tooltip.Root);
-export const TooltipArrow = withContext(Tooltip.Arrow, "arrow");
-export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip");
-export const TooltipContentStandalone = withContext(Tooltip.Content, "content");
+export const TooltipArrow = withContext(Tooltip.Arrow, "arrow", {
+  baseComponent: true
+});
+export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+export const TooltipContentStandalone = withContext(Tooltip.Content, "content", {
+  baseComponent: true
+});
 export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -54,5 +60,9 @@ export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     })
   });
 });
-export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner");
-export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger");
+export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner", {
+  baseComponent: true
+});
+export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger", {
+  baseComponent: true
+});

package/es/createStyleContext.js

@@ -29,11 +29,8 @@ export const createStyleContext = recipe => {
     };
     return StyledComponent;
   };
-  const withProvider = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref, ref) => {
       let {
         css: cssProp,
@@ -51,11 +48,8 @@ export const createStyleContext = recipe => {
       });
     });
   };
-  const withContext = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withContext = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref2, ref) => {
       let {
         css: cssProp,

package/es/index.js

@@ -11,8 +11,9 @@ export { OrderedList, UnOrderedList, DefinitionList } from "./ArticleLists";
 export { Badge } from "./Badge";
 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";
@@ -20,7 +21,7 @@ export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
-export { Picture, Img, Image } from "./Image";
+export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";
@@ -29,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/Accordion.d.ts

@@ -6,10 +6,48 @@
  *
  */
 import { Accordion } from "@ark-ui/react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+declare const accordionRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator", {
+    variant: {
+        clean: {};
+        bordered: {
+            itemTrigger: {
+                paddingInline: "medium";
+                paddingBlock: "medium";
+                width: "100%";
+                borderRadius: "xsmall";
+                boxShadowColor: "stroke.subtle";
+                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
+                _hover: {
+                    background: "surface.actionSubtle.hover";
+                    boxShadowColor: "stroke.hover";
+                };
+                _open: {
+                    backgroundColor: "surface.actionSubtle.active";
+                    boxShadowColor: "stroke.default";
+                    borderBottomRadius: "sharp";
+                };
+                _focusVisible: {
+                    outline: "none";
+                    boxShadowColor: "stroke.default";
+                    boxShadow: "inset 0 0 0 2px var(--shadow-color)";
+                };
+            };
+            itemContent: {
+                borderBottomRadius: "xsmall";
+                borderWidth: "0 1px 1px";
+                borderStyle: "solid";
+                borderColor: "stroke.default";
+            };
+        };
+    };
+}>;
+export type AccordionVariantProps = RecipeVariantProps<typeof accordionRecipe>;
 export interface AccordionRootProps extends JsxStyleProps, Accordion.RootProps {
 }
-export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & {
+    variant?: "bordered" | "clean" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -22,3 +60,4 @@ export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
 export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Accordion.js

@@ -29,21 +29,15 @@ const accordionRecipe = (0, _css.sva)({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -51,20 +45,6 @@ const accordionRecipe = (0, _css.sva)({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -79,21 +59,59 @@ const accordionRecipe = (0, _css.sva)({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -101,8 +119,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(accordionRecipe);
-const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root");
-const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent");
-const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator");
-const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item");
-const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger");
+const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root", {
+  baseComponent: true
+});
+const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item", {
+  baseComponent: true
+});
+const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});

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/Badge.d.ts

@@ -29,6 +29,7 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     };
 }>;
 export type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
+export type BadgeVariant = NonNullable<BadgeVariantProps>["colorTheme"];
 export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps;
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;