@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/src/styles/mobile/studio/dialogs/base-dialog.less

@@ -3,9 +3,15 @@
     background-color: transparent;
     .app-dialog-title {
         text-align: left;
-
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
         i {
-            font-size: 24px;
+            font-size: var(--wm-modal-icon-font-size);
+            color: var(--wm-modal-icon-color);
         }
 
         // span {
@@ -22,10 +28,153 @@
     }
 
     .modal-content {
-        background-color: var(--wm-dialog-background-color);
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
         padding: 24px;
         .app-dialog-header {
             border-color: transparent;
         }
     }
+}
+.app-dialog .modal-content .app-dialog-header{
+    //header
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.app-dialog .app-dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.app-dialog .app-dialog-close .app-icon::before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.app-alert-dialog .app-dialog-message{
+    font-weight: var(--wm-modal-description-font-weight);
+    font-family: var(--wm-modal-description-font-family);
+    color: var(--wm-modal-description-color);
+    font-size: var(--wm-modal-description-font-size);
+}
+
+.app-alert-dialog .app-dialog-footer .ok-action.app-button{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:last-child{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:first-child {
+    background-color: var(--wm-modal-btn-cancel-background);
+    color: var(--wm-modal-btn-cancel-background);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-dialog-footer {
+    padding: var(--wm-modal-footer-padding);  
+}
+
+//styleWorkspace Template
+.native_mobile-dialog {
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
+.dialog-header{
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.dialog-icon .wi-check:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-file:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-alert:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);   
+}
+
+.dialog-title {
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
+}
+.dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.dialog-close .wi-close:before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.dialog-message{
+    font-weight: var(--wm-modal-description-font-weight);
+    font-family: var(--wm-modal-description-font-family);
+    color: var(--wm-modal-description-color);
+    font-size: var(--wm-modal-description-font-size);   
+}
+
+.dialog-actions {
+    padding: var(--wm-modal-footer-padding) !important; 
+}
+
+.dialog-btn.cancel-btn{
+    background-color: var(--wm-modal-btn-cancel-background) !important;
+    color: var(--wm-modal-btn-cancel-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
+.dialog-btn.confirm-btn{
+    background-color: var(--wm-modal-btn-ok-background) !important;
+    color: var(--wm-modal-btn-ok-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
 }

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

@@ -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/input/switch.less

@@ -1,8 +1,9 @@
 .app-switch {
+    overflow: unset;
     .btn-group {
         height: var(--wm-switch-button-height);
         .btn {
-            text-transform: capitalize;
+            text-transform: var(--wm-switch-button-text-transform);
             font-size: var(--wm-switch-button-font-size);
         }
     }

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

@@ -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;
+                    color: var(--wm-navbar-button-color);
                 }
             }
+                     
         }
     }
 }

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

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

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

@@ -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

@@ -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

@@ -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

@@ -25,7 +25,7 @@
       },
       "border": {
         "width": {
-          "value": "{space.0.value}",
+          "value": "{border.width.0.value}",
           "type": "space",
           "attributes": {
             "subtype": "border-width",
@@ -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

@@ -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

@@ -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

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