@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/src/tokens/mobile/components/button-group/button-group.json

@@ -7,20 +7,6 @@
             "selector": {
               "mobile": ".app-buttongroup"
             }
-          },
-          "variantGroups": {
-            "layout": {
-              "horizontal": {
-                "selector": {
-                  "mobile": ".app-buttongroup"
-                }
-              },
-              "vertical": {
-                "selector": {
-                  "mobile": ".btn-group-vertical"
-                }
-              }
-            }
           }
         }
       }
@@ -31,34 +17,32 @@
         "type": "radius",
         "attributes": {
           "subtype": "radius",
-          "description": "Controls the border radius for rounded corners of the button group component. This makes the button group appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-button-group-radius"
+          "description": "Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius"
         }
-      }
-    },
-    "appearances": {
-      "outlined": {
-        "variantGroups": {
-          "layout": {
-            "horizontal": {
-              "radius": {
-                "value": "{radius.sm.value}",
-                "type": "radius",
-                "attributes": {
-                  "subtype": "radius",
-                  "description": "Controls the border radius for rounded corners of the horizontal button group layout. This makes the button group appear with rounded corners when arranged horizontally.<br>CSS variable: --wm-button-group-outlined-layout-horizontal-radius"
-                }
-              }
-            },
-            "vertical": {
-              "radius": {
-                "value": "{radius.xs.value}",
-                "type": "radius",
-                "attributes": {
-                  "subtype": "radius",
-                  "description": "Controls the border radius for rounded corners of the vertical button group layout. This makes the button group appear with rounded corners when arranged vertically.<br>CSS variable: --wm-button-group-outlined-layout-vertical-radius"
-                }
-              }
-            }
+      },
+      "border": {
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of borders around button groups (connected buttons that appear as a single unit). This determines how thick the border lines appear around the button group container.<br>CSS variable: --wm-button-group-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Sets the visual style of borders around button groups (connected buttons that appear as a single unit). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-button-group-border-style"
+          }
+        },
+        "color": {
+          "value": "{color.surface.container.highest.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of borders around button groups (connected buttons that appear as a single unit). This determines what color the border lines appear in that outline the button group container.<br>CSS variable: --wm-button-group-border-color"
           }
         }
       }

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

@@ -174,14 +174,6 @@
           "description": "Controls the minimum height of the calendar component. This determines the minimum vertical space the calendar occupies.<br>CSS variable: --wm-calendar-min-height"
         }
       },
-      "min-width": {
-        "value": "360px",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the minimum width of the calendar component. This determines the minimum horizontal space the calendar occupies.<br>CSS variable: --wm-calendar-min-width"
-        }
-      },
       "header": {
         "background-color": {
           "value": "{color.white.@.value}",

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

@@ -60,14 +60,40 @@
                 }
             },
             "padding": {
-                "value": "0",
-                "type": "space",
-                "attributes": {
-                    "subtype": "space",
-                    "description": "Sets the internal spacing inside the camera component. This creates breathing room around the camera content.<br>CSS variable: --wm-camera-padding"
+                "top": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal top spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-top"
+                    }
+                },
+                "bottom": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal bottom spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-bottom"
+                    }
+                },
+                "left": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal left spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-left"
+                    }
+                },
+                "right": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal right spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-right"
+                    }
                 }
-            }
-        },
-        "appearances": {}
+            },
+            "appearances": {}
+        }
     }
 }

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

@@ -10,14 +10,40 @@
     },
     "mapping": {
       "header": {
-        "padding": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets the internal spacing inside the card header. This creates breathing room around the header content.<br>CSS variable: --wm-card-header-padding"
-          }
-        },
+            "padding": {
+            "left": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the left padding (horizontal spacing) inside card. This creates breathing room in the left side of the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-left"
+              }
+            },
+            "right": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the right padding (horizontal spacing) inside card. This creates breathing room in the right side card. Acceptable units: px.<br>CSS variable: --wm-card-padding-right"
+              }
+            },
+            "top": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the top padding (vertical spacing) inside card. This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-top"
+              }
+            },
+            "bottom": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the bottom padding (vertical spacing) inside card.This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-bottom"
+              }
+            }
+          },
         "width": {
           "value": "100%",
           "type": "space",

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

@@ -265,7 +265,7 @@
               "type": "color",
               "attributes": {
                 "subtype": "color",
-                "description": "Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-active-dots-background"
+                "description": "Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-dots-background"
               }
             },
             "opacity": {
@@ -273,7 +273,79 @@
               "type": "radius",
               "attributes": {
                 "subtype": "opacity",
-                "description": "Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-active-dots-opacity"
+                "description": "Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"
+              }
+            },
+            "width": {
+              "value": "10px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the width of the active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"
+              }
+            },
+            "height": {
+              "value": "10px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"
+              }
+            },
+            "border": {
+              "color": {
+                "value": "{color.primary.container.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the active carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"
+                }
+              },
+              "radius": {
+                "value": "5px",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the corner rounding of the active carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"
+                }
+              },
+              "width":{
+              "value": "{border.width.base.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width",
+                "description": "Controls the thickness of the border around the active carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"
+              }
+              }
+            },
+            "margin": {
+              "left": {
+                "value": "{radius.xxs.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"
+                }
+              },
+              "right": {
+                "value": "{radius.xxs.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"
+                }
+              }
+            }
+          },
+          "slide": {
+            "padding": {
+              "horizontal": {
+                "value": "{space.4.value}",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal padding (left and right spacing) inside active carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"
+                }
               }
             }
           }

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

@@ -29,18 +29,44 @@
       "border": {
         "style": {
           "value": "{border.style.base.value}",
-          "type": "radius",
+          "type": "border",
             "attributes": {
                 "subtype": "border-style",
                 "description": "Controls the style of the outline around container elements (boxes that hold content). 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots. The default container border styles will not change in Studio. They are dotted for user-experience reasons, so we are not going to modify them. The changes can be seen in the preview. For the outlined and elevated styles, the changes are visible both in Studio and in the preview.<br>CSS variable: --wm-container-border-style"
             }
         },
         "width": {
-          "value": "{border.width.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "border-width",
-            "description": "Controls the thickness of the border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width"
+          "top": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the top border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-top-width"
+            }
+          },
+          "bottom": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the bottom border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-bottom-width"
+            }
+          },
+          "left": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the left border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-left-width"
+            }
+          },
+          "right": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the right border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-right-width"
+            }
           }
         },
         "color": {
@@ -104,7 +130,7 @@
           }
         },
         "left": {
-          "value": "{space.6.value}",
+          "value": "{space.0.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
@@ -112,7 +138,7 @@
           }
         },
         "right": {
-          "value": "{space.6.value}",
+          "value": "{space.0.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
@@ -130,8 +156,22 @@
               "type": "border"
             },
             "width": {
-              "value": "{border.width.0.value}",
-              "type": "space"
+              "top": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              }
             },
             "color": {
               "value": "transparent",
@@ -141,6 +181,28 @@
               "value": "{radius.none.value}",
               "type": "radius"
             }
+          },
+          "box-shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius"
+          },
+          "padding": {
+            "top": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "bottom": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "left": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "right": {
+              "value": "{space.0.value}",
+              "type": "space"
+            }
           }
         }
       },
@@ -152,8 +214,22 @@
               "type": "border"
             },
             "width": {
-              "value": "{border.width.base.value}",
-              "type": "border"
+              "top": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              }
             },
             "color": {
               "value": "{color.outline.variant.value}",
@@ -163,6 +239,28 @@
               "value": "1px",
               "type": "radius"
             }
+          },
+          "box-shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius"
+          },
+          "padding": {
+            "top": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "bottom": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "left": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "right": {
+              "value": "{space.0.value}",
+              "type": "space"
+            }
           }
         }
       },
@@ -182,13 +280,45 @@
               "type": "color"
             },
             "width": {
-              "value": "{border.width.base.value}",
-              "type": "border"
+              "top": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              }
             },
             "radius": {
               "value": "{radius.sm.value}",
               "type": "radius"
             }
+          },
+          "padding": {
+            "top": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "bottom": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "left": {
+              "value": "{space.0.value}",
+              "type": "space"
+            },
+            "right": {
+              "value": "{space.0.value}",
+              "type": "space"
+            }
           }
         }
       }

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

@@ -35,7 +35,7 @@
           }
         },
         "radius": {
-          "value": "{radius.xxl.value}",
+          "value": "{radius.base.value}",
           "type": "radius",
           "attributes": {
             "subtype": "radius",