@ndla/primitives 1.0.74-alpha.0 → 1.0.76-alpha.0

package/dist/panda.buildinfo.json

@@ -191,10 +191,8 @@
       "paddingInline]___[value:xxsmall",
       "userSelect]___[value:none",
       "color]___[value:text.action]___[cond:_hover",
-      "outline]___[value:2px solid]___[cond:_focus",
-      "outlineOffset]___[value:4xsmall]___[cond:_focus",
-      "outlineColor]___[value:stroke.default]___[cond:_focus",
-      "borderRadius]___[value:xsmall]___[cond:_focus",
+      "outline]___[value:2px solid]___[cond:_focusVisible",
+      "outlineOffset]___[value:4xsmall]___[cond:_focusVisible",
       "gap]___[value:4xsmall",
       "background]___[value:surface.actionSubtle",
       "outlineColor]___[value:stroke.subtle",
@@ -516,6 +514,10 @@
       "height]___[value:small",
       "width]___[value:small",
       "borderWidth]___[value:8px",
+      "outline]___[value:2px solid]___[cond:_focus",
+      "outlineOffset]___[value:4xsmall]___[cond:_focus",
+      "outlineColor]___[value:stroke.default]___[cond:_focus",
+      "borderRadius]___[value:xsmall]___[cond:_focus",
       "background]___[value:surface.disabled.strong",
       "padding]___[value:1",
       "borderRadius]___[value:medium",
@@ -698,6 +700,8 @@
       "--background-hover]___[value:colors.surface.action.myNdla.hover",
       "--border-hover]___[value:colors.stroke.subtle",
       "--border-color-current]___[value:colors.stroke.subtle",
+      "--background-hover]___[value:colors.surface.hover",
+      "--border-color-current]___[value:colors.stroke.discrete",
       "background]___[value:var(--background-hover)]___[cond:_hover",
       "background]___[value:var(--background-hover)]___[cond:_highlighted",
       "borderBlockColor]___[value:stroke.subtle",

package/dist/styles.css

@@ -1041,6 +1041,14 @@
     --border-color-current: var(--colors-stroke-subtle);
 }
 
+  .\--background-hover_colors\.surface\.hover {
+    --background-hover: var(--colors-surface-hover);
+}
+
+  .\--border-color-current_colors\.stroke\.discrete {
+    --border-color-current: var(--colors-stroke-discrete);
+}
+
   .bd-y-c_stroke\.subtle {
     border-block-color: var(--colors-stroke-subtle);
 }
@@ -2197,18 +2205,14 @@
     outline-offset: 3px;
 }
 
-  .focus\:ring_2px_solid:is(:focus, [data-focus]) {
+  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
 }
 
-  .focus\:ring-o_4xsmall:is(:focus, [data-focus]) {
+  .focusVisible\:ring-o_4xsmall:is(:focus-visible, [data-focus-visible]) {
     outline-offset: var(--spacing-4xsmall);
 }
 
-  .focus\:bdr_xsmall:is(:focus, [data-focus]) {
-    border-radius: var(--radii-xsmall);
-}
-
   .focus\:ring-o_-2px:is(:focus, [data-focus]) {
     outline-offset: -2px;
 }
@@ -2246,6 +2250,18 @@
     outline-offset: 0px;
 }
 
+  .focus\:ring_2px_solid:is(:focus, [data-focus]) {
+    outline: 2px solid;
+}
+
+  .focus\:ring-o_4xsmall:is(:focus, [data-focus]) {
+    outline-offset: var(--spacing-4xsmall);
+}
+
+  .focus\:bdr_xsmall:is(:focus, [data-focus]) {
+    border-radius: var(--radii-xsmall);
+}
+
   .focusVisible\:bdr_unset:is(:focus-visible, [data-focus-visible]) {
     border-radius: unset;
 }
@@ -2286,10 +2302,6 @@
     outline-style: solid;
 }
 
-  .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
-    outline-color: var(--colors-stroke-default);
-}
-
   .focus\:outline-style_solid:is(:focus, [data-focus]) {
     outline-style: solid;
 }
@@ -2310,6 +2322,10 @@
     outline-color: var(--colors-surface-action);
 }
 
+  .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
+    outline-color: var(--colors-stroke-default);
+}
+
   .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:ring-c_stroke\.default {
     outline-color: var(--colors-stroke-default);
 }

package/es/Checkbox.js

@@ -65,7 +65,7 @@ const checkboxRecipe = sva({
           _hover: {
             color: "text.action"
           },
-          _focus: {
+          _focusVisible: {
             outline: "2px solid",
             outlineOffset: "4xsmall",
             outlineColor: "stroke.default",

package/es/ListItem/ListItem.js

@@ -96,6 +96,13 @@ export const listItemRecipe = sva({
           "--border-hover": "colors.stroke.subtle",
           "--border-color-current": "colors.stroke.subtle"
         }
+      },
+      neutral: {
+        root: {
+          "--background-hover": "colors.surface.hover",
+          "--border-hover": "colors.stroke.subtle",
+          "--border-color-current": "colors.stroke.discrete"
+        }
       }
     },
     variant: {

package/es/RadioGroup.js

@@ -132,6 +132,8 @@ export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     textStyle = "label.large",
     fontWeight = "bold",
     children,
+    asChild,
+    consumeCss,
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
@@ -141,6 +143,8 @@ export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
       fontWeight: fontWeight,
+      asChild: asChild,
+      consumeCss: consumeCss,
       children: children
     })
   });

package/lib/Checkbox.d.ts

@@ -16,7 +16,7 @@ declare const checkboxRecipe: import("@ndla/styled-system/types").SlotRecipeRunt
                 _hover: {
                     color: "text.action";
                 };
-                _focus: {
+                _focusVisible: {
                     outline: "2px solid";
                     outlineOffset: "4xsmall";
                     outlineColor: "stroke.default";

package/lib/Checkbox.js

@@ -71,7 +71,7 @@ const checkboxRecipe = (0, _css.sva)({
           _hover: {
             color: "text.action"
           },
-          _focus: {
+          _focusVisible: {
             outline: "2px solid",
             outlineOffset: "4xsmall",
             outlineColor: "stroke.default",

package/lib/ListItem/ListItem.d.ts

@@ -54,6 +54,13 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
                 "--border-color-current": "colors.stroke.subtle";
             };
         };
+        neutral: {
+            root: {
+                "--background-hover": "colors.surface.hover";
+                "--border-hover": "colors.stroke.subtle";
+                "--border-color-current": "colors.stroke.discrete";
+            };
+        };
     };
     variant: {
         intense: {

package/lib/ListItem/ListItem.js

@@ -102,6 +102,13 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
           "--border-hover": "colors.stroke.subtle",
           "--border-color-current": "colors.stroke.subtle"
         }
+      },
+      neutral: {
+        root: {
+          "--background-hover": "colors.surface.hover",
+          "--border-hover": "colors.stroke.subtle",
+          "--border-color-current": "colors.stroke.discrete"
+        }
       }
     },
     variant: {

package/lib/RadioGroup.js

@@ -139,6 +139,8 @@ const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwar
     textStyle = "label.large",
     fontWeight = "bold",
     children,
+    asChild,
+    consumeCss,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
@@ -148,6 +150,8 @@ const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwar
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
       fontWeight: fontWeight,
+      asChild: asChild,
+      consumeCss: consumeCss,
       children: children
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.74-alpha.0",
+  "version": "1.0.76-alpha.0",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "afc6cf3ee63096705af150d31e41676d0934de80"
+  "gitHead": "b6ad678fe00b488394ed503b9bd24911989863a4"
 }