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

package/dist/panda.buildinfo.json

@@ -575,13 +575,17 @@
       "borderTopLeftRadius]___[value:xsmall]___[cond:_vertical",
       "borderBottomLeftRadius]___[value:xsmall]___[cond:_vertical",
       "background]___[value:surface.default]___[cond:_selected",
-      "borderColor]___[value:stroke.subtle]___[cond:_selected",
-      "borderBottomColor]___[value:transparent]___[cond:_selected<___>_horizontal",
-      "borderRightColor]___[value:transparent]___[cond:_selected<___>_vertical",
+      "borderColor]___[value:stroke.default]___[cond:_selected",
+      "borderBottom]___[value:none]___[cond:_selected<___>_horizontal",
+      "borderRight]___[value:none]___[cond:_selected<___>_vertical",
       "outlineOffset]___[value:-3px]___[cond:_focusVisible",
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "borderBottomRadius]___[value:xsmall]___[cond:_vertical",
+      "borderRightRadius]___[value:xsmall]___[cond:_vertical",
+      "borderRightRadius]___[value:xsmall]___[cond:_horizontal",
+      "borderBottomLeftRadius]___[value:xsmall]___[cond:_horizontal",
       "background]___[value:stroke.default",
       "height]___[value:var(--height)]___[cond:_peerFocusVisible",
       "width]___[value:var(--width)]___[cond:_peerFocusVisible",

package/dist/styles.css

@@ -1850,6 +1850,16 @@
     padding-inline-start: var(--spacing-xsmall);
 }
 
+  .vertical\:bdr-b_xsmall[data-orientation=vertical] {
+    border-bottom-left-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
+  .vertical\:bdr-r_xsmall[data-orientation=vertical],.horizontal\:bdr-r_xsmall[data-orientation=horizontal] {
+    border-top-right-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
   .horizontal\:h_3[data-orientation=horizontal] {
     height: var(--sizes-3);
 }
@@ -2038,8 +2048,12 @@
     border-bottom-left-radius: var(--radii-xsmall);
 }
 
-  .selected\:bd-c_stroke\.subtle:is([aria-selected=true], [data-selected]) {
-    border-color: var(--colors-stroke-subtle);
+  .selected\:bd-c_stroke\.default:is([aria-selected=true], [data-selected]) {
+    border-color: var(--colors-stroke-default);
+}
+
+  .horizontal\:bdr-bl_xsmall[data-orientation=horizontal] {
+    border-bottom-left-radius: var(--radii-xsmall);
 }
 
   .horizontal\:top_calc\(var\(--top\)_\+_var\(--height\)_-_6px\)[data-orientation=horizontal] {
@@ -2580,6 +2594,14 @@
     color: var(--colors-text-subtle);
 }
 
+  .selected\:horizontal\:bd-b_none:is([aria-selected=true], [data-selected])[data-orientation=horizontal] {
+    border-bottom: none;
+}
+
+  .selected\:vertical\:bd-r_none:is([aria-selected=true], [data-selected])[data-orientation=vertical] {
+    border-right: none;
+}
+
   .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:bdr-t_xsmall[data-orientation=horizontal] {
     border-top-left-radius: var(--radii-xsmall);
     border-top-right-radius: var(--radii-xsmall);
@@ -2682,14 +2704,6 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .selected\:horizontal\:bd-b-c_transparent:is([aria-selected=true], [data-selected])[data-orientation=horizontal] {
-    border-bottom-color: transparent;
-}
-
-  .selected\:vertical\:bd-r-c_transparent:is([aria-selected=true], [data-selected])[data-orientation=vertical] {
-    border-right-color: transparent;
-}
-
   .peer:is(:focus-visible, [data-focus-visible]) ~ .horizontal\:peerFocusVisible\:top_var\(--top\)[data-orientation=horizontal] {
     top: var(--top);
 }

package/es/Tabs.js

@@ -176,12 +176,12 @@ const tabsRecipe = sva({
           },
           _selected: {
             background: "surface.default",
-            borderColor: "stroke.subtle",
+            borderColor: "stroke.default",
             _horizontal: {
-              borderBottomColor: "transparent"
+              borderBottom: "none"
             },
             _vertical: {
-              borderRightColor: "transparent"
+              borderRight: "none"
             }
           },
           _focusVisible: {
@@ -192,10 +192,18 @@ const tabsRecipe = sva({
         },
         content: {
           borderWidth: "1px",
-          borderColor: "stroke.subtle",
+          borderColor: "stroke.default",
           background: "surface.default",
           width: "100%",
           padding: "xsmall",
+          _vertical: {
+            borderBottomRadius: "xsmall",
+            borderRightRadius: "xsmall"
+          },
+          _horizontal: {
+            borderRightRadius: "xsmall",
+            borderBottomLeftRadius: "xsmall"
+          },
           _focusVisible: {
             outline: "3px solid",
             outlineOffset: "-3px",

package/lib/Tabs.d.ts

@@ -103,12 +103,12 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 };
                 _selected: {
                     background: "surface.default";
-                    borderColor: "stroke.subtle";
+                    borderColor: "stroke.default";
                     _horizontal: {
-                        borderBottomColor: "transparent";
+                        borderBottom: "none";
                     };
                     _vertical: {
-                        borderRightColor: "transparent";
+                        borderRight: "none";
                     };
                 };
                 _focusVisible: {
@@ -119,10 +119,18 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
             };
             content: {
                 borderWidth: "1px";
-                borderColor: "stroke.subtle";
+                borderColor: "stroke.default";
                 background: "surface.default";
                 width: "100%";
                 padding: "xsmall";
+                _vertical: {
+                    borderBottomRadius: "xsmall";
+                    borderRightRadius: "xsmall";
+                };
+                _horizontal: {
+                    borderRightRadius: "xsmall";
+                    borderBottomLeftRadius: "xsmall";
+                };
                 _focusVisible: {
                     outline: "3px solid";
                     outlineOffset: "-3px";

package/lib/Tabs.js

@@ -182,12 +182,12 @@ const tabsRecipe = (0, _css.sva)({
           },
           _selected: {
             background: "surface.default",
-            borderColor: "stroke.subtle",
+            borderColor: "stroke.default",
             _horizontal: {
-              borderBottomColor: "transparent"
+              borderBottom: "none"
             },
             _vertical: {
-              borderRightColor: "transparent"
+              borderRight: "none"
             }
           },
           _focusVisible: {
@@ -198,10 +198,18 @@ const tabsRecipe = (0, _css.sva)({
         },
         content: {
           borderWidth: "1px",
-          borderColor: "stroke.subtle",
+          borderColor: "stroke.default",
           background: "surface.default",
           width: "100%",
           padding: "xsmall",
+          _vertical: {
+            borderBottomRadius: "xsmall",
+            borderRightRadius: "xsmall"
+          },
+          _horizontal: {
+            borderRightRadius: "xsmall",
+            borderBottomLeftRadius: "xsmall"
+          },
           _focusVisible: {
             outline: "3px solid",
             outlineOffset: "-3px",

package/package.json

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