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

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

@@ -1,171 +1,229 @@
 {
-    "select": {
-        "meta": {
-            "selector":{
-                "mobile": ".app-select"
-            },
-            "states":{
-                "active":{
-                    "selector":{
-                        "mobile":"-active-item"
-                    }
-                }
+  "select": {
+    "meta": {
+      "selector": {
+        "mobile": ".app-select"
+      },
+      "states": {
+        "active": {
+          "selector": {
+            "mobile": "-active-item"
+          }
+        }
+      }
+    },
+    "mapping": {
+      "arrow-button": {
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of arrow button This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-padding"
+          }
+        },
+        "background-color": {
+          "value": "{color.outline.variant.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of select arrow button This determines what background color the select arrow button appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-arrow-button--background-color"
+          }
+        },
+        "icon": {
+          "color": {
+            "value": "{color.on-background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
+            }
+          },
+      "height": {
+        "value": "24px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the height.<br>CSS variable: --wm-selec-icon-height"
+        }
+       },
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"
+            }
+          }
+        },
+          "font-size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
+            }
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"
             }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"
+            }
+          }
+        }
+      },
+      "modal-content": {
+        "background-color": {
+          "value": "{color.outline.variant.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of select modal content.This determines what background color the select modal content appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-modal-content-background-color"
+          }
         },
-        "mapping": {
-            "arrow": {
-                "button": {
-                    "border": {
-                        "color": {
-                            "value": "{color.transparent.@.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the border color of select arrow buttons (dropdown arrows that appear in select components). This determines what color the border around the arrow button appears in.<br>CSS variable: --wm-select-arrow-button-border-color"
-                            }
-                        },
-                        "style": {
-                            "value": "{border.style.base.value}",
-                            "type": "style",
-                            "attributes": {
-                                "subtype": "border-style",
-                                "description": "Controls the border style of select arrow buttons. This determines the style of the border around the arrow button (e.g., solid, dashed, none).<br>CSS variable: --wm-select-arrow-button-border-style"
-                            }
-                        },
-                        "width": {
-                            "value": "{border.width.base.value}",
-                            "type": "space",
-                            "attributes": {
-                                "subtype": "border-width",
-                                "description": "Controls the border width (thickness) of select arrow buttons. This determines how thick the border around the arrow button appears. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-border-width"
-                            }
-                        },
-                        "radius": {
-                            "value": "{radius.base.value}",
-                            "type": "space",
-                            "attributes": {
-                                "subtype": "radius",
-                                "description": "Controls the border radius (rounded corners) of select arrow buttons. This determines how rounded the corners of the arrow button appear. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-border-radius"
-                            }
-                        }
-                    },
-                    "height": {
-                        "value": "12px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the height of select arrow buttons. This determines the vertical size of the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-height"
-                        }
-                    }
-                }
-            },
-            "modal": {
-                "content": {
-                    "background": {
-                        "value": "{color.white.@.value}",
-                        "type": "color",
-                        "attributes": {
-                            "subtype": "color",
-                            "description": "Sets the background color of select modal content (the dropdown modal that appears when selecting options). This determines what color the background of the modal appears in.<br>CSS variable: --wm-select-modal-content-background"
-                        }
-                    },
-                    "border": {
-                        "color": {
-                            "value": "{color.transparent.@.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the border color of select modal content. This determines what color the border around the modal appears in.<br>CSS variable: --wm-select-modal-content-border-color"
-                            }
-                        },
-                        "style": {
-                            "value": "{border.style.base.value}",
-                            "type": "style",
-                            "attributes": {
-                                "subtype": "border-style",
-                                "description": "Controls the border style of select modal content. This determines the style of the border around the modal (e.g., solid, dashed, none).<br>CSS variable: --wm-select-modal-content-border-style"
-                            }
-                        },
-                        "width": {
-                            "value": "{border.width.base.value}",
-                            "type": "space",
-                            "attributes": {
-                                "subtype": "border-width",
-                                "description": "Controls the border width (thickness) of select modal content. This determines how thick the border around the modal appears. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"
-                            }
-                        },
-                        "radius": {
-                            "value": "{radius.base.value}",
-                            "type": "space",
-                            "attributes": {
-                                "subtype": "radius",
-                                "description": "Controls the border radius (rounded corners) of select modal content. This determines how rounded the corners of the modal appear. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-radius"
-                            }
-                        }
-                    },
-                    "width": {
-                        "value": "90%",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the width of select modal content. This determines how wide the modal appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-select-modal-content-width"
-                        }
-                    }
-                }
-            },
-            "item": {
-                "color": {
-                    "value": "{color.primary.@.value}",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the text color of select items (individual options that appear in the select dropdown). This determines what color the text in select items appears in, typically matching the primary theme color.<br>CSS variable: --wm-select-item-color"
-                    }
-                },
-                "padding": {
-                    "vertical": {
-                        "value": "{space.2.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the vertical padding (top and bottom spacing) of select items. This creates breathing room at the top and bottom of select items. Acceptable units: px.<br>CSS variable: --wm-select-item-padding-vertical"
-                        }
-                    },
-                    "horizontal": {
-                        "value": "{space.4.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the horizontal padding (left and right spacing) of select items. This creates breathing room on the left and right sides of select items. Acceptable units: px.<br>CSS variable: --wm-select-item-padding-horizontal"
-                        }
-                    }
-                },
-                "border": {
-                    "bottom": {
-                        "value": "1px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the bottom border width (thickness) of select items. This determines how thick the bottom border appears between select items. Acceptable units: px.<br>CSS variable: --wm-select-item-border-bottom"
-                        }
-                    }
-                }
-            },
-            "states": {
-                "active": {
-                    "item": {
-                        "color": {
-                            "value": "{color.secondary.@.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the text color of active/selected select items (options that are currently selected or highlighted). This determines what color the text appears in for active items, typically matching the secondary theme color.<br>CSS variable: --wm-select-active-item-color"
-                            }
-                        }
-                    }
-                }
+        "border": {
+          "radius": {
+            "value": "{radius.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"
             }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"
+            }
+          }
+        }
+      },
+      "modal-text": {
+        "font-size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"
+          }
         },
-        "appearance": {}
-    }
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"
+          }
+        }
+      },
+      "check": {
+        "icon": {
+          "color": {
+            "value": "{color.on-background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
+            }
+          },
+          "font-size": {
+            "value": "{icon.size.md.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
+            }
+          }
+        }
+      }
+    },
+    "appearance": {}
+  }
 }

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

@@ -42,13 +42,11 @@
           }
         },
         "padding": {
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of loading data messages. This creates breathing room on the left side of the loading message text.<br>CSS variable: --wm-spinner-text-padding-left"
-            }
+          "value": "{space.0.value} {space.0.value} {space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) of loading data messages. This creates breathing room around the loading message text. Acceptable units: px.<br>CSS variable: --wm-spinner-text-padding"
           }
         }
       },

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

@@ -110,21 +110,11 @@
           }
         },
         "padding": {
-          "left": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the left side.<br>CSS variable: --wm-switch-button-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the right side.<br>CSS variable: --wm-switch-button-padding-right"
-            }
+          "value": "{space.0.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons. Acceptable units: px.<br>CSS variable: --wm-switch-button-padding"
           }
         },
         "ripple": {

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

@@ -24,30 +24,28 @@
                 }
             },
             "border": {
-                "top": {
-                    "width": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the border top width of tabbar. This determines border top width of the tabbar. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-top-width"
-                        }
-                    },
-                    "color": {
-                        "value": "{color.scrim.@.value}",
-                        "type": "color",
-                        "attributes": {
-                            "subtype": "color",
-                            "description": "Sets the border top color of tabbar. This determines what color the border top of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-top-color"
-                        }
-                    },
-                    "style": {
-                        "value": "{border.style.solid.value}",
-                        "type": "radius",
-                        "attributes": {
-                            "subtype": "border-style",
-                            "description": "Sets the border top style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-top-style"
-                        }
+                "width": {
+                    "value": "{border.width.0.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the border width of tabbar (top, right, bottom, left). Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-width"
+                    }
+                },
+                "color": {
+                    "value": "{color.scrim.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of tabbar. This determines what color the border of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-color"
+                    }
+                },
+                "style": {
+                    "value": "{border.style.solid.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Sets the border style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-style"
                     }
                 }
             },
@@ -113,21 +111,11 @@
                     }
                 },
                 "padding": {
-                    "top": {
-                        "value": "{space.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the top padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the top of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-top"
-                        }
-                    },
-                    "bottom": {
-                        "value": "{space.1.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the bottom padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the bottom of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-bottom"
-                        }
+                    "value": "{space.1.value} {space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top/bottom, left/right) of tabbar more menu rows. This creates breathing room around each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding"
                     }
                 }
             },
@@ -158,6 +146,14 @@
                             "subtype": "radius",
                             "description": "Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"
                         }
+                    },
+                    "width": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the border width of tabbar items. This determines the minimum width horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-width"
+                        }
                     }
                 },
                 "background": {
@@ -197,21 +193,11 @@
                     }
                 },
                 "padding": {
-                    "right": {
-                        "value": "{space.0.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the right padding (horizontal spacing) of tabbar icons. This creates breathing room on the right side of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-right"
-                        }
-                    },
-                    "bottom": {
-                        "value": "{space.0.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the bottom padding (vertical spacing) of tabbar icons. This creates breathing room at the bottom of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-bottom"
-                        }
+                    "value": "{space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top, right, bottom, left) of tabbar icons. This creates breathing room around icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding"
                     }
                 },
                 "border-bottom-color": {
@@ -280,6 +266,14 @@
                                     "subtype": "radius",
                                     "description": "Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"
                                 }
+                            },
+                            "width": {
+                                "value": "{border.width.0.value}",
+                                "type": "border",
+                                "attributes": {
+                                    "subtype": "space",
+                                    "description": "Controls the border width of tabbar items. This determines the minimum width horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-width(active state)"
+                                }
                             }
                         },
                         "background": {