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

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

@@ -104,12 +104,46 @@
       },
       "item": {
         "heading": {
+          "border": {
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"
+              }
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style",
+                "description": "Controls the style of the border around tabs headings (the section containing the tab labels). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"
+              }
+            },
+            "color": {
+              "value": "{color.surface.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"
+              }
+            },
+            "width": {
+              "value": "{border.width.0.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-width",
+                "description": "Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"
+              }
+            }
+          },
           "padding": {
             "value": "{space.2.value}",
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"
+              "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"
             }
           },
           "font": {
@@ -128,6 +162,14 @@
                 "subtype": "font-weight",
                 "description": "Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"
               }
+            },
+            "family": {
+              "value": "{h6.font-family.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family",
+                "description": "Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"
+              }
             }
           },
           "line-height": {
@@ -161,7 +203,7 @@
                   "value": "{icon.size.@.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "font",
+                    "subtype": "icon-size",
                     "description": "Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"
                   }
                 },
@@ -175,12 +217,20 @@
             }
           },
           "indicator": {
+            "margin": {
+              "value": "{space.0.value}",
+              "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"
+              }
+            },
             "height": {
               "value": "3px",
               "type": "space",
               "attributes": {
                 "subtype": "space",
-                "description": "Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"
+                "description": "Controls the height of tab item heading indicators in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"
               }
             },
             "background": {
@@ -188,7 +238,7 @@
               "type": "color",
               "attributes": {
                 "subtype": "color",
-                "description": "Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"
+                "description": "Sets the background color of tab item heading indicators in Active state only.<br>CSS variable: --wm-tabs-item-heading-indicator-background"
               }
             }
           }
@@ -234,6 +284,48 @@
         "active": {
           "item": {
             "heading": {
+              "padding": {
+                "value": "{space.2.value}",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "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"
+                }
+              },
+              "border": {
+                "radius": {
+                  "value": "{radius.none.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "radius",
+                    "description": "Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"
+                  }
+                },
+                "style": {
+                  "value": "{border.style.base.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "border-style",
+                    "description": "Controls the style of the border around tabs headings (the section containing the tab labels). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"
+                  }
+                },
+                "color": {
+                  "value": "{color.surface.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"
+                  }
+                },
+                "width": {
+                  "value": "{border.width.0.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "border-width",
+                    "description": "Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"
+                  }
+                }
+              },
               "font": {
                 "size": {
                   "value": "{h6.font-size.value}",
@@ -250,6 +342,14 @@
                     "subtype": "font-weight",
                     "description": "Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"
                   }
+                },
+                "family": {
+                  "value": "{h6.font-family.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-family",
+                    "description": "Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"
+                  }
                 }
               },
               "line-height": {
@@ -261,6 +361,14 @@
                 }
               },
               "indicator": {
+                "margin": {
+                  "value": "{space.0.value}",
+                  "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"
+                  }
+                },
                 "height": {
                   "value": "3px",
                   "type": "space",
@@ -301,7 +409,7 @@
                   "value": "{icon.size.@.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "font",
+                    "subtype": "icon-size",
                     "description": "Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"
                   }
                 },

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

@@ -157,37 +157,11 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-right"
-          }
+        "value": "{space.4.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content. Acceptable units: px.<br>CSS variable: --wm-tile-padding"
         }
       }
     },

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

@@ -19,37 +19,11 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside webview. This creates breathing room above the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside webview. This creates breathing room below the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside webview. This creates breathing room on the left side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside webview. This creates breathing room on the right side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-right"
-          }
+        "value": "{space.0.value} {space.2.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding around the webview content. The first value sets vertical padding (top/bottom) and the second value sets horizontal padding (left/right).<br>CSS variable: --wm-webview-padding"
         }
       }
     },

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

@@ -53,36 +53,12 @@
           "description": "Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-box-shadow"
         }
       },
-      "padding-top": {
+      "padding": {
         "value": "{space.1.value}",
         "type": "space",
         "attributes": {
           "subtype": "space",
-          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-top"
-        }
-      },
-      "padding-bottom": {
-        "value": "{space.1.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-bottom"
-        }
-      },
-      "padding-left": {
-        "value": "{space.1.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-left"
-        }
-      },
-      "padding-right": {
-        "value": "{space.1.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-right"
+          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding"
         }
       },
       "gap": {
@@ -110,36 +86,12 @@
             "description": "Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-radius"
           }
         },
-        "padding-top": {
-          "value": "{space.7.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-top"
-          }
-        },
-        "padding-bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-bottom"
-          }
-        },
-        "padding-left": {
-          "value": "{space.7.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-left"
-          }
-        },
-        "padding-right": {
-          "value": "{space.7.value}",
+        "padding": {
+          "value": "{space.7.value} {space.7.value} {space.0.value} {space.7.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-right"
+            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding"
           }
         }
       },
@@ -152,12 +104,12 @@
             "description": "Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-height"
           }
         },
-        "padding-top": {
-          "value": "{space.3.value}",
+        "padding": {
+          "value": "{space.3.value} {space.0.value} {space.0.value} {space.0.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the internal spacing inside wizard body content (the main area where users fill out forms and see step content). This creates breathing room around the wizard body content.<br>CSS variable: --wm-wizard-body-padding-top"
+            "description": "Controls the internal spacing inside wizard body content (the main area where users fill out forms and see step content). This creates breathing room around the wizard body content.<br>CSS variable: --wm-wizard-body-padding"
           }
         }
       },

package/cjs/src_tokens_mobile_components_left-nav_left-nav_json.foundation-css.cjs

@@ -1,14 +0,0 @@
-"use strict";
-(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_left-nav_left-nav_json"],{
-
-/***/ "./src/tokens/mobile/components/left-nav/left-nav.json"
-/*!*************************************************************!*\
-  !*** ./src/tokens/mobile/components/left-nav/left-nav.json ***!
-  \*************************************************************/
-(module) {
-
-module.exports = /*#__PURE__*/JSON.parse('{"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","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"}},"elevation":{"type":"radius","value":"{elevation.shadow.1.value}","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the left navigation panel. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-left-panel-elevation"}},"border":{"top":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of the left navigation panel. This makes the panel appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-top-right-radius"}}}},"bottom":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the bottom-right corner of the left navigation panel. This makes the panel appear with rounded corners on the bottom-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-bottom-right-radius"}}}}},"max-width":{"type":"space","value":"360px","attributes":{"subtype":"space","description":"Controls the maximum width of the left navigation panel (the side panel that slides in from the left). This determines how wide the panel can be when it\'s open. Acceptable units: px.<br>CSS variable: --wm-left-panel-max-width"}}}}}');
-
-/***/ }
-
-}]);

package/src/styles/mobile/components/input/epoch/date.less

@@ -1,44 +0,0 @@
-.app-date {
-
-}
-
-.app-date-text{
-
-}
-
-.app-date-invalid {
-}
-
-.app-date-clear-icon {
-
-}
-
-.app-date-calendar-icon {
-
-}
-
-.app-date-flotaing-label{
-
-}
-
-.app-date-active-flotaing-label{
-
-}
-
-.app-date-action-wrapper {
-}
-
-.app-date-select-btn {
-}
-
-.app-date-cancel-btn {
-}
-
-.app-date-ios-dialog {
-}
-
-.app-date-picker-modal-select {
-}
-
-.app-date-picker-modal-cancel {
-}

package/src/styles/mobile/components/input/epoch/datetime.less

@@ -1,38 +0,0 @@
-.app-datetime {
-}
-
-.app-datetime-text{
-}
-
-.app-datetime-invalid {
-}
-
-.app-datetime-clear-icon {
-}
-
-.app-datetime-calendar-icon {
-}
-
-.app-datetime-flotaing-label{
-}
-
-.app-datetime-active-flotaing-label{
-}
-
-.app-datetime-action-wrapper {
-}
-
-.app-datetime-select-btn {
-}
-
-.app-datetime-cancel-btn {
-}
-
-.app-datetime-ios-dialog {
-}
-
-.app-datetime-picker-modal-select {
-}
-
-.app-datetime-picker-modal-cancel {
-}

package/src/styles/mobile/components/input/epoch/time.less

@@ -1,38 +0,0 @@
-.app-time {
-}
-
-.app-time-text{
-}
-
-.app-time-invalid {
-}
-
-.app-time-clear-icon {
-}
-
-.app-time-calendar-icon {
-}
-
-.app-time-flotaing-label{
-}
-
-.app-time-active-flotaing-label{
-}
-
-.app-time-action-wrapper {
-}
-
-.app-time-select-btn {
-}
-
-.app-time-cancel-btn {
-}
-
-.app-time-ios-dialog {
-}
-
-.app-time-picker-modal-select {
-}
-
-.app-time-picker-modal-cancel {
-}

package/src/styles/mobile/components/input/number.less

@@ -1,40 +0,0 @@
-
-.app-number {
-    min-height: var(--wm-number-container-min-height);
-    padding-top: var(--wm-number-container-padding-top);
-    padding-bottom: var(--wm-number-container-padding-bottom);
-    padding-left: var(--wm-number-container-padding-left);
-    padding-right: var(--wm-number-container-padding-right);
-    border-style: var(--wm-number-container-border-style);
-    border-radius: var(--wm-number-container-border-radius);
-    background-color: var(--wm-color-white);
-}
-
-.app-number-invalid {
-}
-
-.app-number-focused {
-    border-color: var(--wm-form-control-border-color);
-}
-
-.app-number-placeholer {
-}
-
-.app-number-skeleton {
-}
-
-.app-number-flotaing-label {
-}
-
-.app-number-active-flotaing-label {
-}
-
-.app-number-with-label.app-number-active-flotaing-label {
-    color: var(--wm-form-control-border-color);
-}
-
-.app-number-skeleton {
-}
-
-.app-number-label-skeleton {
-}

package/src/styles/mobile/components/input/text.less

@@ -1,69 +0,0 @@
-
-// .app-text {
-//     background-color: var(--wm-form-control-background);
-//     border-width: var(--wm-form-control-border-width);
-//     border-style: var(--wm-form-control-border-style);
-//     border-radius: var(--wm-form-control-border-radius);
-//     padding-left: var(--wm-form-control-padding);
-//     padding-right: var(--wm-form-control-padding);
-//     min-height: var(--wm-text-min-height);
-//     padding-top: var(--wm-text-padding-top);
-//     padding-bottom: var(--wm-text-padding-bottom);
-//     border-color: var(--wm-text-border-color);
-//     font-family: var(--wm-text-font-family);
-// }
-
-// .app-text-text {
-//     color: var(--wm-form-control-color);
-//     font-family: var(--wm-form-control-font-family);
-//     font-size: var(--wm-form-control-font-size);
-//     line-height: var(--wm-form-control-line-height);
-//     letter-spacing: var(--wm-form-control-letter-spacing);
-// }
-
-// .app-text-invalid {
-//     border-bottom-color: var(--wm-text-invalid-border-bottom-color);
-// }
-
-// .app-text-focused {
-//     border-color: var(--wm-form-control-border-color);
-// }
-
-// .app-text-place-holder-text {
-//     color: var(--wm-form-control-border-color);
-// }
-
-// .app-text-disabled {
-//     background-color: var(--wm-text-disabled-background-color);
-// }
-
-// .app-text-disabled .app-text {
-//     background-color: var(--wm-text-disabled-background-color);
-// }
-
-// .app-text-flotaing-label {
-// }
-
-// .app-text-active-flotaing-label {
-// }
-
-// .app-text-with-label.app-text-active-flotaing-label {
-//     color: var(--wm-form-control-border-color);
-// }
-
-// .app-text-with-label.app-text-flotaing-label {
-//     top: var(--wm-text-floating-label-top);
-//     left: var(--wm-text-floating-label-left);
-//     font-size: var(--wm-text-floating-label-font-size);
-//     color:  var(--wm-form-control-border-color);
-// }
-
-// .app-text-with-label.app-text {
-//     min-height: var(--wm-text-floating-label-min-height);
-// }
-
-// .app-text-skeleton {
-//     width: var(--wm-text-skeleton-width);
-//     height: var(--wm-text-skeleton-height);
-//     border-radius: var(--wm-space-1);
-// }