@ndla/primitives 1.0.0-alpha.0 → 1.0.2-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.42.0",
+  "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
       "display]___[value:flex",
@@ -81,6 +81,7 @@
       "paddingInline]___[value:xsmall",
       "border]___[value:1px solid",
       "width]___[value:fit-content",
+      "color]___[value:text.default",
       "backgroundColor]___[value:surface.brand.1.subtle",
       "borderColor]___[value:surface.brand.1.strong",
       "backgroundColor]___[value:surface.brand.2.moderate",
@@ -156,7 +157,6 @@
       "outlineOffset]___[value:4xsmall]___[cond:_focus",
       "outlineColor]___[value:stroke.default]___[cond:_focus",
       "borderRadius]___[value:xsmall]___[cond:_focus",
-      "color]___[value:text.default",
       "gap]___[value:4xsmall",
       "background]___[value:surface.actionSubtle",
       "outlineColor]___[value:stroke.subtle",
@@ -297,6 +297,7 @@
       "paddingBlockStart]___[value:small",
       "paddingBlockEnd]___[value:medium",
       "padding]___[value:medium",
+      "clear]___[value:both",
       "padding]___[value:medium]___[cond:_open",
       "marginBlockEnd]___[value:-xxsmall]___[cond:_open<___>& summary",
       "margin]___[value:-medium",
@@ -581,7 +582,32 @@
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
-      "objectFit]___[value:cover"
+      "objectFit]___[value:cover",
+      "transitionProperty]___[value:background-color, border-color",
+      "transitionDuration]___[value:superFast",
+      "transitionTimingFunction]___[value:ease-in-out",
+      "background]___[value:surface.brand.1.subtle]___[cond:_hover",
+      "background]___[value:surface.brand.1.subtle]___[cond:_highlighted",
+      "borderBlock]___[value:1px solid",
+      "borderColor]___[value:stroke.hover]___[cond:_highlighted",
+      "borderTop]___[value:1px solid",
+      "borderTopColor]___[value:stroke.subtle",
+      "borderBottom]___[value:1px solid",
+      "borderBottomColor]___[value:transparent",
+      "marginTop]___[value:-1px",
+      "borderTopColor]___[value:transparent]___[cond:_first",
+      "borderTopColor]___[value:stroke.hover]___[cond:_first<___>_hover",
+      "borderTopColor]___[value:stroke.hover]___[cond:_first<___>_highlighted",
+      "borderBottomColor]___[value:stroke.subtle]___[cond:_last",
+      "borderTopColor]___[value:stroke.hover]___[cond:&:hover + &",
+      "borderTopColor]___[value:stroke.hover]___[cond:&[data-highlighted] + &",
+      "borderBottomColor]___[value:transparent]___[cond:_hover",
+      "borderTopColor]___[value:stroke.hover]___[cond:_hover",
+      "borderBottomColor]___[value:stroke.hover]___[cond:_hover<___>_last",
+      "borderTopColor]___[value:stroke.hover]___[cond:_highlighted",
+      "borderBottomColor]___[value:stroke.hover]___[cond:_highlighted<___>_last",
+      "height]___[value:40px",
+      "width]___[value:56px"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -182,6 +182,10 @@
     width: fit-content;
 }
 
+  .c_text\.default {
+    color: var(--colors-text-default);
+}
+
   .bd-s_4px_solid {
     border-inline-start: 4px solid;
 }
@@ -292,10 +296,6 @@
     gap: var(--spacing-xxsmall);
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
-}
-
   .gap_4xsmall {
     gap: var(--spacing-4xsmall);
 }
@@ -508,6 +508,10 @@
     padding: var(--spacing-medium);
 }
 
+  .clear_both {
+    clear: both;
+}
+
   .m_-medium {
     margin: calc(var(--spacing-medium) * -1);
 }
@@ -873,6 +877,26 @@
     object-fit: cover;
 }
 
+  .bd-y_1px_solid {
+    border-block: 1px solid;
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .h_40px {
+    height: 40px;
+}
+
+  .w_56px {
+    width: 56px;
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -1172,6 +1196,33 @@
     right: var(--spacing-xxsmall);
 }
 
+  .trs-prop_background-color\,_border-color {
+    --transition-prop: background-color, border-color;
+    transition-property: background-color, border-color;
+}
+
+  .trs-dur_superFast {
+    --transition-duration: var(--durations-super-fast);
+    transition-duration: var(--durations-super-fast);
+}
+
+  .trs-tmf_ease-in-out {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .bd-t-c_stroke\.subtle {
+    border-top-color: var(--colors-stroke-subtle);
+}
+
+  .bd-b-c_transparent {
+    border-bottom-color: transparent;
+}
+
+  .mt_-1px {
+    margin-top: -1px;
+}
+
   .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     cursor: not-allowed;
 }
@@ -1566,6 +1617,10 @@
     display: inline-block;
 }
 
+  .highlighted\:bg_surface\.brand\.1\.subtle[data-highlighted] {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
   .closed\:trs-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
@@ -1718,6 +1773,26 @@
     outline-color: var(--colors-stroke-hover);
 }
 
+  .highlighted\:bd-c_stroke\.hover[data-highlighted] {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .first\:bd-t-c_transparent:first-child {
+    border-top-color: transparent;
+}
+
+  .last\:bd-b-c_stroke\.subtle:last-child {
+    border-bottom-color: var(--colors-stroke-subtle);
+}
+
+  :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-t-c_stroke\.hover)[data-highlighted] + :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-t-c_stroke\.hover) {
+    border-top-color: var(--colors-stroke-hover);
+}
+
+  .highlighted\:bd-t-c_stroke\.hover[data-highlighted] {
+    border-top-color: var(--colors-stroke-hover);
+}
+
   .focusWithin\:ring-o_-1px:focus-within {
     outline-offset: -1px;
 }
@@ -1932,6 +2007,10 @@
     transform: translateX(20%);
 }
 
+  .hover\:bg_surface\.brand\.1\.subtle:is(:hover, [data-hover]) {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
   .hover\:bd-c_stroke\.hover:is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-hover);
 }
@@ -1944,6 +2023,18 @@
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
+  .\[\&\:hover_\+_\&\]\:bd-t-c_stroke\.hover:hover + .\[\&\:hover_\+_\&\]\:bd-t-c_stroke\.hover {
+    border-top-color: var(--colors-stroke-hover);
+}
+
+  .hover\:bd-b-c_transparent:is(:hover, [data-hover]) {
+    border-bottom-color: transparent;
+}
+
+  .hover\:bd-t-c_stroke\.hover:is(:hover, [data-hover]) {
+    border-top-color: var(--colors-stroke-hover);
+}
+
   .active\:c_text\.onAction:is(:active, [data-active]) {
     color: var(--colors-text-on-action);
 }
@@ -2222,6 +2313,18 @@
     top: var(--top);
 }
 
+  .first\:hover\:bd-t-c_stroke\.hover:first-child:is(:hover, [data-hover]) {
+    border-top-color: var(--colors-stroke-hover);
+}
+
+  .first\:highlighted\:bd-t-c_stroke\.hover:first-child[data-highlighted] {
+    border-top-color: var(--colors-stroke-hover);
+}
+
+  .highlighted\:last\:bd-b-c_stroke\.hover[data-highlighted]:last-child {
+    border-bottom-color: var(--colors-stroke-hover);
+}
+
   .focusWithin\:hover\:ring-c_stroke\.default:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -2250,6 +2353,10 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .hover\:last\:bd-b-c_stroke\.hover:is(:hover, [data-hover]):last-child {
+    border-bottom-color: var(--colors-stroke-hover);
+}
+
   .\[\&_\>_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);
 }

package/es/Badge.js

@@ -16,7 +16,8 @@ const badgeRecipe = cva({
     paddingInline: "xsmall",
     borderRadius: "xsmall",
     border: "1px solid",
-    width: "fit-content"
+    width: "fit-content",
+    color: "text.default"
   },
   defaultVariants: {
     colorTheme: "neutral"

package/es/Card/Card.js

@@ -25,6 +25,7 @@ const cardRecipe = sva({
       transitionProperty: "background, color",
       transitionTimingFunction: "default",
       background: "surface.default",
+      overflow: "hidden",
       _hover: {
         background: "surface.actionSubtle.hover",
         borderColor: "stroke.hover"

package/es/Dialog.js

@@ -71,7 +71,8 @@ const dialogRecipe = sva({
   },
   defaultVariants: {
     size: "medium",
-    position: "center"
+    position: "center",
+    variant: "dialog"
   },
   compoundVariants: [{
     variant: "drawer",
@@ -314,8 +315,12 @@ export const DialogTitle = _ref3 => {
     })
   });
 };
-export const DialogTrigger = Dialog.Trigger;
-export const DialogCloseTrigger = Dialog.CloseTrigger;
+export const DialogTrigger = withContext(Dialog.Trigger, "trigger", {
+  baseComponent: true
+});
+export const DialogCloseTrigger = withContext(Dialog.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
 export const DialogHeader = styled("div", {
   base: {
     display: "flex",

package/es/ExpandableBox.js

@@ -17,6 +17,7 @@ export const ExpandableBox = styled("details", {
     borderRadius: "xsmall",
     borderColor: "stroke.subtle",
     padding: "medium",
+    clear: "both",
     _open: {
       padding: "medium",
       "& summary": {

package/es/Figure.js

@@ -99,7 +99,7 @@ const StyledFigure = styled(ark.figure, {}, {
 });
 export const Figure = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    size,
+    size = "medium",
     float,
     css: cssProp,
     ...props

package/es/FramedContent.js

@@ -15,7 +15,8 @@ const framedContentRecipe = cva({
   base: {
     padding: "medium",
     border: "1px solid",
-    borderRadius: "small"
+    borderRadius: "small",
+    clear: "both"
   },
   variants: {
     colorTheme: {

package/es/Image.js

@@ -77,6 +77,7 @@ export const Image = /*#__PURE__*/forwardRef((_ref3, ref) => {
   } = _ref3;
   const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  const fallbackSrc = src ? `${src}?${queryString}` : src;
   return /*#__PURE__*/_jsxs("picture", {
     children: [contentType !== "image/gif" && /*#__PURE__*/_jsx("source", {
       type: contentType,
@@ -84,7 +85,7 @@ export const Image = /*#__PURE__*/forwardRef((_ref3, ref) => {
       sizes: sizes
     }), /*#__PURE__*/_jsx(styled.img, {
       alt: alt,
-      src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+      src: contentType === "image/gif" ? src : fallbackSrc,
       ...props,
       ref: ref
     })]

package/es/Label.js

@@ -86,9 +86,17 @@ export const Label = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ref: ref
   });
 });
-export const FieldLabel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Label, {
-  asChild: true,
-  ...props,
-  ref: ref,
-  children: /*#__PURE__*/_jsx(Label, {})
-}));
+export const FieldLabel = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/_jsx(Field.Label, {
+    asChild: true,
+    ...props,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Label, {
+      children: children
+    })
+  });
+});

package/es/ListItem/ListItem.js

@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "../createStyleContext";
+import { Image } from "../Image";
+import { Heading } from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const listItemRecipe = sva({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "xsmall",
+      alignItems: "center",
+      paddingBlock: "xsmall",
+      paddingInline: "xsmall",
+      transitionProperty: "background-color, border-color",
+      transitionDuration: "superFast",
+      transitionTimingFunction: "ease-in-out",
+      _hover: {
+        background: "surface.brand.1.subtle"
+      },
+      _highlighted: {
+        background: "surface.brand.1.subtle"
+      }
+    },
+    content: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: "xsmall",
+      width: "100%"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "40px",
+      width: "56px",
+      borderRadius: "xsmall",
+      objectFit: "cover"
+    }
+  },
+  defaultVariants: {
+    variant: "standalone"
+  },
+  variants: {
+    variant: {
+      standalone: {
+        root: {
+          borderBlock: "1px solid",
+          borderColor: "stroke.subtle",
+          _hover: {
+            borderColor: "stroke.hover"
+          },
+          _highlighted: {
+            borderColor: "stroke.hover"
+          }
+        }
+      },
+      list: {
+        root: {
+          borderTop: "1px solid",
+          borderTopColor: "stroke.subtle",
+          borderBottom: "1px solid",
+          borderBottomColor: "transparent",
+          marginTop: "-1px",
+          _first: {
+            borderTopColor: "transparent",
+            _hover: {
+              borderTopColor: "stroke.hover"
+            },
+            _highlighted: {
+              borderTopColor: "stroke.hover"
+            }
+          },
+          _last: {
+            borderBottomColor: "stroke.subtle"
+          },
+          "&:hover + &": {
+            borderTopColor: "stroke.hover"
+          },
+          "&[data-highlighted] + &": {
+            borderTopColor: "stroke.hover"
+          },
+          _hover: {
+            borderBottomColor: "transparent",
+            borderTopColor: "stroke.hover",
+            _last: {
+              borderBottomColor: "stroke.hover"
+            }
+          },
+          _highlighted: {
+            borderTopColor: "stroke.hover",
+            _last: {
+              borderBottomColor: "stroke.hover"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(listItemRecipe);
+export const ListItemRoot = withProvider(ark.div, "root", {
+  baseComponent: true
+});
+const InternalListItemHeading = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Heading, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+export const ListItemHeading = withContext(InternalListItemHeading, "title");
+export const ListItemContent = withContext(ark.div, "content", {
+  baseComponent: true
+});
+export const ListItemImage = withContext(Image, "image");

package/es/RadioGroup.js

@@ -126,6 +126,7 @@ export const InternalRadioGroupLabel = withContext(RadioGroup.Label, "label");
 export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    children,
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
@@ -133,7 +134,8 @@ export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...props,
     asChild: true,
     children: /*#__PURE__*/_jsx(Label, {
-      textStyle: textStyle
+      textStyle: textStyle,
+      children: children
     })
   });
 });

package/es/index.js

@@ -25,6 +25,7 @@ export { Hero, HeroBackground, HeroContent } from "./Hero";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
+export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";
 export { MessageBox } from "./MessageBox";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";

package/lib/Badge.js

@@ -22,7 +22,8 @@ const badgeRecipe = (0, _css.cva)({
     paddingInline: "xsmall",
     borderRadius: "xsmall",
     border: "1px solid",
-    width: "fit-content"
+    width: "fit-content",
+    color: "text.default"
   },
   defaultVariants: {
     colorTheme: "neutral"

package/lib/Card/Card.js

@@ -31,6 +31,7 @@ const cardRecipe = (0, _css.sva)({
       transitionProperty: "background, color",
       transitionTimingFunction: "default",
       background: "surface.default",
+      overflow: "hidden",
       _hover: {
         background: "surface.actionSubtle.hover",
         borderColor: "stroke.hover"

package/lib/Dialog.d.ts

@@ -108,8 +108,12 @@ export declare const DialogContent: import("react").ForwardRefExoticComponent<Di
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogDescription: ({ textStyle, children, ...rest }: Dialog.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogTitle: ({ textStyle, children, ...rest }: Dialog.TitleProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const DialogCloseTrigger: import("react").ForwardRefExoticComponent<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<{
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogCloseTrigger: import("react").ForwardRefExoticComponent<{
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogHeader: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
 export declare const DialogBody: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
 export {};

package/lib/Dialog.js

@@ -77,7 +77,8 @@ const dialogRecipe = (0, _css.sva)({
   },
   defaultVariants: {
     size: "medium",
-    position: "center"
+    position: "center",
+    variant: "dialog"
   },
   compoundVariants: [{
     variant: "drawer",
@@ -323,8 +324,12 @@ const DialogTitle = _ref3 => {
   });
 };
 exports.DialogTitle = DialogTitle;
-const DialogTrigger = exports.DialogTrigger = _react2.Dialog.Trigger;
-const DialogCloseTrigger = exports.DialogCloseTrigger = _react2.Dialog.CloseTrigger;
+const DialogTrigger = exports.DialogTrigger = withContext(_react2.Dialog.Trigger, "trigger", {
+  baseComponent: true
+});
+const DialogCloseTrigger = exports.DialogCloseTrigger = withContext(_react2.Dialog.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
 const DialogHeader = exports.DialogHeader = (0, _jsx2.styled)("div", {
   base: {
     display: "flex",

package/lib/ExpandableBox.js

@@ -23,6 +23,7 @@ const ExpandableBox = exports.ExpandableBox = (0, _jsx.styled)("details", {
     borderRadius: "xsmall",
     borderColor: "stroke.subtle",
     padding: "medium",
+    clear: "both",
     _open: {
       padding: "medium",
       "& summary": {

package/lib/Figure.js

@@ -105,7 +105,7 @@ const StyledFigure = (0, _jsx2.styled)(_react2.ark.figure, {}, {
 });
 const Figure = exports.Figure = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    size,
+    size = "medium",
     float,
     css: cssProp,
     ...props

package/lib/FramedContent.js

@@ -21,7 +21,8 @@ const framedContentRecipe = (0, _css.cva)({
   base: {
     padding: "medium",
     border: "1px solid",
-    borderRadius: "small"
+    borderRadius: "small",
+    clear: "both"
   },
   variants: {
     colorTheme: {

package/lib/Image.js

@@ -85,6 +85,7 @@ const Image = exports.Image = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
   } = _ref3;
   const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  const fallbackSrc = src ? `${src}?${queryString}` : src;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
     children: [contentType !== "image/gif" && /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
       type: contentType,
@@ -92,7 +93,7 @@ const Image = exports.Image = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
       sizes: sizes
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.img, {
       alt: alt,
-      src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+      src: contentType === "image/gif" ? src : fallbackSrc,
       ...props,
       ref: ref
     })]

package/lib/Label.js

@@ -92,9 +92,17 @@ const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     ref: ref
   });
 });
-const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Label, {
-  asChild: true,
-  ...props,
-  ref: ref,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {})
-}));
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Label, {
+    asChild: true,
+    ...props,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      children: children
+    })
+  });
+});

package/lib/ListItem/ListItem.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { type HTMLArkProps } from "@ark-ui/react";
+import type { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+import { type ImageProps } from "../Image";
+import { type TextProps } from "../Text";
+export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "image" | "content" | "root", {
+    variant: {
+        standalone: {
+            root: {
+                borderBlock: "1px solid";
+                borderColor: "stroke.subtle";
+                _hover: {
+                    borderColor: "stroke.hover";
+                };
+                _highlighted: {
+                    borderColor: "stroke.hover";
+                };
+            };
+        };
+        list: {
+            root: {
+                borderTop: "1px solid";
+                borderTopColor: "stroke.subtle";
+                borderBottom: "1px solid";
+                borderBottomColor: "transparent";
+                marginTop: "-1px";
+                _first: {
+                    borderTopColor: "transparent";
+                    _hover: {
+                        borderTopColor: "stroke.hover";
+                    };
+                    _highlighted: {
+                        borderTopColor: "stroke.hover";
+                    };
+                };
+                _last: {
+                    borderBottomColor: "stroke.subtle";
+                };
+                "&:hover + &": {
+                    borderTopColor: "stroke.hover";
+                };
+                "&[data-highlighted] + &": {
+                    borderTopColor: "stroke.hover";
+                };
+                _hover: {
+                    borderBottomColor: "transparent";
+                    borderTopColor: "stroke.hover";
+                    _last: {
+                        borderBottomColor: "stroke.hover";
+                    };
+                };
+                _highlighted: {
+                    borderTopColor: "stroke.hover";
+                    _last: {
+                        borderBottomColor: "stroke.hover";
+                    };
+                };
+            };
+        };
+    };
+}>;
+export type ListItemVariantProps = RecipeVariantProps<typeof listItemRecipe>;
+export type ListItemProps = HTMLArkProps<"div"> & JsxStyleProps & ListItemVariantProps;
+export declare const ListItemRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    variant?: "list" | "standalone" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ListItemHeading: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ListItemImage: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/ListItem/ListItem.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listItemRecipe = exports.ListItemRoot = exports.ListItemImage = exports.ListItemHeading = exports.ListItemContent = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("../createStyleContext");
+var _Image = require("../Image");
+var _Text = require("../Text");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "xsmall",
+      alignItems: "center",
+      paddingBlock: "xsmall",
+      paddingInline: "xsmall",
+      transitionProperty: "background-color, border-color",
+      transitionDuration: "superFast",
+      transitionTimingFunction: "ease-in-out",
+      _hover: {
+        background: "surface.brand.1.subtle"
+      },
+      _highlighted: {
+        background: "surface.brand.1.subtle"
+      }
+    },
+    content: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: "xsmall",
+      width: "100%"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "40px",
+      width: "56px",
+      borderRadius: "xsmall",
+      objectFit: "cover"
+    }
+  },
+  defaultVariants: {
+    variant: "standalone"
+  },
+  variants: {
+    variant: {
+      standalone: {
+        root: {
+          borderBlock: "1px solid",
+          borderColor: "stroke.subtle",
+          _hover: {
+            borderColor: "stroke.hover"
+          },
+          _highlighted: {
+            borderColor: "stroke.hover"
+          }
+        }
+      },
+      list: {
+        root: {
+          borderTop: "1px solid",
+          borderTopColor: "stroke.subtle",
+          borderBottom: "1px solid",
+          borderBottomColor: "transparent",
+          marginTop: "-1px",
+          _first: {
+            borderTopColor: "transparent",
+            _hover: {
+              borderTopColor: "stroke.hover"
+            },
+            _highlighted: {
+              borderTopColor: "stroke.hover"
+            }
+          },
+          _last: {
+            borderBottomColor: "stroke.subtle"
+          },
+          "&:hover + &": {
+            borderTopColor: "stroke.hover"
+          },
+          "&[data-highlighted] + &": {
+            borderTopColor: "stroke.hover"
+          },
+          _hover: {
+            borderBottomColor: "transparent",
+            borderTopColor: "stroke.hover",
+            _last: {
+              borderBottomColor: "stroke.hover"
+            }
+          },
+          _highlighted: {
+            borderTopColor: "stroke.hover",
+            _last: {
+              borderBottomColor: "stroke.hover"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(listItemRecipe);
+const ListItemRoot = exports.ListItemRoot = withProvider(_react2.ark.div, "root", {
+  baseComponent: true
+});
+const InternalListItemHeading = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+const ListItemHeading = exports.ListItemHeading = withContext(InternalListItemHeading, "title");
+const ListItemContent = exports.ListItemContent = withContext(_react2.ark.div, "content", {
+  baseComponent: true
+});
+const ListItemImage = exports.ListItemImage = withContext(_Image.Image, "image");

package/lib/Menu.d.ts

@@ -72,7 +72,7 @@ export declare const MenuTriggerItem: import("react").ForwardRefExoticComponent<
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & Menu.TriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+} & import("@ndla/styled-system/types").WithCss & Menu.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const MenuSeparator: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;

package/lib/RadioGroup.js

@@ -133,6 +133,7 @@ const InternalRadioGroupLabel = exports.InternalRadioGroupLabel = withContext(_r
 const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    children,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
@@ -140,7 +141,8 @@ const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwar
     ...props,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
-      textStyle: textStyle
+      textStyle: textStyle,
+      children: children
     })
   });
 });

package/lib/index.d.ts

@@ -38,6 +38,8 @@ export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export type { LabelProps, LegendProps, FieldsetLegendProps } from "./Label";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
+export type { ListItemVariantProps, ListItemProps } from "./ListItem/ListItem";
+export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
 export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, } from "./Menu";
 export type { MessageBoxVariantProps, MessageBoxProps } from "./MessageBox";

package/lib/index.js

@@ -417,6 +417,30 @@ Object.defineProperty(exports, "Legend", {
     return _Label.Legend;
   }
 });
+Object.defineProperty(exports, "ListItemContent", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItemContent;
+  }
+});
+Object.defineProperty(exports, "ListItemHeading", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItemHeading;
+  }
+});
+Object.defineProperty(exports, "ListItemImage", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItemImage;
+  }
+});
+Object.defineProperty(exports, "ListItemRoot", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItemRoot;
+  }
+});
 Object.defineProperty(exports, "MenuContent", {
   enumerable: true,
   get: function () {
@@ -1066,6 +1090,7 @@ var _Hero = require("./Hero");
 var _Image = require("./Image");
 var _Input = require("./Input");
 var _Label = require("./Label");
+var _ListItem = require("./ListItem/ListItem");
 var _Menu = require("./Menu");
 var _MessageBox = require("./MessageBox");
 var _NdlaLogo = require("./NdlaLogo");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.2-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,12 +29,12 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.6.2",
-    "@ndla/styled-system": "^0.0.9",
+    "@ndla/styled-system": "^0.0.10",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.13",
-    "@pandacss/dev": "^0.42.0"
+    "@ndla/preset-panda": "^0.0.14",
+    "@pandacss/dev": "^0.44.0"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3e0d75a9fd5cca419ac16f3933be6d905fe405c9"
+  "gitHead": "45fb10125bc642d020ed37c03b9492976ef7f0d6"
 }