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

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

@@ -34,14 +34,16 @@
         "value": "52px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"
         }
       },
       "height": {
         "value": "32px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"
         }
       },
       "background": {
@@ -49,7 +51,8 @@
           "value": "{color.surface.container.highest.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background"
           }
         }
       },
@@ -58,21 +61,24 @@
           "value": "2px",
           "type": "space",
           "attributes": {
-            "subtype": "border-width"
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"
           }
         },
         "color": {
           "value": "{color.outline.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"
           }
         },
         "style": {
           "value": "{border.style.base.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "border-style"
+            "subtype": "border-style",
+            "description": "Controls the style of the border around toggle switches. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toggle-border-style"
           }
         }
       },
@@ -80,7 +86,8 @@
         "value": "{radius.pill.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the corner rounding of toggle switches. When set to 'pill', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius"
         }
       },
       "state": {
@@ -89,7 +96,8 @@
             "value": "40px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size"
             }
           },
           "color": {
@@ -97,7 +105,8 @@
               "value": "{color.outline.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-state-layer-color"
               }
             }
           },
@@ -106,7 +115,8 @@
               "value": "0",
               "type": "radius",
               "attributes": {
-                "subtype": "opacity"
+                "subtype": "opacity",
+                "description": "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-toggle-state-layer-opacity"
               }
             }
           }
@@ -118,7 +128,8 @@
             "value": "16px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size"
             }
           }
         },
@@ -127,7 +138,8 @@
             "value": "{color.outline.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"
             }
           }
         }
@@ -234,4 +246,4 @@
       }
     }
   }
-}
+}

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

@@ -0,0 +1,10 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| width | Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width |
+| height | Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height |

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

@@ -5,17 +5,19 @@
         "value": "300px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width"
         }
       },
       "height": {
         "value": "150px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height"
         }
       }
     },
     "appearances": {}
   }
-}
+}

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

@@ -0,0 +1,58 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| background | Sets the background color of wizard components (multi-step forms that guide users through a process like account setup, checkout, or configuration). This is the main background color that appears behind the entire wizard container.<br>CSS variable: --wm-wizard-background |
+| border.color | Sets the color of borders around wizard components (multi-step forms that guide users through a process). 'transparent' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-border-color |
+| border.style | Sets the visual style of borders around wizard components (multi-step forms). 'none' removes borders completely, 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-wizard-border-style |
+| border.width | Controls the thickness of borders around wizard components (multi-step forms that guide users through a process). This determines how thick the border lines appear around the wizard container.<br>CSS variable: --wm-wizard-border-width |
+| border.radius | Controls the corner rounding of wizard components (multi-step forms that guide users through a process). This makes the wizard container corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-border-radius |
+| shadow | Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-shadow |
+| padding | Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding |
+| heading.background | Sets the background color of wizard headings (the top section that contains the step navigation and progress indicators). This creates a distinct background color for the wizard header area.<br>CSS variable: --wm-wizard-heading-background |
+| heading.border.width | Controls the thickness of borders around wizard headings (the top section that contains the step navigation). This determines how thick the border lines appear around the wizard header area.<br>CSS variable: --wm-wizard-heading-border-width |
+| heading.border.style | Sets the visual style of borders around wizard headings (the top section that contains the step navigation). 'none' removes borders completely, 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-wizard-heading-border-style |
+| heading.border.color | Sets the color of borders around wizard headings (the top section that contains the step navigation). 'transparent' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-heading-border-color |
+| heading.border.radius | Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-border-radius |
+| heading.padding | Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding |
+| body.min-height | Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-min-height |
+| step.display | Controls how wizard steps are displayed (individual steps in the wizard navigation like 'Step 1', 'Step 2', 'Step 3'). 'inline-flex' arranges steps in a horizontal line with flexible spacing, 'flex' allows more control over layout, 'block' stacks them vertically.<br>CSS variable: --wm-wizard-step-display |
+| step.gap | Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-step-gap |
+| step.title.color | Sets the text color of wizard step titles (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This determines what color the step title text appears in.<br>CSS variable: --wm-wizard-step-title-color |
+| step.title.background | Sets the background color of wizard step titles (the main text labels for each step). 'transparent' removes the background color, or you can specify a specific color value to create a colored background behind the step titles.<br>CSS variable: --wm-wizard-step-title-background |
+| step.title.font.family | Sets the typeface (font style) for wizard step titles (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family |
+| step.title.font.weight | Controls how thick or bold wizard step titles appear (the main text labels for each step). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight |
+| step.title.font.size | Controls how large wizard step titles appear (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This affects the size of the text that users see for each step.<br>CSS variable: --wm-wizard-step-title-font-size |
+| step.title.line-height | Controls the vertical spacing between lines when wizard step titles wrap to multiple lines. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height |
+| step.title.letter-spacing | Controls the horizontal spacing between individual characters in wizard step titles (the main text labels for each step). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing |
+| step.description.color | Sets the text color of wizard step descriptions (the smaller text that provides additional details about each step like 'Enter your personal details' or 'Review your information'). This determines what color the step description text appears in.<br>CSS variable: --wm-wizard-step-description-color |
+| step.description.font.family | Sets the font family of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-family |
+| step.description.font.weight | Controls the font weight of wizard step descriptions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-description-font-weight |
+| step.description.font.size | Controls the font size of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-size |
+| step.description.line-height | Controls the line height of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-line-height |
+| step.description.letter-spacing | Controls spacing between characters in wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-letter-spacing |
+| step.indicator.size | Controls how large wizard step indicators appear (the circular or numbered indicators that show progress like '1', '2', '3' or checkmark icons). This affects the size of the progress indicators that users see for each step. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-indicator-size |
+| step.indicator.background | Sets the background color of wizard step indicators (the circular or numbered indicators that show progress). 'transparent' removes the background color, or you can specify a specific color value to create a colored background behind the indicators.<br>CSS variable: --wm-wizard-step-indicator-background |
+| step.indicator.border.width | Controls the thickness of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines how thick the border lines appear around the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-width |
+| step.indicator.border.style | Sets the visual style of borders around wizard step indicators (the circular or numbered indicators that show progress). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-wizard-step-indicator-border-style |
+| step.indicator.border.color | Sets the color of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines what color the border lines appear in that outline the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-color |
+| step.indicator.border.radius | Controls the corner rounding of wizard step indicators (the circular or numbered indicators that show progress). This makes the step indicators perfectly circular for a clean, modern appearance.<br>CSS variable: --wm-wizard-step-indicator-border-radius |
+| step.count.color | Sets the text color of wizard step count numbers (the numbers that appear inside step indicators like '1', '2', '3'). This determines what color the step numbers appear in.<br>CSS variable: --wm-wizard-step-count-color |
+| step.count.font.family | Sets the font family of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-family |
+| step.count.font.size | Controls the font size of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-size |
+| step.count.font.weight | Controls the font weight of wizard step count numbers. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-count-font-weight |
+| step.count.line-height | Controls the line height of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-line-height |
+| step.icon.font.family | Sets the typeface (font style) for wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines whether the icons appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-icon-font-family |
+| step.icon.font.size | Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-font-size |
+| step.icon.font.weight | Controls how thick or bold wizard step icons appear (the small symbols that appear in step indicators). 'normal' makes them regular weight, 'bold' makes them thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-icon-font-weight |
+| step.icon.line-height | Controls the vertical spacing between lines when wizard step icons wrap to multiple lines. This ensures proper spacing for the icons displayed in the step indicators.<br>CSS variable: --wm-wizard-step-icon-line-height |
+| step.icon.color | Sets the color of wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines what color the icons appear in.<br>CSS variable: --wm-wizard-step-icon-color |
+| step.icon.size | Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-size |
+| step.connector.height | Controls how tall wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the vertical size of the connecting lines between steps. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-wizard-step-connector-height |
+| step.connector.width | Controls how wide wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the horizontal thickness of the connecting lines between steps. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-connector-width |
+| step.connector.style | Sets the visual style of wizard step connectors (the lines that connect step indicators to show the progression flow). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes the connectors completely.<br>CSS variable: --wm-wizard-step-connector-style |
+| step.connector.color | Sets the color of wizard step connectors (the lines that connect step indicators to show the progression flow). This determines what color the connecting lines appear in between the step indicators.<br>CSS variable: --wm-wizard-step-connector-color |