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

package/docs/reference/{status-announcer.md → components/status-announcer.md}

@@ -4,37 +4,26 @@ Announce player state changes through a persistent status live region
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/status-announcer';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-status-announcer></media-status-announcer>
 ```
 
 ## Behavior
 
-`StatusAnnouncer` watches player-store snapshots, so it reports changes made by buttons, sliders, custom controls, or direct player actions. It does not depend on [`Hotkey`](./hotkey.md) or [`Gesture`](./gesture.md) events.
+`<media-status-announcer>` watches player-store snapshots, so it reports changes made by buttons, sliders, custom controls, or direct player actions. It does not depend on [`<media-hotkey>`](./hotkey.md) or [`<media-gesture>`](./gesture.md) events.
 
 The first snapshot establishes a baseline without announcing it. Later changes are handled in two groups:
 
-Timing
-
-Changes
-
-Immediate
-
-Playing or paused, captions on or off, fullscreen entered or exited, picture-in-picture entered or exited, and playback rate
-
-Debounced by 200 milliseconds
-
-The final volume or mute value and the final time after a completed seek
+| Timing | Changes |
+| --- | --- |
+| Immediate | Playing or paused, captions on or off, fullscreen entered or exited, picture-in-picture entered or exited, and playback rate |
+| Debounced by 200 milliseconds | The final volume or mute value and the final time after a completed seek |
 
 Regular playback-time updates are ignored. A seek announcement is queued only after `seeking` changes from `true` to `false` at a different time. When several immediate states change in one snapshot, their translated labels are combined into one announcement.
 
@@ -46,11 +35,9 @@ The custom element receives labels from the nearest player i18n context.
 
 ## Styling
 
-`StatusAnnouncer` is not visually hidden by the primitive. Apply a visually-hidden class while keeping it in the accessibility tree. Do not use `display: none`, `visibility: hidden`, or the `hidden` attribute.
-
-css
+`<media-status-announcer>` is not visually hidden by the primitive. Apply a visually-hidden class while keeping it in the accessibility tree. Do not use `display: none`, `visibility: hidden`, or the `hidden` attribute.
 
-```
+```css
 media-status-announcer {
   position: absolute;
   width: 1px;
@@ -67,29 +54,23 @@ media-status-announcer {
 
 ## Accessibility
 
-The `status` role provides implicit polite live-region behavior, so the component does not add an explicit `aria-live` attribute. Keep one announcer inside each player `Container` whose state changes should be reported.
+The `status` role provides implicit polite live-region behavior, so the component does not add an explicit `aria-live` attribute.
+
+Keep one announcer inside each player `<media-container>` whose state changes should be reported.
 
-Debounced volume and completed-seek announcements are suppressed while an element with `role="slider"` inside the same Container has focus. The focused slider provides its own value feedback, and suppressing the separate status message avoids duplicate announcements. A focused slider outside that Container does not suppress it.
+Debounced volume and completed-seek announcements are suppressed while an element with `role="slider"` inside the same container has focus. The focused slider provides its own value feedback, and suppressing the separate status message avoids duplicate announcements. A focused slider outside that container does not suppress it.
 
-Use [`SeekIndicator`](./seek-indicator.md) for temporary visual seek feedback. Keep that visual value out of a live region; `StatusAnnouncer` owns the accessible announcement.
+Use [`<media-seek-indicator>`](./seek-indicator.md) for temporary visual seek feedback. Keep that visual value out of a live region; `<media-status-announcer>` owns the accessible announcement.
 
 ## Examples
 
 ### Basic Usage
 
-Use the playback button for an immediate announcement and the mute button for a debounced announcement. The sliders provide their own focused value feedback, so `StatusAnnouncer` suppresses its duplicate volume and completed-seek message.
-
-These controls announce status changes to screen readers.
-
-Play Pause Replay Unmute Mute
-
-index.html
-
-index.css
+Use the playback button for an immediate announcement and the mute button for a debounced announcement. The sliders provide their own focused value feedback, so `<media-status-announcer>` suppresses its duplicate volume and completed-seek message.
 
-index.ts
+**index.html**
 
-```
+```html
 <video-player>
   <media-container class="html-status-announcer-basic">
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
@@ -122,7 +103,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-status-announcer-basic {
   position: relative;
 }
@@ -251,12 +235,20 @@ index.ts
   clip-path: inset(50%);
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/mute-button';
 import '@videojs/html/ui/play-button';
 import '@videojs/html/ui/status-announcer';
 import '@videojs/html/ui/time-slider';
+import '@videojs/html/ui/slider-track';
+import '@videojs/html/ui/slider-buffer';
+import '@videojs/html/ui/slider-fill';
+import '@videojs/html/ui/slider-thumb';
 import '@videojs/html/ui/volume-slider';
 ```
 
@@ -264,92 +256,15 @@ import '@videojs/html/ui/volume-slider';
 
 ### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`closeDelay`
-
-`number`
-
-`—`
-
-▸
-
-Attribute
-
-`close-delay`
-
-Description
-
-Delay in milliseconds before the current announcement label is cleared.
-
-`labels`
-
-`Partial<StatusAnnouncerLabels>`
-
-`—`
-
-▸
-
-Attribute
-
-`labels`
-
-Description
-
-Overrides for the translated announcement labels.
-
-`shouldAnnounce`
-
-`function`
-
-`—`
-
-▸
-
-Attribute
-
-`should-announce`
-
-Description
-
-Whether debounced seek and volume changes should be announced.
-
-Type
-
-`(() => boolean)`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `closeDelay` (attribute `close-delay`) | `number` | — | Delay in milliseconds before the current announcement label is cleared. |
 
 ### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`generation`
-
-`number`
-
-▸
-
-Description
-
-Increments for each announcement so repeated labels replace the live-region content.
-
-`label`
-
-`string | null`
-
-▸
-
-Description
-
-Current announcement text, or `null` when the live region is empty.
+| Property | Type | Description |
+| --- | --- | --- |
+| `generation` | `number` | Increments for each announcement so repeated labels replace the live-region content. |
+| `label` | `string \| null` | Current announcement text, or `null` when the live region is empty. |

package/docs/reference/{status-indicator.md → components/status-indicator.md}

@@ -4,17 +4,14 @@ Display temporary visual feedback for keyboard and gesture actions
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/status-indicator';
+import '@videojs/html/ui/status-indicator-value';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-status-indicator>
   <media-status-indicator-value></media-status-indicator-value>
 </media-status-indicator>
@@ -22,51 +19,18 @@ html
 
 ## Behavior
 
-`StatusIndicator` displays feedback for actions emitted by a [`Hotkey`](./hotkey.md) or [`Gesture`](./gesture.md) in the same player `Container`. It does not react to buttons, direct player-store changes, or media state changes on their own.
+`<media-status-indicator>` displays feedback for actions emitted by a [`<media-hotkey>`](./hotkey.md) or [`<media-gesture>`](./gesture.md) in the same player `<media-container>`. It does not react to buttons, direct player-store changes, or media state changes on their own.
 
 The input event arrives before its action is resolved. The indicator uses the media snapshot from that moment to predict the next visual status:
 
-Action
-
-`data-status`
-
-Value
-
-`togglePaused`
-
-`"play"` or `"pause"`
-
-Translated playing or paused label
-
-`toggleMuted`
-
-`"volume-off"`, `"volume-low"`, or `"volume-high"`
-
-Predicted volume percentage
-
-`volumeStep`
-
-`"volume-off"`, `"volume-low"`, or `"volume-high"`
-
-Predicted volume percentage
-
-`toggleSubtitles`
-
-`"captions-on"` or `"captions-off"`
-
-Translated captions label
-
-`toggleFullscreen`
-
-`"fullscreen"` or `"exit-fullscreen"`
-
-Translated fullscreen label
-
-`togglePictureInPicture`
-
-`"pip"` or `"exit-pip"`
-
-Translated picture-in-picture label
+| Action | `data-status` | Value |
+| --- | --- | --- |
+| `togglePaused` | `"play"` or `"pause"` | Translated playing or paused label |
+| `toggleMuted` | `"volume-off"`, `"volume-low"`, or `"volume-high"` | Predicted volume percentage |
+| `volumeStep` | `"volume-off"`, `"volume-low"`, or `"volume-high"` | Predicted volume percentage |
+| `toggleSubtitles` | `"captions-on"` or `"captions-off"` | Translated captions label |
+| `toggleFullscreen` | `"fullscreen"` or `"exit-fullscreen"` | Translated fullscreen label |
+| `togglePictureInPicture` | `"pip"` or `"exit-pip"` | Translated picture-in-picture label |
 
 `toggleSubtitles` is ignored when the player reports that no captions or subtitles are available. Seek actions, `toggleControls`, playback-rate actions, and custom actions do not open this indicator.
 
@@ -74,53 +38,28 @@ Use `actions` to allow only some of the supported actions. Omitting it allows al
 
 Set the `actions` attribute to action names separated by commas, whitespace, or both:
 
-html
-
-```
+```html
 <media-status-indicator actions="togglePaused, toggleMuted">
   <media-status-indicator-value></media-status-indicator-value>
 </media-status-indicator>
 ```
 
-The indicator closes after `closeDelay`, which defaults to 800 milliseconds. A repeated handled action updates the current value and restarts that close timer without replaying the entry transition. React stops rendering the Root after its close transition. The HTML custom element remains in the document with `hidden` until the next handled action.
-
-## Styling
-
-Attribute
-
-Values
-
-Description
-
-`data-open`
-
-Present / absent
-
-Present while the indicator is open
-
-`data-status`
-
-`"play"`, `"pause"`, `"volume-off"`, `"volume-low"`, `"volume-high"`, `"captions-on"`, `"captions-off"`, `"fullscreen"`, `"exit-fullscreen"`, `"pip"`, or `"exit-pip"`
+The indicator closes after `closeDelay`, which defaults to 800 milliseconds. A repeated handled action updates the current value and restarts that close timer without replaying the entry transition.
 
-Predicted status for the handled action
+The element remains in the document with `hidden` until the next handled action.
 
-`data-starting-style`
-
-Present / absent
-
-Present during the open transition
-
-`data-ending-style`
-
-Present / absent
+## Styling
 
-Present during the close transition
+| Attribute | Values | Description |
+| --- | --- | --- |
+| `data-open` | Present / absent | Present while the indicator is open |
+| `data-status` | `"play"`, `"pause"`, `"volume-off"`, `"volume-low"`, `"volume-high"`, `"captions-on"`, `"captions-off"`, `"fullscreen"`, `"exit-fullscreen"`, `"pip"`, or `"exit-pip"` | Predicted status for the handled action |
+| `data-starting-style` | Present / absent | Present during the open transition |
+| `data-ending-style` | Present / absent | Present during the close transition |
 
 Use `data-status` to select an icon or other visual treatment, and use the transition attributes for entry and exit styles.
 
-css
-
-```
+```css
 media-status-indicator[data-status="play"] {
   color: green;
 }
@@ -133,7 +72,7 @@ media-status-indicator[data-ending-style] {
 
 ## Accessibility
 
-`StatusIndicator` is visual feedback and does not create a live region. Keep every action available through keyboard-operable controls, and pair the player with [`StatusAnnouncer`](./status-announcer.md) when state changes should be announced to screen readers. Do not make `StatusIndicator.Value` a live region.
+`<media-status-indicator>` is visual feedback and does not create a live region. Keep every action available through keyboard-operable controls, and pair the player with [`<media-status-announcer>`](./status-announcer.md) when state changes should be announced to screen readers. Do not make `<media-status-indicator-value>` a live region.
 
 ## Examples
 
@@ -141,15 +80,9 @@ media-status-indicator[data-ending-style] {
 
 Focus the player, then press K to play or pause, M to mute, F for fullscreen, C for captions, or I for picture-in-picture.
 
-Focus the player · K: play/pause · M: mute · F: fullscreen · C: captions · I: picture-in-picture
-
-index.html
-
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <video-player>
   <media-container class="html-status-indicator-basic" tabindex="0">
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop>
@@ -173,7 +106,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-status-indicator-basic {
   position: relative;
 }
@@ -282,206 +218,49 @@ index.ts
   font-variant-numeric: tabular-nums;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/hotkey';
 import '@videojs/html/ui/status-indicator';
+import '@videojs/html/ui/status-indicator-value';
 ```
 
 ## API Reference
 
-### 
-
-media-status-indicator
+### media-status-indicator
 
 #### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`actions`
-
-`readonly InputAction[]`
-
-`—`
-
-▸
-
-Attribute
-
-`actions`
-
-Description
-
-Input actions allowed to open the indicator. All supported actions are allowed when omitted.
-
-`closeDelay`
-
-`number`
-
-`—`
-
-▸
-
-Attribute
-
-`close-delay`
-
-Description
-
-Delay in milliseconds before the indicator closes.
-
-`labels`
-
-`Partial<InputIndicatorLabels>`
-
-`—`
-
-▸
-
-Attribute
-
-`labels`
-
-Description
-
-Internal translated label overrides supplied by framework adapters.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `actions` | `readonly InputAction[]` | — | Input actions allowed to open the indicator. All supported actions are allowed when omitted. |
+| `closeDelay` (attribute `close-delay`) | `number` | — | Delay in milliseconds before the indicator closes. |
 
 #### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`transitionStarting`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the open transition is in progress.
-
-`transitionEnding`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the close transition is in progress.
-
-`open`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the indicator is open.
-
-`generation`
-
-`number`
-
-▸
-
-Description
-
-Increments each time a supported input action updates the indicator.
-
-`status`
-
-`ReturnType<typeof deriveStatus> exten...`
-
-▸
-
-Description
-
-Predicted visual status for the handled input action.
-
-Type
-
-`ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status | null : never : never`
-
-`label`
-
-`string | null`
-
-▸
-
-Description
-
-Translated label for the predicted status.
-
-`value`
-
-`string | null`
-
-▸
-
-Description
-
-Predicted volume percentage for volume actions, otherwise `null`.
+| Property | Type | Description |
+| --- | --- | --- |
+| `transitionStarting` | `boolean` | Whether the open transition is in progress. |
+| `transitionEnding` | `boolean` | Whether the close transition is in progress. |
+| `open` | `boolean` | Whether the indicator is open. |
+| `generation` | `number` | Increments each time a supported input action updates the indicator. |
+| `status` | `ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status \| null : never : never` | Predicted visual status for the handled input action. |
+| `label` | `string \| null` | Translated label for the predicted status. |
+| `value` | `string \| null` | Predicted volume percentage for volume actions, otherwise `null`. |
 
 #### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-open`
-
-▸
-
-Description
-
-Present while the indicator is open.
-
-`data-status`
-
-`ReturnType<typeof deriveStatus> exten...`
-
-▸
-
-Description
-
-Predicted visual status for the handled input action.
-
-Type
-
-`ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status | null : never : never`
-
-`data-starting-style`
-
-▸
-
-Description
-
-Present during the open transition.
-
-`data-ending-style`
-
-▸
-
-Description
-
-Present during the close transition.
-
-### 
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-open` | — | Present while the indicator is open. |
+| `data-status` | `ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status \| null : never : never` | Predicted visual status for the handled input action. |
+| `data-starting-style` | — | Present during the open transition. |
+| `data-ending-style` | — | Present during the close transition. |
 
-media-status-indicator-value
+### media-status-indicator-value