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

# Token Reference Table

This table lists all tokens for this component:

| Token | Description |
|-------|------------|
| z-index | Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index |
| gap | Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap |
| margin | Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin |
| padding | Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding |
| background | Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background |
| color | Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color |
| shadow | Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow |
| radius | Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius |
| border.color | Sets the border color.<br>CSS variable: --wm-popover-border-color |
| border.width | Controls the border thickness.<br>CSS variable: --wm-popover-border-width |
| border.style | Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style |
| header.padding | Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding |
| header.color | Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color |
| header.font-family | Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family |
| header.font-weight | Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight |
| header.font-size | Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size |
| header.line-height | Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height |
| header.letter-spacing | Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing |
| body.padding | Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding |
| body.font-family | Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family |
| body.font-size | Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size |
| body.font-weight | Controls how thick or bold the popover body content appears (the main content area of popover windows). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-font-weight |
| body.line-height | Controls the vertical spacing between lines when popover body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-line-height |
| body.letter-spacing | Controls the horizontal spacing between individual characters in popover body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing |
| arrow.background | Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background |
| arrow.size | Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size |