zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(site): React API reference styling sections use correct selectors (#785)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-09 20:26:00 -07:00
committed by GitHub
co-authored by Claude Opus 4.6
parent f98ddc97bc
commit 98e390f7ee
10 changed files with 221 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/mute-button.mdx
+22
View File
@@ -54,19 +54,41 @@ Toggles mute on and off, and exposes a derived `volumeLevel` based on the curren
Style the button based on muted state:
<FrameworkCase frameworks={["html"]}>
```css
media-mute-button[data-muted] .icon-muted { display: inline; }
media-mute-button:not([data-muted]) .icon-unmuted { display: inline; }
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
```css
.mute-button[data-muted] .icon-muted { display: inline; }
.mute-button:not([data-muted]) .icon-unmuted { display: inline; }
```
</FrameworkCase>
Use `data-volume-level` for multi-level icon switching:
<FrameworkCase frameworks={["html"]}>
```css
media-mute-button[data-volume-level="off"] .icon-off { display: inline; }
media-mute-button[data-volume-level="low"] .icon-low { display: inline; }
media-mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
media-mute-button[data-volume-level="high"] .icon-high { display: inline; }
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
.mute-button[data-volume-level="off"] .icon-off { display: inline; }
.mute-button[data-volume-level="low"] .icon-low { display: inline; }
.mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
.mute-button[data-volume-level="high"] .icon-high { display: inline; }
```
</FrameworkCase>
## Accessibility