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

package/docs/guides/fullscreen.md

@@ -8,7 +8,7 @@ Present the player fullscreen with custom controls intact, and lock screen orien
 
 ## Recommended approach
 
-Add a [`<media-fullscreen-button>`](../reference/components/fullscreen-button.md) inside the player container. It requests fullscreen on the container, so everything inside it — controls, captions, overlays — stays visible in the fullscreen presentation.
+Add a [`<media-fullscreen-button>`](../reference/components/fullscreen-button.md) inside the player container. When element fullscreen is supported, it presents the whole container, including controls, captions, and overlays. On iPhone Safari, it uses the native video presentation instead.
 
 **index.html**
 
@@ -76,13 +76,15 @@ import '@videojs/html/ui/fullscreen-button';
 
 The [fullscreen feature](../reference/api/feature-fullscreen.md) tracks fullscreen state and provides the actions:
 
-- `fullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
+- `isFullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
 - `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media element.
-- `requestFullscreen()`, `exitFullscreen()`, and `toggleFullscreen()` change the presentation. Requests target the player container when the Fullscreen API is available, falling back to the media element’s native presentation otherwise.
+- `requestFullscreen()` and `exitFullscreen()` change the presentation. When the Fullscreen API is available, requests target the player container. Otherwise they fall back to the media element’s native presentation.
 
 Fullscreen and picture-in-picture are exclusive: requesting fullscreen exits an active picture-in-picture presentation first.
 
-Style fullscreen state through the container’s `:fullscreen` pseudo-class, or through the `fullscreen` state in components.
+Style fullscreen state through the container’s `:fullscreen` pseudo-class, the button’s `data-fullscreen` attribute, or `isFullscreen` in player state.
+
+The built-in button hides when `fullscreenAvailability` is not `'available'`. Use the same check for custom controls and handle rejected requests. When the attached media has no supported fullscreen method, the action resolves without changing the presentation.
 
 ## Availability and constraints
 
@@ -97,13 +99,34 @@ Style fullscreen state through the container’s `:fullscreen` pseudo-class, or
 
 Add `orientationLockFeature` to lock screen orientation while the player is fullscreen. It isn’t part of `videoFeatures`, so the preset `<video-player>` doesn’t include it. It locks to `landscape` by default and unlocks on exit.
 
-Compose a player with `orientationLockFeature` in its feature list through [`createPlayer`](../reference/api/html-create-player.md); the prebuilt `<video-player>` element doesn’t include it.
+Register a custom player tag with [`createPlayer`](../reference/api/html-create-player.md):
+
+```html
+<orientation-player>
+  <media-container>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
+    <media-fullscreen-button>Fullscreen</media-fullscreen-button>
+  </media-container>
+</orientation-player>
+<script type="module">
+  import { createPlayer, orientationLockFeature } from '@videojs/html';
+  import { videoFeatures } from '@videojs/html/video';
+  import '@videojs/html/ui/container';
+  import '@videojs/html/ui/fullscreen-button';
+
+  const { PlayerElement } = createPlayer({
+    features: [...videoFeatures, orientationLockFeature],
+  });
+
+  customElements.define('orientation-player', PlayerElement);
+</script>
+```
 
 To lock to something other than `landscape`, set the `orientation-lock-type` attribute on the player. See the [orientation lock feature](../reference/api/feature-orientation-lock.md) reference for details.
 
 ### Double-click to toggle
 
-Use the `<media-gesture>` element — the default skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
+Use the `<media-gesture>` element — the packaged skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
 
 ```html
 <media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture>
@@ -112,13 +135,17 @@ Use the `<media-gesture>` element — the default skins ship this exact binding.
 </script>
 ```
 
-`region="center"` keeps the gesture off the left and right thirds, which the default skins reserve for double-tap seeking. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md) for the full gesture surface.
+With left, center, and right double-tap bindings for the same pointer type, `region="center"` covers the middle third, as in the on-demand video skins. A center-only double-tap binding covers the whole surface. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md) for region behavior.
 
 ## Troubleshooting
 
+### The fullscreen button doesn’t render
+
+The button hides while `fullscreenAvailability` is `'unavailable'` or `'unsupported'`. Wait for media attachment, check browser support, and confirm that an embedding iframe permits fullscreen with `allow="fullscreen"`.
+
 ### The fullscreen request is rejected
 
-The request didn’t come from a user gesture, fullscreen is unsupported, or an embedding iframe lacks `allow="fullscreen"`.
+Call the action directly from a click handler and check that an embedding iframe permits fullscreen with `allow="fullscreen"`. Handle the returned promise’s rejection. To detect unsupported fullscreen, check `fullscreenAvailability`; an unsupported request can resolve without entering fullscreen.
 
 ### Custom controls disappear in fullscreen on iPhone
 

package/docs/guides/installation-cdn.md

@@ -10,7 +10,7 @@ Video.js can run directly from browser-ready files on jsDelivr. This HTML-only p
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses CDN scripts for plain HTML. Use an existing page when one is available, and scaffold a minimal Vite app only when no app exists.
@@ -93,7 +93,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.4 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
+npx @videojs/cli@10.0.0-rc.5 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
 ```
 
 ## Load Video.js
@@ -105,7 +105,7 @@ Add these module scripts to the page head. Module scripts are deferred, so they
 _Merge this into the page `<head>`._
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
 ## Add your player

package/docs/guides/installation-shadcn.md

@@ -10,7 +10,7 @@ Use Shadcn to add a Video.js skin's components, layout, styles, and interactions
 
 > **Tip: Coming from another player?**
 >
-> Follow the HTML migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the HTML migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
@@ -35,7 +35,7 @@ npx @videojs/cli agents init
 - `framework`: The application framework that will host the player. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html. Values: `react`, `html`. Default: react.
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -50,7 +50,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses Shadcn to copy editable skin source. React uses the React source catalog; plain HTML uses the HTML source catalog. Vue and Svelte use packaged modules.
@@ -98,7 +98,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.4 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
+npx @videojs/cli@10.0.0-rc.5 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
 ```
 
 ## Configure app aliases

package/docs/guides/installation-svelte.md

@@ -10,7 +10,7 @@ Svelte apps built with Vite, Astro, or SvelteKit use Video.js HTML custom elemen
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -94,13 +94,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.4 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.4
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Add your player

package/docs/guides/installation-vue.md

@@ -10,7 +10,7 @@ Vue apps built with Vite, Astro, or Nuxt use Video.js HTML custom elements direc
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -94,13 +94,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.4 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.4
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Register custom elements

package/docs/guides/installation.md

@@ -10,7 +10,7 @@ Video.js is an **HTML video player built on custom elements**: lightweight, fram
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -96,13 +96,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.4 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.4
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Add your player

package/docs/guides/internationalization.md

@@ -6,7 +6,7 @@ Translate every player label, tooltip, and screen-reader announcement. The playe
 
 ## Recommended approach
 
-Wrap the player in the i18n provider. It resolves the locale from your page’s `lang` attribute (or an explicit override), lazy-loads the matching locale pack, and every component label follows.
+Wrap the player in the i18n provider. It resolves the locale from your page’s `lang` attribute or an explicit override, then lazy-loads the matching locale pack. Every component label follows that locale.
 
 ```html
 <media-i18n lang="ja">
@@ -19,6 +19,7 @@ Wrap the player in the i18n provider. It resolves the locale from your page’s
 <script type="module">
   import '@videojs/html/i18n';
   import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
 </script>
 ```
 
@@ -77,10 +78,11 @@ Pick a language and every label follows — no remount:
 **index.ts**
 
 ```ts
-import { LOCALES } from '@videojs/html/i18n';
+import '@videojs/html/i18n';
 import '@videojs/html/video/player';
 import '@videojs/html/video/skin';
 
+const locales = ['en', 'es', 'fr', 'de', 'ja', 'ar'];
 const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
 const initializedDemos = new WeakSet<HTMLElement>();
 
@@ -93,7 +95,7 @@ function initializeDemos(): void {
     const select = demo.querySelector('select');
     const provider = demo.querySelector('media-i18n');
 
-    for (const locale of ['en', ...LOCALES]) {
+    for (const locale of locales) {
       const option = document.createElement('option');
 
       option.value = locale;
@@ -113,15 +115,19 @@ document.addEventListener('astro:page-load', initializeDemos);
 
 ## How it works
 
-- Component labels are text descriptors — a translation key plus its English default — so everything renders in English with no setup and switches language when a translator is present. Keys are stable: `buttons.play` stays `buttons.play` even if the English wording changes.
-- The provider resolves the locale: explicit `lang` on `<media-i18n>` first, then the nearest ancestor `lang` attribute, then `'en'`. It re-resolves when the page’s `lang` changes.
-- The provider lazy-loads the pack for the resolved locale automatically and keeps it in a layer above the shared registry ([`registerI18n`](../reference/api/register-i18n.md)). Translations merge along a fallback chain that follows the [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) parent tags — `es-MX` checks `es`, then `en` — so a regional pack only has to carry the text that differs from its parent.
-- Each piece of text resolves from the first source that has it:
-  1. Registered custom translations
-  2. A built-in locale pack
-  3. The component’s English fallback
-- `registerI18n(locale, translations)` **merges**: each call adds or replaces keys for that locale without wiping prior registrations, and later registrations win for the same key. Register a locale before the provider resolves it — a pack the provider already lazy-loaded sits above the registry and hides registry entries for that locale. Overriding a handful of strings is the same call as registering a full locale.
-- When no shipped pack matches the locale, the provider can fall back to the browser’s on-device Translation API to machine-translate the English catalogue, with placeholders preserved.
+Component labels carry a translation key and an English default. The provider loads the resolved locale’s pack on demand. Locale fallback follows [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) parent tags: `es-MX` checks `es`, then `en`.
+
+`<media-i18n>` uses its own `lang`, then the nearest ancestor’s `lang`, then `'en'`. It follows changes to the ancestor language when its own `lang` is omitted.
+
+Each label uses the first available value:
+
+1. The shared registry
+2. The lazy-loaded locale pack
+3. The component’s English default
+
+[`registerI18n(locale, translations)`](../reference/api/register-i18n.md) adds or replaces keys in the shared registry. Mounted providers pick up later registrations. Registering any strings for a locale prevents its pack from loading automatically. For partial global overrides, import the locale’s `/register` entry first, as shown below. This keeps the full translation available after a locale switch or provider remount.
+
+When no shipped pack matches, the provider can use the browser’s on-device Translation API. Supply your own translations when you need reviewed wording or consistent availability across browsers.
 
 Translate your own UI with the same machinery:
 
@@ -135,7 +141,7 @@ The element’s text content is the English default; the `token` selects the tra
 
 - English is built in; every other locale is a lazy-loaded pack.
 - Locale tags are [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) (`es`, `pt-BR`).
-- Translation keys are namespaced strings (`buttons.play`, `errors.network`, `menu.quality`); the full list lives at [Translation phrases](../reference/api/translation-phrases.md) and is typed, so typos in `registerI18n` objects fail in TypeScript. The translator itself accepts any string; a mistyped `t()` key falls back to its `default`.
+- Translation keys are namespaced strings (`buttons.play`, `errors.network`, `menu.quality`). The full list is in [Translation phrases](../reference/api/translation-phrases.md). The keys are typed, so typos in `registerI18n` objects fail in TypeScript. The translator itself accepts any string; a mistyped `t()` key falls back to its `default`.
 - Some strings interpolate parameters; custom translations must keep the placeholders:
 
 ```ts
@@ -159,16 +165,16 @@ import { registerI18n } from '@videojs/html/i18n';
 registerI18n('ja', { buttons: { play: '再生', pause: '一時停止' } });
 ```
 
-Only the keys you pass change; the rest of the `ja` pack stays intact. Keep the `/register` import first: it must run before `<media-i18n>` upgrades, or the provider lazy-loads the shipped pack and that pack hides your overrides.
+Import the full pack before registering partial overrides so the remaining labels stay in Japanese. If you register overrides after the pack lazy-loads, they apply immediately. After a locale switch or remount, the provider will not reload the pack, so the remaining labels can fall back to English. Importing `/register` first preserves those labels.
 
 ### Register your own locale
 
-Registered packs are partial: missing keys fall back through the locale chain to a shipped pack or English.
+Register strings for a locale your application supports. Missing keys fall back to registered parent strings, then a shipped parent pack, then English. For example, register a few `es-MX` labels and the `es` pack supplies the rest. If the tag has its own shipped pack, registering strings for it prevents that pack from loading. Use the full-pack pattern above for that case.
 
 ```ts
 import { registerI18n, type Translations } from '@videojs/html/i18n';
 
-const es = {
+const esMX = {
   buttons: {
     play: 'Reproducir',
     pause: 'Pausa',
@@ -177,12 +183,12 @@ const es = {
   },
 } satisfies Partial<Translations>;
 
-registerI18n('es', es);
+registerI18n('es-MX', esMX);
 ```
 
 ### Register a pack with the bundle
 
-Skip lazy loading by registering a shipped locale at startup with a side-effect import. First paint is synchronous in that language:
+Skip lazy loading by registering a shipped locale at startup with a side-effect import. Labels render in that language on first paint:
 
 ```ts
 import '@videojs/html/i18n/locales/ja/register';
@@ -193,23 +199,24 @@ import '@videojs/html/i18n/locales/ja/register';
 CDN locale modules call `registerI18n` on import. Pin every URL to the same version:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
-For custom strings, import `registerI18n` from the version-pinned `i18n.js` that matches your player script. The player’s chunks import that exact URL, so a different or unversioned URL loads a second copy of the module with its own registry, and your strings never reach the player. Load your module before the player script so the strings are registered when the elements upgrade:
+Use the same pinned version for your locale pack, `i18n.js`, and player script. Copies loaded in the same window share a registry; matching versions keeps their translation keys and APIs compatible. Import the full locale pack before partial overrides, and register before the player loads to translate the first render:
 
 **my-locale.js**
 
 ```js
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/i18n.js';
 
 registerI18n('es', { buttons: { play: 'Reproducir', pause: 'Pausa' } });
 ```
 
 ```html
 <script type="module" src="/my-locale.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
 ### Switch locale at runtime
@@ -220,7 +227,7 @@ The simplest switch updates the document language and lets providers pick it up
 document.documentElement.lang = 'fr';
 ```
 
-Ambient switching only applies when `<media-i18n>` has no explicit `lang` attribute. To switch explicitly, set the provider’s `lang`:
+Switching through the document language works only when `<media-i18n>` has no explicit `lang` attribute. To switch explicitly, set the provider’s `lang`:
 
 ```js
 document.querySelector('media-i18n').lang = 'fr';
@@ -252,7 +259,7 @@ Providers without an explicit locale inherit ambient document language and direc
 <html lang="ar" dir="rtl">
 ```
 
-RTL preserves playback control ordering and time-semantic media icons while mirroring menu motion and navigation chevrons. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
+In RTL layouts, playback controls keep their order and time-related media icons keep their direction. Menu motion and navigation chevrons mirror. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
 
 ### Replace a component’s visible text
 
@@ -275,8 +282,10 @@ Render the document language on the server (`<html lang="es">`) and make transla
 Emit `lang`, wrap the player with `<media-i18n>`, and register packs in the entry module loaded before custom elements upgrade:
 
 ```ts
-import '@videojs/html/video/player';
 import '@videojs/html/i18n/locales/es/register';
+import '@videojs/html/i18n';
+import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 ```
 
 > **Caution**
@@ -287,11 +296,11 @@ import '@videojs/html/i18n/locales/es/register';
 
 ### Labels stay in English
 
-No provider is mounted, or the locale never resolved: check the `locale`/`lang` value and that it matches a shipped pack (regional tags fall back — `pt-BR` works; a bare unknown tag falls through to English).
+Check that a provider is mounted and that its `locale`/`lang` value matches a shipped pack. Regional tags fall back to their base language, so `pt-BR` works. An unmatched language falls back to English unless the browser’s Translation API supplies translations; register your own pack for consistent coverage.
 
 ### Some strings are translated, others aren’t
 
-A partial override or partial pack: missing keys fall back through the locale chain to English. Fill in the missing keys with `registerI18n`.
+If you registered partial global overrides before the locale pack loaded, the loader skips that pack. Import its `/register` entry before your overrides. For a custom locale, supply missing keys in your pack; they fall back to English until you do.
 
 ### Translations flash in after load or after switching
 

package/docs/guides/keyboard-shortcuts.md

@@ -10,7 +10,7 @@ Add keyboard shortcuts and pointer gestures to the player declaratively, with on
 
 ## Recommended approach
 
-Declare shortcuts with `<media-hotkey>` and gestures with `<media-gesture>` inside the player container. Each maps an input to a player action; the prebuilt skins ship a full set.
+Declare shortcuts with `<media-hotkey>` and gestures with `<media-gesture>` inside the player container. Each maps an input to a player action. The packaged skins include bindings suited to their player preset.
 
 ```html
 <video-player>
@@ -31,39 +31,51 @@ Declare shortcuts with `<media-hotkey>` and gestures with `<media-gesture>` insi
 </video-player>
 <script type="module">
   import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
   import '@videojs/html/ui/hotkey';
-  import { GestureElement } from '@videojs/html';
-
-  // Gesture has no standalone define entry; register the element directly.
-  customElements.define(GestureElement.tagName, GestureElement);
+  import '@videojs/html/ui/gesture';
 </script>
 ```
 
 ## How it works
 
-- `<media-hotkey>` binds keys to player actions: `togglePaused`, `toggleMuted`, `toggleFullscreen`, `toggleSubtitles`, `togglePictureInPicture`, `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. Step actions have shared defaults and accept a custom `value`. The actions call the same feature state actions your components use.
-- `<media-gesture>` binds pointer input — `tap` and `doubletap` — to the same actions, minus `seekToPercent` and plus `toggleControls`. Bindings are scoped by `pointer` (`mouse` or `touch`) and `region` (`left`, `center`, `right`) — regions split the container’s width, not the rendered video’s — so double-tap-left rewinds while double-tap-right skips forward.
-- `<media-status-announcer>` announces action results to screen readers, and the input indicator components render transient on-screen feedback (volume level, captions on/off) the way native players do. The prebuilt skins wire these up.
+- `<media-hotkey>` binds keys to player actions: `togglePaused`, `toggleMuted`, `toggleFullscreen`, `toggleSubtitles`, `togglePictureInPicture`, `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. `seekStep` and `volumeStep` use a default step unless you pass a custom `value`. These input actions call the feature actions your components use; for example, `toggleFullscreen` chooses `requestFullscreen` or `exitFullscreen` based on `isFullscreen`.
+- `<media-gesture>` binds `tap` and `doubletap` to the same actions. Gestures also support `toggleControls`; `seekToPercent` is available only to hotkeys. Scope each binding with `pointer` (`mouse` or `touch`) and `region` (`left`, `center`, `right`). For example, a double tap on the left can rewind while a double tap on the right skips forward.
+- `<media-status-announcer>` announces action results to screen readers. The input indicator components show brief on-screen feedback, such as volume level or captions on and off, the way native players do. The packaged skins include both.
+
+The on-demand video skins bind these keys:
+
+- Space and `k`: play and pause
+- `m`: mute
+- `f`: fullscreen
+- `c`: captions
+- `i`: picture-in-picture
+- Left and Right arrows, `j` and `l`: seek 10 seconds
+- Up and Down arrows: volume
+- `0`–`9`: jump to a percentage
+- `<` and `>`: speed
+
+Live video skins keep the playback, mute, volume, fullscreen, captions, and picture-in-picture shortcuts. They omit seeking and speed shortcuts.
 
-The prebuilt skins bind the conventional set: Space and `k` toggle playback, `m` mutes, `f` fullscreens, `c` toggles captions, `i` toggles picture-in-picture, arrows seek and change volume, `j`/`l` seek in larger steps, `0`–`9` jump to a percentage, and `<`/`>` change speed.
+How the container splits into regions depends on which regions you bind for the same gesture type and pointer type. Left and right bindings divide the container into halves. Adding a center binding divides it into thirds. A center-only binding covers the whole container; a left-only or right-only binding covers that half. These regions use the container’s width, not the rendered video’s width.
 
 ## Availability and constraints
 
 - Hotkeys listen on the player container by default, so multiple players on a page don’t fight over keys. Pass `target="document"` on a hotkey to make it page-wide — appropriate only when one player owns the page.
 - Typing is protected: while focus is in an editable field, single-key bindings are skipped automatically. Modifier combinations (for example `Ctrl+Shift+f`) still fire.
 - Repeatable actions (seeking, volume) fire on held keys; toggle actions don’t repeat.
-- Touch tap-to-toggle-controls and tap-to-pause are mutually exclusive per pointer type — the skins pause on mouse tap and toggle controls on touch tap, matching platform conventions.
-- Gestures and the built-in touch handling coordinate through one recognizer; register gestures declaratively instead of adding raw pointer listeners next to them.
+- Use only one of `toggleControls` and `togglePaused` for tap bindings with the same pointer type. The packaged skins pause on a mouse tap and toggle controls on a touch tap, matching platform conventions.
+- Declared gestures and the built-in touch handling share one recognizer. Use the gesture components to add bindings. Extra raw pointer listeners can toggle controls twice.
 
 ## Common variations
 
 ### Customize a shortcut
 
-Render your own `<media-hotkey>` set instead of a skin’s: every binding is just an element, so add, remove, or re-key them freely.
+For a packaged skin, [add the skin source to your project](./customize-skins.md#style-skin-source) and edit its `<media-hotkey>` declarations. Adding another binding alongside the packaged skin does not replace its bindings. For a custom UI, edit your own `<media-hotkey>` set directly.
 
 ### Seek step size
 
-`seekStep` takes its step from `value` — match your content: 5 seconds for short clips, 15 or 30 for long-form.
+Set the `seekStep` distance with `value`. Match it to your content: 5 seconds for short clips, 15 or 30 seconds for long-form video.
 
 ## Troubleshooting
 
@@ -73,11 +85,11 @@ Focus is outside the player container. Click the player first, or move focus int
 
 ### Double-tap seek also toggles pause
 
-Regions overlap: keep single-tap `togglePaused` on `center` only, and double-tap seek on `left` and `right`, as in the skin defaults.
+The built-in recognizer delays a matching single tap and cancels it when a double tap occurs. Check that your tap and double-tap bindings use compatible `pointer` filters. Remove separate click handlers that also toggle playback, and avoid native video controls on the same gesture surface.
 
 ### No visual feedback on keyboard actions
 
-The input indicator components render that feedback; use a prebuilt skin or add `<media-status-announcer>` and the indicator components from the skin source to a custom UI.
+The input indicator components render that feedback; use a packaged skin or add `<media-status-announcer>` and the indicator components from the skin source to a custom UI.
 
 ## Related pages