@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.64737

package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json

@@ -11,37 +11,11 @@
           }
         },
         "padding": {
-          "left": {
-            "type": "space",
-            "value": "{space.0.value}",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the left side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-left"
-            }
-          },
-          "right": {
-            "type": "space",
-            "value": "{space.0.value}",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the right side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-right"
-            }
-          },
-          "top": {
-            "type": "space",
-            "value": "{space.2.value}",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) inside dropdown menu containers. This creates breathing room above the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-top"
-            }
-          },
-          "bottom": {
-            "type": "space",
-            "value": "{space.2.value}",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) inside dropdown menu containers. This creates breathing room below the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-bottom"
-            }
+          "type": "space",
+          "value": "{space.2.value} {space.0.value}",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding inside dropdown menu containers (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding"
           }
         },
         "color": {
@@ -70,21 +44,11 @@
             }
           },
           "padding": {
-            "left": {
-              "type": "space",
-              "value": "{space.2.value}",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the left padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the left side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-left"
-              }
-            },
-            "right": {
-              "type": "space",
-              "value": "{space.3.value}",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the right padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the right side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-right"
-              }
+            "type": "space",
+            "value": "{space.0.value} {space.3.value} {space.0.value} {space.2.value}",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the padding of dropdown menu trigger text (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding"
             }
           }
         },
@@ -134,16 +98,6 @@
             }
           }
         },
-        "icon": {
-          "size": {
-            "value": "{icon.size.md.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "icon-size",
-              "description": "Controls how large dropdown menu icons appear (icons that appear alongside menu items). This affects the size of the icons that users see in the dropdown menu.<br>CSS variable: --wm-dropdown-menu-icon-size"
-            }
-          }
-        },
         "item": {
           "font-family": {
             "value": "{body.large.font-family.value}",
@@ -196,37 +150,11 @@
             }
           },
           "padding": {
-            "bottom": {
-              "value": "{space.3.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the bottom padding (vertical spacing) inside dropdown menu items. This creates breathing room below each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-bottom"
-              }
-            },
-            "left": {
-              "value": "{space.4.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the left padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the left side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-left"
-              }
-            },
-            "right": {
-              "value": "{space.4.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the right padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the right side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-right"
-              }
-            },
-            "top": {
-              "value": "{space.3.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the top padding (vertical spacing) inside dropdown menu items. This creates breathing room above each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-top"
-              }
+            "value": "{space.3.value} {space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the padding inside dropdown menu items (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding"
             }
           }
         },

package/src/tokens/mobile/components/form-controls/form-controls.json

@@ -72,37 +72,11 @@
                 }
             },
             "padding": {
-                "top": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the internal top spacing inside form controls (the space between the form field content and its top borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-top"
-                    }
-                },
-                "left": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the internal left spacing inside form controls (the space between the form field content and its left borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-left"
-                    }
-                },
-                "right": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the internal right spacing inside form controls (the space between the form field content and its right borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-right"
-                    }
-                },
-                "bottom": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the internal bottom spacing inside form controls (the space between the form field content and its bottom borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-bottom"
-                    }
+                "value": "{space.2.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"
                 }
             },
             "border": {
@@ -130,44 +104,12 @@
                         "description": "Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"
                     }
                 },
-                "top": {
-                    "width": {
-                        "value": "{border.width.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the thickness of top border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width"
-                        }
-                    }
-                },
-                "left": {
-                    "width": {
-                        "value": "{border.width.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the thickness of left border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width"
-                        }
-                    }
-                },
-                "right": {
-                    "width": {
-                        "value": "{border.width.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the thickness of right border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width"
-                        }
-                    }
-                },
-                "bottom": {
-                    "width": {
-                        "value": "{border.width.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the thickness of bottom border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width"
-                        }
+                "width": {
+                    "value": "{border.width.1.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width"
                     }
                 }
             },
@@ -255,6 +197,66 @@
                     }
                 }
             },
+            "floating": {
+                "color": {
+                    "value": "{color.surface.dim.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"
+                    }
+                },
+                "font": {
+                    "size": {
+                        "value": "{body.medium.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"
+                        }
+                    },
+                    "weight": {
+                        "value": "{body.medium.font-weight.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"
+                        }
+                    },
+                    "family": {
+                        "value": "{body.medium.font-family.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"
+                        }
+                    }
+                },
+                "top": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"
+                    }
+                },
+                "left": {
+                    "value": "{space.4.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"
+                    }
+                },
+                "padding": {
+                    "value": "{space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"
+                    }
+                }
+            },
             "states": {
                 "focused": {
                     "border": {
@@ -266,44 +268,12 @@
                                 "description": "Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"
                             }
                         },
-                        "top": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of top border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (focused state)"
-                                }
-                            }
-                        },
-                        "left": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of left border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (focused state)"
-                                }
-                            }
-                        },
-                        "right": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of right border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (focused state)"
-                                }
-                            }
-                        },
-                        "bottom": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of bottom border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (focused state)"
-                                }
+                        "width": {
+                            "value": "{border.width.1.value}",
+                            "type": "space",
+                            "attributes": {
+                                "subtype": "border-width",
+                                "description": "Controls the thickness of borders around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (focused state)"
                             }
                         }
                     },
@@ -322,56 +292,84 @@
                             "subtype": "color",
                             "description": "Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"
                         }
-                    }
-                },
-                "disabled": {
-                    "border": {
+                    },
+                    "floating": {
                         "color": {
-                            "value": "{color.shadow.@.value}",
+                            "value": "{color.surface.dim.@.value}",
                             "type": "color",
                             "attributes": {
                                 "subtype": "color",
-                                "description": "Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"
+                                "description": "Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"
                             }
                         },
-                        "top": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
+                        "font": {
+                            "size": {
+                                "value": "{body.medium.font-size.value}",
+                                "type": "font",
+                                "attributes": {
+                                    "subtype": "font-size",
+                                    "description": "Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"
+                                }
+                            },
+                            "weight": {
+                                "value": "{body.medium.font-weight.value}",
+                                "type": "font",
                                 "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of top border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (disabled state)"
+                                    "subtype": "font-weight",
+                                    "description": "Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"
+                                }
+                            },
+                            "family": {
+                                "value": "{body.medium.font-family.value}",
+                                "type": "font",
+                                "attributes": {
+                                    "subtype": "font-family",
+                                    "description": "Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"
                                 }
                             }
                         },
+                        "top": {
+                            "value": "{space.3.value}",
+                            "type": "space",
+                            "attributes": {
+                                "subtype": "space",
+                                "description": "Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"
+                            }
+                        },
                         "left": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of left border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (disabled state)"
-                                }
+                            "value": "{space.4.value}",
+                            "type": "space",
+                            "attributes": {
+                                "subtype": "space",
+                                "description": "Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"
                             }
                         },
-                        "right": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of right border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (disabled state)"
-                                }
+                        "padding": {
+                            "value": "{space.0.value}",
+                            "type": "space",
+                            "attributes": {
+                                "subtype": "space",
+                                "description": "Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"
+                            }
+                        }
+                    }
+                },
+                "disabled": {
+                    "border": {
+                        "color": {
+                            "value": "{color.shadow.@.value}",
+                            "type": "color",
+                            "attributes": {
+                                "subtype": "color",
+                                "description": "Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"
                             }
                         },
-                        "bottom": {
-                            "width": {
-                                "value": "{border.width.1.value}",
-                                "type": "space",
-                                "attributes": {
-                                    "subtype": "border-width",
-                                    "description": "Controls the thickness of bottom border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (disabled state)"
-                                }
+                        "width": {
+                            "value": "{border.width.1.value}",
+                            "type": "space",
+                            "attributes": {
+                                "subtype": "border-width",
+                                "description": "Controls the thickness of borders around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (disabled state)"
                             }
                         }
                     },

package/src/tokens/mobile/components/form-wrapper/form-wrapper.json

@@ -25,14 +25,6 @@
           "description": "Controls the internal spacing inside form wrapper components (the space between the form wrapper content and its borders). This creates breathing room around the entire form wrapper container.<br>CSS variable: --wm-form-padding"
         }
       },
-      "margin": {
-        "value": "{space.2.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the external spacing around form wrapper components (the space outside the form wrapper borders). This creates visual separation between the form wrapper and other elements on the page.<br>CSS variable: --wm-form-margin"
-        }
-      },
       "border": {
         "radius": {
           "value": "{radius.sm.value}",

package/src/tokens/mobile/components/label/label.json

@@ -177,40 +177,6 @@
           "description": "Controls the horizontal spacing between individual letters in label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"
         }
       },
-      "margin": {
-        "left": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left margin (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-left"
-          }
-        },
-        "right": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right margin (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-right"
-          }
-        },
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top margin (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom margin (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-bottom"
-          }
-        }
-      },
       "asterisk": {
         "color": {
           "value": "{color.error.@.value}",

package/src/tokens/mobile/components/list/list.json

@@ -19,37 +19,11 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside list. This creates breathing room above the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside list. This creates breathing room below the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside list. This creates breathing room on the left side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside list. This creates breathing room on the right side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-right"
-          }
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside the list container. This creates breathing room around the list content. Acceptable units: px.<br>CSS variable: --wm-list-padding"
         }
       },
       "border": {

package/src/tokens/mobile/components/login/login.json

@@ -50,37 +50,11 @@
             },
             "form": {
                 "padding": {
-                    "top": {
-                        "value": "{space.9.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the top padding (vertical spacing) inside the login form container. This creates breathing room above the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-top"
-                        }
-                    },
-                    "bottom": {
-                        "value": "{space.9.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the bottom padding (vertical spacing) inside the login form container. This creates breathing room below the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-bottom"
-                        }
-                    },
-                    "left": {
-                        "value": "{space.9.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the left padding (horizontal spacing) inside the login form container. This creates breathing room on the left side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-left"
-                        }
-                    },
-                    "right": {
-                        "value": "{space.9.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the right padding (horizontal spacing) inside the login form container. This creates breathing room on the right side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-right"
-                        }
+                    "value": "{space.9.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (all sides) inside the login form container. This creates breathing room around the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding"
                     }
                 }
             }