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

package/docs/reference/{error-dialog.md → components/error-dialog.md}

@@ -4,17 +4,18 @@ An alert dialog that presents and dismisses playback errors
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/error-dialog';
+import '@videojs/html/ui/dialog-backdrop';
+import '@videojs/html/ui/dialog-popup';
+import '@videojs/html/ui/dialog-title';
+import '@videojs/html/ui/dialog-description';
+import '@videojs/html/ui/dialog-close';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-error-dialog>
   <media-dialog-backdrop></media-dialog-backdrop>
   <media-dialog-popup>
@@ -27,7 +28,7 @@ html
 
 ## Behavior
 
-`ErrorDialog` is a specialized root driven by the player’s [error feature](./feature-error.md). It uses alert semantics and reuses the backdrop, popup, title, description, and close parts from [`Dialog`](./dialog.md); it is not nested inside `AlertDialog`. It opens when the attached media reports an error and stays hidden otherwise. Closing it dismisses the current error in the player store.
+`<media-error-dialog>` is a specialized root driven by the player’s [error feature](../api/feature-error.md). It uses alert semantics and reuses the backdrop, popup, title, description, and close parts from [`<media-dialog>`](./dialog.md); it is not nested inside `<media-alert-dialog>`. It opens when the attached media reports an error and stays hidden otherwise. Closing it dismisses the current error in the player store.
 
 The title, description, and close label use localized default text. Provide children to any of those parts to replace its default content. Known media error codes use the matching translated message, while custom error messages are shown as written.
 
@@ -37,9 +38,7 @@ The included player skins already render an error dialog. Compose this component
 
 Use `data-open`, `data-starting-style`, and `data-ending-style` to style visibility and transitions.
 
-css
-
-```
+```css
 media-dialog-backdrop:not([data-open]),
 media-dialog-popup:not([data-open]) {
   display: none;
@@ -67,15 +66,9 @@ The example replaces the video source with invalid local data so the media eleme
 
 ### Basic usage
 
-Trigger a playback error
+**index.html**
 
-index.html
-
-index.css
-
-index.ts
-
-```
+```html
 <video-player class="html-error-dialog-basic">
   <media-container class="html-error-dialog-basic__container">
     <video
@@ -98,7 +91,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-error-dialog-basic__container {
   position: relative;
   display: block;
@@ -177,30 +173,47 @@ index.ts
   justify-self: center;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/error-dialog';
+import '@videojs/html/ui/dialog-backdrop';
+import '@videojs/html/ui/dialog-popup';
+import '@videojs/html/ui/dialog-title';
+import '@videojs/html/ui/dialog-description';
+import '@videojs/html/ui/dialog-close';
 
 const brokenSource = 'data:video/mp4;base64,AAAA';
+const initializedDemos = new WeakSet<HTMLElement>();
 
-document.querySelectorAll<HTMLElement>('.html-error-dialog-basic').forEach((demo) => {
-  const video = demo.querySelector('video');
-  const trigger = demo.querySelector<HTMLButtonElement>('.html-error-dialog-basic__trigger');
+function initializeDemos(): void {
+  document.querySelectorAll<HTMLElement>('.html-error-dialog-basic').forEach((demo) => {
+    if (initializedDemos.has(demo)) return;
 
-  trigger?.addEventListener('click', () => {
-    if (!video) return;
+    initializedDemos.add(demo);
 
-    video.src = brokenSource;
-    video.load();
+    const video = demo.querySelector('video');
+    const trigger = demo.querySelector<HTMLButtonElement>('.html-error-dialog-basic__trigger');
+
+    trigger?.addEventListener('click', () => {
+      if (!video) return;
+
+      video.src = brokenSource;
+      video.load();
+    });
   });
-});
+}
+
+initializeDemos();
+document.addEventListener('astro:page-load', initializeDemos);
 ```
 
 ## API Reference
 
-### 
-
-media-error-dialog
+### media-error-dialog
 
 Opens from player error state and provides it to the shared dialog parts.
 
@@ -208,144 +221,35 @@ Opens from player error state and provides it to the shared dialog parts.
 
 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 dialog is currently open.
-
-`status`
-
-`'idle' | 'starting' | 'ending'`
-
-▸
-
-Description
+| 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 dialog is currently open. |
+| `status` | `'idle' \| 'starting' \| 'ending'` | Current phase of the transition lifecycle. |
+| `titleId` | `string \| undefined` | Element ID of the dialog title, used for `aria-labelledby`. |
+| `descriptionId` | `string \| undefined` | Element ID of the dialog description, used for `aria-describedby`. |
 
-Current phase of the transition lifecycle.
+### media-dialog-backdrop
 
-`titleId`
-
-`string | undefined`
-
-▸
-
-Description
-
-Element ID of the dialog title, used for `aria-labelledby`.
-
-`descriptionId`
-
-`string | undefined`
-
-▸
-
-Description
-
-Element ID of the dialog description, used for `aria-describedby`.
-
-### 
-
-media-dialog-backdrop
-
-Presentational layer behind a dialog while it is rendered, including its exit transition.
+Presentational backdrop that reflects its owning dialog's state.
 
 #### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-open`
-
-▸
-
-Description
-
-Present when the dialog is open.
-
-`data-starting-style`
-
-▸
-
-Description
+| Attribute | Description |
+| --- | --- |
+| `data-open` | Present when the dialog is open. |
+| `data-starting-style` | Present during the open transition. |
+| `data-ending-style` | Present during the close transition. |
 
-Present during the open transition.
+### media-dialog-popup
 
-`data-ending-style`
-
-▸
-
-Description
-
-Present during the close transition.
-
-### 
-
-media-dialog-popup
-
-Renders the modal dialog while it is open.
+Semantic popup that owns focus management and dialog transition completion.
 
 #### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-open`
-
-▸
-
-Description
-
-Present when the dialog is open.
-
-`data-starting-style`
-
-▸
-
-Description
-
-Present during the open transition.
-
-`data-ending-style`
-
-▸
-
-Description
-
-Present during the close transition.
+| Attribute | Description |
+| --- | --- |
+| `data-open` | Present when the dialog is open. |
+| `data-starting-style` | Present during the open transition. |
+| `data-ending-style` | Present during the close transition. |

package/docs/reference/{fullscreen-button.md → components/fullscreen-button.md}

@@ -4,17 +4,13 @@ Accessible fullscreen toggle button with keyboard support and state reflection
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/fullscreen-button';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-fullscreen-button></media-fullscreen-button>
 ```
 
@@ -22,16 +18,14 @@ html
 
 Toggles fullscreen mode. The button derives two state hooks from `availability`:
 
-*   **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
-*   **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — applies the native HTML `hidden` attribute on the custom element; the React component returns `null`.
+- **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
+- **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — applies the native HTML `hidden` attribute on the custom element.
 
 ## Styling
 
 You can style the button based on fullscreen state:
 
-css
-
-```
+```css
 /* In fullscreen */
 media-fullscreen-button[data-fullscreen] {
   background: red;
@@ -44,7 +38,9 @@ media-fullscreen-button[data-disabled] {
 }
 ```
 
-The button remains hidden until fullscreen is available. The HTML element receives the native `hidden` attribute, and the React component returns `null`. No extra CSS is required.
+The button remains hidden until fullscreen is available.
+
+The element receives the native `hidden` attribute. No extra CSS is required.
 
 ## Accessibility
 
@@ -54,15 +50,9 @@ Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or
 
 ### Basic Usage
 
-Exit Fullscreen Fullscreen
-
-index.html
-
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <video-player class="video-player">
   <media-container>
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
@@ -73,7 +63,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .video-player media-container {
   position: relative;
   display: block;
@@ -110,7 +103,10 @@ index.ts
   display: inline;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
 import '@videojs/html/ui/container';
 import '@videojs/html/ui/fullscreen-button';
@@ -120,142 +116,28 @@ import '@videojs/html/ui/fullscreen-button';
 
 ### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`disabled`
-
-`boolean`
-
-`false`
-
-▸
-
-Attribute
-
-`disabled`
-
-Description
-
-Whether the button is disabled.
-
-`label`
-
-`object`
-
-`''`
-
-▸
-
-Attribute
-
-`label`
-
-Description
-
-Custom label for the button.
-
-Type
-
-`{ key: string; text: string } | string | ((state: FullscreenButtonState) => Text | string)`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | `false` | Whether the button is disabled. |
+| `label` | `{ key: string; text: string } \| string \| ((state: FullscreenButtonState) => Text \| string)` | `''` | Custom label for the button. |
 
 ### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`fullscreen`
-
-`boolean`
-
-▸
-
-Description
-
-Whether fullscreen mode is currently active.
-
-`label`
-
-`{ key: string; text: string } | string`
-
-`availability`
-
-`MediaFullscreenState['fullscreenAvailability']`
-
-▸
-
-Description
-
-Whether fullscreen can be requested on this platform.
-
-`disabled`
-
-`boolean`
-
-▸
-
-Description
-
-Non-interactive but still focusable (mirrors `aria-disabled`).
-
-`hidden`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the button is hidden until fullscreen is available.
+| Property | Type | Description |
+| --- | --- | --- |
+| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
+| `label` | `{ key: string; text: string } \| string` | |
+| `availability` | `MediaFeatureAvailability` | Whether fullscreen can be requested on this platform. |
+| `disabled` | `boolean` | Non-interactive but still focusable (mirrors `aria-disabled`). |
+| `hidden` | `boolean` | Whether the button is hidden until fullscreen is available. |
 
 ### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-fullscreen`
-
-▸
-
-Description
-
-Present when fullscreen mode is active.
-
-`data-availability`
-
-`MediaFullscreenState['fullscreenAvailability']`
-
-▸
-
-Description
-
-Indicates fullscreen availability (`available`, `unavailable`, `unsupported`).
-
-`data-disabled`
-
-▸
-
-Description
-
-Present when the button is non-interactive (mirrors `aria-disabled`).
-
-`data-hidden`
-
-▸
-
-Description
-
-Present when the button is hidden because fullscreen is not available.
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-fullscreen` | — | Present when fullscreen mode is active. |
+| `data-availability` | `MediaFeatureAvailability` | Indicates fullscreen availability (`available`, `unavailable`, `unsupported`). |
+| `data-disabled` | — | Present when the button is non-interactive (mirrors `aria-disabled`). |
+| `data-hidden` | — | Present when the button is hidden because fullscreen is not available. |