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

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

@@ -4,17 +4,18 @@ A modal dialog for application content, including players opened from a thumbnai
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/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
 <button commandfor="video-dialog">Open video</button>
 <media-dialog id="video-dialog">
   <media-dialog-backdrop></media-dialog-backdrop>
@@ -28,7 +29,7 @@ html
 
 ## Behavior
 
-`Dialog` provides the modal interaction and accessibility behavior while your application supplies the content and styling. It is the general-purpose replacement for a `ModalDialog` use case such as opening a player from a thumbnail.
+`<media-dialog>` provides the modal interaction and accessibility behavior while your application supplies the content and styling. It is the general-purpose replacement for a `ModalDialog` use case such as opening a player from a thumbnail.
 
 Place a button immediately before `media-dialog`, or connect them explicitly with `commandfor` and an `id`. You can also set the dialog’s `open` property directly. The root provides state without creating a layout box; `media-dialog-backdrop` and `media-dialog-popup` are sibling surfaces. The element dispatches `open-change` when its state changes and `open-change-complete` after the popup transition finishes.
 
@@ -36,31 +37,19 @@ The close part and Escape close the dialog. Other buttons inside the dialog, inc
 
 Your application decides what opening and closing mean for the media. The example starts playback after opening and pauses it as soon as the dialog closes. Handle the promise returned by `play()`, since browsers can reject autoplay when it is not allowed.
 
-Use [`AlertDialog`](./alert-dialog.md) for urgent messages that require acknowledgement. [`ErrorDialog`](./error-dialog.md) is the player-error specialization. Both use the same dialog behavior.
+Use [`<media-alert-dialog>`](./alert-dialog.md) for urgent messages that require acknowledgement. [`<media-error-dialog>`](./error-dialog.md) is the player-error specialization. Both use the same dialog behavior.
 
 ## Styling
 
 Use the open and transition data attributes to style the modal and its animations:
 
-Attribute
-
-Description
-
-`data-open`
-
-Present while the dialog is open, including its closing transition
-
-`data-starting-style`
-
-Present at the start of the opening transition
-
-`data-ending-style`
+| Attribute | Description |
+| --- | --- |
+| `data-open` | Present while the dialog is open, including its closing transition |
+| `data-starting-style` | Present at the start of the opening transition |
+| `data-ending-style` | Present during the closing transition |
 
-Present during the closing transition
-
-css
-
-```
+```css
 media-dialog-backdrop:not([data-open]),
 media-dialog-popup:not([data-open]) {
   display: none;
@@ -76,7 +65,7 @@ media-dialog-popup[data-ending-style] {
 
 ## Accessibility
 
-The popup uses `role="dialog"` and `aria-modal="true"`. Include `Dialog.Title` so the dialog always has an accessible name. `Dialog.Description` is optional. These parts receive generated IDs connected through `aria-labelledby` and `aria-describedby`. The trigger receives `aria-haspopup`, `aria-controls`, and `aria-expanded`.
+The popup uses `role="dialog"` and `aria-modal="true"`. Include `<media-dialog-title>` so the dialog always has an accessible name. `<media-dialog-description>` is optional. These parts receive generated IDs connected through `aria-labelledby` and `aria-describedby`. The trigger receives `aria-haspopup`, `aria-controls`, and `aria-expanded`.
 
 When the dialog opens, focus moves to an element with `autofocus`, the first focusable element, or the popup itself. Tab and Shift + Tab keep focus within the dialog, and content outside the dialog becomes inert. Closing restores focus to the trigger, or to the element that was focused before the dialog opened.
 
@@ -88,17 +77,9 @@ Dialogs inside the same player container share modal coordination. Opening one c
 
 Open the video from its thumbnail. Playback starts when the dialog opens and pauses when it closes.
 
- ![](https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg) Play the video
-
-Video title A video opened from a thumbnail. Close
-
-index.html
+**index.html**
 
-index.css
-
-index.ts
-
-```
+```html
 <div class="html-dialog-basic">
   <button class="html-dialog-basic__trigger" type="button" commandfor="html-video-dialog">
     <img src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg" alt="" />
@@ -123,7 +104,10 @@ index.ts
   </media-dialog>
 </div>
 ```
-```
+
+**index.css**
+
+```css
 .html-dialog-basic {
   position: relative;
   min-height: 320px;
@@ -226,325 +210,128 @@ index.ts
   }
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/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 initializedDemos = new WeakSet<HTMLElement>();
 
-document.querySelectorAll<HTMLElement>('.html-dialog-basic').forEach((demo) => {
-  const dialog = demo.querySelector('media-dialog');
-  const video = demo.querySelector('video');
+function initializeDemos(): void {
+  document.querySelectorAll<HTMLElement>('.html-dialog-basic').forEach((demo) => {
+    if (initializedDemos.has(demo)) return;
 
-  dialog?.addEventListener('open-change', (event) => {
-    if (!video) return;
+    initializedDemos.add(demo);
 
-    const { open } = (event as CustomEvent<{ open: boolean }>).detail;
+    const dialog = demo.querySelector('media-dialog');
+    const video = demo.querySelector('video');
 
-    if (open) void video.play().catch(() => {});
-    else video.pause();
+    dialog?.addEventListener('open-change', (event) => {
+      if (!video) return;
+
+      // SAFETY: `media-dialog` defines `open-change` with an `{ open }` detail payload.
+      const { open } = (event as CustomEvent<{ open: boolean }>).detail;
+
+      if (open) void video.play().catch(() => {});
+      else video.pause();
+    });
   });
-});
+}
+
+initializeDemos();
+document.addEventListener('astro:page-load', initializeDemos);
 ```
 
 ## API Reference
 
-### 
-
-media-dialog
+### media-dialog
 
 Manages dialog state and provides it to the compound parts.
 
 #### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`closeOnEscape`
-
-`boolean`
-
-`true`
-
-▸
-
-Attribute
-
-`close-on-escape`
-
-Description
-
-Whether pressing Escape closes the dialog.
-
-`defaultOpen`
-
-`boolean`
-
-`false`
-
-▸
-
-Attribute
-
-`default-open`
-
-Description
-
-Initial open state for uncontrolled usage.
-
-`open`
-
-`boolean`
-
-`false`
-
-▸
-
-Attribute
-
-`open`
-
-Description
-
-Controlled open state. When set, the consumer is responsible for toggling.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `closeOnEscape` (attribute `close-on-escape`) | `boolean` | `true` | Whether pressing Escape closes the dialog. |
+| `defaultOpen` (attribute `default-open`) | `boolean` | `false` | Initial open state for uncontrolled usage. |
+| `open` | `boolean` | `false` | Controlled open state. When set, the consumer is responsible for toggling. |
 
 #### 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 dialog is currently open.
-
-`status`
-
-`'idle' | 'starting' | 'ending'`
-
-▸
-
-Description
-
-Current phase of the transition lifecycle.
-
-`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`.
+| 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`. |
 
 #### 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. |
 
 #### Events
 
-Event
-
-Description
-
-`open-change`
-
-`open-change-complete`
+| Event | Description |
+| --- | --- |
+| `open-change` | |
+| `open-change-complete` | |
 
-### 
+### media-dialog-backdrop
 
-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`
-
-▸
+| 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. |
 
-Description
+### media-dialog-close
 
-Present during the open transition.
-
-`data-ending-style`
-
-▸
-
-Description
-
-Present during the close transition.
-
-### 
-
-media-dialog-close
-
-Renders a button that closes the dialog.
+Button that closes its owning dialog; the element itself takes `role="button"` and keyboard focus.
 
 #### 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`
-
-▸
+| 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. |
 
-Description
+### media-dialog-description
 
-Present during the close transition.
+Text announced as its owning dialog's description. The element takes the `id` that the popup's `aria-describedby` points to.
 
-### 
+### media-dialog-popup
 
-media-dialog-description
-
-Renders the description announced with the dialog.
-
-### 
-
-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. |
 
-media-dialog-title
+### media-dialog-title
 
-Renders the heading that labels the dialog.
+Text that labels its owning dialog. The element takes the `id` that the popup's `aria-labelledby` points to.