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

package/docs/reference/mux-data.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/extensions/mux-data.js"></script>
 ```
 
 ## Anatomy

package/docs/reference/mux-video.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/native-hls-video.md

@@ -17,7 +17,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/native-hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/native-hls-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/playback-rate-radio-group.md

@@ -196,7 +196,185 @@ import '@videojs/html/ui/playback-rate-radio-group';
 
 media-playback-rate-radio-group
 
-Displays the selected playback-rate label.
+Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Attribute
+
+`disabled`
+
+Description
+
+Whether playback rate selection is disabled.
+
+`formatRate`
+
+`function`
+
+`formatPlaybackRate`
+
+▸
+
+Attribute
+
+`format-rate`
+
+Description
+
+Custom formatter for visible playback rate labels.
+
+Type
+
+`((rate: number) => string)`
+
+`label`
+
+`object`
+
+`''`
+
+▸
+
+Attribute
+
+`label`
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`{ key: string; text: string } | string | ((state: PlaybackRateRadioGroupState) => Text | string)`
+
+#### State
+
+State is reflected as data attributes for CSS styling.
+
+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.
+
+`rate`
+
+`number`
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-rate`
+
+`number`
+
+▸
+
+Description
+
+Current playback rate.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when playback rate selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when playback rate selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates playback rate availability (`available` or `unavailable`).
 
 #### Events
 

package/docs/reference/poster.md

@@ -24,6 +24,8 @@ html
 
 The poster shows before playback starts. Once the user plays or seeks, it hides; pausing does not bring it back. Loading a new source shows it again.
 
+The `<img>` child is optional. Leave it out and `<media-poster>` draws one of its own in its shadow DOM.
+
 You can set the poster URL on the player. This is useful when you want to change the poster from inside a skin, or keep all your media metadata in one place:
 
 html
@@ -36,7 +38,7 @@ html
 
 The component fills in a source only when you leave one out. `srcset`, `sizes`, `loading`, `<picture>`, and framework image components all stay available.
 
-`<media-poster>` renders no image of its own. It fills in the `src` of the image you put inside it:
+`<media-poster>` draws a fallback image in its shadow DOM and fills in its `src`. Put an `<img>` inside it and the element uses yours instead, filling in its `src` the same way:
 
 html
 
@@ -111,11 +113,12 @@ media-poster:not([data-visible]) {
 }
 ```
 
-The image is an ordinary child, so style it as a descendant:
+The image the element draws is exposed as a part. An image you supply is an ordinary child, so style it as a descendant:
 
 css
 
 ```
+media-poster::part(image),
 media-poster img {
   object-fit: cover;
 }
@@ -231,29 +234,15 @@ import '@videojs/html/ui/poster';
 
 ## API Reference
 
-### Props
-
-Prop
-
-Type
-
-Default
+### 
 
-Details
+media-poster
 
-`src`
+Manages poster visibility and image loading state.
 
-`string`
-
-`—`
-
-▸
-
-Attribute
-
-`src`
+Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
 
-### State
+#### State
 
 State is reflected as data attributes for CSS styling.
 
@@ -313,7 +302,7 @@ Description
 
 Whether the poster image failed.
 
-### Data attributes
+#### Data attributes
 
 Attribute
 

package/docs/reference/quality-radio-group.md

@@ -223,7 +223,181 @@ import '@videojs/html/ui/quality-radio-group';
 
 media-quality-radio-group
 
-Displays the selected quality label.
+Owns quality option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Attribute
+
+`disabled`
+
+Description
+
+Whether quality selection is disabled.
+
+`formatRendition`
+
+`string) | function`
+
+`formatRenditionLabel`
+
+▸
+
+Attribute
+
+`format-rendition`
+
+Description
+
+Custom formatter for visible rendition labels.
+
+Type
+
+`((rendition: MediaVideoRendition) => Text | string)`
+
+`label`
+
+`object`
+
+`''`
+
+▸
+
+Attribute
+
+`label`
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`{ key: string; text: string } | string | ((state: QualityRadioGroupState) => Text | string)`
+
+#### State
+
+State is reflected as data attributes for CSS styling.
+
+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-quality`
+
+`string`
+
+▸
+
+Description
+
+Current quality value.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when quality selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when quality selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates quality availability (`available` or `unavailable`).
 
 #### Events
 

package/docs/reference/shaka-video.md

@@ -25,7 +25,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/shaka-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/shaka-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/slider.md

@@ -21,6 +21,9 @@ html
   </media-slider-track>
   <media-slider-thumb></media-slider-thumb>
   <media-slider-preview>
+    <media-slider-thumbnail>
+      <img alt="" decoding="async" />
+    </media-slider-thumbnail>
     <media-slider-value type="pointer"></media-slider-value>
   </media-slider-preview>
 </media-slider>
@@ -30,6 +33,8 @@ html
 
 The base Slider provides a generic range input. It manages value, pointer tracking, and drag interactions. Domain-specific sliders like [TimeSlider](./time-slider.md) and [VolumeSlider](./volume-slider.md) extend this with media-specific bindings. TimeSlider also provides parts for rendering chapter ranges and the chapter at the current interaction position.
 
+`media-slider-thumbnail` supplies the pointer value and draws the image in its shadow DOM. Supply an `<img>` child to replace it: the element controls `src` and `srcset` on your image, and other children can provide loading indicators or overlays.
+
 The slider supports vertical orientation via the `orientation` prop (defaults to `"horizontal"`).
 
 ## Styling
@@ -759,10 +764,6 @@ Present when the slider is non-interactive.
 
 ### 
 
-media-slider-thumbnail
-
-### 
-
 media-slider-track
 
 Contains the slider's visual track and interactive hit zone.
@@ -847,4 +848,12 @@ Current axis of slider movement (`horizontal` or `vertical`).
 
 Description
 
-Present when the slider is non-interactive.
+Present when the slider is non-interactive.
+
+### 
+
+media-slider-thumbnail
+
+Resolves, sizes, and clips the thumbnail at the slider pointer.
+
+Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators, overlays, or temporary presentation layers.

package/docs/reference/spotify-audio.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/spotify-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/spotify-audio.js"></script>
 ```
 
 ## Load a source

package/docs/reference/thumbnail.md

@@ -41,12 +41,14 @@ import '@videojs/html/ui/thumbnail';
 html
 
 ```
-<media-thumbnail time="12"></media-thumbnail>
+<media-thumbnail>
+  <img alt="" decoding="async" />
+</media-thumbnail>
 ```
 
 ## Behavior
 
-`Thumbnail` resolves an image for the current `time`.
+The thumbnail root resolves an image for the current `time`, owns `src` and `srcset` on it, and reports its loading lifecycle. In React, render that image with `Thumbnail.Image`. In HTML, the `<img>` child is optional: leave it out and `<media-thumbnail>` draws an image of its own in its shadow DOM; supply one to replace it and compose overlays or loading indicators beside it.
 
 Supported source formats:
 
@@ -97,9 +99,35 @@ media-thumbnail[data-error] {
 }
 ```
 
+The image the element draws is exposed as a part. An `<img>` you supply is an ordinary child, so style it as a descendant:
+
+css
+
+```
+media-thumbnail::part(image),
+media-thumbnail > img {
+  border-radius: 4px;
+}
+```
+
+The element clips to the selected tile while the image inside spans the whole sprite sheet, so anything after the image in flow lands past the clip edge. Position the element and lay overlays over it:
+
+css
+
+```
+media-thumbnail {
+  position: relative;
+}
+
+media-thumbnail > .overlay {
+  position: absolute;
+  inset: 0;
+}
+```
+
 ## Accessibility
 
-`Thumbnail` is decorative by default (`aria-hidden="true"`). It is intended for visual preview UX (for example, timeline hover previews) rather than primary accessible content.
+`Thumbnail.Root` is decorative by default (`aria-hidden="true"`). It is intended for visual preview UX (for example, timeline hover previews) rather than primary accessible content.
 
 ## Examples
 
@@ -253,59 +281,27 @@ if (thumbnail) {
 
 ## API Reference
 
-### Props
-
-Prop
-
-Type
-
-Default
-
-Details
+### 
 
-`crossOrigin`
+media-thumbnail
 
-`'anonymous' | 'use-credentials' | '' ...`
+Resolves, sizes, and clips a thumbnail for a point in time.
 
-`—`
+Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview. Render `Thumbnail.Image` inside it for the image the root controls and measures.
 
-▸
+#### Props
 
-Attribute
-
-`cross-origin`
-
-Description
-
-CORS setting forwarded to the inner `<img>`.
-
-Left unset, this follows the media element: a cross-origin thumbnail `<track>` only loads when the media is CORS-enabled, so the sprite sheets its cues point at are fetched with that same mode. Pass `null` to opt out and fetch them without CORS. Thumbnails supplied directly never inherit, since they need not be related to the media element at all.
-
-`''` is a value like any other, read as Anonymous by the CORS-settings attribute rules — it does not opt out.
+Prop
 
 Type
 
-`'anonymous' | 'use-credentials' | '' | null`
-
-`fetchPriority`
-
-`'high' | 'low' | 'auto'`
-
-`—`
-
-▸
-
-Attribute
-
-`fetch-priority`
-
-Description
+Default
 
-Image fetch priority hint forwarded to the inner `<img>`.
+Details
 
-`loading`
+`thumbnails`
 
-`'eager' | 'lazy'`
+`ThumbnailImage[]`
 
 `—`
 
@@ -313,11 +309,11 @@ Image fetch priority hint forwarded to the inner `<img>`.
 
 Attribute
 
-`loading`
+`thumbnails`
 
 Description
 
-Image loading strategy forwarded to the inner `<img>`.
+Pre-parsed thumbnail images — bypasses the automatic `<track>` detection.
 
 `time`
 
@@ -335,7 +331,7 @@ Description
 
 Time in seconds to display the thumbnail for.
 
-### State
+#### State
 
 State is reflected as data attributes for CSS styling.
 
@@ -375,7 +371,7 @@ Description
 
 Whether the component is hidden because no thumbnail is available and it is not loading.
 
-### Data attributes
+#### Data attributes
 
 Attribute
 

package/docs/reference/tiktok-video.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/tiktok-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/tiktok-video.js"></script>
 ```
 
 ## Load a source