@ndla/primitives 1.0.36-alpha.0 → 1.0.37-alpha.0

package/dist/panda.buildinfo.json

@@ -410,6 +410,7 @@
       "padding]___[value:xxsmall",
       "transition]___[value:background-color 600000s 0s, color 600000s 0s]___[cond:_autofill",
       "appearance]___[value:none]___[cond:_focus",
+      "color]___[value:text.subtle]___[cond:_placeholder",
       "resize]___[value:none",
       "overflowY]___[value:hidden",
       "float]___[value:left",
@@ -673,34 +674,43 @@
       "background]___[value:var(--background-hover)]___[cond:_highlighted",
       "borderStyle]___[value:dashed",
       "background]___[value:var(--background-current)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
-      "borderBlockStartColor]___[value:transparent]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
-      "borderBlockEndColor]___[value:transparent]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
       "color]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
+      "borderColor]___[value:var(--border-color-current)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
+      "position]___[value:relative]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
+      "content]___[value:'']___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "position]___[value:absolute]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "borderInline]___[value:6px solid]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "borderColor]___[value:var(--border-color-current)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "bottom]___[value:-1px]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "top]___[value:-1px]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "left]___[value:0]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
+      "width]___[value:100%]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_before",
       "background]___[value:var(--background-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
       "color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
+      "display]___[value:none]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover<___>_before",
       "background]___[value:var(--background-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_highlighted",
       "color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_highlighted",
       "outlineColor]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>& a:focus-visible<___>_focusVisible",
       "boxShadowColor]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>& button:focus-visible<___>_focusVisible",
-      "--background-hover]___[value:colors.surface.brand.1.subtle",
-      "--background-current]___[value:colors.surface.actionSubtle.selected",
+      "--background-hover]___[value:colors.surface.action.brand.1.hover",
+      "--background-current]___[value:colors.surface.action.brand.1.selected",
       "--border-hover]___[value:colors.stroke.hover",
-      "--color-current-hover]___[value:colors.text.onAction",
+      "--color-current-hover]___[value:colors.text.default",
+      "--border-color-current]___[value:colors.stroke.default",
       "--background-hover]___[value:colors.surface.brand.2.moderate",
-      "--background-current]___[value:colors.surface.brand.2.bold",
+      "--background-current]___[value:colors.surface.action.brand.2.selected",
       "--border-hover]___[value:colors.surface.brand.2.strong",
+      "--border-color-current]___[value:colors.surface.brand.2.strong",
       "--background-hover]___[value:colors.surface.action.myNdla.hover",
       "--background-current]___[value:colors.surface.action.myNdla.current",
       "--border-hover]___[value:colors.stroke.subtle",
-      "--color-current-hover]___[value:colors.text.default",
+      "--border-color-current]___[value:colors.stroke.subtle",
       "borderBlockColor]___[value:stroke.subtle",
       "borderBlockColor]___[value:var(--border-hover)]___[cond:_hover",
       "borderBlockColor]___[value:var(--border-hover)]___[cond:_highlighted",
-      "borderBlockStartColor]___[value:stroke.subtle",
-      "borderBlockEndColor]___[value:transparent",
+      "borderBlockStartColor]___[value:transparent",
+      "borderBlockEndColor]___[value:stroke.subtle",
       "marginBlockStart]___[value:-1px",
-      "borderBlockStartColor]___[value:transparent]___[cond:_first",
-      "borderBlockEndColor]___[value:stroke.subtle]___[cond:_last",
       "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_hover",
       "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_highlighted",
       "borderBlockStartColor]___[value:var(--border-hover)]___[cond:&:hover + &",

package/dist/styles.css

@@ -977,34 +977,42 @@
     border-inline-color: transparent;
 }
 
-  .\--background-hover_colors\.surface\.brand\.1\.subtle {
-    --background-hover: var(--colors-surface-brand-1-subtle);
+  .\--background-hover_colors\.surface\.action\.brand\.1\.hover {
+    --background-hover: var(--colors-surface-action-brand-1-hover);
 }
 
-  .\--background-current_colors\.surface\.actionSubtle\.selected {
-    --background-current: var(--colors-surface-action-subtle-selected);
+  .\--background-current_colors\.surface\.action\.brand\.1\.selected {
+    --background-current: var(--colors-surface-action-brand-1-selected);
 }
 
   .\--border-hover_colors\.stroke\.hover {
     --border-hover: var(--colors-stroke-hover);
 }
 
-  .\--color-current-hover_colors\.text\.onAction {
-    --color-current-hover: var(--colors-text-on-action);
+  .\--color-current-hover_colors\.text\.default {
+    --color-current-hover: var(--colors-text-default);
+}
+
+  .\--border-color-current_colors\.stroke\.default {
+    --border-color-current: var(--colors-stroke-default);
 }
 
   .\--background-hover_colors\.surface\.brand\.2\.moderate {
     --background-hover: var(--colors-surface-brand-2-moderate);
 }
 
-  .\--background-current_colors\.surface\.brand\.2\.bold {
-    --background-current: var(--colors-surface-brand-2-bold);
+  .\--background-current_colors\.surface\.action\.brand\.2\.selected {
+    --background-current: var(--colors-surface-action-brand-2-selected);
 }
 
   .\--border-hover_colors\.surface\.brand\.2\.strong {
     --border-hover: var(--colors-surface-brand-2-strong);
 }
 
+  .\--border-color-current_colors\.surface\.brand\.2\.strong {
+    --border-color-current: var(--colors-surface-brand-2-strong);
+}
+
   .\--background-hover_colors\.surface\.action\.myNdla\.hover {
     --background-hover: var(--colors-surface-action-my-ndla-hover);
 }
@@ -1017,8 +1025,8 @@
     --border-hover: var(--colors-stroke-subtle);
 }
 
-  .\--color-current-hover_colors\.text\.default {
-    --color-current-hover: var(--colors-text-default);
+  .\--border-color-current_colors\.stroke\.subtle {
+    --border-color-current: var(--colors-stroke-subtle);
 }
 
   .bd-y-c_stroke\.subtle {
@@ -1440,12 +1448,12 @@
     border-style: dashed;
 }
 
-  .bd-bs-c_stroke\.subtle {
-    border-block-start-color: var(--colors-stroke-subtle);
+  .bd-bs-c_transparent {
+    border-block-start-color: transparent;
 }
 
-  .bd-be-c_transparent {
-    border-block-end-color: transparent;
+  .bd-be-c_stroke\.subtle {
+    border-block-end-color: var(--colors-stroke-subtle);
 }
 
   .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
@@ -1669,6 +1677,10 @@
     transition: background-color 600000s 0s, color 600000s 0s;
 }
 
+  .placeholder\:c_text\.subtle::placeholder,.placeholder\:c_text\.subtle[data-placeholder] {
+    color: var(--colors-text-subtle);
+}
+
   .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     color: var(--colors-text-subtle);
 }
@@ -1890,6 +1902,10 @@
     color: var(--color-current-hover);
 }
 
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:pos_relative[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:pos_relative[aria-current="page"] {
+    position: relative;
+}
+
   .highlighted\:bd-y-c_var\(--border-hover\)[data-highlighted] {
     border-block-color: var(--border-hover);
 }
@@ -2062,20 +2078,8 @@
     grid-column-end: -1;
 }
 
-  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="page"] {
-    border-block-start-color: transparent;
-}
-
-  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-be-c_transparent[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-be-c_transparent[aria-current="page"] {
-    border-block-end-color: transparent;
-}
-
-  .first\:bd-bs-c_transparent:first-child {
-    border-block-start-color: transparent;
-}
-
-  .last\:bd-be-c_stroke\.subtle:last-child {
-    border-block-end-color: var(--colors-stroke-subtle);
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-c_var\(--border-color-current\)[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-c_var\(--border-color-current\)[aria-current="page"] {
+    border-color: var(--border-color-current);
 }
 
   :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-bs-c_var\(--border-hover\))[data-highlighted] + :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-bs-c_var\(--border-hover\)) {
@@ -2590,6 +2594,18 @@
     color: var(--colors-stroke-hover);
 }
 
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:pos_absolute[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:pos_absolute[aria-current="page"]::before {
+    position: absolute;
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bd-x_6px_solid[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bd-x_6px_solid[aria-current="page"]::before {
+    border-inline: 6px solid;
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:w_100\%[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:w_100\%[aria-current="page"]::before {
+    width: 100%;
+}
+
   .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:bg_var\(--background-hover\)[aria-current="true"]:is(:hover, [data-hover]),.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:bg_var\(--background-hover\)[aria-current="page"]:is(:hover, [data-hover]) {
     background: var(--background-hover);
 }
@@ -2678,6 +2694,26 @@
     top: var(--top);
 }
 
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:content_\'\'[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:content_\'\'[aria-current="page"]::before {
+    content: '';
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bd-c_var\(--border-color-current\)[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bd-c_var\(--border-color-current\)[aria-current="page"]::before {
+    border-color: var(--border-color-current);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bottom_-1px[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:bottom_-1px[aria-current="page"]::before {
+    bottom: -1px;
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:top_-1px[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:top_-1px[aria-current="page"]::before {
+    top: -1px;
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:left_0[aria-current="true"]::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:before\:left_0[aria-current="page"]::before {
+    left: 0;
+}
+
   .first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
     border-block-start-color: var(--border-hover);
 }
@@ -2758,6 +2794,10 @@
     transform: translateX(120%);
 }
 
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:before\:d_none[aria-current="true"]:is(:hover, [data-hover])::before,.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:before\:d_none[aria-current="page"]:is(:hover, [data-hover])::before {
+    display: none;
+}
+
   .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:\[\&_button\:focus-visible\]\:focusVisible\:bx-sh-c_var\(--color-current-hover\)[aria-current="true"] button:focus-visible:is(:focus-visible, [data-focus-visible]),.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:\[\&_button\:focus-visible\]\:focusVisible\:bx-sh-c_var\(--color-current-hover\)[aria-current="page"] button:focus-visible:is(:focus-visible, [data-focus-visible]) {
     --shadow-color: var(--color-current-hover);
 }

package/es/Combobox.js

@@ -164,13 +164,9 @@ export const ComboboxRoot = _ref => {
   let {
     ...props
   } = _ref;
-  return (
-    /*#__PURE__*/
-    //@ts-expect-error - withProvider swallows the generic that Combobox.Root expects.
-    _jsx(InternalComboboxRoot, {
-      ...props
-    })
-  );
+  return /*#__PURE__*/_jsx(InternalComboboxRoot, {
+    ...props
+  });
 };
 export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger", {
   baseComponent: true

package/es/Input.js

@@ -96,6 +96,9 @@ const baseInputCss = css.raw({
   },
   _focus: {
     appearance: "none"
+  },
+  _placeholder: {
+    color: "text.subtle"
   }
 });
 const baseTextAreaCss = css.raw({

package/es/ListItem/ListItem.js

@@ -39,7 +39,7 @@ export const listItemRecipe = sva({
     },
     content: {
       display: "flex",
-      alignItems: "flex-start",
+      alignItems: "center",
       justifyContent: "space-between",
       gap: "xsmall",
       width: "100%"
@@ -75,12 +75,25 @@ export const listItemRecipe = sva({
         root: {
           '&[aria-current="true"], &[aria-current="page"]': {
             background: "var(--background-current)",
-            borderBlockStartColor: "transparent",
-            borderBlockEndColor: "transparent",
             color: "var(--color-current-hover)",
+            borderColor: "var(--border-color-current)",
+            position: "relative",
+            _before: {
+              content: "''",
+              position: "absolute",
+              borderInline: "6px solid",
+              borderColor: "var(--border-color-current)",
+              bottom: "-1px",
+              top: "-1px",
+              left: "0",
+              width: "100%"
+            },
             _hover: {
               background: "var(--background-hover)",
-              color: "text.default"
+              color: "text.default",
+              _before: {
+                display: "none"
+              }
             },
             _highlighted: {
               background: "var(--background-hover)",
@@ -109,18 +122,20 @@ export const listItemRecipe = sva({
     colorTheme: {
       brand1: {
         root: {
-          "--background-hover": "colors.surface.brand.1.subtle",
-          "--background-current": "colors.surface.actionSubtle.selected",
+          "--background-hover": "colors.surface.action.brand.1.hover",
+          "--background-current": "colors.surface.action.brand.1.selected",
           "--border-hover": "colors.stroke.hover",
-          "--color-current-hover": "colors.text.onAction"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.stroke.default"
         }
       },
       brand2: {
         root: {
           "--background-hover": "colors.surface.brand.2.moderate",
-          "--background-current": "colors.surface.brand.2.bold",
+          "--background-current": "colors.surface.action.brand.2.selected",
           "--border-hover": "colors.surface.brand.2.strong",
-          "--color-current-hover": "colors.text.onAction"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.surface.brand.2.strong"
         }
       },
       brand3: {
@@ -128,7 +143,8 @@ export const listItemRecipe = sva({
           "--background-hover": "colors.surface.action.myNdla.hover",
           "--background-current": "colors.surface.action.myNdla.current",
           "--border-hover": "colors.stroke.subtle",
-          "--color-current-hover": "colors.text.default"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.stroke.subtle"
         }
       }
     },
@@ -146,15 +162,9 @@ export const listItemRecipe = sva({
       },
       list: {
         root: {
-          borderBlockStartColor: "stroke.subtle",
-          borderBlockEndColor: "transparent",
-          marginBlockStart: "-1px",
-          _first: {
-            borderBlockStartColor: "transparent"
-          },
-          _last: {
-            borderBlockEndColor: "stroke.subtle"
-          }
+          borderBlockStartColor: "transparent",
+          borderBlockEndColor: "stroke.subtle",
+          marginBlockStart: "-1px"
         }
       }
     }

package/es/Select.js

@@ -151,15 +151,11 @@ export const SelectRoot = _ref => {
     unmountOnExit = true,
     ...props
   } = _ref;
-  return (
-    /*#__PURE__*/
-    //@ts-expect-error -- T does not necessarily match Select.CollectionItem. However, we prefer to use T over Select.CollectionItem to get the correct type during use.
-    _jsx(InternalSelectRoot, {
-      lazyMount: lazyMount,
-      unmountOnExit: unmountOnExit,
-      ...props
-    })
-  );
+  return /*#__PURE__*/_jsx(InternalSelectRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
 };
 export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
   baseComponent: true

package/es/Switch.js

@@ -129,11 +129,11 @@ export const SwitchLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalSwitchLabel, {
     asChild: true,
+    ...props,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
       consumeCss: true,
       textStyle: textStyle,
-      ...props,
       children: /*#__PURE__*/_jsx("span", {
         children: children
       })

package/es/index.js

@@ -22,6 +22,7 @@ export { FieldRoot, FieldsetRoot } from "./Field";
 export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
 export { FieldHelper, FieldsetHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
+export { FileUploadHiddenInput, FileUploadContext, FileUploadRoot, FileUploadDropzone, FileUploadTrigger, FileUploadItemGroup, FileUploadItemPreview, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel } from "./FileUpload";
 export { FramedContent } from "./FramedContent";
 export { Hero, HeroBackground, HeroContent } from "./Hero";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";

package/lib/Combobox.d.ts

@@ -45,7 +45,7 @@ export type ComboboxVariantProps = RecipeVariantProps<typeof comboboxRecipe>;
 export type ComboboxRootProps<T extends Combobox.CollectionItem> = Combobox.RootProps<T> & ComboboxVariantProps & JsxStyleProps & {
     translations: Combobox.RootProps<T>["translations"];
 };
-export declare const ComboboxRoot: <T extends Combobox.CollectionItem>({ ...props }: ComboboxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxRoot: <T extends unknown>({ ...props }: ComboboxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type ComboboxClearTriggerProps = Combobox.ClearTriggerProps & JsxStyleProps;
 export declare const ComboboxClearTrigger: import("react").ForwardRefExoticComponent<Combobox.ClearTriggerProps & {
     consumeCss?: boolean | undefined;

package/lib/Combobox.js

@@ -170,13 +170,9 @@ const ComboboxRoot = _ref => {
   let {
     ...props
   } = _ref;
-  return (
-    /*#__PURE__*/
-    //@ts-expect-error - withProvider swallows the generic that Combobox.Root expects.
-    (0, _jsxRuntime.jsx)(InternalComboboxRoot, {
-      ...props
-    })
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxRoot, {
+    ...props
+  });
 };
 exports.ComboboxRoot = ComboboxRoot;
 const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger", {

package/lib/FileUpload.d.ts

@@ -8,7 +8,7 @@
 import { FileUpload } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { TextProps } from "./Text";
-declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"label" | "root" | "item" | "itemGroup" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"label" | "root" | "item" | "itemGroup" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
+declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"label" | "root" | "item" | "clearTrigger" | "itemGroup" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"label" | "root" | "item" | "clearTrigger" | "itemGroup" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
 export type FileUploadVariantProps = RecipeVariantProps<typeof fileUploadRecipe>;
 export type FileUploadRootProps = FileUpload.RootProps & FileUploadVariantProps;
 export declare const FileUploadHiddenInput: import("react").ForwardRefExoticComponent<FileUpload.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Input.js

@@ -102,6 +102,9 @@ const baseInputCss = _css.css.raw({
   },
   _focus: {
     appearance: "none"
+  },
+  _placeholder: {
+    color: "text.subtle"
   }
 });
 const baseTextAreaCss = _css.css.raw({

package/lib/ListItem/ListItem.d.ts

@@ -27,12 +27,25 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
             root: {
                 '&[aria-current="true"], &[aria-current="page"]': {
                     background: "var(--background-current)";
-                    borderBlockStartColor: "transparent";
-                    borderBlockEndColor: "transparent";
                     color: "var(--color-current-hover)";
+                    borderColor: "var(--border-color-current)";
+                    position: "relative";
+                    _before: {
+                        content: "''";
+                        position: "absolute";
+                        borderInline: "6px solid";
+                        borderColor: "var(--border-color-current)";
+                        bottom: "-1px";
+                        top: "-1px";
+                        left: "0";
+                        width: "100%";
+                    };
                     _hover: {
                         background: "var(--background-hover)";
                         color: "text.default";
+                        _before: {
+                            display: "none";
+                        };
                     };
                     _highlighted: {
                         background: "var(--background-hover)";
@@ -61,18 +74,20 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
     colorTheme: {
         brand1: {
             root: {
-                "--background-hover": "colors.surface.brand.1.subtle";
-                "--background-current": "colors.surface.actionSubtle.selected";
+                "--background-hover": "colors.surface.action.brand.1.hover";
+                "--background-current": "colors.surface.action.brand.1.selected";
                 "--border-hover": "colors.stroke.hover";
-                "--color-current-hover": "colors.text.onAction";
+                "--color-current-hover": "colors.text.default";
+                "--border-color-current": "colors.stroke.default";
             };
         };
         brand2: {
             root: {
                 "--background-hover": "colors.surface.brand.2.moderate";
-                "--background-current": "colors.surface.brand.2.bold";
+                "--background-current": "colors.surface.action.brand.2.selected";
                 "--border-hover": "colors.surface.brand.2.strong";
-                "--color-current-hover": "colors.text.onAction";
+                "--color-current-hover": "colors.text.default";
+                "--border-color-current": "colors.surface.brand.2.strong";
             };
         };
         brand3: {
@@ -81,6 +96,7 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
                 "--background-current": "colors.surface.action.myNdla.current";
                 "--border-hover": "colors.stroke.subtle";
                 "--color-current-hover": "colors.text.default";
+                "--border-color-current": "colors.stroke.subtle";
             };
         };
     };
@@ -98,15 +114,9 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
         };
         list: {
             root: {
-                borderBlockStartColor: "stroke.subtle";
-                borderBlockEndColor: "transparent";
+                borderBlockStartColor: "transparent";
+                borderBlockEndColor: "stroke.subtle";
                 marginBlockStart: "-1px";
-                _first: {
-                    borderBlockStartColor: "transparent";
-                };
-                _last: {
-                    borderBlockEndColor: "stroke.subtle";
-                };
             };
         };
     };

package/lib/ListItem/ListItem.js

@@ -45,7 +45,7 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
     },
     content: {
       display: "flex",
-      alignItems: "flex-start",
+      alignItems: "center",
       justifyContent: "space-between",
       gap: "xsmall",
       width: "100%"
@@ -81,12 +81,25 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
         root: {
           '&[aria-current="true"], &[aria-current="page"]': {
             background: "var(--background-current)",
-            borderBlockStartColor: "transparent",
-            borderBlockEndColor: "transparent",
             color: "var(--color-current-hover)",
+            borderColor: "var(--border-color-current)",
+            position: "relative",
+            _before: {
+              content: "''",
+              position: "absolute",
+              borderInline: "6px solid",
+              borderColor: "var(--border-color-current)",
+              bottom: "-1px",
+              top: "-1px",
+              left: "0",
+              width: "100%"
+            },
             _hover: {
               background: "var(--background-hover)",
-              color: "text.default"
+              color: "text.default",
+              _before: {
+                display: "none"
+              }
             },
             _highlighted: {
               background: "var(--background-hover)",
@@ -115,18 +128,20 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
     colorTheme: {
       brand1: {
         root: {
-          "--background-hover": "colors.surface.brand.1.subtle",
-          "--background-current": "colors.surface.actionSubtle.selected",
+          "--background-hover": "colors.surface.action.brand.1.hover",
+          "--background-current": "colors.surface.action.brand.1.selected",
           "--border-hover": "colors.stroke.hover",
-          "--color-current-hover": "colors.text.onAction"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.stroke.default"
         }
       },
       brand2: {
         root: {
           "--background-hover": "colors.surface.brand.2.moderate",
-          "--background-current": "colors.surface.brand.2.bold",
+          "--background-current": "colors.surface.action.brand.2.selected",
           "--border-hover": "colors.surface.brand.2.strong",
-          "--color-current-hover": "colors.text.onAction"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.surface.brand.2.strong"
         }
       },
       brand3: {
@@ -134,7 +149,8 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
           "--background-hover": "colors.surface.action.myNdla.hover",
           "--background-current": "colors.surface.action.myNdla.current",
           "--border-hover": "colors.stroke.subtle",
-          "--color-current-hover": "colors.text.default"
+          "--color-current-hover": "colors.text.default",
+          "--border-color-current": "colors.stroke.subtle"
         }
       }
     },
@@ -152,15 +168,9 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
       },
       list: {
         root: {
-          borderBlockStartColor: "stroke.subtle",
-          borderBlockEndColor: "transparent",
-          marginBlockStart: "-1px",
-          _first: {
-            borderBlockStartColor: "transparent"
-          },
-          _last: {
-            borderBlockEndColor: "stroke.subtle"
-          }
+          borderBlockStartColor: "transparent",
+          borderBlockEndColor: "stroke.subtle",
+          marginBlockStart: "-1px"
         }
       }
     }

package/lib/Select.d.ts

@@ -9,7 +9,7 @@ import { Select } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 export type SelectRootProps<T extends Select.CollectionItem> = Select.RootProps<T> & JsxStyleProps;
-export declare const SelectRoot: <T extends Select.CollectionItem>({ lazyMount, unmountOnExit, ...props }: SelectRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRoot: <T extends unknown>({ lazyMount, unmountOnExit, ...props }: SelectRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectClearTrigger: import("react").ForwardRefExoticComponent<Select.ClearTriggerProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/Select.js

@@ -157,15 +157,11 @@ const SelectRoot = _ref => {
     unmountOnExit = true,
     ...props
   } = _ref;
-  return (
-    /*#__PURE__*/
-    //@ts-expect-error -- T does not necessarily match Select.CollectionItem. However, we prefer to use T over Select.CollectionItem to get the correct type during use.
-    (0, _jsxRuntime.jsx)(InternalSelectRoot, {
-      lazyMount: lazyMount,
-      unmountOnExit: unmountOnExit,
-      ...props
-    })
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSelectRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
 };
 exports.SelectRoot = SelectRoot;
 const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger", {

package/lib/Switch.js

@@ -135,11 +135,11 @@ const SwitchLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchLabel, {
     asChild: true,
+    ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
       consumeCss: true,
       textStyle: textStyle,
-      ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: children
       })

package/lib/index.d.ts

@@ -32,6 +32,8 @@ export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
 export { FieldHelper, FieldsetHelper } from "./FieldHelper";
 export type { FigureSize, FigureVariantProps, FigureProps, FigureFloat } from "./Figure";
 export { Figure } from "./Figure";
+export type { FileUploadRootProps, FileUploadVariantProps } from "./FileUpload";
+export { FileUploadHiddenInput, FileUploadContext, FileUploadRoot, FileUploadDropzone, FileUploadTrigger, FileUploadItemGroup, FileUploadItemPreview, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, } from "./FileUpload";
 export type { FramedContentVariantProps, FramedContentProps } from "./FramedContent";
 export { FramedContent } from "./FramedContent";
 export type { HeroVariantProps, HeroVariant, HeroProps, HeroBackgroundProps, HeroContentProps } from "./Hero";

package/lib/index.js

@@ -387,6 +387,84 @@ Object.defineProperty(exports, "Figure", {
     return _Figure.Figure;
   }
 });
+Object.defineProperty(exports, "FileUploadContext", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadContext;
+  }
+});
+Object.defineProperty(exports, "FileUploadDropzone", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadDropzone;
+  }
+});
+Object.defineProperty(exports, "FileUploadHiddenInput", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadHiddenInput;
+  }
+});
+Object.defineProperty(exports, "FileUploadItem", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItem;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemDeleteTrigger", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemDeleteTrigger;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemGroup", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemGroup;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemName", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemName;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemPreview", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemPreview;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemPreviewImage", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemPreviewImage;
+  }
+});
+Object.defineProperty(exports, "FileUploadItemSizeText", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadItemSizeText;
+  }
+});
+Object.defineProperty(exports, "FileUploadLabel", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadLabel;
+  }
+});
+Object.defineProperty(exports, "FileUploadRoot", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadRoot;
+  }
+});
+Object.defineProperty(exports, "FileUploadTrigger", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUploadTrigger;
+  }
+});
 Object.defineProperty(exports, "FramedContent", {
   enumerable: true,
   get: function () {
@@ -1237,6 +1315,7 @@ var _Field = require("./Field");
 var _FieldErrorMessage = require("./FieldErrorMessage");
 var _FieldHelper = require("./FieldHelper");
 var _Figure = require("./Figure");
+var _FileUpload = require("./FileUpload");
 var _FramedContent = require("./FramedContent");
 var _Hero = require("./Hero");
 var _Image = require("./Image");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.36-alpha.0",
+  "version": "1.0.37-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,7 +28,7 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/react": "^3.12.1",
+    "@ark-ui/react": "^4.0.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0"
   },
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84234a46743d9d044f220e90e6710e2da307d65d"
+  "gitHead": "29f766c461881909c892102640cd09944f64d694"
 }