@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.64737

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

@@ -42,37 +42,11 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside pictures. This creates breathing room above the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside pictures. This creates breathing room below the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside pictures. This creates breathing room on the left side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside pictures. This creates breathing room on the right side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-right"
-          }
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside pictures. This creates breathing room around the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding"
         }
       },
       "border": {
@@ -118,22 +92,8 @@
             "type": "radius"
           },
           "padding": {
-            "top": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "left": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "right": {
-              "value": "{space.0.value}",
-              "type": "space"
-            }
+            "value": "{space.0.value}",
+            "type": "space"
           },
           "border": {
             "color": {
@@ -178,22 +138,8 @@
             "type": "radius"
           },
           "padding": {
-            "top": {
-              "value": "{space.1.value}",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "{space.1.value}",
-              "type": "space"
-            },
-            "left": {
-              "value": "{space.1.value}",
-              "type": "space"
-            },
-            "right": {
-              "value": "{space.1.value}",
-              "type": "space"
-            }
+            "value": "{space.1.value}",
+            "type": "space"
           },
           "border": {
             "color": {

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

@@ -40,36 +40,12 @@
           "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"
         }
       },
-      "padding-top": {
+      "padding": {
         "value": "{space.0.value}",
         "type": "space",
         "attributes": {
           "subtype": "space",
-          "description": "Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-top"
-        }
-      },
-      "padding-left": {
-        "value": "{space.0.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-left"
-        }
-      },
-      "padding-right": {
-        "value": "{space.0.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-right"
-        }
-      },
-      "padding-bottom": {
-        "value": "{space.0.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-bottom"
+          "description": "Controls the padding inside popovers (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-padding"
         }
       },
       "background-color": {
@@ -97,60 +73,46 @@
         }
       },
       "border": {
-        "top": {
-          "left": {
-            "radius": {
-              "value": "{radius.xl.value}",
-              "type": "radius",
-              "attributes": {
-                "subtype": "radius",
-                "description": "Controls the corner rounding of the top-left corner of popovers. This makes the popover appear with rounded corners on the top-left for a softer appearance.<br>CSS variable: --wm-popover-border-top-left-radius"
-              }
-            }
-          },
-          "right": {
-            "radius": {
-              "value": "{radius.xl.value}",
-              "type": "radius",
-              "attributes": {
-                "subtype": "radius",
-                "description": "Controls the corner rounding of the top-right corner of popovers. This makes the popover appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-popover-border-top-right-radius"
-              }
-            }
-          }
-        }
-      },
-      "header": {
-        "padding-top": {
-          "value": "{space.3.value}",
-          "type": "space",
+        "radius": {
+          "value": "{radius.none.value}",
+          "type": "radius",
           "attributes": {
-            "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-top"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of popovers (top-left, top-right, bottom-right, bottom-left).<br>CSS variable: --wm-popover-border-radius"
           }
         },
-        "padding-bottom": {
-          "value": "{space.3.value}",
+        "width": {
+          "value": "{border.width.0.value}",
           "type": "space",
           "attributes": {
-            "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-bottom"
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-border-width"
           }
         },
-        "padding-left": {
-          "value": "{space.3.value}",
-          "type": "space",
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
           "attributes": {
-            "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-left"
+            "subtype": "border-style",
+            "description": "Controls the style of the border around popover. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-popover-border-style"
           }
         },
-        "padding-right": {
+        "color": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-border-color"
+          }
+        }
+      },
+      "header": {
+        "padding": {
           "value": "{space.3.value}",
           "type": "space",
           "attributes": {
             "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-right"
+            "description": "Controls the internal spacing inside popover headers (top, right, bottom, left).<br>CSS variable: --wm-popover-header-padding"
           }
         },
         "color": {
@@ -264,37 +226,11 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-top"
-            }
-          },
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-right"
-            }
-          },
-          "bottom": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-bottom"
-            }
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding inside popover link wrapper (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-link-padding"
           }
         },
         "font-size": {
@@ -313,6 +249,14 @@
             "description": "Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"
           }
         },
+        "text-decoration": {
+          "value": "none",
+          "type": "font",
+          "attributes": {
+            "subtype": "text-decoration",
+            "description": "Controls the text decoration (underline, overline, line-through) for popover caption. 'none' removes all decorations, 'underline' adds an underline, 'overline' adds a line above, and 'line-through' adds a line through the text.<br>CSS variable: --wm-popover-link-text-decoration"
+          }
+        },
         "font-weight": {
           "value": "{body.medium.font-weight.value}",
           "type": "font",
@@ -381,6 +325,70 @@
             "description": "Controls the minimum height of popover components. This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-link-min-height"
           }
         }
+      },
+      "content": {
+        "border": {
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around popover content. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-content-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around popover content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-popover-content-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around popover content. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-content-border-color"
+            }
+          },
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of link popover content. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-content-border-radius"
+            }
+          }
+        },
+        "background-color": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of popover content (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-content-background-color"
+          }
+        },
+        "shadow": {
+          "value": "{elevation.shadow.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow effect around popover content (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-content-shadow"
+          }
+        }
+      },
+      "modal": {
+        "content": {
+          "shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation",
+              "description": "Controls the drop shadow effect around popover modal content (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-modal-content-shadow"
+            }
+          }
+        }
       }
     }
   }

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

@@ -75,14 +75,6 @@
             "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.1.value}",
-          "type": "space",
-          "attributes": {
-            "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"
-          }
-        },
         "tooltip": {
           "background": {
             "value": "{color.info.container.@.value}",

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

@@ -173,21 +173,11 @@
           }
         },
         "padding": {
-          "left": {
-            "value": "{space.2.value}",
-            "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",
-            "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"
-            }
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding inside radio button group titles. This creates breathing room around the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding"
           }
         }
       },

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

@@ -64,13 +64,11 @@
           }
         },
         "padding": {
-          "left": {
-            "value": "{space.2.value}",
-            "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"
-            }
+          "value": "{space.0.value} {space.0.value} {space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) of rating text. This creates visual separation between the text and the rating icons. Acceptable units: px.<br>CSS variable: --wm-rating-text-padding"
           }
         },
         "color": {

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

@@ -88,37 +88,11 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) of search input text. This creates breathing room at the top of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-top"
-            }
-          },
-          "bottom": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) of search input text. This creates breathing room at the bottom of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-bottom"
-            }
-          },
-          "left": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of search input text. This creates breathing room on the left side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.3.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) of search input text. This creates breathing room on the right side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-right"
-            }
+          "value": "{space.2.value} {space.3.value} {space.2.value} {space.6.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) of search input text. This creates breathing room inside the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding"
           }
         }
       },
@@ -218,37 +192,11 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.0.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-top"
-            }
-          },
-          "bottom": {
-            "value": "{space.0.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-bottom"
-            }
-          },
-          "left": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-right"
-            }
+          "value": "{space.0.value} {space.6.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding"
           }
         },
         "width": {
@@ -282,37 +230,11 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"
-            }
-          },
-          "bottom": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"
-            }
-          },
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"
-            }
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (all sides) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding"
           }
         },
         "text": {
@@ -362,37 +284,11 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) of search result items. This creates breathing room at the top of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-top"
-            }
-          },
-          "bottom": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) of search result items. This creates breathing room at the bottom of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-bottom"
-            }
-          },
-          "left": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of search result items. This creates breathing room on the left side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) of search result items. This creates breathing room on the right side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-right"
-            }
+          "value": "{space.2.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) of search result items. This creates breathing room inside search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding"
           }
         },
         "separator": {
@@ -470,37 +366,11 @@
           }
         },
         "padding":{
-          "top":{
-            "value":"{space.0.value}",
-            "type":"space",
-            "attributes":{
-              "subtype":"space",
-              "description":"Controls the top padding (vertical spacing) of search clear button. This creates breathing room at the top of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-top"
-            }
-          },
-          "bottom":{
-            "value":"{space.0.value}",
-            "type":"space",
-            "attributes":{
-              "subtype":"space",
-              "description":"Controls the bottom padding (vertical spacing) of search clear button. This creates breathing room at the bottom of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-bottom"
-            }
-          },
-          "left":{
-            "value":"{space.0.value}",
-            "type":"space",
-            "attributes":{
-              "subtype":"space",
-              "description":"Controls the left padding (horizontal spacing) of search clear button. This creates breathing room on the left side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-left"
-            }
-          },
-          "right":{
-            "value":"{space.0.value}",
-            "type":"space",
-            "attributes":{
-              "subtype":"space",
-              "description":"Controls the right padding (horizontal spacing) of search clear button. This creates breathing room on the right side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-right"
-            }
+          "value":"{space.0.value}",
+          "type":"space",
+          "attributes":{
+            "subtype":"space",
+            "description":"Controls the padding (all sides) of search clear button. This creates breathing room inside the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding"
           }
         },
         "border":{