@wavemaker/foundation-css 11.15.1-rc.248 → 11.15.2-rc.249

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

@@ -35,13 +35,11 @@
           }
         },
         "padding": {
-          "horizontal": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the horizontal padding (left and right spacing) inside 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"
-            }
+          "value": "{space.0.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) inside 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"
           }
         }
       },
@@ -134,21 +132,11 @@
       "dots": {
         "wrapper": {
           "padding": {
-            "top": {
-              "value": "{space.1.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the top padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room above the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-top"
-              }
-            },
-            "bottom": {
-              "value": "{space.1.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the bottom padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room below the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-bottom"
-              }
+            "value": "{space.1.value} {space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the padding (top/bottom, left/right) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room around the dots. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-wrapper-padding"
             }
           },
           "background": {
@@ -221,21 +209,11 @@
           }
         },
         "margin": {
-          "left": {
-            "value": "{radius.xxs.value}",
-            "type": "radius",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the horizontal spacing between individual 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 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"
-            }
+          "value": "{space.0.value} {radius.xxs.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the margin (top/bottom, left/right) of carousel indicators (navigation dots). This creates visual separation between each dot. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-margin"
           }
         },
         "opacity": {
@@ -247,16 +225,6 @@
           }
         }
       },
-      "skeleton": {
-        "width": {
-          "value": "100%",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the width of the carousel skeleton loader (the placeholder animation that appears while carousel content is loading). When set to 100%, the skeleton takes up the full width of the carousel container. Acceptable units: %, px.<br>CSS variable: --wm-carousel-skeleton-width"
-          }
-        }
-      },
       "states": {
         "active": {
           "dots": {
@@ -319,33 +287,21 @@
               }
             },
             "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"
-                }
+              "value": "{space.0.value} {radius.xxs.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the margin (top/bottom, left/right) of active carousel indicators (navigation dots). This creates visual separation between each dot. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-margin"
               }
             }
           },
           "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"
-                }
+              "value": "{space.0.value} {space.4.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the padding (top/bottom, left/right) inside active carousel slides. This creates breathing room on the sides of the slide content. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding"
               }
             }
           }

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

@@ -104,7 +104,7 @@
       },
       "border": {
         "width": {
-          "value": "2",
+          "value": "2px",
           "type": "space",
           "attributes": {
             "subtype": "border-width",
@@ -166,21 +166,11 @@
           }
         },
         "padding": {
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding of the checkbox set title area (the header section that appears above the checkbox options). This creates spacing on the left side of the title text.<br>CSS variable: --wm-checkboxset-title-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding of the checkbox set title area (the header section that appears above the checkbox options). This creates spacing on the right side of the title text.<br>CSS variable: --wm-checkboxset-title-padding-right"
-            }
+          "value": "{space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) of the checkbox set title area (the header section that appears above the checkbox options). Acceptable units: px.<br>CSS variable: --wm-checkboxset-title-padding"
           }
         }
       },

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

@@ -79,36 +79,12 @@
             "description": "Controls the horizontal spacing between individual chip items (the small pill-shaped elements) within the chips container. This creates visual separation between each chip so users can easily distinguish between them.<br>CSS variable: --wm-chips-list-gap"
           }
         },
-        "padding-top": {
+        "padding": {
           "value": "{space.2.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the top of the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside.<br>CSS variable: --wm-chips-list-padding-top"
-          }
-        },
-        "padding-bottom": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the bottom of the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside.<br>CSS variable: --wm-chips-list-padding-bottom"
-          }
-        },
-        "padding-left": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the left side of the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside.<br>CSS variable: --wm-chips-list-padding-left"
-          }
-        },
-        "padding-right": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the right side of the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside.<br>CSS variable: --wm-chips-list-padding-right"
+            "description": "Controls the padding (all sides) inside the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside. Acceptable units: px.<br>CSS variable: --wm-chips-list-padding"
           }
         },
         "background-color": {
@@ -175,36 +151,12 @@
         }
       },
       "input": {
-        "padding-top": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the top of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-top"
-          }
-        },
-        "padding-bottom": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the bottom of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-bottom"
-          }
-        },
-        "padding-left": {
-          "value": "{space.3.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the left side of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-left"
-          }
-        },
-        "padding-right": {
-          "value": "{space.3.value}",
+        "padding": {
+          "value": "{space.2.value} {space.3.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the right side of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-right"
+            "description": "Controls the padding (top/bottom, left/right) inside the input field where users type to add new chips. This creates breathing room around the input text. Acceptable units: px.<br>CSS variable: --wm-chips-input-padding"
           }
         }
       },
@@ -217,36 +169,12 @@
             "description": "Controls the height of individual chip items (the small pill-shaped elements). This determines how tall each chip appears visually. Acceptable units: px.<br>CSS variable: --wm-chips-item-height"
           }
         },
-        "padding-top": {
-          "value": "{space.1.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the top of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-top"
-          }
-        },
-        "padding-bottom": {
-          "value": "{space.1.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) at the bottom of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-bottom"
-          }
-        },
-        "padding-left": {
-          "value": "{space.3.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the left side of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-left"
-          }
-        },
-        "padding-right": {
-          "value": "{space.3.value}",
+        "padding": {
+          "value": "{space.1.value} {space.3.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the internal spacing (padding) on the right side of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-right"
+            "description": "Controls the padding (top/bottom, left/right) of each chip item. This creates breathing room between the chip text/icon and the chip border. Acceptable units: px.<br>CSS variable: --wm-chips-item-padding"
           }
         },
         "gap": {

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

@@ -36,37 +36,11 @@
             }
         },
         "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"
-            }
+          "value": "{border.width.0.value}",
+          "type": "border",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width (all sides) around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container. Acceptable units: px.<br>CSS variable: --wm-container-border-width"
           }
         },
         "color": {
@@ -113,37 +87,11 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside container elements. This creates breathing room above the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside container elements. This creates breathing room below the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside container elements. This creates breathing room on the left side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside container elements. This creates breathing room on the right side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-right"
-          }
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside container elements. This creates breathing room around the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding"
         }
       }
     },
@@ -156,22 +104,8 @@
               "type": "border"
             },
             "width": {
-              "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"
-              }
+              "value": "{border.width.0.value}",
+              "type": "border"
             },
             "color": {
               "value": "transparent",
@@ -187,22 +121,8 @@
             "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"
-            }
+            "value": "{space.0.value}",
+            "type": "space"
           }
         }
       },
@@ -214,22 +134,8 @@
               "type": "border"
             },
             "width": {
-              "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"
-              }
+              "value": "{border.width.base.value}",
+              "type": "border"
             },
             "color": {
               "value": "{color.outline.variant.value}",
@@ -245,22 +151,8 @@
             "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"
-            }
+            "value": "{space.0.value}",
+            "type": "space"
           }
         }
       },
@@ -280,22 +172,8 @@
               "type": "color"
             },
             "width": {
-              "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"
-              }
+              "value": "{border.width.base.value}",
+              "type": "border"
             },
             "radius": {
               "value": "{radius.sm.value}",
@@ -303,22 +181,8 @@
             }
           },
           "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"
-            }
+            "value": "{space.0.value}",
+            "type": "space"
           }
         }
       }

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

@@ -1,12 +1,96 @@
 {
   "currency": {
-    "inputgroup": {
-      "addon": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-currency"
+        }
+      }
+    },
+    "mapping": {
+      "labelwrapper": {
+        "min": {
+          "height": {
+            "value": "30px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Minimum height of the currency field label wrapper (the strip that holds the currency symbol or label next to the amount input). Keeps the prefix area aligned with the input row.<br>CSS variable: --wm-currency-labelwrapper-min-height"
+            }
+          }
+        },
+        "background": {
+          "value": "#4263eb",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Background color of the currency label wrapper (prefix area behind the symbol or label).<br>CSS variable: --wm-currency-labelwrapper-background"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "6px {space.0.value} {space.0.value} 6px",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-radius",
+              "description": "Corner radius of the currency label wrapper (typically the inner or leading edge that meets the amount field). Use px or theme space tokens.<br>CSS variable: --wm-currency-labelwrapper-border-radius"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.2.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Padding inside the currency label wrapper around the symbol or label text. Shorthand: vertical and horizontal spacing may use separate theme values.<br>CSS variable: --wm-currency-labelwrapper-padding"
+          }
+        },
         "width": {
-          "value": "40px",
-          "type": "space"
+          "value": "{space.12.value}",
+          "type": "border",
+          "attributes": {
+            "subtype": "space",
+            "description": "Width reserved for the currency label wrapper (prefix column width for the symbol or label). Often matches or complements the amount input layout; use px or theme space tokens.<br>CSS variable: --wm-currency-labelwrapper-width"
+          }
+        }
+      },
+      "label": {
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Text color for the currency label or symbol shown in the label wrapper (e.g. $, €, or custom label).<br>CSS variable: --wm-currency-label-color"
+          }
+        },
+        "font": {
+          "weight": {
+            "value": "{body.medium.font-weight.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Font weight for the currency label or symbol in the label wrapper. Use normal, bold, or numeric weights (100–900) for finer control.<br>CSS variable: --wm-currency-label-font-weight"
+            }
+          },
+          "size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Font size for the currency label or symbol in the label wrapper so it balances with the amount input text.<br>CSS variable: --wm-currency-label-font-size"
+            }
+          },
+          "family": {
+            "value": "{body.medium.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Font family for the currency label or symbol in the label wrapper.<br>CSS variable: --wm-currency-label-font-family"
+            }
+          }
         }
       }
-    }
+    },
+    "appearances": {}
   }
 }