npm - @wavemaker/foundation-css - Versions diffs - 12.0.0-next.25480 → 12.0.0-next.28533 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

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

@@ -1,5 +1,5 @@
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-panel .panel-footer {
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-action.panel-footer {
   display: flex;
   justify-content: space-around;
   padding-left: var(--wm-form-footer-padding-horizontal);
@@ -49,15 +49,22 @@
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .live-field > div .form-control{
       min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
+  padding-top: var(--wm-form-controls-padding-top);
+  padding-bottom: var(--wm-form-controls-padding-bottom);
+  padding-left: var(--wm-form-controls-padding-left);
+  padding-right: var(--wm-form-controls-padding-right);
   border-style: var(--wm-form-controls-border-style);
-  border-width: var(--wm-form-controls-border-width);
+  border-top-width: var(--wm-form-controls-border-top-width);
+  border-left-width:var(--wm-form-controls-border-left-width);
+  border-right-width: var(--wm-form-controls-border-right-width);
+  border-bottom-width:var(--wm-form-controls-border-bottom-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
+  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);
 }
 .wm-app .app-form > .panel-body{
@@ -94,17 +101,24 @@
   border-bottom-left-radius: 0px !important;
   border-left-width: 0px !important;
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
+  padding-top: var(--wm-form-controls-padding-top);
+  padding-bottom: var(--wm-form-controls-padding-bottom);
+  padding-left: var(--wm-form-controls-padding-left);
+  padding-right: var(--wm-form-controls-padding-right);
   border-style: var(--wm-form-controls-border-style);
-  border-width: var(--wm-form-controls-border-width);
+  border-top-width: var(--wm-form-controls-border-top-width);
+  border-left-width:var(--wm-form-controls-border-left-width);
+  border-right-width: var(--wm-form-controls-border-right-width);
+  border-bottom-width:var(--wm-form-controls-border-bottom-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
   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);
+  width: var(--wm-form-controls-min-width);
 }
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-currency span {
@@ -116,47 +130,68 @@
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textbox {
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
+  padding-top: var(--wm-form-controls-padding-top);
+  padding-bottom: var(--wm-form-controls-padding-bottom);
+  padding-left: var(--wm-form-controls-padding-left);
+  padding-right: var(--wm-form-controls-padding-right);
   border-style: var(--wm-form-controls-border-style);
-  border-width: var(--wm-form-controls-border-width);
+  border-top-width: var(--wm-form-controls-border-top-width);
+  border-left-width:var(--wm-form-controls-border-left-width);
+  border-right-width: var(--wm-form-controls-border-right-width);
+  border-bottom-width:var(--wm-form-controls-border-bottom-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
   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);
+  width: var(--wm-form-controls-min-width);
 }
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textarea {
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
+  padding-top: var(--wm-form-controls-padding-top);
+  padding-bottom: var(--wm-form-controls-padding-bottom);
+  padding-left: var(--wm-form-controls-padding-left);
+  padding-right: var(--wm-form-controls-padding-right);
   border-style: var(--wm-form-controls-border-style);
-  border-width: var(--wm-form-controls-border-width);
+  border-top-width: var(--wm-form-controls-border-top-width);
+  border-left-width:var(--wm-form-controls-border-left-width);
+  border-right-width: var(--wm-form-controls-border-right-width);
+  border-bottom-width:var(--wm-form-controls-border-bottom-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
   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);
+  width: var(--wm-form-controls-min-width);
 }
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-select{
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
+  padding-top: var(--wm-form-controls-padding-top);
+  padding-bottom: var(--wm-form-controls-padding-bottom);
+  padding-left: var(--wm-form-controls-padding-left);
+  padding-right: var(--wm-form-controls-padding-right);
   border-style: var(--wm-form-controls-border-style);
-  border-width: var(--wm-form-controls-border-width);
+  border-top-width: var(--wm-form-controls-border-top-width);
+  border-left-width:var(--wm-form-controls-border-left-width);
+  border-right-width: var(--wm-form-controls-border-right-width);
+  border-bottom-width:var(--wm-form-controls-border-bottom-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
   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);
+  width: var(--wm-form-controls-min-width);
 }
 .wm-app .form-control::placeholder {

package/src/styles/mobile/studio/layouts/appnavbar.less CHANGED Viewed

@@ -44,6 +44,15 @@
                 justify-content: flex-end;
                 align-items: center;
             }
+            .navbar-nav.navbar-right {
+                 li {
+                    display: inline-flex;
+                    align-items: flex-start;
+                    flex-wrap: nowrap;
+                    height: 36pt;
+                 }
+            }
             .app-anchor,
             .app-menu,
             .app-button
@@ -51,21 +60,19 @@
                 vertical-align: middle;
                 background-color: transparent;
                 .app-icon {
-                    padding-right: 8px;
+                    padding-right: 2px;
                     font-size: var(--wm-navbar-anchor-icon-size);
                 }
             }
             .app-button {
                 display: inline-block;
                 margin: 0;
-                padding: 4px;
                 line-height: initial;
-                background: transparent;
-                border-radius: 100px;
                 >.btn-caption {
                     color: inherit;
                 }
             }
         }
     }
 }

package/src/styles/mobile/studio/layouts/page-content.less CHANGED Viewed

@@ -7,5 +7,5 @@
 }
 .app-page-content >.app-ng-transclude {
-    padding: 4px;
+    padding: 0px;
 }

package/src/styles/mobile/studio/layouts/tabbar.less CHANGED Viewed

@@ -2,6 +2,9 @@
     position: relative;
     height: var(--wm-tabbar-height);
     padding: 4px;
+    border-top-width: var(--wm-tabbar-border-top-width);
+    border-top-style: var(--wm-tabbar-border-top-style);
+    border-top-color: var(--wm-tabbar-border-top-color);
     .navbar-default {
         background-color: inherit;
         .tab-items {
@@ -13,11 +16,17 @@
             > li > a {
                 min-height: var(--wm-tabbar-item-min-height);
                 min-width: var(--wm-tabbar-item-min-width);
-                margin-bottom: var(--wm-tabbar-item-margin-bottom);
+                background-color: var(--wm-tabbar-item-background-color);
+                border-radius: var(--wm-tabbar-item-border-radius);
+                opacity: var(--wm-tabbar-item-opacity);
+                margin-bottom: var(--wm-space-0);
                 padding: 0;
                 height: auto;
                 .app-icon {
+                    color: var(--wm-tabbar-icon-color);
                     font-size: var(--wm-tabbar-icon-size);
+                    padding-right: var(--wm-tabbar-icon-padding-right);
+                    padding-bottom: var(--wm-tabbar-icon-padding-bottom);
                 }
                 label {
                     color: var(--wm-tabbar-text-color);
@@ -25,7 +34,6 @@
                     font-family: var(--wm-tabbar-text-font-family);
                     font-weight: var(--wm-tabbar-text-font-weight);
                     margin-top: var(--wm-tabbar-text-margin-top);
-                    padding-top: 16px;
                 }
             }
         }

package/src/styles/mobile/studio/navigation/nav.less CHANGED Viewed

@@ -1,3 +1,21 @@
-.app-nav {
+.app-left-panel {
+    background-color: var(--wm-nav-left-panel-background);
+}
+.app-partial {
+    height: auto;
+    background-color: var(--wm-nav-partial-background);
+}
+.app-partial-container {
+    background-color: var(--wm-nav-partial-container-background);
 }
+.app-navbar {
+    background-color: var(--wm-nav-navbar-background);
+}
+.app-nav-item .app-anchor.app-anchor >.badge{
+    position: absolute;
+    top:auto;
+}

package/src/styles/mobile/studio/navigation/popover.less CHANGED Viewed

@@ -1,3 +1,34 @@
-.app-popover {
+.app-popover-wrapper {
+    background-color: var(--wm-popover-link-background-color);
+    border-color: var(--wm-popover-link-border-color);
+    border-width: var(--wm-popover-link-border-width);
+    border-style: var(--wm-popover-link-border-style);
+    padding-top: var(--wm-popover-link-padding-top);
+    padding-bottom: var(--wm-popover-link-padding-bottom);
+    padding-left: var(--wm-popover-link-padding-left);
+    padding-right: var(--wm-popover-link-padding-right);
+    width: var(--wm-popover-link-width);
+    height: var(--wm-popover-link-height);
+    min-height: var(--wm-popover-link-min-height);
+    border-radius: var(--wm-popover-link-border-radius);
+}
+.app-popover-wrapper .anchor-caption{
+    color: var(--wm-popover-link-color) !important;
+    padding-left: var(--wm-space-2) !important;
+    padding-right: var(--wm-space-2) !important;
+    font-size: var(--wm-popover-link-font-size) !important;
+    font-family: var(--wm-popover-link-font-family) !important;
+    font-weight: var(--wm-popover-link-font-weight) !important;
+    line-height: var(--wm-popover-link-line-height) !important;
+    letter-spacing: var(--wm-popover-link-letter-spacing) !important;
 }
+.app-popover-wrapper .app-icon:before{
+    color: var(--wm-popover-link-icon-color) !important;
+    font-size: var(--wm-popover-link-icon-size) !important;
+    min-width: var(--wm-popover-link-icon-size) !important;
+    width: var(--wm-popover-link-icon-size) !important;
+    height: var(--wm-popover-link-icon-size) !important;
+    line-height: var(--wm-popover-link-icon-size) !important;
+}

package/src/tokens/mobile/components/accordion/accordion.json CHANGED Viewed

@@ -138,34 +138,6 @@
         }
       },
       "icon": {
-        "root": {
-          "width": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the width of the accordion icon root container. This determines how wide the icon container appears.<br>CSS variable: --wm-accordion-icon-root-width"
-            }
-          },
-          "height": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the height of the accordion icon root container. This determines how tall the icon container appears.<br>CSS variable: --wm-accordion-icon-root-height"
-            }
-          },
-          "border": {
-            "radius": {
-              "value": "{space.6.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "radius",
-                "description": "Controls the border radius of the accordion icon root container. This makes the icon container appear with rounded corners.<br>CSS variable: --wm-accordion-icon-root-border-radius"
-              }
-            }
-          }
-        },
         "color": {
           "value": "{color.on-background.@.value}",
           "type": "color",

package/src/tokens/mobile/components/anchor/anchor.json CHANGED Viewed

@@ -77,6 +77,24 @@
                             "description": "Controls the text decoration (underline, overline, line-through) for anchor links. '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-anchor-text-decoration"
                         }
                     }
+                },
+                "padding": {
+                    "left": {
+                        "value": "{space.2.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "padding-left",
+                            "description": "Controls the left padding (spacing) inside anchor link text. This creates space between the left edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-left"
+                        }
+                    },
+                    "right": {
+                        "value": "{space.2.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "padding-right",
+                            "description": "Controls the right padding (spacing) inside anchor link text. This creates space between the right edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-right"
+                        }
+                    }
                 }
             },
             "gap": {

package/src/tokens/mobile/components/bottomsheet/bottomsheet.json CHANGED Viewed

@@ -36,11 +36,37 @@
                     }
                 },
                 "width":{
-                    "value": "1",
-                    "type": "radius",
-                    "attributes": {
-                        "subtype": "border-width",
-                        "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width"
+                    "top": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-top"
+                        }
+                    },
+                    "bottom": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-bottom"
+                        }
+                    },
+                    "left": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-left"
+                        }
+                    },
+                    "right": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-right"
+                        }
                     }
                 },
                 "color":{
@@ -50,6 +76,14 @@
                         "subtype": "color",
                         "description": "Sets the border color of the bottom sheet component. This determines what color the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-color"
                     }
+                },
+                "style":{
+                    "value": "{border.style.base.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Sets the border style of the bottom sheet component. This determines what style the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-style"
+                    }
                 }
             },
             "margin":{

package/src/tokens/mobile/components/button/button.json CHANGED Viewed

@@ -3,14 +3,12 @@
     "meta": {
       "mapping": {
         "selector": {
-          "web": ".app-button",
           "mobile": ".app-button"
         },
         "states": {
           "disabled": {
             "selector": {
-              "mobile": "-disabled",
-              "web": "[disabled]"
+              "mobile": "-disabled"
             }
           }
         }

package/src/tokens/mobile/components/camera/camera.json CHANGED Viewed

@@ -60,14 +60,40 @@
                 }
             },
             "padding": {
-                "value": "0",
-                "type": "space",
-                "attributes": {
-                    "subtype": "space",
-                    "description": "Sets the internal spacing inside the camera component. This creates breathing room around the camera content.<br>CSS variable: --wm-camera-padding"
+                "top": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal top spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-top"
+                    }
+                },
+                "bottom": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal bottom spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-bottom"
+                    }
+                },
+                "left": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal left spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-left"
+                    }
+                },
+                "right": {
+                    "value": "{space.3.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets internal right spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-right"
+                    }
                 }
-            }
-        },
-        "appearances": {}
+            },
+            "appearances": {}
+        }
     }
 }

package/src/tokens/mobile/components/cards/cards.json CHANGED Viewed

@@ -10,14 +10,40 @@
     },
     "mapping": {
       "header": {
-        "padding": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets the internal spacing inside the card header. This creates breathing room around the header content.<br>CSS variable: --wm-card-header-padding"
-          }
-        },
+            "padding": {
+            "left": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the left padding (horizontal spacing) inside card. This creates breathing room in the left side of the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-left"
+              }
+            },
+            "right": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the right padding (horizontal spacing) inside card. This creates breathing room in the right side card. Acceptable units: px.<br>CSS variable: --wm-card-padding-right"
+              }
+            },
+            "top": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the top padding (vertical spacing) inside card. This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-top"
+              }
+            },
+            "bottom": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the bottom padding (vertical spacing) inside card.This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-bottom"
+              }
+            }
+          },
         "width": {
           "value": "100%",
           "type": "space",

package/src/tokens/mobile/components/carousel/carousel.json CHANGED Viewed

@@ -265,7 +265,7 @@
               "type": "color",
               "attributes": {
                 "subtype": "color",
-                "description": "Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-active-dots-background"
+                "description": "Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-dots-background"
               }
             },
             "opacity": {
@@ -273,7 +273,79 @@
               "type": "radius",
               "attributes": {
                 "subtype": "opacity",
-                "description": "Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-active-dots-opacity"
+                "description": "Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"
+              }
+            },
+            "width": {
+              "value": "10px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the width of the active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"
+              }
+            },
+            "height": {
+              "value": "10px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"
+              }
+            },
+            "border": {
+              "color": {
+                "value": "{color.primary.container.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the active carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"
+                }
+              },
+              "radius": {
+                "value": "5px",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the corner rounding of the active carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"
+                }
+              },
+              "width":{
+              "value": "{border.width.base.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width",
+                "description": "Controls the thickness of the border around the active carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"
+              }
+              }
+            },
+            "margin": {
+              "left": {
+                "value": "{radius.xxs.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"
+                }
+              },
+              "right": {
+                "value": "{radius.xxs.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"
+                }
+              }
+            }
+          },
+          "slide": {
+            "padding": {
+              "horizontal": {
+                "value": "{space.4.value}",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the horizontal padding (left and right spacing) inside active carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"
+                }
               }
             }
           }