@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

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

@@ -87,7 +87,7 @@
         "value": "none",
         "type": "radius",
         "attributes": {
-          "subtype": "radius",
+          "subtype": "elevation",
           "description": "Controls the box shadow of cards.<br>CSS variable: --wm-card-shadow"
         }
       },
@@ -127,6 +127,7 @@
           "type": "space",
           "attributes": {
             "subtype": "space",
+            "excludeFromUI": true,
             "description": "Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding"
           }
         },
@@ -135,6 +136,7 @@
             "value": "{border.width.base.value}",
             "type": "space",
             "attributes": {
+              "excludeFromUI": true,
               "subtype": "border-width",
               "description": "Controls the border width of card footers.<br>CSS variable: --wm-card-footer-border-width"
             }
@@ -143,6 +145,7 @@
             "value": "{border.style.base.value}",
             "type": "radius",
             "attributes": {
+              "excludeFromUI": true,
               "subtype": "border-style",
               "description": "Controls the border style of card footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-footer-border-style"
             }
@@ -151,6 +154,7 @@
             "value": "{color.outline.variant.value}",
             "type": "color",
             "attributes": {
+              "excludeFromUI": true,
               "subtype": "color",
               "description": "Sets the border color of card footers.<br>CSS variable: --wm-card-footer-border-color"
             }
@@ -276,12 +280,10 @@
             }
           },
           "shadow": {
-            "@": {
               "value": "none",
               "type": "radius",
               "attributes": {
                 "subtype": "elevation"
-              }
             }
           },
           "states": {
@@ -328,13 +330,11 @@
             }
           },
           "shadow": {
-            "@": {
               "value": "{elevation.shadow.1.value}",
               "type": "radius",
               "attributes": {
                 "subtype": "elevation"
               }
-            }
           },
           "states": {
             "hover": {

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

@@ -7,6 +7,7 @@ This table lists all tokens for this component:
 | Token | Description |
 |-------|------------|
 | gap | Controls the horizontal spacing between the checkbox box (the square input element) and the label text. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkbox-gap |
+| caption.color | Controls the color of the checkbox label text.<br>CSS variable: --wm-checkbox-caption-color |
 | caption.font-size | Controls the size of the checkbox label text (the descriptive text that appears next to the checkbox). This text explains what the checkbox option represents, such as 'I agree to terms' or 'Subscribe to newsletter'.<br>CSS variable: --wm-checkbox-caption-font-size |
 | caption.font-family | Sets the font family (typeface) for the checkbox label text. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-caption-font-family |
 | caption.font-weight | Controls the thickness/boldness of the checkbox label text. Acceptable values: normal, bold, 100-900. This affects how prominent the descriptive text appears next to the checkbox.<br>CSS variable: --wm-checkbox-caption-font-weight |

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

@@ -45,6 +45,14 @@
         }
       },
       "caption": {
+        "color": {
+          "value": "inherit",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the color of the checkbox label text.<br>CSS variable: --wm-checkbox-caption-color"
+          }
+        },
         "font-size": {
           "value": "{body.large.font-size.value}",
           "type": "font",

package/src/tokens/web/components/data-table/data-table.json

@@ -8,12 +8,17 @@
         "states": {
           "hover": {
             "selector": {
-              "web": " .table tbody tr:hover"
+              "web": " .table > tbody > tr:hover"
             }
           },
           "active": {
             "selector": {
-              "web": " .table tbody tr.active"
+              "web": " .table > tbody > tr.active"
+            }
+          },
+          "selected": {
+            "selector": {
+              "web": " .table tbody tr td.selected-column"
             }
           }
         }
@@ -483,6 +488,26 @@
               }
             }
           }
+        },
+        "selected": {
+          "body": {
+            "row": {
+              "background-even": {
+                "value": "{color.surface.container.lowest.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "background-odd": {
+                "value": "{color.surface.container.lowest.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            }
+          }
         }
       }
     },

package/src/tokens/web/components/dropdown-menu/dropdown-menu.json

@@ -56,9 +56,9 @@
         },
         "box-shadow": {
           "value": "{elevation.shadow.2.value}",
-          "type": "shadow",
+          "type": "radius",
           "attributes": {
-            "subtype": "shadow",
+            "subtype": "elevation",
             "description": "Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow"
           }
         },

package/src/tokens/web/components/form-controls/Token.Readme.md

@@ -30,6 +30,7 @@ This table lists all tokens for this component:
 | caption.color | Sets the text color of form captions.<br>CSS variable: --wm-form-caption-color |
 | caption.margin | Controls margin of form captions.<br>CSS variable: --wm-form-caption-margin |
 | caption.padding | Controls padding of form captions.<br>CSS variable: --wm-form-caption-padding |
+| caption.display | Sets the display property of form captions.<br>CSS variable: --wm-form-caption-display |
 | caption.gap | Controls spacing between form caption elements.<br>CSS variable: --wm-form-caption-gap |
 | required.content | Sets the content for required field indicators.<br>CSS variable: --wm-form-required-content |
 | required.color | Sets the color of required field indicators.<br>CSS variable: --wm-form-required-color |

package/src/tokens/web/components/form-controls/form-controls.json

@@ -23,7 +23,7 @@
           },
           "error": {
             "selector": {
-              "web": ":has(.form-control.ng-touched.ng-invalid), .form-control.ng-touched.ng-invalid, .form-group .ng-touched.ng-invalid .form-control"
+              "web": ":has(.form-control.ng-touched.ng-invalid),:has(.input-group.ng-touched.ng-invalid), .form-control.ng-touched.ng-invalid,.form-group .ng-touched.ng-invalid .form-control,:has(.control-label.text-danger)"
             }
           }
         }
@@ -50,6 +50,15 @@
           "type": "space"
         }
       },
+      "field":{
+         "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space"
+          }
+        }
+      },
       "control": {
         "color": {
           "@": {
@@ -245,6 +254,14 @@
             "description": "Controls padding of form captions.<br>CSS variable: --wm-form-caption-padding"
           }
         },
+        "display": {
+          "value": "inline-block",
+          "type": "other",
+          "attributes": {
+            "subtype": "display",
+            "description": "Sets the display property of form captions.<br>CSS variable: --wm-form-caption-display"
+          }
+        },
         "gap": {
           "value": "~\"calc({space.1.value} * 0.5)\"",
           "type": "space",
@@ -344,7 +361,7 @@
         "group": {
           "btn": {
             "width": {
-              "value": "{space.10.value}",
+              "value": "{space.7.value}",
               "type": "space",
               "attributes": {
                 "subtype": "space",

package/src/tokens/web/components/iconbutton-toggleable/Readme.md

@@ -0,0 +1,17 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Iconbutton-toggle Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Outlined
+
+**Appearance Class:** `iconbutton-toggle-outlined`
+
+---
+
+## Appearance: Filled
+
+**Appearance Class:** `iconbutton-toggle-filled`

package/src/tokens/web/components/iconbutton-toggleable/Token.Readme.md

@@ -0,0 +1,19 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| font-size | 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-iconbutton-toggle-font-size |
+| color | 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-iconbutton-toggle-color |
+| box-shadow | Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow |
+| background | Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background |
+| border.width | Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width |
+| border.color | Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color |
+| border.radius | Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius |
+| border.style | Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style |
+| width | Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width |
+| height | Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height |
+| opacity | Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state) |