@wavemaker/foundation-css 11.15.6-rc.647667 → 11.16.0-rc.647821

package/src/styles/mobile/studio/input/form.less

@@ -55,11 +55,14 @@
   border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
-  background-color: var(--wm-form-controls-background);
+  background: var(--wm-form-controls-background);
+  text-align: var(--wm-form-controls-text-align);
   color: var(--wm-form-controls-color);
   font-size: var(--wm-form-controls-font-size);
   font-family: var(--wm-form-controls-font-family);
   font-weight: var(--wm-form-controls-font-weight);
+  line-height: var(--wm-form-controls-font-line-height);
+  letter-spacing: var(--wm-form-controls-font-letter-spacing);
 }
 
 .wm-app .app-form > .panel-body{
@@ -101,12 +104,15 @@
   border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
-  background-color: var(--wm-form-controls-background);
+  background: var(--wm-form-controls-background);
+  text-align: var(--wm-form-controls-text-align);
   color: var(--wm-form-controls-color);
   opacity: var(--wm-form-controls-opacity);
   font-size: var(--wm-form-controls-font-size);
   font-family: var(--wm-form-controls-font-family);
   font-weight: var(--wm-form-controls-font-weight);
+  line-height: var(--wm-form-controls-font-line-height);
+  letter-spacing: var(--wm-form-controls-font-letter-spacing);
   width: var(--wm-form-controls-min-width);
 }
 
@@ -124,12 +130,15 @@
   border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
-  background-color: var(--wm-form-controls-background);
+  background: var(--wm-form-controls-background);
+  text-align: var(--wm-form-controls-text-align);
   color: var(--wm-form-controls-color);
   opacity: var(--wm-form-controls-opacity);
   font-size: var(--wm-form-controls-font-size);
   font-family: var(--wm-form-controls-font-family);
   font-weight: var(--wm-form-controls-font-weight);
+  line-height: var(--wm-form-controls-font-line-height);
+  letter-spacing: var(--wm-form-controls-font-letter-spacing);
   width: var(--wm-form-controls-min-width);
 }
 
@@ -169,12 +178,15 @@
   border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
-  background-color: var(--wm-form-controls-background);
+  background: var(--wm-form-controls-background);
+  text-align: var(--wm-form-controls-text-align);
   color: var(--wm-form-controls-color);
   opacity: var(--wm-form-controls-opacity);
   font-size: var(--wm-form-controls-font-size);
   font-family: var(--wm-form-controls-font-family);
   font-weight: var(--wm-form-controls-font-weight);
+  line-height: var(--wm-form-controls-font-line-height);
+  letter-spacing: var(--wm-form-controls-font-letter-spacing);
   width: var(--wm-form-controls-min-width);
 }
 
@@ -185,12 +197,15 @@
   border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
-  background-color: var(--wm-form-controls-background);
+  background: var(--wm-form-controls-background);
+  text-align: var(--wm-form-controls-text-align);
   color: var(--wm-form-controls-color);
   opacity: var(--wm-form-controls-opacity);
   font-size: var(--wm-form-controls-font-size);
   font-family: var(--wm-form-controls-font-family);
   font-weight: var(--wm-form-controls-font-weight);
+  line-height: var(--wm-form-controls-font-line-height);
+  letter-spacing: var(--wm-form-controls-font-letter-spacing);
   width: var(--wm-form-controls-min-width);
 }
 

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

@@ -13,7 +13,7 @@
           },
           "active": {
             "selector": {
-              "mobile": "-active-item, .app-chips-active-item-text"
+              "mobile": "-active-item, .app-chips-active-item-text, .app-chips-active-left-badge, .app-chips-active-right-badge, .app-chips-active-left-icon, .app-chips-active-right-icon"
             }
           }
         }
@@ -114,7 +114,7 @@
           },
           "style": {
             "value": "{border.style.base.value}",
-            "type": "style",
+            "type": "radius",
             "attributes": {
               "subtype": "border-style",
               "description": "Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"
@@ -161,6 +161,16 @@
         }
       },
       "item": {
+        "text": {
+          "padding": {
+            "value": "0px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the padding of chip item label text (.app-chips-item-text).<br>CSS variable: --wm-chips-item-text-padding"
+            }
+          }
+        },
         "height": {
           "value": "32px",
           "type": "space",
@@ -298,6 +308,66 @@
           }
         }
       },
+      "left-icon": {
+        "padding": {
+          "value": "{space.0.value} 2px {space.0.value} {space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-padding"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-color"
+          }
+        }
+      },
+      "right-icon": {
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the right icon on chip items (.app-chips-right-icon, .app-chips-active-right-icon).<br>CSS variable: --wm-chips-right-icon-color"
+          }
+        }
+      },
+      "left-badge": {
+        "text": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of the left badge on chip items (.app-chips-left-badge, .app-chips-active-left-badge).<br>CSS variable: --wm-chips-left-badge-text-color"
+            }
+          }
+        }
+      },
+      "right-badge": {
+        "text": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of the right badge on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-color"
+            }
+          },
+          "margin-top": {
+            "value": "0px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top margin of the right badge text on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-margin-top"
+            }
+          }
+        }
+      },
       "states": {
         "disabled": {
           "opacity": {

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

@@ -10,6 +10,14 @@
             "description": "Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"
           }
         },
+        "box-shadow": {
+          "value": "{elevation.shadow.2.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow on the floating dropdown menu panel (Material 3 menu surface elevation; uses global elevation shadow level 2).<br>CSS variable: --wm-dropdown-menu-box-shadow"
+          }
+        },
         "padding": {
           "type": "space",
           "value": "{space.2.value} {space.0.value}",

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

@@ -87,6 +87,22 @@
                         "subtype": "font-family",
                         "description": "Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"
                     }
+                },
+                "line-height": {
+                    "value": "{body.large.line-height.value}",
+                    "type": "font",
+                    "attributes": {
+                        "subtype": "line-height",
+                        "description": "Controls the vertical spacing between lines when form control text wraps to multiple lines. This affects the height of each line of text inside input fields and text areas. Acceptable units: px.<br>CSS variable: --wm-form-controls-font-line-height"
+                    }
+                },
+                "letter-spacing": {
+                    "value": "{body.large.letter-spacing.value}",
+                    "type": "font",
+                    "attributes": {
+                        "subtype": "letter-spacing",
+                        "description": "Controls the horizontal spacing between individual characters in form control text. Positive values spread characters apart for increased readability, negative values bring them closer. Acceptable units: px, em.<br>CSS variable: --wm-form-controls-font-letter-spacing"
+                    }
                 }
             },
             "padding": {
@@ -116,7 +132,7 @@
                 },
                 "style": {
                     "value": "{border.style.base.value}",
-                    "type": "style",
+                    "type": "radius",
                     "attributes": {
                         "subtype": "border-style",
                         "description": "Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"
@@ -153,7 +169,15 @@
                 "value": "{color.black.@.value}",
                 "type": "color"
             },
-            "label": {
+            "text-align": {
+        "value": "left",
+        "type":  "radius",
+        "attributes": {
+          "subtype": "text-align",
+          "description": "Controls the horizontal alignment of text inside form controls (input fields where users enter data). 'left' aligns the text to the left, 'center' centers it, and 'right' aligns it to the right.<br>CSS variable: --wm-form-controls-text-align"
+        }
+      },
+      "label": {
                 "color": {
                     "value": "{color.on-surface.@.value}",
                     "type": "color",
@@ -449,7 +473,7 @@
                         },
                         "style": {
                             "value": "{border.style.base.value}",
-                            "type": "style"
+                            "type": "radius"
                         },
                         "width": {
                             "value": "0 0 {border.width.1.value} 0",
@@ -535,7 +559,7 @@
                                 },
                                 "style": {
                                     "value": "{border.style.base.value}",
-                                    "type": "style"
+                                    "type": "radius"
                                 },
                                 "radius": {
                                     "value": "{radius.sm.value} {radius.sm.value} 0 0",

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

@@ -80,7 +80,7 @@
         "type": "space",
         "attributes": {
           "subtype": "icon-size",
-          "description": "Controls the minimum width of icon symbols to ensure they're always wide enough to be visible and clickable, even when they contain small symbols.<br>CSS variable: --wm-icon-min-width"
+          "description": "Controls the minimum width of the icon when it's rendered as an image (via an icon URL), ensuring it's always wide enough to be visible and clickable. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-min-width"
         }
       },
       "width": {
@@ -88,7 +88,7 @@
         "type": "space",
         "attributes": {
           "subtype": "icon-size",
-          "description": "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"
+          "description": "Controls how wide the icon appears when it's rendered as an image (via an icon URL). This determines the horizontal space the icon image takes up. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-width"
         }
       },
       "height": {
@@ -96,7 +96,7 @@
         "type": "space",
         "attributes": {
           "subtype": "icon-size",
-          "description": "Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-icon-height"
+          "description": "Controls how tall the icon appears when it's rendered as an image (via an icon URL). This determines the vertical space the icon image takes up. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-height"
         }
       },
       "gap": {

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

@@ -177,6 +177,14 @@
           "description": "Controls the horizontal spacing between individual letters in label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"
         }
       },
+      "text-align": {
+        "value": "left",
+        "type": "radius",
+        "attributes": {
+          "subtype": "text-align",
+          "description": "Controls the horizontal alignment of label text. 'left' aligns the text to the left, 'center' centers it, and 'right' aligns it to the right.<br>CSS variable: --wm-label-text-align"
+        }
+      },
       "asterisk": {
         "color": {
           "value": "{color.error.@.value}",

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

@@ -128,6 +128,30 @@
           }
         }
       },
+      "first-button": {
+        "border": {
+          "radius": {
+            "value": "1px 0px 0px 1px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of the first switch button (top-left, top-right, bottom-right, bottom-left). The right corners are squared so it joins seamlessly with the next button. Acceptable units: px.<br>CSS variable: --wm-switch-first-button-border-radius"
+            }
+          }
+        }
+      },
+      "last-button": {
+        "border": {
+          "radius": {
+            "value": "0px 1px 1px 0px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of the last switch button (top-left, top-right, bottom-right, bottom-left). The left corners are squared so it joins seamlessly with the previous button. Acceptable units: px.<br>CSS variable: --wm-switch-last-button-border-radius"
+            }
+          }
+        }
+      },
       "states": {
         "selected": {
           "button": {

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

@@ -67,6 +67,14 @@
             "description": "Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"
           }
         },
+        "gap": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the gap of tab header --wm-tabs-heading-gap"
+          }
+        },
         "border": {
           "radius": {
             "value": "{radius.sm.value}",
@@ -146,6 +154,22 @@
               "description": "Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"
             }
           },
+          "min-height": {
+            "value": "48px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the minimum height of tab header item This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item--min-height"
+            }
+          },
+          "gap": {
+            "value": "{space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the gap of tab header --wm-tabs-item-gap"
+            }
+          },
           "font": {
             "size": {
               "value": "{h6.font-size.value}",
@@ -217,12 +241,12 @@
             }
           },
           "indicator": {
-            "margin": {
-              "value": "{space.0.value}",
+            "margin-top": {
+              "value": "-2px",
               "type": "space",
               "attributes": {
                 "subtype": "space",
-                "description": "Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"
+                "description": "Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin-top"
               }
             },
             "height": {