@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/tokens/web/components/scrollbar/Token.Readme.md

@@ -0,0 +1,15 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| bar.width | Controls how wide scrollbars appear (the vertical scrollbar on the right side of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-width |
+| bar.height | Controls how tall scrollbars appear (the horizontal scrollbar at the bottom of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-height |
+| bar.track.bg | Sets the background color of scrollbar tracks (the channel that the scrollbar thumb moves along). This is the background area of the scrollbar.<br>CSS variable: --wm-scroll-bar-track-bg |
+| bar.track.radius | Controls the corner rounding of scrollbar tracks (the channel that the scrollbar thumb moves along). This makes the scrollbar track appear with rounded corners.<br>CSS variable: --wm-scroll-bar-track-radius |
+| bar.thumb.bg | Sets the background color of scrollbar thumbs (the draggable part of the scrollbar that users click and drag to scroll). This is the interactive element of the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-bg |
+| bar.thumb.radius | Controls the corner rounding of scrollbar thumbs (the draggable part of the scrollbar). This makes the scrollbar thumb appear with rounded corners.<br>CSS variable: --wm-scroll-bar-thumb-radius |
+| bar.thumb.hover | Sets the background color of scrollbar thumbs when users hover over them (the draggable part of the scrollbar). This provides visual feedback when users interact with the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-hover |

package/src/tokens/web/components/scrollbar/scrollbar.json

@@ -5,14 +5,16 @@
         "value": "6px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how wide scrollbars appear (the vertical scrollbar on the right side of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-width"
         }
       },
       "height": {
         "value": "6px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls how tall scrollbars appear (the horizontal scrollbar at the bottom of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-height"
         }
       },
       "track": {
@@ -20,14 +22,16 @@
           "value": "{color.surface.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar tracks (the channel that the scrollbar thumb moves along). This is the background area of the scrollbar.<br>CSS variable: --wm-scroll-bar-track-bg"
           }
         },
         "radius": {
           "value": "6px",
           "type": "space",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of scrollbar tracks (the channel that the scrollbar thumb moves along). This makes the scrollbar track appear with rounded corners.<br>CSS variable: --wm-scroll-bar-track-radius"
           }
         }
       },
@@ -36,24 +40,27 @@
           "value": "{color.surface.container.high.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar thumbs (the draggable part of the scrollbar that users click and drag to scroll). This is the interactive element of the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-bg"
           }
         },
         "radius": {
           "value": "6px",
           "type": "space",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of scrollbar thumbs (the draggable part of the scrollbar). This makes the scrollbar thumb appear with rounded corners.<br>CSS variable: --wm-scroll-bar-thumb-radius"
           }
         },
         "hover": {
           "value": "{color.surface.container.highest.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar thumbs when users hover over them (the draggable part of the scrollbar). This provides visual feedback when users interact with the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-hover"
           }
         }
       }
     }
   }
-}
+}

package/src/tokens/web/components/search/Token.Readme.md

@@ -0,0 +1,39 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| full.screen.background | Sets the background color of the full-screen search overlay.<br>CSS variable: --wm-search-full-screen-background |
+| back.btn.margin | Controls external spacing around the back button.<br>CSS variable: --wm-search-back-btn-margin |
+| dropdown.menu.background | Sets the background color of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-background |
+| dropdown.menu.border.radius | Controls the border radius of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-border-radius |
+| dropdown.menu.box.shadow | Controls the drop shadow effect of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-box-shadow |
+| dropdown.menu.height | Controls the maximum height of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-height |
+| dropdown.menu.margin | Controls external spacing around the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-margin |
+| dropdown.menu.z.index | Controls the z-index stacking order of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-z-index |
+| dropdown.menu.item.height | Controls the height of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-height |
+| dropdown.menu.item.font.family | Sets the font family for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-family |
+| dropdown.menu.item.font.size | Controls the size of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-size |
+| dropdown.menu.item.font.weight | Controls the weight of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-weight |
+| dropdown.menu.item.line-height | Sets the line height for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-line-height |
+| dropdown.menu.item.color | Sets the text color of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-color |
+| dropdown.menu.item.gap | Controls spacing between elements within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-gap |
+| dropdown.menu.item.padding | Sets internal spacing within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-padding |
+| dropdown.menu.item.state.layer.color | Sets the color of the state layer overlay for dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-state-layer-color |
+| dropdown.menu.item.img.radius | Controls the border radius of images in dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-img-radius |
+| dropdown.menu.group.item.color | Sets the text color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-color |
+| dropdown.menu.group.item.background | Sets the background color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-background |
+| dropdown.menu.group.item.gap | Controls spacing between elements within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-gap |
+| dropdown.menu.group.item.padding | Sets internal spacing within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-padding |
+| dropdown.menu.group.item.header.font-family | Sets the font family for dropdown menu group item headers.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-family |
+| dropdown.menu.group.item.header.font-size | Controls the size of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-size |
+| dropdown.menu.group.item.header.font-weight | Controls the weight of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-weight |
+| dropdown.menu.group.item.header.line-height | Sets the line height for dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-line-height |
+| dropdown.state.layer.opacity | Controls the opacity of the state layer overlay for dropdown items.<br>CSS variable: --wm-search-dropdown-state-layer-opacity |
+| status.background | Sets the background color of the status message area.<br>CSS variable: --wm-search-status-background |
+| status.padding | Sets internal spacing within the status message area.<br>CSS variable: --wm-search-status-padding |
+| btn.position.left | Controls the left positioning of search buttons.<br>CSS variable: --wm-search-btn-position-left |
+| btn.position.right | Controls the right positioning of search buttons.<br>CSS variable: --wm-search-btn-position-right |

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

@@ -36,7 +36,8 @@
             "value": "{color.surface.container.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of the full-screen search overlay.<br>CSS variable: --wm-search-full-screen-background"
             }
           }
         }
@@ -47,7 +48,8 @@
             "value": "{space.0.value} {space.1.value}",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls external spacing around the back button.<br>CSS variable: --wm-search-back-btn-margin"
             }
           }
         }
@@ -58,7 +60,8 @@
             "value": "{color.surface.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-background"
             }
           },
           "border": {
@@ -66,7 +69,8 @@
               "value": "{radius.xs.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "radius"
+                "subtype": "radius",
+                "description": "Controls the border radius of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-border-radius"
               }
             }
           },
@@ -75,7 +79,8 @@
               "value": "{elevation.shadow.2.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "elevation"
+                "subtype": "elevation",
+                "description": "Controls the drop shadow effect of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-box-shadow"
               }
             }
           },
@@ -83,14 +88,16 @@
             "value": "~\"calc({search.mapping.dropdown.menu.item.height.value} * 6.5)\"",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the maximum height of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-height"
             }
           },
           "margin": {
             "value": "{space.1.value}",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls external spacing around the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-margin"
             }
           },
           "z": {
@@ -98,7 +105,8 @@
               "value": "1060",
               "type": "radius",
               "attributes": {
-                "subtype": "elevation"
+                "subtype": "elevation",
+                "description": "Controls the z-index stacking order of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-z-index"
               }
             }
           },
@@ -107,7 +115,8 @@
               "value": "40px",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls the height of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-height"
               }
             },
             "font": {
@@ -115,21 +124,24 @@
                 "value": "{body.large.font-family.value}",
                 "type": "font",
                 "attributes": {
-                  "subtype": "font-family"
+                  "subtype": "font-family",
+                  "description": "Sets the font family for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-family"
                 }
               },
               "size": {
                 "value": "{body.large.font-size.value}",
                 "type": "font",
                 "attributes": {
-                  "subtype": "font-size"
+                  "subtype": "font-size",
+                  "description": "Controls the size of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-size"
                 }
               },
               "weight": {
                 "value": "{body.large.font-weight.value}",
                 "type": "font",
                 "attributes": {
-                  "subtype": "font-weight"
+                  "subtype": "font-weight",
+                  "description": "Controls the weight of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-weight"
                 }
               }
             },
@@ -137,28 +149,32 @@
               "value": "{body.large.line-height.value}",
               "type": "font",
               "attributes": {
-                "subtype": "line-height"
+                "subtype": "line-height",
+                "description": "Sets the line height for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-line-height"
               }
             },
             "color": {
               "value": "{color.on-surface.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the text color of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-color"
               }
             },
             "gap": {
               "value": "{space.2.value}",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls spacing between elements within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-gap"
               }
             },
             "padding": {
               "value": "{space.2.value} {space.4.value}",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Sets internal spacing within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-padding"
               }
             },
             "state": {
@@ -167,7 +183,8 @@
                   "value": "{color.on-surface.@.value}",
                   "type": "color",
                   "attributes": {
-                    "subtype": "color"
+                    "subtype": "color",
+                    "description": "Sets the color of the state layer overlay for dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-state-layer-color"
                   }
                 }
               }
@@ -177,7 +194,8 @@
                 "value": "{radius.circle.value}",
                 "type": "radius",
                 "attributes": {
-                  "subtype": "radius"
+                  "subtype": "radius",
+                  "description": "Controls the border radius of images in dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-img-radius"
                 }
               }
             }
@@ -188,28 +206,32 @@
                 "value": "{color.on-surface.@.value}",
                 "type": "color",
                 "attributes": {
-                  "subtype": "color"
+                  "subtype": "color",
+                  "description": "Sets the text color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-color"
                 }
               },
               "background": {
                 "value": "{color.surface.container.low.@.value}",
                 "type": "color",
                 "attributes": {
-                  "subtype": "color"
+                  "subtype": "color",
+                  "description": "Sets the background color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-background"
                 }
               },
               "gap": {
                 "value": "{space.2.value}",
                 "type": "space",
                 "attributes": {
-                  "subtype": "space"
+                  "subtype": "space",
+                  "description": "Controls spacing between elements within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-gap"
                 }
               },
               "padding": {
                 "value": "{space.2.value} {space.4.value}",
                 "type": "space",
                 "attributes": {
-                  "subtype": "space"
+                  "subtype": "space",
+                  "description": "Sets internal spacing within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-padding"
                 }
               },
               "header": {
@@ -217,28 +239,32 @@
                   "value": "{h4.font-family.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "font-family"
+                    "subtype": "font-family",
+                    "description": "Sets the font family for dropdown menu group item headers.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-family"
                   }
                 },
                 "font-size": {
                   "value": "{h4.font-size.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "font-size"
+                    "subtype": "font-size",
+                    "description": "Controls the size of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-size"
                   }
                 },
                 "font-weight": {
                   "value": "{h4.font-weight.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "font-weight"
+                    "subtype": "font-weight",
+                    "description": "Controls the weight of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-weight"
                   }
                 },
                 "line-height": {
                   "value": "{h4.line-height.value}",
                   "type": "font",
                   "attributes": {
-                    "subtype": "line-height"
+                    "subtype": "line-height",
+                    "description": "Sets the line height for dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-line-height"
                   }
                 }
               }
@@ -251,7 +277,8 @@
               "value": "0",
               "type": "radius",
               "attributes": {
-                "subtype": "opacity"
+                "subtype": "opacity",
+                "description": "Controls the opacity of the state layer overlay for dropdown items.<br>CSS variable: --wm-search-dropdown-state-layer-opacity"
               }
             }
           }
@@ -262,14 +289,16 @@
           "value": "{color.surface.dim.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of the status message area.<br>CSS variable: --wm-search-status-background"
           }
         },
         "padding": {
           "value": "{space.2.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Sets internal spacing within the status message area.<br>CSS variable: --wm-search-status-padding"
           }
         }
       },
@@ -279,14 +308,16 @@
             "value": "{space.1.value}",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the left positioning of search buttons.<br>CSS variable: --wm-search-btn-position-left"
             }
           },
           "right": {
             "value": "auto",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the right positioning of search buttons.<br>CSS variable: --wm-search-btn-position-right"
             }
           }
         }
@@ -356,4 +387,4 @@
     },
     "appearance": {}
   }
-}
+}

package/src/tokens/web/components/spinner/Token.Readme.md

@@ -0,0 +1,15 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| min-height | Controls the minimum height of loading spinners (animated indicators that show content is loading). This ensures the spinner area is always tall enough to be visible and properly centered.<br>CSS variable: --wm-spinner-min-height |
+| background.@ | Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background |
+| background.opacity | Controls the transparency of the spinner background overlay. Lower values make the background more transparent, higher values make it more opaque.<br>CSS variable: --wm-spinner-background-opacity |
+| loading-data-msg.background.@ | Sets the background color of loading data messages (text that appears with the spinner to explain what's loading). This creates a backdrop for the loading message.<br>CSS variable: --wm-spinner-loading-data-msg-background |
+| loading-data-msg.background.opacity | Controls the transparency of the loading data message background. This affects how visible the background overlay is behind the loading text.<br>CSS variable: --wm-spinner-loading-data-msg-background-opacity |
+| loading-data-msg.color | Sets the text color of loading data messages (the text that appears with the spinner to explain what's loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-loading-data-msg-color |
+| loading-data-msg.radius | Controls the corner rounding of loading data messages (the text area that appears with the spinner). This makes the loading message area appear with rounded corners.<br>CSS variable: --wm-spinner-loading-data-msg-radius |

package/src/tokens/web/components/spinner/spinner.json

@@ -13,7 +13,8 @@
         "value": "6rem",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the minimum height of loading spinners (animated indicators that show content is loading). This ensures the spinner area is always tall enough to be visible and properly centered.<br>CSS variable: --wm-spinner-min-height"
         }
       },
       "background": {
@@ -21,14 +22,16 @@
           "value": "{color.scrim.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"
           }
         },
         "opacity": {
           "value": "0.3",
           "type": "radius",
           "attributes": {
-            "subtype": "opacity"
+            "subtype": "opacity",
+            "description": "Controls the transparency of the spinner background overlay. Lower values make the background more transparent, higher values make it more opaque.<br>CSS variable: --wm-spinner-background-opacity"
           }
         }
       },
@@ -38,14 +41,16 @@
             "value": "{color.scrim.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of loading data messages (text that appears with the spinner to explain what's loading). This creates a backdrop for the loading message.<br>CSS variable: --wm-spinner-loading-data-msg-background"
             }
           },
           "opacity": {
             "value": "{opacity.hover.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "opacity"
+              "subtype": "opacity",
+              "description": "Controls the transparency of the loading data message background. This affects how visible the background overlay is behind the loading text.<br>CSS variable: --wm-spinner-loading-data-msg-background-opacity"
             }
           }
         },
@@ -53,18 +58,20 @@
           "value": "inherit",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the text color of loading data messages (the text that appears with the spinner to explain what's loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-loading-data-msg-color"
           }
         },
         "radius": {
           "value": "inherit",
           "type": "radius",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of loading data messages (the text area that appears with the spinner). This makes the loading message area appear with rounded corners.<br>CSS variable: --wm-spinner-loading-data-msg-radius"
           }
         }
       }
     },
     "appearances": {}
   }
-}
+}

package/src/tokens/web/components/switch/Token.Readme.md

@@ -0,0 +1,20 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| btn.height.@ | Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-btn-height |
+| btn.padding | Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-switch-btn-padding |
+| btn.border.width | Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-btn-border-width |
+| btn.border.style | Controls the style of the border around switch buttons. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-switch-btn-border-style |
+| btn.border.color.@ | Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-btn-border-color |
+| btn.radius | Controls the corner rounding of switch buttons. When set to 'pill', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius |
+| btn.icon.size | Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size |
+| btn.background.@ | Sets the background color of switch buttons. When set to 'none', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-btn-background |
+| btn.color.@ | Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-btn-color |
+| btn.text-decoration | Controls the text decoration of switch buttons. 'none' removes any decorative lines, 'underline' adds a line under the text, 'overline' adds a line above the text, 'line-through' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration |
+| btn.state.layer.color.@ | Sets the color of the state layer that appears when users hover, focus, or interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color |
+| btn.state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity |