@wavemaker-ai/foundation-css 1.0.0-rc.647469

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

@@ -0,0 +1,153 @@
+{
+    "slider": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "web": ".app-slider"
+                }
+            },
+            "appearances": {}
+        },
+        "mapping": {
+            "height": {
+                "value": "{space.4.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"
+                }
+            },
+            "border-radius": {
+                "value": "{radius.lg.value}",
+                "type": "radius",
+                "attributes": {
+                    "subtype": "radius",
+                    "description": "Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"
+                }
+            },
+            "track": {
+                "filled": {
+                    "background": {
+                        "value": "{color.surface.tint.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background"
+                        }
+                    }
+                },
+                "unfilled": {
+                    "background": {
+                        "value": "{color.primary.container.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background"
+                        }
+                    }
+                }
+            },
+            "handle": {
+                "background": {
+                    "value": "{color.surface.tint.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background"
+                    }
+                },
+                "height": {
+                    "value": "{space.10.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.1.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width"
+                    }
+                },
+                "border-radius": {
+                    "value": "{radius.xs.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius"
+                    }
+                },
+                "gap": {
+                    "value": "{space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "description": "Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap"
+                    }
+                }
+            },
+            "range": {
+                "label": {
+                    "color": {
+                        "value": "inherit",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-slider-range-label-color"
+                        }
+                    },
+                    "padding": {
+                        "value": "{space.0.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-label-padding"
+                        }
+                    },
+                    "font-size": {
+                        "value": "{body.medium.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-slider-range-label-font-size"
+                        }
+                    },
+                    "font-weight": {
+                        "value": "{body.medium.font-weight.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls how thick or bold label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-slider-range-label-font-weight"
+                        }
+                    },
+                    "font-family": {
+                        "value": "{body.medium.font-family.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-label-font-family"
+                        }
+                    },
+                    "background-color": {
+                        "value": "none",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of labels (the area behind the label text). When set to 'none', labels have no background color, making them transparent.<br>CSS variable: --wm-slider-range-label-background-color"
+                        }
+                    },
+                    "gap": {
+                        "value": "{space.2.value}",
+                        "type": "space",
+                        "attributes": {
+                            "description": "Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap"
+                        }
+                    }
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -0,0 +1,77 @@
+{
+  "spinner": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-spinner",
+          "mobile": ".app-spinner"
+        }
+      }
+    },
+    "mapping": {
+      "min-height": {
+        "value": "6rem",
+        "type": "space",
+        "attributes": {
+          "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": {
+        "@": {
+          "value": "{color.scrim.@.value}",
+          "type": "color",
+          "attributes": {
+            "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",
+            "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"
+          }
+        }
+      },
+      "loading-data-msg": {
+        "background": {
+          "@": {
+            "value": "{color.scrim.@.value}",
+            "type": "color",
+            "attributes": {
+              "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",
+              "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"
+            }
+          }
+        },
+        "color": {
+          "value": "inherit",
+          "type": "color",
+          "attributes": {
+            "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",
+            "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 |

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

@@ -0,0 +1,241 @@
+{
+  "switch": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-switch"
+        },
+        "states": {
+          "selected": {
+            "selector": {
+              "web": " > .btn-group > .btn.selected"
+            }
+          },
+          "hover": {
+            "selector": {
+              "web": " > .btn-group > .btn:hover"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " > .btn-group > .btn:focus"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": " > .btn-group > .btn:active"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "btn": {
+        "height": {
+          "@": {
+            "value": "40px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "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"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.1.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "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"
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "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"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "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"
+            }
+          },
+          "color": {
+            "@": {
+              "value": "{color.outline.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "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"
+              }
+            }
+          }
+        },
+        "radius": {
+          "value": "{radius.pill.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "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"
+          }
+        },
+        "icon": {
+          "size": {
+            "value": "{icon.size.sm.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "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"
+            }
+          }
+        },
+        "background": {
+          "@": {
+            "value": "none",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "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"
+            }
+          }
+        },
+        "color": {
+          "@": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "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"
+            }
+          }
+        },
+        "text-decoration": {
+          "value": "none",
+          "type": "radius",
+          "attributes": {
+            "subtype": "text-decoration",
+            "description": "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"
+          }
+        },
+        "state": {
+          "layer": {
+            "color": {
+              "@": {
+                "value": "{color.on-surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "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"
+                }
+              }
+            },
+            "opacity": {
+              "value": "0",
+              "type": "radius",
+              "attributes": {
+                "subtype": "opacity",
+                "description": "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"
+              }
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "btn": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.hover.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "btn": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.focus.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "btn": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.active.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "selected": {
+          "btn": {
+            "background": {
+              "@": {
+                "value": "{color.secondary.container.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            },
+            "color": {
+              "@": {
+                "value": "{color.on-secondary.container.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            },
+            "border": {
+              "color": {
+                "@": {
+                  "value": "{color.outline.@.value}",
+                  "type": "color"
+                }
+              }
+            },
+            "state": {
+              "layer": {
+                "color": {
+                  "@": {
+                    "value": "{color.on-secondary.container.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| background | Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background |
+| nav.border.width | Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width |
+| nav.border.style | Controls the style of the border around tab navigation (the section containing the tab headers). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-nav-border-style |
+| nav.border.color | Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color |
+| nav.alignment | Controls the alignment of tab navigation (the section containing the tab headers). 'flex-start' aligns tabs to the left, 'center' centers them, and 'flex-end' aligns them to the right.<br>CSS variable: --wm-tabs-nav-alignment |
+| nav.gap | Controls the spacing between individual tab headers within the tab navigation (the section containing the tab headers). This creates visual separation between each tab header.<br>CSS variable: --wm-tabs-nav-gap |
+| item.heading.height | Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height |
+| item.heading.padding | Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding |
+| item.heading.font-size | Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size |
+| item.heading.font-weight | Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight |
+| item.heading.font-family | Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family |
+| item.heading.line-height | Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height |
+| item.heading.letter-spacing | Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing |
+| item.heading.color.@ | Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color |
+| item.heading.background | Sets the background color of tab item headings (the clickable tab labels that users click to switch between different content sections). This is the color that appears behind the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-background |
+| item.heading.border.width | Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width |
+| item.heading.border.style | Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style |
+| item.heading.border.color | Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color |
+| item.heading.border.radius | Controls the border radius of tab item headings, determining how rounded the corners appear.<br>CSS variable: --wm-tabs-item-heading-border-radius |
+| item.heading.state.layer.color | Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color |
+| item.heading.state.layer.opacity | Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity |
+| item.heading.indicator.height | Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height |
+| item.heading.indicator.width | Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width |
+| item.heading.indicator.radius | Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius |
+| item.heading.indicator.background | Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background |
+| content.background | Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background |
+| body.padding | Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding |
+| body.height | Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height |