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

chore(site): audit and encode docs patterns (#535)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-02-13 14:04:55 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 84b7b0774a
commit b1c8022794
111 changed files with 2680 additions and 4642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/mute-button.mdx
+62
View File
@@ -21,6 +21,17 @@ import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUs
import basicUsageHtmlCss from "@/components/docs/demos/mute-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";
{/* React demos — Volume Levels */}
import VolumeLevelsDemoReact from "@/components/docs/demos/mute-button/react/css/VolumeLevels";
import volumeLevelsReactTsx from "@/components/docs/demos/mute-button/react/css/VolumeLevels.tsx?raw";
import volumeLevelsReactCss from "@/components/docs/demos/mute-button/react/css/VolumeLevels.css?raw";
{/* HTML demos — Volume Levels */}
import VolumeLevelsDemoHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.astro";
import volumeLevelsHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.html?raw";
import volumeLevelsHtmlCss from "@/components/docs/demos/mute-button/html/css/VolumeLevels.css?raw";
import volumeLevelsHtmlTs from "@/components/docs/demos/mute-button/html/css/VolumeLevels.ts?raw";
## Anatomy
<FrameworkCase frameworks={["react"]}>
@@ -35,6 +46,32 @@ import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/Basic
```
</FrameworkCase>
## Behavior
Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.
## Styling
Style the button based on muted state:
```css
media-mute-button[data-muted] .icon-muted { display: inline; }
media-mute-button:not([data-muted]) .icon-unmuted { display: inline; }
```
Use `data-volume-level` for multi-level icon switching:
```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; }
```
## Accessibility
Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute" when unmuted. Override with the `label` prop. Keyboard activation: <kbd>Enter</kbd> / <kbd>Space</kbd>.
## Examples
### Basic Usage
@@ -62,4 +99,29 @@ import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/Basic
</StyleCase>
</FrameworkCase>
### Volume Levels
<FrameworkCase frameworks={["react"]}>
<StyleCase styles={["css"]}>
<Demo files={[
{ title: "App.tsx", code: volumeLevelsReactTsx, lang: "tsx" },
{ title: "App.css", code: volumeLevelsReactCss, lang: "css" },
]}>
<VolumeLevelsDemoReact client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<StyleCase styles={["css"]}>
<Demo files={[
{ title: "index.html", code: volumeLevelsHtml, lang: "html" },
{ title: "index.css", code: volumeLevelsHtmlCss, lang: "css" },
{ title: "index.ts", code: volumeLevelsHtmlTs, lang: "ts" },
]}>
<VolumeLevelsDemoHtml />
</Demo>
</StyleCase>
</FrameworkCase>
<ApiReference component="MuteButton" />