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

package/src/tokens/web/components/picture/picture.json

@@ -46,28 +46,32 @@
         "value": "auto",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how wide images appear on the page. 'auto' lets the image size itself naturally, while specific values (px, %, em, rem, vw) set a fixed width.<br>CSS variable: --wm-picture-width"
         }
       },
       "height": {
         "value": "auto",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how tall images appear on the page. 'auto' lets the image size itself naturally, while specific values (px, %, em, rem, vh) set a fixed height.<br>CSS variable: --wm-picture-height"
         }
       },
       "radius": {
         "value": "{radius.none.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the corner rounding of images. When set to 'none', images have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"
         }
       },
       "padding": {
         "value": "{space.0.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the internal spacing around images (the space between the image and its border). This creates breathing room around the image content.<br>CSS variable: --wm-picture-padding"
         }
       },
       "border": {
@@ -75,21 +79,24 @@
           "value": "{color.border.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the color of the outline around images. This creates a colored border around the image to define its boundaries.<br>CSS variable: --wm-picture-border-color"
           }
         },
         "style": {
           "value": "{border.style.none.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "border-style"
+            "subtype": "border-style",
+            "description": "Controls the style of the outline around images. 'none' removes the border, 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-picture-border-style"
           }
         },
         "width": {
           "value": "{border.width.0.value}",
           "type": "space",
           "attributes": {
-            "subtype": "border-width"
+            "subtype": "border-width",
+            "description": "Controls the thickness of the outline around images. When set to 0, there's no visible border. Higher values create thicker borders around the image.<br>CSS variable: --wm-picture-border-width"
           }
         }
       },
@@ -97,7 +104,8 @@
         "value": "{color.transparent.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the background color of images (the area behind the image). When set to 'transparent', images have no background color, making them transparent.<br>CSS variable: --wm-picture-background"
         }
       }
     },
@@ -222,4 +230,4 @@
       }
     }
   }
-}
+}

package/src/tokens/web/components/popover/Token.Readme.md

@@ -0,0 +1,33 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| min-width | Controls the minimum width of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always wide enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-width |
+| min-height | Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height |
+| z-index | Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index |
+| gap | Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap |
+| margin | Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin |
+| padding | Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding |
+| background | Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background |
+| color | Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color |
+| shadow | Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow |
+| radius | Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius |
+| header.padding | Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding |
+| header.color | Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color |
+| header.font-family | Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family |
+| header.font-weight | Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight |
+| header.font-size | Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size |
+| header.line-height | Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height |
+| header.letter-spacing | Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing |
+| body.padding | Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding |
+| body.font-family | Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family |
+| body.font-size | Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size |
+| body.font-weight | Controls how thick or bold the popover body content appears (the main content area of popover windows). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-font-weight |
+| body.line-height | Controls the vertical spacing between lines when popover body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-line-height |
+| body.letter-spacing | Controls the horizontal spacing between individual characters in popover body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing |
+| arrow.background | Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background |
+| arrow.size | Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size |

package/src/tokens/web/components/popover/popover.json

@@ -5,70 +5,80 @@
         "value": "50px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the minimum width of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always wide enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-width"
         }
       },
       "min-height": {
         "value": "50px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"
         }
       },
       "z-index": {
         "value": "1060",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index"
         }
       },
       "gap": {
         "value": "~\"calc({space.1.value} * 2.5)\"",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap"
         }
       },
       "margin": {
         "value": "{space.1.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin"
         }
       },
       "padding": {
         "value": "{space.0.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding"
         }
       },
       "background": {
         "value": "{color.surface.container.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background"
         }
       },
       "color": {
         "value": "{color.on-surface.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color"
         }
       },
       "shadow": {
         "value": "{elevation.shadow.1.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "elevation"
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"
         }
       },
       "radius": {
         "value": "{radius.sm.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"
         }
       },
       "header": {
@@ -76,49 +86,56 @@
           "value": "{space.4.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding"
           }
         },
         "color": {
           "value": "{color.on-surface.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"
           }
         },
         "font-family": {
           "value": "{h4.font-family.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-family"
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"
           }
         },
         "font-weight": {
           "value": "{h4.font-weight.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-weight"
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"
           }
         },
         "font-size": {
           "value": "{h4.font-size.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-size"
+            "subtype": "font-size",
+            "description": "Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"
           }
         },
         "line-height": {
           "value": "{h4.line-height.value}",
           "type": "font",
           "attributes": {
-            "subtype": "line-height"
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"
           }
         },
         "letter-spacing": {
           "value": "{h4.letter-spacing.value}",
           "type": "font",
           "attributes": {
-            "subtype": "letter-spacing"
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"
           }
         }
       },
@@ -127,42 +144,48 @@
           "value": "{space.4.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding"
           }
         },
         "font-family": {
           "value": "{body.medium.font-family.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-family"
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family"
           }
         },
         "font-size": {
           "value": "{body.medium.font-size.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-size"
+            "subtype": "font-size",
+            "description": "Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size"
           }
         },
         "font-weight": {
           "value": "{body.medium.font-weight.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-weight"
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover body content appears (the main content area of popover windows). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-font-weight"
           }
         },
         "line-height": {
           "value": "{body.medium.line-height.value}",
           "type": "font",
           "attributes": {
-            "subtype": "line-height"
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-line-height"
           }
         },
         "letter-spacing": {
           "value": "{body.medium.letter-spacing.value}",
           "type": "font",
           "attributes": {
-            "subtype": "letter-spacing"
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in popover body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing"
           }
         }
       },
@@ -171,17 +194,19 @@
           "value": "{color.surface.container.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background"
           }
         },
         "size": {
           "value": "{space.3.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size"
           }
         }
       }
     }
   }
-}
+}

package/src/tokens/web/components/progress-bar/Token.Readme.md

@@ -0,0 +1,15 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| height | Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height |
+| radius | Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius |
+| margin | Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin |
+| transition.time | Controls how long progress bar animations take to complete (the smooth movement of the progress indicator). Shorter values make animations faster, longer values make them slower.<br>CSS variable: --wm-progress-bar-transition-time |
+| stroke.inactive | Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-stroke-inactive |
+| stroke.active | Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-stroke-active |
+| label.color | Sets the text color of progress bar labels (the percentage or text that appears on the progress bar). This should contrast well with the progress bar colors for readability.<br>CSS variable: --wm-progress-bar-label-color |

package/src/tokens/web/components/progress-bar/progress-bar.json

@@ -81,21 +81,24 @@
         "value": "16px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height"
         }
       },
       "radius": {
         "value": "{radius.lg.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius"
         }
       },
       "margin": {
         "value": "{space.2.value} {space.0.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin"
         }
       },
       "transition": {
@@ -103,7 +106,8 @@
           "value": "0.5s",
           "type": "radius",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls how long progress bar animations take to complete (the smooth movement of the progress indicator). Shorter values make animations faster, longer values make them slower.<br>CSS variable: --wm-progress-bar-transition-time"
           }
         }
       },
@@ -112,14 +116,16 @@
           "value": "{color.primary.container.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-stroke-inactive"
           }
         },
         "active": {
           "value": "{color.primary.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-stroke-active"
           }
         }
       },
@@ -128,7 +134,8 @@
           "value": "{color.on-primary.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the text color of progress bar labels (the percentage or text that appears on the progress bar). This should contrast well with the progress bar colors for readability.<br>CSS variable: --wm-progress-bar-label-color"
           }
         }
       }
@@ -429,4 +436,4 @@
       }
     }
   }
-}
+}

package/src/tokens/web/components/progress-circle/Token.Readme.md

@@ -0,0 +1,11 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| stroke.inactive | Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive |
+| stroke.active | Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active |
+| label.color | Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color |

package/src/tokens/web/components/progress-circle/progress-circle.json

@@ -46,14 +46,16 @@
           "value": "{color.primary.container.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"
           }
         },
         "active": {
           "value": "{color.primary.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"
           }
         }
       },
@@ -62,7 +64,8 @@
           "value": "{color.primary.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color"
           }
         }
       }
@@ -211,4 +214,4 @@
       }
     }
   }
-}
+}

package/src/tokens/web/components/radioset/Token.Readme.md

@@ -0,0 +1,24 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| gap | 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 | 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 |
+| label.font-family | 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 |
+| label.font-weight | Controls how thick or bold the 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 |
+| label.line-height | 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 |
+| label.letter-spacing | 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 |
+| label.color.@ | 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 | 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 | 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 |
+| border.width | 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 |
+| border.color | 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 |
+| state.layer.size | Controls the size of the invisible clickable area around radio buttons (the state layer). This area is larger than the visible radio button, making it easier for users to click and interact with the radio button.<br>CSS variable: --wm-radiobutton-state-layer-size |
+| state.layer.color | Sets the color of the state layer that appears when users hover, focus, or interact with radio buttons. This creates visual feedback to show that the radio button is interactive and responsive to user actions.<br>CSS variable: --wm-radiobutton-state-layer-color |
+| state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-radiobutton-state-layer-opacity |
+| set.item.column.gap | 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 |
+| set.item.row.gap | 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 |