@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

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

@@ -13,7 +13,7 @@
           },
           "checked": {
             "selector": {
-              "mobile": "-checked-icon"
+              "mobile": "-checked-icon, .app-radioset-selected-label"
             }
           }
         }
@@ -23,95 +23,171 @@
     "mapping": {
       "gap": {
         "value": "{space.1.value}",
-        "type": "space"
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"
+        }
       },
       "label": {
         "font-size": {
           "value": "{body.large.font-size.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"
+          }
         },
         "font-family": {
           "value": "{body.large.font-family.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"
+          }
         },
         "font-weight": {
           "value": "{body.large.font-weight.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold radio button label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-radiobutton-label-font-weight"
+          }
         },
         "line-height": {
           "value": "{body.large.line-height.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"
+          }
         },
         "letter-spacing": {
           "value": "{body.large.letter-spacing.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"
+          }
         },
         "color": {
           "@": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"
+            }
           }
         }
       },
       "size": {
         "value": "20px",
-        "type": "space"
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"
+        }
       },
       "indicator": {
         "size": {
           "value": "16px",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls the size of the radio button indicator (the small dot that appears inside the radio button when it's selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"
+          }
         }
       },
       "color": {
         "@": {
           "value": "transparent",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of radio button indicators. When transparent, only the border is visible. When filled with a color, the radio button appears with a colored background.<br>CSS variable: --wm-radiobutton-color"
+          }
         }
       },
       "border": {
         "width": {
           "value": "2px",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"
+          }
         },
         "color": {
           "value": "{color.on-surface.variant.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"
+          }
         }
       },
       "title": {
         "background": {
           "color": {
             "value": "transparent",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of radio button group titles (section titles that group related radio button options). When transparent, only the title text is visible. When filled with a color, the title appears with a colored background.<br>CSS variable: --wm-radiobutton-title-background-color"
+            }
           }
         },
         "color": {
           "value": "{color.on-surface.variant.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of radio button group titles (section titles that group related radio button options). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-title-color"
+          }
         },
         "font": {
           "size": {
             "value": "{body.large.font-size.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of radio button group title text. This affects how large the title text appears.<br>CSS variable: --wm-radiobutton-title-font-size"
+            }
           },
           "family": {
             "value": "{body.large.font-family.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for radio button group title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-title-font-family"
+            }
           }
         },
         "line-height": {
           "value": "40px",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when radio button group title text wraps to multiple lines. This ensures proper spacing for the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-line-height"
+          }
         },
         "padding": {
           "left": {
             "value": "{space.2.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left padding (horizontal spacing) inside radio button group titles. This creates breathing room on the left side of the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding-left"
+            }
           },
           "right": {
             "value": "{space.2.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the right padding (horizontal spacing) inside radio button group titles. This creates breathing room on the right side of the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding-right"
+            }
           }
         }
       },
@@ -120,13 +196,21 @@
           "column": {
             "gap": {
               "value": "{space.6.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"
+              }
             }
           },
           "row": {
             "gap": {
               "value": "{space.2.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"
+              }
             }
           }
         }
@@ -137,20 +221,32 @@
             "color": {
               "@": {
                 "value": "{color.on-surface.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of checked radio button labels (the text that appears next to selected radio button options). This determines what color the label text appears in when the radio button is selected.<br>CSS variable: --wm-radiobutton-label-color (checked state)"
+                }
               }
             }
           },
           "color": {
             "@": {
               "value": "{color.secondary.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of checked radio button indicators. This fills the selected radio button with a color to visually indicate it's been selected.<br>CSS variable: --wm-radiobutton-color (checked state)"
+              }
             }
           },
           "border": {
             "color": {
                 "value": "{color.secondary.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of the border around checked radio button indicators. This determines the color of the outline when the radio button is selected.<br>CSS variable: --wm-radiobutton-border-color (checked state)"
+                }
             }
           }
         },
@@ -159,19 +255,31 @@
             "color": {
               "@": {
                 "value": "{color.on-surface.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of disabled radio button labels (the text that appears next to disabled radio button options). This determines what color the label text appears in when the radio button is disabled.<br>CSS variable: --wm-radiobutton-label-color (disabled state)"
+                }
               }
             }
           },
           "border": {
             "color": {
               "value": "{color.on-surface.variant.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the border around disabled radio button indicators. This determines the color of the outline when the radio button is disabled.<br>CSS variable: --wm-radiobutton-border-color (disabled state)"
+              }
             }
           },
           "opacity": {
             "value": "0.8",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled radio buttons. When set to 0.8, disabled radio buttons appear slightly faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-radiobutton-opacity"
+            }
           }
         }
       }

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

@@ -22,54 +22,94 @@
     "mapping": {
       "padding": {
         "value": "{space.2.value}",
-        "type": "space"
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-padding"
+        }
       },
       "opacity":{
             "value": "1",
-            "type": "space"
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of rating components (star rating systems where users can rate items with 1-5 stars). When set to 1, the rating is fully opaque. Lower values make the rating more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity"
+            }
       },
       "icon": {
         "color": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"
+            }
           },
         "size": {
           "value": "32px",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"
+          }
         }
       },
       "text": {
         "size": {
           "value": "32px",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large rating text appears (numeric or text values that appear alongside rating icons). This affects the size of the rating text that users see.<br>CSS variable: --wm-rating-text-size"
+          }
         },
         "padding": {
           "left": {
             "value": "{space.2.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the spacing between rating text and icons. This creates visual separation between the text and the rating icons.<br>CSS variable: --wm-rating-text-padding-left"
+            }
           }
         },
         "color": {
           "value": "{color.warning.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of rating text (numeric or text values that appear alongside rating icons). This is typically a bright color like yellow or orange to match the selected rating stars.<br>CSS variable: --wm-rating-text-color"
+          }
         }
       },
       "states": {
         "disabled": {
           "opacity": {
             "value": "0.38",
-            "type": "space"
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled rating components. When set to 0.38, the rating appears faded to indicate it cannot be clicked. Lower values make it more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity (disabled state)"
+            }
           }
         },
         "active": {
             "icon": {
               "color": {
                 "value": "{color.warning.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-icon-color (active state)"
+                }
               },
               "size": {
                 "value": "32px",
-                "type": "space"
+                "type": "space",
+                "attributes": {
+                  "subtype": "icon-size",
+                  "description": "Controls how large active rating icons appear (the stars that are selected or hovered over). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size (active state)"
+                }
               }
           }
         }