Fix border radius order (#6740)

* Swap border radius properties order

* Update border radius CSS

packages/core/src/style_manager/model/PropertyFactory.ts

@@ -342,14 +342,14 @@ export default class PropertyFactory {
               extend: 'border-top-right-radius',
               id: 'border-top-right-radius-sub',
             },
-            {
-              extend: 'border-bottom-left-radius',
-              id: 'border-bottom-left-radius-sub',
-            },
             {
               extend: 'border-bottom-right-radius',
               id: 'border-bottom-right-radius-sub',
             },
+            {
+              extend: 'border-bottom-left-radius',
+              id: 'border-bottom-left-radius-sub',
+            },
           ]),
         },
         'margin',

packages/core/src/styles/scss/_gjs_style_manager.scss

@@ -423,6 +423,14 @@
   padding: 5px 0 0;
 }
 
+// Keep the border-radius UI in corner order while the underlying property
+// list stays aligned with CSS shorthand semantics.
+.#{gjs_vars.$sm-prefix}property__border-radius {
+  .#{gjs_vars.$sm-prefix}property__border-bottom-right-radius {
+    order: 4;
+  }
+}
+
 .#{gjs_vars.$sm-prefix}stack ##{gjs_vars.$sm-prefix}add {
   @extend .#{gjs_vars.$app-prefix}color-main;
 

packages/core/test/specs/style_manager/model/Properties.ts

@@ -445,6 +445,39 @@ describe('StyleManager properties logic', () => {
     });
   });
 
+  describe('Border radius composite', () => {
+    let borderRadiusProp: PropertyComposite;
+
+    beforeEach(() => {
+      rule1 = cssc.addRules('.cls { color: red; }')[0];
+      obj.addSector(sectorTest, {
+        name: 'sector',
+        properties: [{ extend: 'border-radius' }],
+      });
+      borderRadiusProp = obj.getProperty(sectorTest, 'border-radius') as PropertyComposite;
+      em.setSelected(cmp);
+      obj.__upSel();
+    });
+
+    test('Updates bottom-left in the fourth shorthand slot', () => {
+      borderRadiusProp.getProperty('border-bottom-left-radius-sub')?.upValue('20px');
+      obj.__upSel();
+
+      expect(rule1.getStyle()).toEqual({
+        color: 'red',
+        'border-radius': '0 0 0 20px',
+      });
+    });
+
+    test('Parses bottom-left and bottom-right from shorthand correctly', () => {
+      rule1.setStyle({ 'border-radius': '1px 2px 3px 4px' });
+      obj.__upSel();
+
+      expect(borderRadiusProp.getProperty('border-bottom-right-radius-sub')?.getFullValue()).toBe('3px');
+      expect(borderRadiusProp.getProperty('border-bottom-left-radius-sub')?.getFullValue()).toBe('4px');
+    });
+  });
+
   describe('Stack type', () => {
     const propTest = 'stack-prop';
     const propATest = `${propTest}-a`;

packages/core/test/specs/style_manager/model/PropertyFactory.ts

@@ -485,16 +485,16 @@ describe('PropertyFactory', () => {
           default: '0',
         },
         {
-          property: 'border-bottom-left-radius',
-          id: 'border-bottom-left-radius-sub',
+          property: 'border-bottom-right-radius',
+          id: 'border-bottom-right-radius-sub',
           type: 'number',
           units: obj.unitsSize,
           min: 0,
           default: '0',
         },
         {
-          property: 'border-bottom-right-radius',
-          id: 'border-bottom-right-radius-sub',
+          property: 'border-bottom-left-radius',
+          id: 'border-bottom-left-radius-sub',
           type: 'number',
           units: obj.unitsSize,
           min: 0,