<!-- AUTO-GENERATED FILE. Do not edit manually. -->

# Token Reference Table

This table lists all tokens for this component:

| Token | Description |
|-------|------------|
| width | Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width |
| height | Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height |
| background.@ | Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background |
| border.width | Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width |
| border.color | Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color |
| border.style | Controls the style of the border around toggle switches. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toggle-border-style |
| radius | Controls the corner rounding of toggle switches. When set to 'pill', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius |
| state.layer.size | Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size |
| state.layer.color.@ | Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-state-layer-color |
| 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-toggle-state-layer-opacity |
| handle.size.@ | Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size |
| handle.color.@ | Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color |