@wavemaker/foundation-css 11.15.1-rc.248 → 11.15.2-rc.249

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

@@ -10,7 +10,7 @@
     "mapping": {
       "background": {
         "color": {
-          "value": "{color.white.@.value}",
+          "value": "{color.transparent.@.value}",
           "type": "color",
           "attributes": {
             "subtype": "color",
@@ -19,36 +19,30 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside lottie. This creates breathing room above the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside lottie. This creates breathing room below the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-bottom"
-          }
+        "value": "{space.0.value} {space.2.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding around the lottie. First value is for top/bottom, second value is for left/right.<br>CSS variables: --wm-lottie-padding-top, --wm-lottie-padding-right, --wm-lottie-padding-bottom, --wm-lottie-padding-left"
+        }
+      },
+      "content": {
+        "height": {
+          "value": "{spacer.7.value}",
+          "type": "space"
         },
-        "left": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside lottie. This creates breathing room on the left side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-left"
-          }
+        "width": {
+          "value": "100%",
+          "type": "space"
         },
-        "right": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside lottie. This creates breathing room on the right side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-right"
+        "background": {
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color for the content of lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-content-background-color"
+            }
           }
         }
       }

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

@@ -85,53 +85,25 @@
           }
         },
         "padding": {
-          "top": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"
-            }
-          },
-          "bottom": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) inside message containers. This creates breathing room below the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-bottom"
-            }
-          },
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) inside message containers. This creates breathing room on the left side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) inside message containers. This creates breathing room on the right side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-right"
-            }
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"
           }
         }
       },
       "text-wrapper": {
         "padding": {
-          "left": {
-            "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) inside the message text wrapper (the container that holds the message text). This creates breathing room on the left side of the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding-left"
-            }
+          "value": "{space.0.value} {space.0.value} {space.0.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) inside the message text wrapper (the container that holds the message text). This creates breathing room around the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding"
           }
         }
       },
-      "color": {
+     "color": {
         "value": "{color.on-primary.@.value}",
         "type": "color",
         "attributes": {
@@ -159,13 +131,19 @@
           }
         },
         "padding": {
-          "bottom": {
-            "value": "{space.1.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding-bottom"
-            }
+          "value": "{space.0.value} {space.0.value} {space.1.value} {space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding"
+          }
+        },
+        "color": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"
           }
         }
       },
@@ -177,6 +155,14 @@
             "subtype": "font-size",
             "description": "Controls the size of message text (the main content text that appears in message containers). This affects how large the message text appears.<br>CSS variable: --wm-message-text-size"
           }
+        },
+        "color": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"
+          }
         }
       },
       "icon": {
@@ -191,21 +177,11 @@
       },
       "close-btn": {
         "padding": {
-          "left": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) inside the message close button. This creates breathing room on the left side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-left"
-            }
-          },
-          "right": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) inside the message close button. This creates breathing room on the right side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-right"
-            }
+          "value": "{space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) inside the message close button. This creates breathing room around the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding"
           }
         },
         "border": {

package/src/tokens/mobile/components/modal-dialog/modal-dialog.json

@@ -8,14 +8,6 @@
       }
     },
     "mapping": {
-      "margin": {
-        "value": "{space.6.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the outer margin (spacing) around modal dialogs (overlay windows that appear on top of the main content). This creates breathing room around the dialog container. Acceptable units: px.<br>CSS variable: --wm-modal-margin"
-        }
-      },
       "z-index": {
         "value": "1000",
         "type": "radius",
@@ -24,6 +16,18 @@
           "description": "Controls the stacking order of modal dialogs (determines which elements appear on top when multiple elements overlap). Higher values make the dialog appear above other elements. This ensures modals are always visible above page content.<br>CSS variable: --wm-modal-z-index"
         }
       },
+      "dialog": {
+        "overlay": {
+          "background": {
+            "value": "{color.surface.container.high.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of modal overlay dialog (overlay windows that appear behind of the main content). This is the main background color that appears behind the dialog .<br>CSS variable: --wm-modal-dialog-overlay-background"
+            }
+          }
+        }
+      },
       "min-width": {
         "value": "320px",
         "type": "space",
@@ -231,6 +235,48 @@
         }
       },
       "description": {
+        "background": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of modal description. This is the main background color that appears behind the description.<br>CSS variable: --wm-modal-description-background-color"
+          }
+        },
+        "padding": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside modal dialog description (the top section that contains the title and close button). This creates breathing room around the description content. Acceptable units: px.<br>CSS variable: --wm-modal-description-padding"
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border at the bottom of modal dialog description. This determines how thick the separator line appears between the header and body. Acceptable units: px.<br>CSS variable: --wm-modal-description-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border at the bottom of modal dialog description. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-modal-description-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border at the bottom of modal dialog description. This determines the color of the separator line between the header and body.<br>CSS variable: --wm-modal-description-border-color"
+            }
+          }
+        },
         "font-size": {
           "value": "{body.medium.font-size.value}",
           "type": "font",

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

@@ -8,54 +8,7 @@
       }
     },
     "mapping": {
-      "background": {
-        "value": "{color.surface.container.lowest.@.value}",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the background color of navigation (the main panel that contains navigation items). This is the main background color that appears behind the navigation items.<br>CSS variable: --wm-nav-background"
-        }
-      },
-      "left-panel": {
-        "background": {
-        "value": "{color.surface.container.lowest.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the background color of the left panel in navigation. This is the background color for the navigation panel area.<br>CSS variable: --wm-nav-left-panel-background"
-          }
-        }
-      },
-      "partial": {
-        "background": {
-          "value": "{color.transparent.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the background color of the partial area in navigation. This is the background color for the partial area.<br>CSS variable: --wm-nav-partial-background"
-          }
-        }
-      },
-      "partial-container": {
-        "background": {
-          "value": "transparent",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the background color of the partial container in navigation. This is the background color for the partial container.<br>CSS variable: --wm-nav-partial-container-background"
-          }
-        }
-      },
-      "navbar": {
-        "background": {
-          "value": "{color.surface.container.lowest.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the background color of the navbar in navigation. This is the background color for the navbar.<br>CSS variable: --wm-nav-navbar-background"
-          }
-        }
-      }
+      
     }
   }
 }

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

@@ -25,37 +25,11 @@
                 }
             },
             "padding": {
-                "left": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the left padding (horizontal spacing) inside navigation bars. This creates breathing room on the left side of the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-left"
-                    }
-                },
-                "right": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the right padding (horizontal spacing) inside navigation bars. This creates breathing room on the right side of the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-right"
-                    }
-                },
-                "top": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the top padding (vertical spacing) inside navigation bars. This creates breathing room above the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-top"
-                    }
-                },
-                "bottom": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the bottom padding (vertical spacing) inside navigation bars. This creates breathing room below the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-bottom"
-                    }
+                "value": "{space.3.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the padding inside navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-padding"
                 }
             },
             "left-icon": {
@@ -186,7 +160,7 @@
             },
             "badge": {
                 "background-color": {
-                    "value": "transparent",
+                    "value": "{color.inverse.on-surface.@.value}",
                     "type": "color",
                     "attributes": {
                         "subtype": "color",
@@ -194,13 +168,57 @@
                     }
                 },
                 "color": {
-                    "value": "{color.primary.@.value}",
+                    "value": "{color.on-surface.@.value}",
                     "type": "color",
                     "attributes": {
                         "subtype": "color",
                         "description": "Sets the text color of badges in navigation bars. This determines what color the badge text appears in, typically matching the primary theme color.<br>CSS variable: --wm-navbar-badge-color"
                     }
                 },
+                "height": {
+                    "value": "{space.6.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of badges in navigation bars. This determines how tall the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.6.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of badges in navigation bars. This determines how wide the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-width"
+                    }
+                },
+                "font": {
+                    "size": {
+                    "value": "{p.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the font size of badge text in navigation bars. This affects how large the badge text appears.<br>CSS variable: --wm-navbar-badge-font-size"
+                        }
+                    }
+                },
+                "line-height": {
+                        "value": "{body.large.line-height}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "line-height",
+                            "description": "Controls the line height of badge text in navigation bars. This affects the vertical spacing of badge text.<br>CSS variable: --wm-navbar-badge-line-height"
+                        }
+                },
+                "border": {
+                    "radius": {
+                        "value": "{radius.md.value}",
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "radius",
+                            "description": "Controls the border radius. IMPORTANT: border.radius value should always be half of the height & width. This determines how rounded the badge corners appear. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-border-radius"
+                        }
+                    }
+                },
                 "margin-left": {
                     "value": "4px",
                     "type": "space",
@@ -212,37 +230,11 @@
             },
             "anchor": {
                 "padding": {
-                    "right": {
-                        "value": "0px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the right padding (horizontal spacing) inside navigation bar anchor elements (clickable links in the navbar). This creates breathing room on the right side of the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-right"
-                        }
-                    },
-                    "left": {
-                        "value": "0px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the left padding (horizontal spacing) inside navigation bar anchor elements. This creates breathing room on the left side of the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-left"
-                        }
-                    },
-                    "top": {
-                        "value": "0px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the top padding (vertical spacing) inside navigation bar anchor elements. This creates breathing room above the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-top"
-                        }
-                    },
-                    "bottom": {
-                        "value": "0px",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the bottom padding (vertical spacing) inside navigation bar anchor elements. This creates breathing room below the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-bottom"
-                        }
+                    "value": "0px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding inside navigation bar anchor elements (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding"
                     }
                 },
                 "text": {
@@ -362,37 +354,11 @@
                     }
                 },
                 "width": {
-                    "top": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the top border width of navigation bars. This determines how thick the top border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-top"
-                        }
-                    },
-                    "bottom": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the bottom border width of navigation bars. This determines how thick the bottom border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-bottom"
-                        }
-                    },
-                    "left": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the left border width of navigation bars. This determines how thick the left border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-left"
-                        }
-                    },
-                    "right": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "attributes": {
-                            "subtype": "border-width",
-                            "description": "Controls the right border width of navigation bars. This determines how thick the right border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-right"
-                        }
+                    "value": "{border.width.0.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border width of navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-border-width"
                     }
                 }
             }

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

@@ -196,7 +196,7 @@
                     "value": "{radius.pill.value}",
                     "type": "radius",
                     "attributes": {
-                        "subtype": "border",
+                        "subtype": "radius",
                         "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"
                     }
                 }
@@ -290,7 +290,7 @@
                         "value": "{radius.circle.value}",
                         "type": "radius",
                         "attributes": {
-                            "subtype": "border",
+                            "subtype": "radius",
                             "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"
                         }
                     }
@@ -445,7 +445,7 @@
                             "value": "{radius.pill.value}",
                             "type": "radius",
                             "attributes": {
-                                "subtype": "border",
+                                "subtype": "radius",
                                 "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"
                             }
                         }
@@ -490,7 +490,7 @@
                                 "value": "{radius.circle.value}",
                                 "type": "radius",
                                 "attributes": {
-                                    "subtype": "border",
+                                    "subtype": "radius",
                                     "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"
                                 }
                             }

package/src/tokens/mobile/components/{left-nav/left-nav.json → page-left-nav/page-left-nav.json}

@@ -1,17 +1,9 @@
 {
     "left-panel": {
         "mapping": {
-            "min-height": {
-                "type": "space",
-                "value": "100%",
-                "attributes": {
-                    "subtype": "space",
-                    "description": "Controls the minimum height of the left navigation panel (the side panel that slides in from the left). When set to 100%, the panel takes up the full height of the viewport. Acceptable units: %, px.<br>CSS variable: --wm-left-panel-min-height"
-                }
-            },
             "background": {
                 "type": "color",
-                "value": "#ffffff",
+                "value": "{color.surface.container.lowest.@.value}",
                 "attributes": {
                     "subtype": "color",
                     "description": "Sets the background color of the left navigation panel (the side panel that slides in from the left). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-left-panel-background"

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

@@ -256,16 +256,6 @@
             "description": "Sets the text color of panel descriptions (secondary text that appears below the heading). This determines what color the description text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-description-color"
           }
         }
-      },
-      "content": {
-        "padding": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside panel content sections (the main content area of the panel). This creates breathing room around the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-content-padding"
-          }
-        }
       }
     },
     "appearances": {

package/src/tokens/mobile/components/partial-container/partial-container.json

@@ -0,0 +1,23 @@
+{
+    "partial-container": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-partial-container"
+                }
+            }
+        },
+        "mapping": {
+            "background": {
+                "color": {
+                    "value": "{color.transparent.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of the partial area in navigation. This is the background color for the partial area.<br>CSS variable: --wm-nav-partial-background"
+                    }
+                }
+            }
+        }
+    }
+}