zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 13:48:14 +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/controls.mdx
+32
View File
@@ -50,6 +50,7 @@ User activity is tracked via pointer movement, keyboard input, and focus events
## Styling
By default, controls have the following styles:
<FrameworkCase frameworks={["html"]}>
```css
/* Click-through: clicks pass through controls to video beneath */
media-controls {
@@ -69,10 +70,41 @@ media-controls:not([data-visible]) {
opacity: 0;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders `<div>` elements with the same data attributes. Add a `className` and use it as the selector:
```css
/* Click-through: clicks pass through controls to video beneath */
.controls {
pointer-events: none;
}
.controls-group {
pointer-events: auto;
}
/* Fade transition */
.controls {
transition: opacity 0.25s;
}
.controls:not([data-visible]) {
opacity: 0;
}
```
</FrameworkCase>
## Accessibility
<FrameworkCase frameworks={["html"]}>
No ARIA role is applied to `<media-controls>` — it is a layout wrapper, not a landmark. `<media-controls-group>` automatically receives `role="group"` when an `aria-label` or `aria-labelledby` attribute is provided; otherwise no role is assigned.
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
No ARIA role is applied to `Controls.Root` — it is a layout wrapper, not a landmark. `Controls.Group` automatically receives `role="group"` when an `aria-label` or `aria-labelledby` attribute is provided; otherwise no role is assigned.
</FrameworkCase>
## Examples
site/src/content/docs/reference/fullscreen-button.mdx
+23
View File
@@ -43,20 +43,43 @@ Toggles fullscreen mode. Detects platform support through `availability` — whe
You can style the button based on fullscreen state:
<FrameworkCase frameworks={["html"]}>
```css
/* In fullscreen */
media-fullscreen-button[data-fullscreen] {
background: red;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
```css
/* In fullscreen */
.fullscreen-button[data-fullscreen] {
background: red;
}
```
</FrameworkCase>
Consider hiding the button when unsupported:
<FrameworkCase frameworks={["html"]}>
```css
media-fullscreen-button[data-availability="unsupported"] {
display: none;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
.fullscreen-button[data-availability="unsupported"] {
display: none;
}
```
</FrameworkCase>
## Accessibility
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
site/src/content/docs/reference/pip-button.mdx
+23
View File
@@ -43,20 +43,43 @@ Toggles picture-in-picture (PiP) mode. Detects platform support through `availab
You can style the button based on PiP state:
<FrameworkCase frameworks={["html"]}>
```css
/* In PiP mode */
media-pip-button[data-pip] {
background: red;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
```css
/* In PiP mode */
.pip-button[data-pip] {
background: red;
}
```
</FrameworkCase>
Consider hiding the button when unsupported:
<FrameworkCase frameworks={["html"]}>
```css
media-pip-button[data-availability="unsupported"] {
display: none;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
.pip-button[data-availability="unsupported"] {
display: none;
}
```
</FrameworkCase>
## Accessibility
site/src/content/docs/reference/play-button.mdx
+26
View File
@@ -43,6 +43,7 @@ PlayButton is a three-state button: **play**, **pause**, and **replay**. When me
Style with the `[data-paused]` and `[data-ended]` attributes to show/hide play/pause/replay icons based on state. For example:
<FrameworkCase frameworks={["html"]}>
```css
/* Paused (but not ended) */
media-play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }
@@ -53,13 +54,38 @@ media-play-button:not([data-paused]) .pause-icon { display: inline; }
/* Ended */
media-play-button[data-ended] .replay-icon { 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
/* Paused (but not ended) */
.play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }
/* Playing */
.play-button:not([data-paused]) .pause-icon { display: inline; }
/* Ended */
.play-button[data-ended] .replay-icon { display: inline; }
```
</FrameworkCase>
After first play, the `data-started` attribute is added and remains present until a new source is loaded. Use this to hide the play button when media hasn't started yet:
<FrameworkCase frameworks={["html"]}>
```css
/* Hide play button before first play */
media-play-button:not([data-started]) .play-icon { display: none; }
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
/* Hide play button before first play */
.play-button:not([data-started]) .play-icon { display: none; }
```
</FrameworkCase>
## Accessibility
site/src/content/docs/reference/popover.mdx
+29
View File
@@ -68,15 +68,29 @@ The `side` and `align` props control popup placement relative to the trigger. Th
Use [CSS custom properties](#root-css-custom-properties) for positioning offsets:
<FrameworkCase frameworks={["html"]}>
```css
media-popover {
--media-popover-side-offset: 8px;
--media-popover-align-offset: 0px;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders standard DOM elements with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
```css
.popover {
--media-popover-side-offset: 8px;
--media-popover-align-offset: 0px;
}
```
</FrameworkCase>
Style based on open state and transition phases:
<FrameworkCase frameworks={["html"]}>
```css
media-popover[data-open] .popup {
display: block;
@@ -88,6 +102,21 @@ media-popover[data-ending-style] .popup {
opacity: 0;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
.popover[data-open] .popup {
display: block;
}
.popover[data-starting-style] .popup {
opacity: 0;
}
.popover[data-ending-style] .popup {
opacity: 0;
}
```
</FrameworkCase>
## Accessibility
site/src/content/docs/reference/poster.mdx
+12
View File
@@ -47,11 +47,23 @@ The poster is visible before playback starts. Once the user plays or seeks, the
Style the poster with the `[data-visible]` attribute:
<FrameworkCase frameworks={["html"]}>
```css
media-poster:not([data-visible]) {
display: none;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders an `<img>` with the same data attributes. Add a `className` and use it as the selector:
```css
.poster:not([data-visible]) {
display: none;
}
```
</FrameworkCase>
You control the child `<img>` — this means `srcset`, `sizes`, `loading="lazy"`, and framework image components all work naturally.
site/src/content/docs/reference/thumbnail.mdx
+20
View File
@@ -99,6 +99,7 @@ The component picks the latest thumbnail whose `startTime` is less than or equal
Use state data attributes for pure CSS styling:
<FrameworkCase frameworks={["html"]}>
```css
media-thumbnail[data-hidden] {
display: none;
@@ -112,6 +113,25 @@ media-thumbnail[data-error] {
outline: 1px solid #ef4444;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<div>` with the same data attributes. Add a `className` and use it as the selector:
```css
.thumbnail[data-hidden] {
display: none;
}
.thumbnail[data-loading] {
opacity: 0.6;
}
.thumbnail[data-error] {
outline: 1px solid #ef4444;
}
```
</FrameworkCase>
## Accessibility
site/src/content/docs/reference/time-slider.mdx
+22
View File
@@ -45,19 +45,41 @@ Seeking is throttled via the `commitThrottle` prop (default 100ms) to avoid over
Use [CSS custom properties](#root-css-custom-properties) to style the fill, pointer, and buffer levels:
<FrameworkCase frameworks={["html"]}>
```css
media-time-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<div>` with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
```css
.time-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}
```
</FrameworkCase>
Use `data-seeking` to style during active seek operations:
<FrameworkCase frameworks={["html"]}>
```css
media-time-slider[data-seeking] {
opacity: 0.8;
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```css
.time-slider[data-seeking] {
opacity: 0.8;
}
```
</FrameworkCase>
## Accessibility
site/src/content/docs/reference/volume-slider.mdx
+12
View File
@@ -43,11 +43,23 @@ Controls the media volume level. The slider maps its 0–100 internal range to t
Use [CSS custom properties](#root-css-custom-properties) to style the fill and pointer levels:
<FrameworkCase frameworks={["html"]}>
```css
media-volume-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}
```
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
React renders a `<div>` with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
```css
.volume-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}
```
</FrameworkCase>
## Accessibility