@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

package/docs/how-to/add-a-poster-and-loading-placeholder.md

@@ -179,25 +179,27 @@ The examples use `contain` for both images. Use `cover` for both when the poster
 
 Ejecting a skin changes nothing about the first two approaches: the player’s `poster`, or the poster the media provides, still reaches the [Poster](../reference/poster.md) component your skin renders.
 
-Poster renders an `<img>` and fills its `src` from the player, so `srcSet`, `sizes`, `loading`, and the rest of the image attributes are yours. Provide your own `src` or `srcSet` and Video.js leaves the image alone.
+`Poster.Root` owns visibility and loading state. `Poster.Image` renders the image and fills its `src` from the player, so `srcSet`, `sizes`, `loading`, and the rest of the image attributes are yours. Provide your own `src` or `srcSet` and Video.js leaves the image alone.
 
-When your UI already includes Poster, apply a placeholder through its `render` prop:
+When your UI already includes Poster, apply a placeholder through the image’s `render` prop:
 
 tsx
 
 ```
-<Poster
-  render={(props) => (
-    <img
-      {...props}
-      style={{
-        ...props.style,
-        background:
-          "url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat",
-      }}
-    />
-  )}
-/>
+<Poster.Root>
+  <Poster.Image
+    render={(props) => (
+      <img
+        {...props}
+        style={{
+          ...props.style,
+          background:
+            "url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat",
+        }}
+      />
+    )}
+  />
+</Poster.Root>
 ```
 
 ## Troubleshooting

package/docs/how-to/add-quality-selector.md

@@ -24,15 +24,16 @@ pnpm add @videojs/react @videojs/hlsjs-video
 
 Let automatic quality selection do its job by default, and offer a quality menu for users who want to pin a rendition. Render the menu only when quality selection is available.
 
-Quality
+QualityAuto
 
 App.tsx
 
 App.css
 
 ```
-import { Container, createPlayer, Menu, QualityRadioGroup } from '@videojs/react';
+import { Container, createPlayer, Menu } from '@videojs/react';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { QualityRadioGroup } from '@videojs/react/ui/quality-radio-group';
 import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
@@ -42,28 +43,31 @@ const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.
 function QualityMenu(): ReactNode {
   return (
     <Menu.Root side="top" align="end">
-      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
-        Quality
-      </Menu.Trigger>
-      <Menu.Popup className="menu">
-        <Menu.Content>
-          <QualityRadioGroup
-            className="menu-group"
-            renderItem={(props, item) => (
-              <Menu.RadioItem {...props} className="menu-item">
-                <span>
-                  {item.label}
-                  {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
-                </span>
-                {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
-                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                  ✓
-                </Menu.ItemIndicator>
-              </Menu.RadioItem>
-            )}
-          />
-        </Menu.Content>
-      </Menu.Popup>
+      <QualityRadioGroup.Root>
+        <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
+          Quality
+          <QualityRadioGroup.Value className="menu-hint" />
+        </Menu.Trigger>
+        <Menu.Popup className="menu">
+          <Menu.Content>
+            <QualityRadioGroup.Options
+              className="menu-group"
+              renderItem={(props, item) => (
+                <Menu.RadioItem {...props} className="menu-item">
+                  <span>
+                    {item.label}
+                    {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
+                  </span>
+                  {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
+                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                    ✓
+                  </Menu.ItemIndicator>
+                </Menu.RadioItem>
+              )}
+            />
+          </Menu.Content>
+        </Menu.Popup>
+      </QualityRadioGroup.Root>
     </Menu.Root>
   );
 }
@@ -106,6 +110,15 @@ export default function BasicUsage() {
   backdrop-filter: blur(10px);
 }
 
+.menu-hint {
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.menu-hint:empty {
+  display: none;
+}
+
 .menu {
   --media-menu-side-offset: 8px;
   box-sizing: border-box;

package/docs/how-to/migrate-from-media-chrome.md

@@ -99,7 +99,7 @@ Choose an audio player and audio skin rather than toggling at runtime.
 
 `media-controls` (built in)
 
-Controls auto-hide after inactivity automatically. The delay is currently fixed; see [Known gaps](#known-gaps).
+Controls auto-hide after inactivity automatically. `autohide="-1"` becomes `visibility="always"` on `media-controls`; the delay is currently fixed, see [Known gaps](#known-gaps).
 
 `fullscreenelement`
 
@@ -278,14 +278,16 @@ React buttons do not include visible content either. Use a button’s `render` p
 
 These are PascalCase components rather than tags — `TimeSlider`, `VolumeSlider`, `BufferingIndicator`, `Poster`, `QualityRadioGroup` — and the compound parts are namespaced, so `media-slider-track` becomes `TimeSlider.Track`. See the [UI components](../concepts/ui-components.md) concept for the full set.
 
-`Poster` is the one rename that changes shape. Put the poster URL on `VideoPlayer`; `Poster` renders the image and accepts image attributes such as `alt`, `srcSet`, and `sizes`:
+`Poster` is the one rename that changes shape. Put the poster URL on `VideoPlayer`; `Poster.Root` owns its state and `Poster.Image` accepts image attributes such as `alt`, `srcSet`, and `sizes`:
 
 tsx
 
 ```
 <VideoPlayer poster="/poster.jpg">
   <Container>
-    <Poster alt="" />
+    <Poster.Root>
+      <Poster.Image alt="" />
+    </Poster.Root>
   </Container>
 </VideoPlayer>
 ```
@@ -390,7 +392,7 @@ Put a `ref` on the media component to reach the rendered `HTMLVideoElement`; the
 
 These Media Chrome features have no direct equivalent yet. Several can be approximated; see [Workarounds](#workarounds).
 
-*   No configurable `autohide` delay or disable switch (`autohide="-1"`), and no `autohideovercontrols` ([#1728](https://github.com/videojs/v10/issues/1728))
+*   No configurable `autohide` delay and no `autohideovercontrols` ([#1728](https://github.com/videojs/v10/issues/1728)). Disabling autohide (`autohide="-1"`) is covered by `visibility="always"` on `media-controls`; see [Workarounds](#workarounds).
 *   No `defaultduration` placeholder before the media loads ([#1729](https://github.com/videojs/v10/issues/1729))
 *   Volume and muted preferences are not persisted across sessions, so Media Chrome’s `novolumepref` and `nomutedpref` opt-outs have nothing to opt out of ([#944](https://github.com/videojs/v10/issues/944)). Video.js can choose an initial subtitle track from the locale, but it does not yet remember the viewer’s later language choice ([#1786](https://github.com/videojs/v10/issues/1786)).
 *   No `breakpoints` or container-breakpoint attributes; use CSS container queries instead
@@ -404,7 +406,7 @@ Chapters themselves do work. Add a default `<track kind="chapters">` and the pac
 
 ### Disable autohide (`autohide="-1"`)
 
-Packaged skins don’t expose an autohide switch. Install the closest skin’s source and remove its hidden-control styles. That’s safer than overriding internal selectors in a skin you don’t own.
+Set `visibility="always"` on `media-controls` (or `Controls.Root` in React) and the controls stay visible regardless of activity. Packaged skins don’t expose that attribute; to keep a preset skin’s look, [eject the skin](./customize-skins.md#eject-and-edit-a-skin) and set it on the skin’s controls element rather than overriding internal selectors in a skin you don’t own.
 
 ### Breakpoints
 

package/docs/how-to/migrate-from-mux-player.md

@@ -685,7 +685,7 @@ Ordered roughly by how many migrations they’ll touch.
 
 *   Two skins, against Mux Player’s five themes, and no runtime theme switch. That’s a deliberate trade, fewer looks you can eject, but it’s a real difference if you shipped `theme="classic"`.
 *   Lazy loading (`loading="viewport|page"`) has no equivalent.
-*   The controls auto-hide delay isn’t configurable, and there’s no disabled state for the controls ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay isn’t configurable ([#1728](https://github.com/videojs/v10/issues/1728)). Always-visible controls are available through `visibility="always"` on the controls component in a custom or ejected skin.
 *   Nothing persists between sessions: volume, captions language, speed, quality. That’s out of scope for GA ([#944](https://github.com/videojs/v10/issues/944)). Default subtitle language is tracked at [#1423](https://github.com/videojs/v10/issues/1423), though Mux users can set `source.playback.defaultSubtitlesLang` and let the HLS playlist decide.
 *   Smaller conveniences without homes yet: debug mode ([#1406](https://github.com/videojs/v10/issues/1406)) and autoplay with a muted fallback ([#1039](https://github.com/videojs/v10/issues/1039)). Unmuting from zero volume already restores a sensible level, so Mux Player’s smart-unmute behavior carries over.
 

package/docs/how-to/migrate-from-plyr.md

@@ -256,7 +256,7 @@ Set `aspect-ratio` in CSS on the skin component.
 
 `hideControls`
 
-Preset skins auto-hide controls based on activity. The delay is currently not configurable.
+Preset skins auto-hide controls based on activity. `hideControls: false` maps to `visibility="always"` on the controls component in a custom or ejected skin; the delay is currently not configurable.
 
 `clickToPlay`
 
@@ -420,5 +420,5 @@ For changes to controls, layout, or icons, eject the skin into your project. Its
 *   Plyr’s full-window fullscreen fallback has no matching Video.js feature. This was designed as a fallback when the Fullscreen API wasn’t supported, but given [browser support for fullscreen is around 96%](https://caniuse.com/fullscreen), it’s unlikely to be required.
 *   Plain MP4 source arrays with `size` metadata do not automatically create a quality menu. Use Mux, HLS, or DASH for adaptive quality when possible. A simpler source-driven quality menu may be considered later.
 *   Preset skins segment the time slider and show chapter titles when the media includes a default `<track kind="chapters">`. Dedicated cue-point APIs are not complete yet; see [#1442](https://github.com/videojs/v10/issues/1442).
-*   The controls auto-hide delay and disabled state are not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay is not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)). Disabling auto-hide is possible with `visibility="always"` on the controls component, but not from a preset skin’s attributes.
 *   Native controls are not automatically removed when custom controls load; see [#1160](https://github.com/videojs/v10/issues/1160).

package/docs/how-to/migrate-from-video-js-8.md

@@ -256,7 +256,7 @@ no equivalent; see [Known gaps](#known-gaps)
 
 `inactivityTimeout`
 
-not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728))
+delay not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)); `inactivityTimeout: 0` maps to `visibility="always"` on the controls component
 
 `errorDisplay`, `notSupportedMessage`
 
@@ -600,7 +600,7 @@ Ordered roughly by how likely each is to block a v8 migration.
 *   Nothing persists between sessions: volume, captions language, speed, quality. That’s out of scope for GA ([#944](https://github.com/videojs/v10/issues/944)). Default subtitle language is tracked at [#1423](https://github.com/videojs/v10/issues/1423).
 *   No VHS-equivalent tuning surface. Engine settings belong to the engine you chose, and the default HLS component deliberately exposes few of them.
 *   Chapters render in the time slider from a `<track kind="chapters">`, and its segments reflect `data-active`. There is no player-level active chapter value or chapter menu, so v8’s chapters menu has no equivalent ([#1873](https://github.com/videojs/v10/issues/1873)). Cue points aren’t implemented ([#1442](https://github.com/videojs/v10/issues/1442)).
-*   The controls auto-hide delay isn’t configurable, so v8’s `inactivityTimeout` has no equivalent ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay isn’t configurable, so arbitrary `inactivityTimeout` values have no equivalent ([#1728](https://github.com/videojs/v10/issues/1728)). The common `inactivityTimeout: 0` case is covered by `visibility="always"` on the controls component in a custom or ejected skin.
 *   No full-window fullscreen fallback. v8 had one for browsers without the Fullscreen API; [support is around 96%](https://caniuse.com/fullscreen) now.
 *   Multiple `<source>` elements with `size` metadata don’t become a quality menu. Use HLS or DASH for adaptive quality; picking renditions by resolution won’t be added ([#1415](https://github.com/videojs/v10/issues/1415)).
 *   Two skins, and no runtime theme switch.

package/docs/how-to/play-live-streams.md

@@ -67,7 +67,7 @@ Two features describe liveness:
 
 The [time feature](../reference/feature-time.md) adjusts for live playback: `duration` reports the live edge (the end of the seekable range) and keeps growing as the stream continues.
 
-LiveButton reads this state: it renders as an active “go to live” control while playback is behind the edge, seeks to the edge on activation, and goes inactive at the edge.
+LiveButton reads this state: it renders as an active “go to live” control while playback is behind the edge, seeks to the edge on activation, and goes inactive at the edge. Until the media reports a `seekable` range — before metadata loads, or for non-live media — the button is disabled (`data-disabled`) because there is no edge to seek to. Custom live UIs should treat “behind the edge” and “actionable” as separate states.
 
 ## Availability and constraints
 

package/docs/how-to/show-and-hide-controls.md

@@ -139,7 +139,15 @@ The feature needs the player container for activity tracking; without a containe
 
 ### Always-visible controls
 
-Skip the visibility wiring: render your controls without consuming `controlsVisible`. State still tracks activity for anything else that needs it.
+Set `visibility="always"` on [Controls](../reference/controls.md). The controls stay visible and report the user as active while the feature keeps tracking activity for anything else that needs it. The packaged audio skins use this mode.
+
+tsx
+
+```
+<Controls.Root visibility="always">
+  <Controls.Content className="controls">...</Controls.Content>
+</Controls.Root>
+```
 
 ### Custom show/hide styling
 

package/docs/how-to/show-timeline-thumbnail-previews.md

@@ -14,7 +14,9 @@ Using a pre-built [skin](../concepts/skins.md)? It already includes the controls
 
 ## Recommended approach
 
-Add a `kind="metadata"` track labeled `thumbnails` whose cues reference storyboard images, then put a slider thumbnail inside the [TimeSlider](../reference/time-slider.md). Scrubbing shows the frame under the pointer; the thumbnail reads the pointer time from the slider, so it takes no props.
+Add a `kind="metadata"` track labeled `thumbnails` whose cues reference storyboard images, then put a slider thumbnail inside the [TimeSlider](../reference/time-slider.md). Scrubbing shows the frame under the pointer. The slider thumbnail reads the pointer time from the slider, so you never pass `time`; it otherwise accepts the same props as the standalone [Thumbnail](../reference/thumbnail.md).
+
+Compose `Slider.Thumbnail.Root` around `Slider.Thumbnail.Image`, and put image settings such as `crossOrigin`, `loading`, and `fetchPriority` on the image part.
 
 App.tsx
 
@@ -37,7 +39,9 @@ export default function BasicUsage() {
           <TimeSlider.Track className="media-slider-track">
             <TimeSlider.Fill className="media-slider-fill" />
           </TimeSlider.Track>
-          <Slider.Thumbnail className="media-slider-thumbnail" />
+          <Slider.Thumbnail.Root className="media-slider-thumbnail">
+            <Slider.Thumbnail.Image className="media-slider-thumbnail-image" />
+          </Slider.Thumbnail.Root>
         </TimeSlider.Root>
       </Container>
     </Player>
@@ -109,6 +113,10 @@ export default function BasicUsage() {
 .media-slider-thumbnail[data-hidden] {
   display: none;
 }
+
+.media-slider-thumbnail-image {
+  display: block;
+}
 ```
 
 ## How it works
@@ -151,6 +159,7 @@ Regenerate the storyboard with a larger frame size, or split giant sprite sheets
 ## Related components
 
 *   [Thumbnail](../reference/thumbnail.md)
+*   [Slider](../reference/slider.md)
 *   [Time slider](../reference/time-slider.md)
 
 ## Related API

package/docs/reference/audio-track-radio-group.md

@@ -9,7 +9,7 @@ Creates radio items from the player audio track state and selects the enabled tr
 tsx
 
 ```
-import { AudioTrackRadioGroup } from '@videojs/react';
+import { AudioTrackRadioGroup } from '@videojs/react/ui/audio-track-radio-group';
 ```
 
 ## Anatomy
@@ -17,21 +17,30 @@ import { AudioTrackRadioGroup } from '@videojs/react';
 tsx
 
 ```
-<AudioTrackRadioGroup
-  renderItem={(props, item) => (
-    <Menu.RadioItem {...props}>
-      {item.label}
-      <Menu.ItemIndicator checked={item.checked} />
-    </Menu.RadioItem>
-  )}
-/>
+<AudioTrackRadioGroup.Root>
+  <Menu.Trigger>
+    <AudioTrackRadioGroup.Value />
+  </Menu.Trigger>
+  <Menu.Content>
+    <AudioTrackRadioGroup.Options
+      renderItem={(props, item) => (
+        <Menu.RadioItem {...props}>
+          {item.label}
+          <Menu.ItemIndicator checked={item.checked} />
+        </Menu.RadioItem>
+      )}
+    />
+  </Menu.Content>
+</AudioTrackRadioGroup.Root>
 ```
 
 ## Behavior
 
 The group is available when the configured media exposes more than one audio track. Labels use the track label, then language, then kind. Pass `formatTrack` to customize the visible labels.
 
-`AudioTrackRadioGroup` uses [`useAudioTrackOptions`](./use-audio-track-options.md) to own selection and generate each item. Its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label` and current `checked` value. It returns `null` when the [audio track feature](./feature-audio-track.md) is not configured.
+`AudioTrackRadioGroup.Root` uses [`useAudioTrackOptions`](./use-audio-track-options.md) to own selection and renders no element. Wrap the menu’s `Menu.Trigger` and `Menu.Content` in it so the trigger inherits the group’s disabled and hidden state and exposes `data-availability`. `AudioTrackRadioGroup.Options` renders the items: its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label` and current `checked` value. `AudioTrackRadioGroup.Value` displays the selected label, typically inside the trigger. `Options` and `Value` render `null` when the [audio track feature](./feature-audio-track.md) is not configured.
+
+The `AudioTrackRadioGroup` export from the `@videojs/react` root is a compatibility component that composes `Root` and `Options` behind the former single-component props. Prefer the parts for new code.
 
 ## Styling
 
@@ -71,7 +80,7 @@ Unavailable groups receive the native `hidden` attribute.
 
 The group uses the menu radio group pattern.
 
-The component receives an accessible label from the `label` prop or defaults to `Audio`. Override it with `aria-label` or `aria-labelledby`.
+`AudioTrackRadioGroup.Options` receives its accessible label from the `label` prop on `AudioTrackRadioGroup.Root` or defaults to `Audio`. Override it with `aria-label` or `aria-labelledby` on `AudioTrackRadioGroup.Options`.
 
 ## Examples
 
@@ -84,8 +93,9 @@ App.tsx
 App.css
 
 ```
-import { AudioTrackRadioGroup, Container, createPlayer, Menu } from '@videojs/react';
+import { Container, createPlayer, Menu } from '@videojs/react';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { AudioTrackRadioGroup } from '@videojs/react/ui/audio-track-radio-group';
 import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
@@ -95,24 +105,27 @@ const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.
 function AudioMenu(): ReactNode {
   return (
     <Menu.Root side="top" align="end">
-      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
-        Audio
-      </Menu.Trigger>
-      <Menu.Popup className="menu">
-        <Menu.Content>
-          <AudioTrackRadioGroup
-            className="menu-group"
-            renderItem={(props, item) => (
-              <Menu.RadioItem {...props} className="menu-item">
-                {item.label}
-                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                  ✓
-                </Menu.ItemIndicator>
-              </Menu.RadioItem>
-            )}
-          />
-        </Menu.Content>
-      </Menu.Popup>
+      <AudioTrackRadioGroup.Root>
+        <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
+          Audio
+          <AudioTrackRadioGroup.Value className="menu-hint" />
+        </Menu.Trigger>
+        <Menu.Popup className="menu">
+          <Menu.Content>
+            <AudioTrackRadioGroup.Options
+              className="menu-group"
+              renderItem={(props, item) => (
+                <Menu.RadioItem {...props} className="menu-item">
+                  {item.label}
+                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                    ✓
+                  </Menu.ItemIndicator>
+                </Menu.RadioItem>
+              )}
+            />
+          </Menu.Content>
+        </Menu.Popup>
+      </AudioTrackRadioGroup.Root>
     </Menu.Root>
   );
 }
@@ -155,6 +168,15 @@ export default function BasicUsage() {
   backdrop-filter: blur(10px);
 }
 
+.menu-hint {
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.menu-hint:empty {
+  display: none;
+}
+
 .menu {
   --media-menu-side-offset: 8px;
   box-sizing: border-box;
@@ -212,6 +234,238 @@ export default function BasicUsage() {
 
 ### 
 
+Root
+
+Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether audio track selection is disabled.
+
+`formatTrack`
+
+`string) | function`
+
+`formatTrackLabel`
+
+▸
+
+Description
+
+Custom formatter for visible track labels.
+
+Type
+
+`((track: MediaAudioTrack) => Text | string)`
+
+`label`
+
+`object`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`{ key: string; text: string } | string | ((state: AudioTrackRadioGroupState) => Text | string)`
+
+#### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`label`
+
+`{ key: string; text: string } | string`
+
+`value`
+
+`string`
+
+▸
+
+Description
+
+Current radio-group value.
+
+`options`
+
+`readonly Option[]`
+
+▸
+
+Description
+
+Ordered options displayed by platform adapters.
+
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the entire option group is disabled.
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the option group is hidden because no meaningful selection is available.
+
+`availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Whether the media exposes a meaningful selection.
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-audio-track`
+
+`string`
+
+▸
+
+Description
+
+Current audio track value.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when audio track selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when audio track selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates audio track availability (`available` or `unavailable`).
+
+### 
+
+Options
+
+Renders menu radio items for the player's available audio tracks.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: AudioTrackRadioGroupCore.State) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: AudioTrackRadioGroupCore.State) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`renderItem`
+
+`((props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement)`
+
+`—`
+
+▸
+
+Description
+
+Render one consumer-owned menu radio item for every audio track.
+
+`style`
+
+`CSSProperties | ((state: AudioTrackRadioGroupCore.State) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
+### 
+
 Value
 
 Displays the selected audio-track label.